React 프로젝트에서 이미지를 사용할 때 이미지가 public 폴더에 있는지, src 폴더에 있는지, 또는 jsx 파일에서 사용하는지, css에서 사용하는지에 따라 경로 설정하는 방법을 구분하고자 한다. 📂 public 폴더는 에 의해 관리되지 않고, 대신 원본이 폴더에 복사된다. (minify되지 않고, content hash가 포함되지 않는다.) 폴더에 접근하기 위해서는 환경변수를 사용해야 한다. 경로가 잘못 되었거나 파일이 없는 경우 컴파일 단계에서 에러가 발생하지 않고, 404에러가 발생한다. 🚫 CRA 문서에서 다음과 같은 경우에만 폴더에서 관리하는 것이 유용하고, 이외에는 폴더 관리를 추천한다. 처럼 build된 결과물에서 특정한 파일 이름이 필요한 경우 수천개의 이미지 파일을 동적으로 참조해야 하는 경우 📂 src 파일을 찾지 못하는 경우, 컴파일 단계에서 에러를 잡을 수 있다. ✅ import 할 경우 참조할 수 있는 경로(path) 문자열을 출력한다…

포트번호나 API 키값 등 민감한 정보들이 코드에 사용되는 경우가 있다. 이러한 경우를 대비해 공개되지 않아야 하는 정보들은 직접 입력하지 않고 환경변수에 담아 프로젝트 내애서 활용하는 것이다 .env 환경변수 파일이다. Node.js에서 환경변수를 사용하기 위해 가장 많이 사용하는 모듈 중 하나가 바로 dotenv 모듈이다. 1. dotenv 설치 2. .env 파일 파일 생성 설치 후 프로젝트 루트(최상단) 디렉토리에 파일을 생성한다. 환경변수 작성 .env 파일 안에 저장할 환경변수를 적어준다. 이 때 반드시 변수명 앞에 형식으로 작성한다. 앞에 을 붙여주지 않으면 리액트 앱에서는 변수를 불러오지 않는다. 환경변수 사용 리액트는 라이브러리나 컴포넌트 사용 시 import를 해주어야 하지만, 에 등록된 변수는 별도의 import를 해주지 않아도 전역 어디서든 가져와서 사용할 수 있다. 3. .gitignore 추가 그리고 마지막으로 파일은 저장소에 같이 올라가지 않도록…

Yarn Berry란? yarn berry는 node_modules 사용 시 생기는 여러가지 문제점 (비효율적인 의존성 검색, 비효율적인 설치, Phantom dependency 등)을 PnP 방식으로 개선한 새로운 패키지 관리 시스템이다. 패키지 파일을 압축하기 때문에 프로젝트 용량도 줄어들고, 해당 압축된 패키지들을 git에 그대로 업로드하는 방법(zero install)을 이용하여 배포 시간을 엄청나게 단축(패키지 인스톨 하는시간)할 수 있는 장점이 있다. 설정 1. 프로젝트 생성 2. 설치된 패키지 삭제 CRA처럼 프로젝트를 생성하고 나면 와 파일에 모든 의존성 패키지들이 설치되어 있다. yarn berry를 사용하기 위해서는 이 파일들을 삭제 해준다. 만약 npm을 사용했다면 파일을 삭제해준다. 3. Yarn 버전 세팅 명령어를 입력하고 나면 디렉토리와 파일이 생성된다. 💡 만약 파일에 아래와 같이 가 node-modules를 가리키고 있다면 yarn berry의…

NVM은 Node.js Version Manager의 약자로, Node.js의 버전 관리자 이다. 기존에 설치된 Node 버전을 바꿔서 사용해야 할 일이 생겨서 NVM으로 Node 버전을 관리하는 방법에 대해 알아보게 되었다. 사용 OS: 패키지 관리자: 터미널: NVM 설치 NVM 설정 설치를 했다면 위와 같은 화면을 볼 수 있다. 안내된대로 차근차근 따라하면 된다. NVM 폴더 생성 파일 수정 파일은 Vim이나 VSCode로 편집할 수 있는데 나는 VSCode로 열어서 수정해주었다. 파일을 저장한 뒤, 명령어를 통해 환경 변수를 적용시켜주고 Terminal을 재시작해준다. Node 버전 리스트 설치 가능한 Node 버전들을 확인할 수 있다. Node 설치 보통은 최신 버전보다는 LTS 버전(Long Term Support) 또는 프로젝트에서 사용해야하는 특정 버전을 사용한다. *LTS 버전은 2년간 해당 버전에 대한 취약점 패치, 개선 사항에 대한 패치를 보증하는 …

Git 초기 설정 Git 처음 설정 시 다음과 같이 설정해주어야 한다. 프로젝트마다 다른 계정으로 커밋하기 로컬 저장소 생성 로컬 저장소를 생성할 폴더에서 을 작성하면 git을 초기화하며, 이라는 숨김폴더로 된 로컬 저장소가 생성된다. 로컬 저장소에서 버전 관리를 할 수 있으며, 로컬 저장소에서 내가 만든 버전 정보, 원격 저장소 주소 등이 저장된다. 단, 한 폴더에 하나의 로컬 저장소만 유지해야 한다. 원격 저장소 생성 GitHub 오른쪽 상단 버튼에서 를 통해 새 저장소를 생성한다. New repository: 새 저장소 생성 Import repository: 저장소 불러오기 New gist: 코드 조각을 올리고 싶을 때 사용 New organization: 공동 작업을 하기 위한 팀(조직) 생성 New project: 새 프로젝트 생성 브랜치 이름 변경 원격 저장소 주소 알려주기 연결된 원격 저장소 주소 확인 원격 저장소 삭제 저장소 파일 상태 확인 (추적) Priva…