> OSSCA Yorkie(1) - CodePair 삽질의 세팅

0. 서론

• OSSCA에서 Yorkie팀을 지원하게 된 계기는 바로 CodePair의 멋진 기능들이 나를 가슴 설레게 하고 눈빛이 반짝반짝하게 만들었기 때문이다.(거짓말 아님ㅜ)
• 프론트엔드 공부를 작년 여름에 처음 잡아봤고, 3개월 하다가 번아웃 와서 손 놓아버렸고, 올해 5월 즈음에 다시 잡다가 건강 상태 악화로 포기했더니 아는 것이 많이 없는 상태인데 다른 분들에 비해서 경력과 실력 둘다 부족함을 알기에 여름방학이라 남는게 시간이니깐 시간과 노력을 붓기로 마음먹었다. 물론 건강은 덜 해칠 정도만,,^ㅁ^);;
• 내가 속한 B팀 멘토님들이 아직까진 가이드라인에 대해서 이야기는 안했지만 일단 먼저 코드 읽어보면서 책에서만 봤던 타입 스크립트의 실제 예시들을 구경하려고 한다. 운 좋으면 이삭줍기 할 수 있고 그런 것 아닐까??
• 무서운 영어와 깃허브와 슬랙에 친숙해질 수 있다면 이번 컨트리뷰톤은 성공했다고 생각한다.
• yorkie-team/codepair

01. 환경 세팅

01-1. docker

• 도커 홈페이지 가서 맞는 버전에 따라서 깔면 되는 것 같다

docker-compose -f docker/docker-compose.yml up --build -d

01-2. npm install과 싸우기

Next, Let's starts CodePair in the development mode.

npm install
npm start

For building CodePair, You'll first need Node.js installed(Node.js version 16+ and npm version 7.10+ are required).

• 뭐지 싶은데

node-sass버전 보고 node의 버전을 잘 골라주셔야 합니다.
nvm을 쓰면 편합니다.
// 창희 멘토님(@blurfx)

"node-sass": "^6.0.1",

• 내 node.js 버전이 너무 높아서 지원 안해주는 것이었다...
• 사실 저 node-sass랑 버전 맞춘다고 으쌰리 한 적 있었던 것 같다.
• 약간 그냥 이 정도는 다들 알죠? 였던 것이었나보다 힝힝
  • 16+이어서 되는 줄 알았지

nvm(node version manager) 설치

(macOS) NVM으로 Node 버전 관리하기

nvm install 16
nvm use 16

• 이제 프로젝트창 가서 nvm use 16했더니 되었다.[?]

node-gyp

• node-gyp - Node.js native addon build tool
• 사실 그래도 안되었다. 다시 에러코드 봤더니 node-gyp 지원 안해서 그런 것 같다고 추정했다.

On macOS

• ATTENTION: If your Mac has been upgraded to macOS Catalina (10.15), please read macOS_Catalina.md.

• Python v2.7, v3.5, v3.6, v3.7, or v3.8

• Xcode

  • You also need to install the XCode Command Line Tools by running xcode-select --install. Alternatively, if you already have the full Xcode installed, you can find them under the menu Xcode -> Open Developer Tool -> More Developer Tools.... This step will install clang, clang++, and make.

• 나는 Xcode를 삭제해뒀는데 다시 깔라고 해서 슬퍼졌다.... 다시 깔고 파이썬 버젼도 낮췄다,,,

sudo ln -s -f /opt/homebrew/bin/python3.8 /opt/homebrew/bin/python

• 파이썬 버전이 3.9.13이어서 변경을 했다.
  • 파이토치랑 주피터 노트북 세팅해둔거 괜찮겠....지?
• python --version으로 버전 확인 가능하다

02. 드디어 성공, 결론

• npm start를 했더니 localhost:3000/에서 잘 나왔다!

• 편집기 모드에서 코드 하이라이트? 박스 부분이 뭔가 엉성한다던가
  • 의도한 것은 이런 느낌 같아 보이는데(사진은 옵시디언 에디터)
• 슬라이드 모드에서 다크모드가 아니면 코드 하이라이트가 안보인다던가 하는 부분들을 바로 찾을 수 있는데 이걸 내가 고칠 수 있게 되나??? 무서운데????????????????
• 일단 버그들 찾아서 이슈에 남기는 것을 1차 목표로 두고 멘토님과 이야기 해보는 걸로