프로젝트를 진행하면서 데스크탑 웹에서 정상적으로 보이는 화면이 태블릿 웹에서 깨지는 현상이 발생했다. vh 단위를 사용해서 총 높이를 100vh로 설정을 했는데, 100vh는 태블릿 브라우저의 상단 탭과 브라우저, 일부 태블릿에서는 하단 네비게이션 바의 사이즈를 포함하는 문제가 있었다. 이 문제를 해결하기 위해 아래와 같은 방법을 적용했다. 모바일 스크린 문제 해결 const setScreenSize = () => { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", ${vh}px); }; setScreenSize(); window.addEventListener("resize", () => setSc..
분류 전체보기
현재 start 스크립트에 set HTTPS=true가 설정되어 있으므로, 이 설정을 유지하면서 포트를 3001번으로 변경하려면 다음과 같이 설정하세요: json "scripts": { "start": "set HTTPS=true&&set PORT=3001&&react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } 위의 설정에서 set PORT=3001 부분이 애플리케이션을 3001번 포트에서 실행하도록 설정합니다. 이제 npm start나 yarn start를 실행하면 애플리케이션은 HTTPS 모드로 3001번 포트에서 시작됩니다. 단, 이 방법은 Wi..
forwardRef()란?React에서 일반적으로 사용할 수 없는 prop이 몇 가지 있다. 그 중 ref prop도 HTML Element 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다.React Component에서 ref prop을 사용하려면 forwardRef()라는 함수를 사용해야 한다. React Component를 forwardRef() 함수로 감싸주면, 컴포넌트 함수는 2번째 매개변수를 갖게 되는데 이를 통해 ref prop을 넘길 수 있다.import { useRef } from "react"; const Input = ref => { return ; }; const Field = () => { const inputRef = useRef(null); con..
vs code preference 설정 창 접근 vs code > File > Preference > Settings setting 창에서 emmet 설정 Extensions > Emmet > Trigger Expansion On Tab 체크 Command Palette 열기 Ctrl + Shift + P Open User Setting (JSON) 선택 아래 설정 붙여넣기 "emmet.includeLanguages": { "javascript": "html" } VSCode 종료 후 다시 켜기(재실행) 출처 https://goddino.tistory.com/217 https://jhlee-dev.tistory.com/39
