[Sat/25/12/2021] Today I Learned

 

1. Git & Github, Sourcetree

본격적인 협업을 위해서 알아야 하는 필수적인 깃 사용법을 다지려고 했다.

혼자서 프로젝트 할 때와는 또 다르기 때문에 알아둬야 할 것들이 좀 있었다. 

책은 예전에 구매해뒀던 <팀 개발을 위한 Git GitHub 시작하기>라는 유명한 책을 읽었다. 

총 9챕터인데, 아직 4챕터를 읽는 중이다.

사실 3챕터에 있는 내용이 협업 때 정말 필수적이라 이 부분을 잘 읽고 협업 때 깃 사용할 때 적용하려고 한다.

Sourcetree - History

VS Code의 Source control과 CLI만 계속 써오고 있었는데 Sourcetree를 써보니 정말 편리하고 시각적으로 잘 들어오는 게 느껴졌다. 색깔 구분도 명확하고, 포인터가 딱 있어서 좋다. 

다운만 받아보고 읽지 않았던 <Pro Git> 도 읽기 시작했다! 

많이 읽진 않았지만 오늘부터 꾸준히 읽어 보려고 한다. 

분량이 500페이지 정도로 꽤 많은 편인데 하루 30분 정도 투자해서 Git과 가까워지도록 할 것이다. 

 

2. React project

사진 업로드 기능을 중점적으로 다루고 있다. 

어제 클라우디너리 가입을 하고, 사용법을 좀 배워본 후에 내 코드에 적용했다.

API Document를 보고 거기서 나온 샘플 코드를 그냥 다른 JS 파일에서 실행했을 때는 정상적으로 작동되었는데, 내 프로젝트에 적용하니 계속 400 에러가 떴다. 

왜 그랬는지 몰랐는데, 멘토님이 알려주셔서 해결되었다.

그냥 샘플 코드를 쓰지 않고, Ant Design에서 제공하는 Upload 컴포넌트를 쓰고 있기 때문에 그 컴포넌트의 data 속성을 이용하는 것이었다. 

Ant Design을 쓰면 이렇게 편해질 수 있지만, 그렇기 위해서는 사용법을 잘 알아야겠다 싶었다. 

아무튼 이런 시행착오를 겪었지만 멘토님의 도움으로 해결을 했고, 이제 클라우디너리에 업로드한 사진을 화면에 그려주는 로직도 고민할 차례이다. 

 

또한 Optional Chaining 연산자를 이용해 로직을 좀 더 깔끔하게 만들 수 있는 방법도 멘토님이 알려주셨다.

기존 로직 - 삭제&amp;nbsp;

수정 후&amp;nbsp;

기존에는 따로 movieRating이라는 변수를 생성해서 movie가 있는지 검토 후, 있으면 나누기 2를 하는 식으로 별점을 전달했는데, 그냥 Optional chaining 연산자를 사용해서 위의 로직은 필요 없이 간단히 구현할 수 있었다.

11월에 했던 자바스크립트 투두 리스트 프로젝트에서 이것을 써봤었고, 두 번째로 써 보는 것이었다. 

이번 기회로 낯설었던 이 연산자와 좀 더 가까워졌고, 나중에도 꼭 써먹어야겠다고 느꼈다. 

 

3. Mountain 프로젝트 셋업 

- npx create-react-app으로 설치 후 필요 없는 파일들 제거 

- 필요한 모듈 설치 : cross-env, json-server, react-router-dom 

- 브랜치 규칙 설정 제안 

- json-server 이용해서 mock data 이용 가능하게 함 

 

---

내일 역시 오늘과 비슷한 공부 구성으로 진행할 예정이다. (Git, React)

오늘은 어제보다 좀 일찍 공부를 마무리하고, 일찍 자고 오전 시간을 좀 활용해서 React부터 시작할 계획이다.