리액트3 리액트 개발서버 포트번호 변경: 3000번이 아닌 다른 번호로 설정하기! 리액트를 사용할 때 개발서버의 기본 포트번호인 3000번을 다른 번호로 바꾸는 방법입니다. 가끔 3000번 포트가 이미 다른 프로그램에서 사용 중이거나, 그냥 다른 번호로 바꾸고 싶을 때가 있죠? 이런 상황에서 포트번호를 쉽게 변경할 수 있습니다!포트번호를 바꾸는 간단한 방법포트번호를 바꾸는 방법은 몇 가지가 있는데, 그중에서 쉽게 할 수 있는 방법을 소개하겠습니다.1. package.json 수정하기 (리눅스 환경)가장 쉬운 방법은 package.json 파일을 살짝 수정하는 거예요. 아래와 같이 scripts 섹션에 start 명령어를 수정해 주세요.export PORT=53000사용할 포트번호를 명시하고 원래 있던 react-scripts start 명령어와는 "&&" 기호로 연결해 줍니다. 가장 .. 2024. 8. 21. 리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 오늘은 리액트를 시작하는 저 같은 초보들은 한 번쯤 경험했을 법한 문제라고 생각하는데 이상하게도 여느 리액트 강의에서도 메인으로는 다루지 않는 빌드 시에 관련되는 경로에 관한 내용입니다. 그런데 생각해보면 리액트도 html, java script, css라서 그런 기본 소양을 가지고 있다는 전제를 깔고 가기 때문에 이런 건 당연한 내용이라고 여겨서 강의에서 다루지 않는지도 모르겠네요. 아무튼 리액트 프로젝트를 만들고 나서 빌드 스크립트를 실행하면 "build"라는 이름의 폴더가 생기면서 안에 배포에 사용할 결과물이 생성됩니다. 위에 보시는 것처럼 빌드 폴더 안에 보면 여러 가지 파일들이 생성되어 있는데 이 중에서 웹을 시작하게 하는 파일은 index.html입니다. 상식적으로 리액트로 만든 웹앱을 실행하.. 2022. 12. 12. React 배포시 원본 코드 구조 숨기기 (Source map 만들지 않기) 리액트로 앱을 만들어서 배포를 하고 브라우저 개발도구에서 소스를 살펴보면 내가 짠 코드의 원본을 그대로 확인할 수 있습니다. 중간에 빌드라는 과정을 거쳤기 때문에 최소한 코드 압축 정도는 되어 있을 줄 알았는데 말 그대로 코딩했던 폴더구조가 그대로 드러납니다. 이런 게 가능한 이유가 바로 소스 맵(Source Map)이 있어서라고 하는데요. 소스 맵은 빌드된 파일과 원본을 연결시켜주는 역할을 합니다. 소스 맵은 배포된 앱에서 문제가 발생했을 때 디버깅을 쉽게 해주는 이점이 있습니다. 하지만 보안적인 문제라던가 비루한 코드가 공개되는 부끄러움 때문에라도 요걸 숨기고 싶을 때가 있는데 그럴 때는 빌드 시에 소스 맵을 작성하지 않도록 하면 됩니다. 위 그림은 크롬 개발도구에서 리액트로 만들어진 웹의 소스를 확.. 2022. 12. 4. 이전 1 다음
