Dev Log

🟥 : 미완료 ✅ : 완료

7 / 27 (월)

✅ 로켓펀치 계정 업데이트 하기

✅ 개발 관련 오프라인 미팅 찾기: 29(수) 19:00 - 21:00 API 에 대한 강의 듣기 링크
✅ git Branch 효율적인 사용법 익혀보기: Blair 가 공유해준 github repo 를 보며 Issue number 와 branch 명을 통합하는 방식으로 구조적인 branch 관리법을 익힐 수 있었다.
앞으로 여기 블로그 repo 도 긴 글 Post 는 작성하는데 시간이 꽤 걸리므로 이 방식으로 사용할 수 있을 것 같다.
참고 repo

✅ 국가 뉴딜 일자리 알아보기

🟥 리액트 플젝

🟥 알고리즘 문제 풀기

🟥 React 플젝

🟥 이번 주 블로그 글 준비 - [React 의 구동 원리]

✅ Le Wagon Free workshop - API 참여하기: API 와 Webhook 의 개념을 배우고 직접 코딩을 하진 않았지만 이를 활용한 좋은 Web App 들을 사용해볼 수 있어 좋았다.

Webhook 이란 Request 에 응답하는 API 와 반대 개념으로 사용자의 특정 Event 에 따라 웹 app 의 동작을 Trigger 하는 방식이다.

새롭게 알게된 흥미로운 App

TypeForm : 설문조사 페이지를 이쁘게 만들 수 있음
Mapbox : 주소 또는 어떤 지역의 명칭을 query 로 보내면 해당 위치의 좌표 등의 정보를 응답해주는 API 를 제공한다. Google Map API 를 사용해 서비스하는 Airbnb 는 Mapbox 를 동시에 사용해 좌표를 가져온다. 한글 query 도 가능하고 생각보다 검색 정확도가 높아서 놀랐다.
Youtube : 영상을 Website 에 embed 할 수 있는 API 제공 (광고를 송출하기 위해 무료로 제공한다.)
Stripe : 전자상거래에서 은행 서버와의 연결과 관련된 API 를 제공한다. Stripe API 를 사용하면 기업이 일일이 은행 하나하나와 협약을 할 필요가 없다.
Twilio : SMS 전송 서비스. 전 세계 다양한 국가들에 모두 서비스할 수 있는 SMS 전송 서비스이다. Airbnb, Uber 등 다양한 서비스 업체들이 사용하고 있는 API 이다.
Zapier : 다양한 App 들을 연결해주는 Webhook 을 생성해주는 App 이다. 예를 들어 TypeForm 에서 생성한 설문조사의 응답 결과로 Trello 에 카드를 자동 생성하거나 Gmail 로 이메일을 보낼 수 있게 해준다.

✅ React 플젝: 설정만 해두고 신경쓰지 않고 있던 eslint 가 어떤 이유에서인지 갑자기 동작하더니 코드 format 을 마구 바꾸기 시작했다.. 당황했지만 다행히 원인을 찾을 수 있었다. 그런데.. lint 를 돌려보니 여기저기에 dependency-cycle error 가 엄청 발생해있음을 발견했다. 두 모듈이 서로를 import 하거나 건너건너 cycle 로 import 되고 있는 경우에 발생하는 error 이다. _{예전에 node.js 를 만질 땐 runtime error 로 잡아줘서 편했는데 이렇게 eslint 로 잡아주니 그나마 다행이다.}
dependency-cycle 은 직접적인 bug 를 발생시키지 않지만 여러가지 성능 문제를 일으킬 수 있다고 한다. (참고 링크)
앞으로 플젝 진행하면서 꾸준히 lint check 을 해야겠다.

🟥 이번 주 블로그 글 준비 - [React 의 동작 원리]

✅ 이번 주 블로그 글 준비 - [React 의 구동 원리]: React 의 VirtualDOM 이 어떻게 생성되는지 그리고 VirtualDOM 의 장점이 무엇인지 알 수 있었다. 정리한 글을 일요일까지 완성해 publish 할 예정이다.

✅ React 플젝 - esLint dependency-cycle error 해결하기

✅ T 사 모의 코테 등 환경 테스트 확인

🟥 로켓펀치 계정 - 자소서 수정 (어제 수정한 이력서 자소서 바탕으로 바꾸기)

🟥 이번 주 블로그 글 준비 - [React 의 동작 원리]

✅ React 플젝 - esLint dependency-cycle error 해결하기: eslit 의 error 를 모두 resolve 했지만 build 단계에서 내가 설정한 eslint config rule 이 적용안되는 bug 가 발생했다. 이건 도저히 답이 없어 우선 새로운 Issue 를 발행했다.

🟥 알고리즘 문제 풀기

✅ Dark Theme 적용기 완성 후 블로기 Post 하기

✅ T사 코딩테스트

✅ [실전 리액트 프로그래밍] - React 의 동작 원리 익히기

✅ [실전 리액트 프로그래밍] - React 의 동작 원리 익히기: React 의 가장 큰 장점이자 동작 원리의 핵심인 Virtual DOM 에 대해 이해할 수 있어 좋았다. [링크]
✅ React 플젝 - 반응형 작업하기 / 스케줄 앱으로 변경하는 것 구상해보기: 반응형 디자인 작업 Issue 발행 및 Branch 생성 완료
스케줄 앱은 Notion 앱의 web 버전과 mobile app 버전을 모티브로 만들면 될 것 같다.

부가적으로 학습한 내용
DOM 이란 브라우저가 HTML 로 만들어낸 객체 모델이고 브라우저가 JS , CSS 를 동작시키는 대상이다.