React3 웹사이트 모바일 하단 스크롤 시, 브라우저 하단 네비 사라지도록 1. index.html 에서 meta 태그의 name="viewport"에 옵션을 다음과 같이 준다. ... 2. css 에서 다음 부분 체크2.1. min-height: 100vh; overscroll-behavior-y: contain;.dashboardContainer { display: flex; flex-direction: column; min-height: 100vh; background-color: var(--bg-dark, #121212); color: var(--text-primary, #ffffff); overscroll-behavior-y: contain;}2.2. overflow:auto; -webkit-overflow-scrolling: touch;.. 2025. 4. 5. [React on Mac] 리액트 작업시 기억해두면 좋을 기초 지식 (1) 노마드코더의 리액트 강좌를 들으면서 기억해둘 기초 지식들을 하나씩 정리해둔다. 1. css파일을 그대로 사용하지 않음 예전에 인스타그램 사이트를 크롤링하면서 알게된 점은 특정 태그들의 class이름들이 무작위적으로 계속 바뀐다는 것이었다. 기존에 알던 html,css,javascript 지식으로는 이게 어떻게 가능하지 싶었고, 네이버 사이트만 봐도 태그들의 class 이름이 괴상하게 되어있었는데 리액트 강좌를 들으면서 이 방법을 사용하는구나 싶었다. 리액트에서는 css 파일형식을 그대로 사용하지 않을 수 있다. 웹 서비스 제작을 하다보면 클래스 이름이 중복되는 상황들이 종종 발생해서 곤란한 경우다 다반사였는데, 리액트에서는 이러한 상황을 피할 수 있게 구성되어있다. 방법은 다음과 같다. App.css 파.. 2023. 7. 4. [React on Mac] 맥에서 리액트 시작하기 (23.06.29) 간단한 서브 프로젝트를 진행하면서 웹은 리액트로, 앱은 플러터로 제작해보기로 하였다. 둘 다 처음이라 유튜브 튜토리얼을 따라해보면서 과정을 기록한다. 지금까지 웹 서비스를 만들때 장고나 스프링부트 백엔드를 사용하였지만 프론트엔드는 HTML, CSS, Javascript 세가지로 구현해왔다. (코딩 1년차..) 이 세가지로 서비스를 구현하는 것에 익숙해진 나머지 React, Vue.js 등의 프레임워크?는 왜 사용하는지 의문이 있었는데 튜토리얼 강사분이 강좌를 시작하며 그 이유를 언급해주셨다. https://www.youtube.com/watch?v=aYwSrzeyUOk&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 리액트는 Single-Page Application을 만드는 기술.. 2023. 7. 4. 이전 1 다음
