repository 에서 소스받은 후 해야하는 작업 정리

2024.08.02

 

작은 소스관리지만 react를 담당하게 되어 react 전문 개발자가 오기전까지 소스 변동관리를 해야 하는 상황이 되었습니다.

모두 손을 놓았다가 다시 잡아야하는 상황이라 이 참에 다시 정리들어갑니다.

 

브런치 관리가 잘 안되었다고 생각하는경우 확인 상황

1. repository에서 해당 브런치 코드 압축 다운받아서 현행확인

2. 각 브런치 최종 확인 

3. 브런치별 소스코드 차이점 확인 

 

넥스트js소스 다운받아서 초기 작업 상황

1. 각 버전 확인 ( 소스에서 사용하는 라이브러리 중 버전 영향을 받는 사항이 있는지 확인 )

  a. node 와 npm 최신버전으로 업데이트하기

# n 설치하기
npm install -g n
or
npm update n

# n 설치충돌시 삭제 후 재 설치
npm uninstall n
(sudo) npm install -g n

# 새로운 Node 설치하기
(sudo) n lts
n latest

# node 최신버전 확인
node --version

# 참고 node 이전버전 캐시 삭제 ( 필수 사항이 아니어서 일단 패스 )
n prune

2. 프로젝트 참조 라이브러리 현행화

# pakage json 참조 라이브러리 초기화
npm install

# 참고 처음 사용시에는 pakage json 생성을 위해 초기화 진행
npm init

# yarn berry 사용시 참조 라이브러리 초기화
npm install -g yarn
yarn set version berry
yarn install

참고사항

# yarn berry

 - 개발자들의 버전관리를 배포시 영향을 안받을 수 있게 통일해서 관리하기 위한 방법

yarn berry는 기존 npm 또는 yarn classic 버전과 다르게, 모듈들을 node_modules에다가 관리하지 않고 모듈들을 zip파일로 관리하여, .yarn/cache폴더에 두고, 해당 모듈들을 .pnp.cjs, .pnp.loader.mjs를 통해서 가져온다고 합니다. 

 

기타 설정 필요시 등록

# TypeScript를 위한 구성

yarn dlx @yarnpkg/sdks vscode
yarn plugin import typescript

# 설정들이 모두 완료가 되었다면, 에디터에서 TypeScript를 사용하는 파일을 연 상태에서 
# ctrl + shift + p 또는 command + shift + p를 눌러서 TypeScript 버전 선택을 검색하여, 
# 작업 영역 버전 사용을 선택하여 typescript sdk를 사용하도록 설정

# eslint + prettier 설정

yarn dlx eslint --init
yarn add eslint-config-prettier -D

# 해당 확장을 사용한다는것을 eslint에도 알리면 됩니다. 
# package.json에다가 설정하는 방법과 .eslintrc.json에 설정하는 방법이 있음

a. package.json 파일에 설정하는 경우
"eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier" // 꼭 마지막에 추가
    ]
  },
  
b. .eslintrc.json 파일에 설정하는 경우
"extends": [
      "react-app",
      "airbnb",
      "prettier" //여기서도 꼭 마지막에 추가
],