react 3

[React] 로고없는 기본 템플릿으로 리엑트 프로젝트 생성

초기 create-react-app으로 바로 리엑트 앱을 생성한 후 웹페이지에서 로고가 돌고 있는 모습은 참 신기했었는데 이제는 바로 지우기 바쁘다. 그래서 찾아보니 클린 생성이 있었다. 명령어 npx create-react-app my-app --template clean 위의 코드를 이용하여 필요없는 로고 및 텍스트를 제거한 기본 프로젝트를 생성할 수 있다. 트리 구조 public 및 src 폴더가 깔끔해졌다. 출력 화면 아무 코드도 입력되지 않았으니 흰색 빈 화면면 출력된다. 리엑트 파비콘과 상단 타이틀은 살아있다.

알아가기/React 2023.09.03

[Docker] docker-compose에서 React PORT 변경에 대한 정리

React code를 실행시 npm start 명령어를 통해 작동시킨다. 이때, 기본 포트는 3000번으로 정해져있다. docker-compose에서 React를 적용시 포트 변경에 대해 알아본다. React 포트 변경 방법 React 포트를 사용자 기준에 맞게 변경을 하려면 네 가지 정도의 방법이 있다. 첫번째, 명령어로 바로 변경하는 방법 PORT=8000 npm start 터미널에서 npm start로 리엑트를 실행시 앞에 PORT=8000을 붙여 변경할 수 있다. 두번째, package.json을 변경하는 방법 맥 ... "scripts": { "start": "PORT=8000 && react-scripts start", } ... (리눅스도 같다고 하는데 확인 안해봄) 기존에 있던 코드 rea..

알아가기/Docker 2023.07.21

[React] 서버 포트 넘버 변경 macOS, Windows

리액트에서 포트 번호를 변경하는 방법 macOS, Windows 둘 다 일단 만들어진 프로젝트에서 package.json 파일을 연다. macOS 변경 방법 맥의 경우 "start": "react-scripts start", 에서 PORT={원하는 포트 번호} 를 추가하여 변경을 한다. 나의 경우 3300 번 포트로 변경하였다. 예시) "scripts": { "start": "PORT=3300 react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, Windows 변경 방법 윈도우의 경우 "start": "react-scripts start", 에서 s..

카테고리 없음 2023.03.29