3001번 포트 설정법 & 모바일 스크린 문제 해결

현재 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번 포트에서 시작됩니다.

단, 이 방법은 Windows의 Command Prompt나 PowerShell에서 작동합니다. macOS나 Linux에서는 HTTPS=true PORT=3001 react-scripts start로 설정해야 합니다. 만약 크로스 플랫폼 호환성이 필요하다면, cross-env 패키지를 사용해보세요.

 

 

---

 

const setScreenSize = () => {

let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty("--vh", ${vh}px);
};

setScreenSize();

window.addEventListener("resize", () => setScreenSize()); 

 

이 함수는 브라우저 창의 높이를 기반으로 한 사용자 정의 뷰포트 높이 단위(vh)를 설정하는 역할을 합니다.

자세히 살펴보면:

setScreenSize() 함수는 먼저 브라우저 창의 높이(window.innerHeight)를 가져와 1%를 계산하여 vh 변수에 저장합니다.
그런 다음 document.documentElement.style.setProperty 메소드를 사용하여 CSS 변수 --vh의 값을 vh 변수의 값으로 설정합니다. 이렇게 하면 --vh는 실제 뷰포트 높이의 1%에 해당하는 값을 가지게 됩니다.
setScreenSize() 함수를 처음 한 번 호출하여 초기 --vh 값을 설정합니다.
마지막으로 window.addEventListener("resize", () => setScreenSize()); 코드를 통해 브라우저 창 크기가 변경될 때마다 setScreenSize() 함수가 호출되도록 합니다. 이렇게 하면 창 크기가 변경될 때마다 --vh 값이 적절하게 업데이트됩니다.
이렇게 설정하면, 기기의 가로/세로 모드 변경 같은 경우에도 뷰포트 높이가 정확하게 반영되어 앱의 레이아웃이 깨지지 않고, 사용자 경험을 향상시킬 수 있습니다.

 

https://blog.leehov.in/39

02. 모바일 100vh 스크롤 문제 해결하기

 

https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs

Get viewport/window height in ReactJS

 

https://triplexblog.kr/116

모바일 웹 앱에서 100vh이 가진 세로 사이즈 문제