[ETC] 기술 문서 읽기

📜 매일 읽는 기술문서 업데이트 하기✏️

2021년 4월

• 7일 (수):
  React 적용 가이드 - React와 Redux / 네이버 D2 블로그
  React 적용 가이드 - React작동방법 / 네이버 D2 블로그
  'React와 Redux'에서는 create-react-app으로 리액트를 시작하는 방법(개발환경구축), 폴더구조와 각 폴더가 하는 역할에 대한 가이드, 미들웨어와 비동기 처리, 디버깅 도구 등의 사용 가이드를 제공한다. 그리고 Redux 사용 시 state가 변경되는 과정과 브라우저에서 이벤트를 받아 뷰를 변경하는 과정을 설명한다.
  'React작동방법'에서는 Virtual DOM과 이벤트 시스템에 관해 설명한다. DOM을 렌더링 하는 과정과 브라우저가 이벤트를 처리하는 방법에 대해 설명한다.
  📝 : 리액트가 작동되는 원리에 대해 자세히 설명하고 있어 리액트를 보다 깊이있게 이해하는 데에 도움이 될 것 같다. 그런데 아직 리액트로 코드를 작성해본 경험이 많이 없어서 본문을 완전히 이해하기에는 무리가 있었다. 코딩을 병행하면서 관련된 내용을 다시 보면 학습에 큰 도움이 될 것 같다.

• 8일 (목):
  리액트 useEffect: 개발자가 알아야 할 네가지 팁 / Toast UI Weekly Picks
  리액트 훅인 useEffect를 사용할 때에 개발자가 유의해야 할 점을 4가지로 나누어 제시한다.
  요약본 - 제이슨의 포스팅😃
  📝 : useEffect를 학습한 후 사용할 때에 다시 읽어볼 것!
  

• 9일 (금):
  [번역] 심층 분석: React Hook은 실제로 어떻게 동작할까?
  React Hook 사용시에는 "최상위에서만 호출", "오직 React 함수 내에서만 호출"이라는 규칙을 따라야 하는데, 이러한 규칙이 필요한 이유에 대해 React Hook이 작동되는 원리를 제시한다.
  그 과정에서 리액트 훅 안에서 클로저(Closure)가 어떤 역할을 하는지를 중심으로 Hook의 내부 동작원리를 단계별로 설명한다.
  📝 : 리액트 사용방법을 익히는 것이 아니라 동작원리를 익혀야지만 리액트를 제대로 사용한다고 할 수 있을 것이다. 리액트 훅 사용에 앞서서 꼼꼼히 여러 번 읽어볼 필요가 있는 글.

• 12일 (월):
  팀 문화의 탄생 / 우아한 형제들 기술 블로그
  Keep : 잘하고 있는 점. 계속 했으면 좋겠다 싶은 점.
  Problem : 뭔가 문제가 있다 싶은 점. 변화가 필요한 점.
  Try : 잘하고 있는 것을 더 잘하기 위해서, 문제가 있는 점을 해결하기 위해서 우리가 시도해 볼 것들 (이 중에서 2, 3개를 골라 Action 아이템으로 만들고, 실제로 수행해보기)
  주석에는 '무엇'이 아니라 '왜'를 적기.
  📝 : 팀 프로젝트를 시작한 지 2주차에 접어들면서 어떻게하면 팀 프로젝트를 더 잘 할 수 있을까에 대한 고민이 더해졌다. 우아한 형제들에서 추구하는 팀 문화는 무엇인지 알아보면서 그들이 채택한 방법들 중 우리의 상황에도 적용해볼 수 있는 것들을 골라 시도해보아야겠다는 생각을 했다.

• 13월 (화):
  styled-components 를 사용하는 8가지 이유 -번역
  React로 CSS를 사용하는 방법 중 가장 많이 채택되는 방법은 Styled-component 라이브러리를 사용하는 방법이다. 왜 Styled-component가 가장 많은 관심을 받는지 그 이유를 CSS-in-JS에 초점을 맞춰 설명한 글.
  같이 참고하면 좋은 글:
  Styled-component 네이밍 컨벤션 팁
  CSS-in-JS란?
  📝 : 생각해보면 미션 구현에 급급해서 간단히 사용방법만 익히고 Styled-component를 쓰고 있었는데, 어떤 장점을 가졌는지, 왜 쓰는지에 대한 고민은 해본적이 없었는데 생각을 해보게 만드는 글이었다.

• 14일 (수):
  deploy 브랜치 전략 활용 방법 / 당근마켓 팀블로그
  팀 프로젝트처럼 여러 사람이 함께 개발을 할 때, 차례를 기다리지 않고 테스트 서버에서 각자 개발한 feature를 어떻게 테스팅 할 수 있는지 'deploy 브랜치'라는 브랜치 관리 전략을 제시한다.
  📝 : 배포는 아직 친숙하지 않은 영역이라 생각해보지 못했던 부분인데 협업을 할 때 git으로 생길 수 있는 문제들은 정말 무궁무진하다는 생각이 든다. deploy 브랜치 전략이라는 게 있단 걸 알게 되었으니 추후 협업 시 도움이 될 것이라 예상해본다.

• 19일 (월):
  HTTP 응답코드 메소드 정리 GET, POST, PUT, PATCH, DELETE, TRACE, OPTIONS
  HTTP 응답코드에 대해 보기 쉽게 정리되어 있는 문서.
  📝 : 서버에 데이터를 요청하는 부분의 미션의 필수조건이 되어가면서 http 요청/응답코드에 대한 지식이 필요함을 느끼고있다. 북마크하고 필요할 때마다 볼 것!

• 20일 (화):
  나는 프론트엔드를 안다고 말할 수 있을까?
  프론트엔드 개발자를 어떻게 정의할 수 있을지, 어디까지가 프론트엔드 개발자의 역할이고 어디까지가 퍼블리셔의 역할인지, 내 앎의 깊이는 어디까지인지를 생각해보게 만드는 글이다.
  📝 : 그동안 당연하게만 생각해왔었던 부분들에 대해 질문을 던져보게 하는 글. 철학적인 관점에서도 프로그래밍을 바라볼 수 있다는 것이 흥미로웠고, 팀원들과 함께 각자의 감상평을 나눠볼 수 있어 흥미로웠다.

• 21일 (수):
  왜 React와 서버 사이드 렌더링인가?
  React가 '왜' 좋은 프레임워크인지, 이전에는 불가능하던 '무엇'을 가능하게 했는지에 대한 배경과, React가 채택한 서버사이드 렌더링의 장점을 함께 설명한다.
  📝 : 당연히 알아야만 할 것 같지만 사실 리액트 이전에 사용되던 프레임워크들을 사용한 경험이 전무한 상태에서 리액트부터 학습하다보니 리액트만의 강점이 무엇인지, 무엇이 리액트를 만들게 했는지 몸소 느끼기가 어려운 것 같다. 빠르게 변화해온 프론트엔드의 흐름을 모두 상세히 알기는 어렵겠지만 현재 사용하는 프레임워크의 탄생배경을 이해하는 데에 도움이 되는 글이었다.

• 22일 (목):
  useEffect 완벽 가이드
  “컴포넌트의 랜더링 안에 있는 모든 함수는 (이벤트 핸들러, 이펙트, 타임아웃이나 그 안에서 호출되는 API 등) 랜더(render)가 호출될 때 정의된 props와 state 값을 잡아둔다. 하나의 랜더링 스코프 안에서 props와 state는 변하지 않은 값으로 남아있다.”
  사전에 잡아둔 값이 아니라 최신의 값을 쓰고 싶다면, 제일 쉬운 방법은 ref를 이용하는 것!
  📝 : 리액트를 사용한다면 반드시 한번쯤 꼭 읽어봐야할 문서! 리액트가 작동되는 원리와 방법을 이해하기 쉽게 설명하기 때문에 초보자가 읽으면서 학습하기에도 적당하다. 다만 아티클의 길이가 굉장하고 본문에 링크가 걸린 다른 아티클들의 양도 적지 않아서 한번에 다 읽기는 어려우므로 틈틈이 읽을 것. 기억하면 좋을 중요정보들이 많다.

• 23일 (금):
  글자 4개로 리액트 컴포넌트를 최적화하는 방법
  useState()의 인자로 화살표함수(() =>)를 넘겨줌으로써 불필요한 연산을 줄이고 리액트 함수 컴포넌트의 성능을 향상시키는 '지연초기화' 방법을 소개한다.
  지연초기화: 직접적인 값 대신 함수를 useState()의 인자로 넘기는 것. 지연 초기화는 상태가 최초로 생성될 때만 실행되고, 이후 발생하는 리렌더링에서는 실행되지 않는다. 하지만 단순한 원시값이거나 이미 계산된 변수인 경우 오히려 매번 함수를 만드는 비용이 발생하므로 부적절. 비용이 큰 계산에 적절하다.
  📝 : useState()을 사용할 때 늘 인자로 직접적인 값만을 전달했었는데, "함수"를 전달할 수 있을 것이라는 생각을 해보지 못했었는데, 이렇게 컴포넌트를 최적화할 수 있다니 신기하게 느껴졌다. 화살표함수가 암묵적으로 값을 반환한다는 점 또한 알게 되었다.
  최초 렌더링 시에만 값을 찾아야 하는 경우에 유용하게 사용할 수 있을 것 같다.

• 26일 (월):
  자바스크립트는 무엇으로 구성되어있을까?
  JS를 공부한다면 반드시 알아야 하는 개념들을 정리해둔 문서.
  📝 : JS를 사용하는 프론트엔드 개발자로 면접을 보게 된다면 반드시 설명할 수 있어야 하는 개념들이라는 생각이 든다. 과연 나는 할 수 있을까? 기본중의 기본이지만 막상 입밖으로 자연스레 나오지 않는..이런 개념들에 대해 내가 할 수 있는 답변들을 정리해야 할 필요가 있다 정말.

• 28일 (수):
  잘가, 클린 코드 / Overreacted
  중복 코드를 제거하려고 팀원들의 동의없이 코드를 수정했다 겪었던 일화를 소개하면서 무조건적으로 클린 코드를 추구하는 것이 능사는 아님을 전달해준다. 클린코드를 배우되, 얽메이지는 말자.
  📝 : 약간의 강박처럼 미션을 할 때도 늘 클린코드를 짜야한다는 생각이 있는데, 클린코드가 무조건 좋은 게 아니라니... 충격까지는 아니지만 새로운 관점으로 생각해보게 하는 계기가 되었다. 클린코드의 정의도 사실 모호하지만 무엇보다 '클린코드' < '협업' 이라는 생각이 다시 한 번 들었다.

• 29일(목) & 30일(금):
  애자일 방법론
  현대 소프트웨어 개발에서 강조하는 '애자일 방법론'의 장점과 진행방법을 구체적이고 다양하게 제시한다.
  애자일이 추구하는 가치: "처음부터 완벽한 계획"이 아닌 "간소한 계획과 유연한 대처"
  📝 : 개발공부를 하게되면 꼭 한번은 들어보는 용어가 '애자일'이지만 이게 정확히 뭘 의미하는지, 어떻게 실행해야 하는지는 알지 못했었다. 알고보니 코쿼에서 당연한듯 해온 칸반이나 스크럼이 애자일 방식의 하나였으니 나도 모르게 어느정도 애자일 방법론을 동기들과 해온거구나.. 라는 생각을 했다. 추상적으로만 생각했던 개념이 머릿속에서 좀 더 명확해졌고, 실행방법들이 구체적으로 정리되어 있어서 참고하며 다음 협업 시 추가로 적용할 수 있는 부분들을 실행해보면 좋을 것 같다.

2021년 5월

• 3일 (월):
  React 이해하기 / 마켓컬리 Tech Blog
  React의 간단한 소개부터 useReducer, useMemo까지 속성으로 리액트를 소개하는 아티클. hook에 대해 좀 더 깊이있게 알아보기 위해서는 여기 블로그도 추천!
  📝 : 이제 본격적으로 React의 여러가지 hook을 사용해야 하는 때가 와버렸기 때문에 입문용으로 어떤 hook이 있는지 알아보기에 괜찮음.

• 4일 (화):
  리액트 최적화 요약집
  리액트에서 렌더링이 되는 대표적인 조건 5가지:
  -state 변경이 있을 때
  -부모 컴포넌트가 렌더링 될 때
  -새로운 props이 들어올 때
  -shouldComponentUpdate에서 true가 반환될 때
  -forceUpdate가 실행될 때
  useCallback & useMemo를 사용하는 이유와 사용시 장점과 함께 리액트 앱을 최적화 하는 방법을 소개한다.
  📝 : hook 사용법을 익히기에도 시간이 부족해서 최적화는 생각지도 못했었다. 그래도 최종적으로는 최적화 또한 고려해야 할테니 그 때 다시 들여다본다면 리팩토링 시 큰 도움이 될 것 같다는 생각을 했다.

• 6일 (목):
  flexbox로 만들 수 있는 10가지 레이아웃 / 네이버 D2 블로그
  CSS flex의 속성을 어떻게 사용해야 하는지 flex가 필요한 구체적인 상황과 코드예시, UI까지 포함해 자세히 알려주는 아주 멋진 flex 사용가이드 :)
  📝 : flex박스는 쉬운 듯해서 자주 쓰지만 정작 속성들을 자세히 알고 쓰지는 못했던 것 같다(물론 머릿속에 지우개가 들어있어 돌아서면 잊어버리는 탓도 있다). 늘 주먹구구식으로 필요할때만 급하게 검색해서 쓰곤 했는데, 정리가 아주 잘 되어있는 자료가 생겨서 자주 찾게 될 것 같다.

• 10일 (월)
  react-transition-group으로 router간 animation구현하기
  react-transition-group이라는 모듈을 React router를 사용하면서 transition 애니메이션에 적용하는 예시를 들어 설명한다.
  또 다른 animation 모듈: React Spring
  📝 : 역시나 리액트에도 손쉽게 애니메이션을 적용할 수 있게 하는 툴이 많다. 아직 라우터를 지정하기 전이지만 라우터를 적용하면서 애니메이션을 구현해야 할 일이 온다면 유용하게 쓰일 것 같다. 일단은 Styled-component부터 마스터하는 걸로... 😬

• 11일 (화)
  깊은 복사와 얕은 복사에 대한 심도있는 이야기 / WATCHA
  <얕은 복사>
  Array.prototype.slice() : 중첩구조까지는 복사를 제대로 할 수 없다.
  Spread Operator(...) : 복사하려는 객체가 iterable 이라면 복사가능. 그러나 중첩구조는 복사 불가능.
  <깊은 복사>
  JSON.parse(JSON.stringify(arr)) : 중첩구조 복사 가능. 객체 순환을 통해 값을 옮겨담는 과정이 아니라, 문자열로 변환하면서 데이터 타입이 "원시값"의 형태로 변하기 때문.
  => 자바스크립트의 모든 복사 방식은 사실 깊은 복사를 수행할 수 없다. 내부적으로 그렇게 모델링 되어있기 때문에 사용자의 편의를 위해 일부 라이브러리들이 그 역할을 대신한다.
  깊은 복사를 하기 전에 과연 깊은 복사가 그렇게 필요한 것인지 아키텍처 관점에서 다시 한 번 생각해봐야 한다.
  📝 : 얕은 복사와 깊은 복사에 대해서는 어렴풋이 알고 있었지만 자바스크립트가 실제로 깊은 복사를 할 수 없게 만들어졌다는 것은 처음 알게 된 사실이었다. 그냥 사용할 것이 아니라 다소 사소하게 느껴질 지 모르지만 차이를 알고 사용하는 것이 중요할 것 같다.

• 12일 (수)
  이벤트 리스너 캐시를 이용한 React 성능 향상 / toast UI
  이벤트 핸들러 함수가 매 render마다 새롭게 생성되어 새로운 메모리 공간을 차지하게 되는 문제에 대한 해결책을 제시한다.
  📝 : 최근에 리액트 데이터 캐싱에 대해 관심이 생겨서 미션에도 useMemo()를 적용해보려고 공부하는 중이다. 고르는 데에 시간이 꽤나 쏟으면서 나름대로 신중히 고른 포스팅이었지만 예시가 클래스로 구현되어 있기도 하고 내가 알고싶던 부분과는 차이가 좀 있어서 아쉽게도 그다지 와닿지는 않았던 것 같다. 그치만 언젠가 여러개의 이벤트리스너를 참조할 일이 있다면 성능을 고려하면서 적용해볼 수 있을 것 같다는 생각을 했다.

• 13일 (목)
  리액트 어플리케이션 구조 - 아토믹 디자인
  원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages) 단위로 UI 요소들을 나누어 효과적인 인터페이스 시스템을 만드는 디자인 모델을 소개한다.
  📝 : 이전에 스노우님한테 코드 리뷰를 받으면서 '아토믹 디자인'을 처음 알게 되었다. MVC디자인 패턴이 익숙하기도 했고, 아직은 한번도 프로젝트에 아토믹 디자인을 적용해본 적이 없어서 아토믹 디자인의 장단점은 어떨지 궁금해진다. 다음 리액트 프로젝트에서는 아토믹 디자인으로 재사용성을 높여봐야겠다.

• 17일 (월)
  우리가 TypeScript로 갈아탄 이유 / 레드윗러
  타입스크립트의 안정성을 중심으로 타입스크립트 사용을 도입하게 된 배경과 그 이유를 설명한다.
  📝 : 타입스크립트를 이제 막 배우기 시작한 입장에서 JS와 비교해 어떤 장단점이 있는지, 어떤 점을 보완해줄 수 있는지를 알게되는 것이 의미가 있었다.