7.29

게시물 페이지 디자인 with Figma

7.30

• 보일러 플레이트 구성 with create-next-app
• yarn berry 버전으로 세팅하고 zero install이 가능하게끔 변경 - yarn dev 시 문제 없음
  • zero-install이면, 자연스레 다른 PC에서 원격 저장소로부터 내려 받은 패키지를 실행하기 위해 yarn install을 하지 않아도 될 것만 같다. → 하지만 틀린 이야기이다.
  • PnP(Plug & Play) 방식을 지원하지 않거나 현재 환경에 대한 바이너리 정보를 가지고 동작해야 하는 의존성(파일 쓰기, 스크립트 실행 등)은 install 시에 .yarn/cache 디렉토리에 zip 파일 형태로 저장되는 것이 아니라 .yarn/unplugged 디렉토리에 별도의 바이너리 파일로 관리된다.
  • 그럼 .yarn/unplugged도 같이 원격저장소에 올리면 되지 않나? → 바이너리 파일의 크기가 너무 크기 때문에 원격 저장소에 올라가지 않는다.
  • 물론 zip 파일로 관리되는 의존성이 많아졌기 때문에 하위 패키지를 설치하는데 드는 비용은 줄어들고 이는 빌드 시간 최적화에 도움이 될 것이라 예상한다.
• zip 파일을 IDE에서 사용하려면 zipFS라는 확장 프로그램을 깔아야 한다.

npx create-next-app@latest

cd test-app

yarn set version stable

rm -rf node_modules

# yarnrc.yml 파일에 nodeLinker: pnp 추가

yarn install

# .gitignore 파일 생성

# 소스 파일 대부분에서 에러가 보일 시, 아래 명령어 수행 후 vscode 껐다 다시 실행
yarn dlx @yarnpkg/sdks vscode

# ctrl + shift + p
# Select TypeScript Version
# Use Workspace Version

#This workspace contains a TypeScript version. Would you like to use the workspace TypeScript version for TypeScript and JavaScript language features?

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

• Figma 디자인 툴에서 에스코어 드림 → 원티드 산스로 폰트 변경
• 로고만 에스코어 드림으로 진행하는데, 무거운 폰트 용량을 고려해서 로고는 이미지로 Export 할 예정
• 게시물 페이지 디자인 요소 추가

• storybook 설치
  • yarn dlx storybook@latest init 스크립트로 설치하고 yarn storybook으로 실행하면 Error: @storybook/nextjs tried to access webpack (a peer dependency) but it isn't provided by your application; this makes the require call ambiguous and unsound. 라는 에러 문구를 볼 수 있다.
  • 위 경우 @storybook/nextjs의 peer dependency인 webpack을 찾을 수 없다는 의미이므로, webpack을 개발 의존성(devDependencies)으로 설치해준다.
  • 잘 된다.
  • 그런데, storybook을 설치하는 과정에서 node_modules가 생겼고 이를 이미 원격 저장소에 올려버린 상태였다. → git rm --cached -r node_modules 를 통해 원격 저장소에 올라간 내역만 없앨 수 있다. —cached 옵션을 쓰지 않으면 로컬과 원격에 있는 파일이 모두 사라진다. 명령어를 사용하고 나서 commit, push 하면 원격에도 반영된다.

7.31

• develop 브랜치 생성 및 HEAD 변경
  • develop 브랜치는 main 브랜치(제품 출시용 브랜치)로부터 파생
  • feature 브랜치는 develop 브랜치로부터 파생돼서 기능을 개발하는 주기동안만 남아 있음
• 깃허브 프로젝트(Su.tech)를 칸반 보드 형식으로 생성했으나 여러 프로젝트를 동시에 수행하는 개발자의 경우에 용이한 기능이라 생각해서 삭제함.