하루에 하나씩 기술 아티클 읽기

매일 하나씩 개발 관련 기술 아티클을 읽고, 간략하게 감상, 요약하는 글을 남기는 게시물.
알고리즘 문제와 더불어 하루에 하나씩 꾸준히 해보자!

2021년

5월

• 5월 3일 (월) - React 이해하기, React Hooks vs. Redux: Do Hooks and Context replace Redux?

  • 리액트의 동작방법에 대해서 생각해보고, 리액트가 왜 필요한지 생각해보는 글이였다.
  • useReducer 와 ContextAPI 를 이용하면서 Redux 와 비슷한 개념이라는 말을 많이 들었는데 어떤 것이 비슷한지 대체될수 있는지에 대해서 생각해 볼 수 있는 글 이었다.

• 5월 4일 (화) - React 최적화 요약집

  • 리액트가 리렌더링 되는 기준을 잘 정리해놓은 글입니다.
  • state 변경이 있을 때, 부모 컴포넌트가 렌더링 될 때, 새로운 props이 들어올 때, shouldComponentUpdate에서 true가 반환될 때, forceUpdate가 실행될 때

• 5월 5일 (수) - 프로모션용 웹앱 빌더 만다오 - 우아한 형제들 기술블로그

  • 장해민님의 글을 보면서 프론트엔드 개발자가 어떤 개발을 해야하는지 다시 생각해보게 되는 글이였다.
  • 사용자에게 어떤 경험을 줄 수 있는지는 개발 하는 사람의 마음가짐에 달렸다는 것을 느끼는 좋은 글이였다. 마케팅 직원분들과 디자이너분들의 만다오 웹 사용후기가 너무 뭉클(?) 했다.
  • 주니어 개발자에게 이런 기획을 할 기회가 펼쳐지는 우아한 형제들의 기업문화가 너무 마음에 들었다.

• 5월 6일 (목) - flexbox로 만들 수 있는 10가지 레이아웃

  • 평소에 쓰지 않던 flex css 를 생각해보았다.
  • 나는 flex를 항상 부모 tag 에서만 사용했었는데 자식 요소에서 선언하는 flex 성질도 있었다. : flex grow , shrink , basis

• 5월 7일 (금) - 이제 react.js를 버릴때가 되었다

• 5월 10일 (월) - [React] react-transition-group으로 router간 animation구현하기

• 5월 11일 (화) - 깊은 복사와 얕은 복사에 심도 깊은 이야기

  • 리액트에서 훅을 쓸 때 원본값을 변형하지 않고 복사하여 return 해야하기 때문에 스프레드 연산자를 많이썻다. 그럴 때 필요했던 얕은 복사와 깊은 복사에 대해서 개념이 정확하지 않아서 읽어본 글
  • 복사 : 원본값과의 관계가 끊어져있다. copied 값들을 변경해도 원본값이 변하지 않는다.
  • 얕은 복사 : depth 가 1이상 일 때, 안에있는 배열의 값을 변경하면 원본값도 변경이된다.
  • 깊은 복사 : depth 가 1이상 일 때, 안에있는 배열의 값을 변경하면 원본값은 변경이 되지 않는다. => JSON.parse(JSON.stringifiy(Array)))

• 5월 12일 (수) - 그런 REST API 로 괜찮은가

  • REST API 에서 REST 가 무엇인지, 우리가 REST API 라고 부르는 것이 REST 의 규칙을 지키고 있는지를 살펴보는 흥미로운 영상입니다.
  • REST 는 HTTP를 만들기 위해 만든 것이 아닌가? , REST 의 덕목중에 self-descriptive ( 스스로 설명 가능하게 만드는 것 ) 을 API 는 만족하지 못하는 이유 들을 생각하면서 여러가지 생각을 하게 되었는데, 논문에서 REST를 정의했기 때문에 맞추어야한다. 라는 말은 설득력이 있지않는 것 같다. 밑에 있는 댓글과 같은 생각이다.

    영상처음에도 설명했다시피 rest 의 목적은 "독립적인 진화" 였는데 과연 이렇게 rest api 에다가 억지로 self-descriptive 나 hateoas 를 넣는다고 해서 "독립적인 진화" 가 가능할까요?

• 5월 13일 (목) - 리액트 어플리케이션 구조 - 아토믹 디자인

  • 리액트가 프런트엔드 개발을 위해 설계 우선 접근법을 권장 하는지 처음알았다.

  • UI/UX 팀은 개발자들이 구현할 수 있는 목업을 만들 것이며(mocking), 개발자들은 이를 이용해 UI를 컴포넌트 계층으로 세분화 할 수 있다.

  • 아토믹 디자인이 고안된 이유 => 거대한 SPA 서비스의 유지보수를 쉽게하기 위해서

  • 장점: 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수있다. (TDD 에 유리)

  • 리액트 공식 문서에 나온 것처럼, 단일 프로젝트에서 폴더의 중첩은 최대 3개 또는 4개로 제한할 것을 권장한다. 상대경로 import는 jest, webpack 또는 babel 에서 제공하는 alias 를 사용하여 깔끔하게 정리할 수도 있다.

• 5월 17 (월) - 우리가 TypeScript로 갈아탄 이유

  • 사람들이 typescript를 사용하는 이유를 '남들이 사용해서'가 아니라 '필요해서' 라고 납득시켜주는 글이다.
  • typescript의 도입 이유를 설명하기 위해 타입 시스템과 타입 안정성에서 이야기하는데
  1. 높은 수준의 추상화가 필요할 때 도움이 된다.
  2. 자연스럽게 프로그램에 구조가 생긴다.
  3. 프로그램에 존재하는 타입 에러를 런타임 전에 검출한다.
     등의 효과를 얻을 수 있음을 설명한다.
  • 또한, typescript 의 design goal을 살펴보면 타입규칙을 완벽하게 따르는 언어를 추구하기보다는 타입시스템이 조금더 실용적으로 사용되는 것에 대해서 고민하고 있는 방향이기때문에 타입스크립트는 타입안정성에 완벽하지 않다.

• 5월 20일 (목) - 타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)

  • 리액트에 타입스크립트를 사용하면서 타입을 명시해야 될 곳 중하나가 Hooks이다. 그 hook 들을 사용할때 타입을 어떻게 적용하는지 어떤식으로 선언하는지 좋은 exam 이 되는 글이다.

• 5월 26일 (수) -[React] 이벤트처리(2) - dataset 사용법

  • 리액트 이벤트 처리 방법중 하나인 dataset 사용법에 대한 글이다. dataset 을이용하면 마우스나 input 이벤트를 좀 더 효과적으로 다룰수 있을 것 같다.

  6월

• 6월 28일 (월) - 신입 개발자 혼자 어디까지 만들 수 있을까?

  • 이제 프로젝트를 해야하는 입장에서 아주 좋은 글이였다.
  • "우와 3개월 배웠는데 저걸 어떻게 해?" 라는 생각보다는 "나도 할 수 있지만 꾸준히 끈기있게 저 서비스에 4개월동안 몰입해있는 게 멋있다.
  • 나도 몰입할수있는 프로젝트를 기획하고 실현하고싶다.