범데이의 개발노트 📄

React 프로젝트가 커지면서 상대 경로로 모듈을 임포트하는 것은 가독성을 떨어트리고 관리하기 어려워질 수 있다. 상대 경로 대신 절대 경로를 사용하면 코드가 더 깔끔하고 유지 보수가 쉬워진다.   위의 예시처럼 상대 경로로 Import하여 관리하던 파일들의 경로가 바뀌기라도 한다면..?일일히 맞춰서 바꿔줘야하는 굉장히 수고스러움을 겪을 수 있다.   이 포스트에서는 React 프로젝트에서 절대 경로로 설정하고 사용하는 방법을 설명한다.  1. `jsconfig.json` 또는 `tsconfig.json`파일 생성프로젝트의 루트 디렉토리에 `jsconfig.json` 또는 `tsconfig.json` 파일을 생성한다. TypeScript를 사용하는 경우 `tsconfig.json` 파일을 사용할 수 있다..

1. 개요 create-react-app을 통해 만든 React App의 경우 기본으로 3000번 포트를 사용해서 구동된다. 그러나 해당 3000번 포트가 겹치는 등의 사유로 따로 포트를 지정해줘야 할 상황이 생길 수 있다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법 세 가지를 정리해보고자 한다. (아래 내용들은 3001 포트로 변경한다고 가정한다.) 2. 포트 변경 방법 2.1 명령어로 포트 설정하기 - React 프로젝트 폴더에서 아래와 같은 명령어를 사용해 React 앱을 실행시킨다. (명령어를 통해 구동 시 한 번만 적용된다.) PORT=3001 npm start 2.2 package.json파일 설정 수정하기 - React 프로젝트 폴더에 ".package.json" 파일을 찾아 아..

1. 전제사항 NodeJS를 설치한다. (14~16 Version) VSCODE를 설치한다. 2. React 프로젝트 생성 프로젝트를 생성하고자 하는 위치의 상위폴더에서 다음의 명령어를 입력한다. 아래의 PROJECT_NAME에 원하는 프로젝트 이름을 넣으면 된다. npx create-react-app 이 과정을 스타벅스에서 진행하는게 아니라면(원활한 네트워크 환경이라면) 보통 1~2분내외 정도를 기다린 후 다음과 같이 Happy hacking! 이라는 문구와 함께 프로젝트가 생성됨을 확인할 수 있다. 생성된 프로젝트를 VSCODE로 열면, 다음과 같은 구조로 되어있음을 확인할 수 있다. 프로젝트 최상위 위치에서 다음과 같이 npm start명령어를 통해 로컬에 웹사이트를 띄운다. $npm start 컴..