[4월] 아티클 읽기

0401 JS_Proxy

한번에 이해하기는 쉽지 않았다. 다른 블로그글을 조금이나마 이해간 코드를 코드펜에 남겼다.

신기한게 Proxy로 만들면 객체가 나오는데 배열도 target에 적용한다음에 인덱스로 값을 get할 수 있다는 점.

확실히 set,get 같은 상황에 추가적인 작업을 설정해 놓을 수 있으니까 유용한 것같다. 위의 예제에서도 옵저버패턴과 proxy를 함께 사용했는데 set이 될 때 프록시로 자동으로 notify가 되니까 편해보인다.

옵저버패턴은 상태를 요즘 점점 많이 다루게 되는데 유용하게 사용될 같은데 프록시와 함께 사용하면 훨씬 편리한 코드가 될 것 같다.

0402 CORS

개발하면서 종종 만난 CORS 만날 때마다 찾아봤지만 읽어볼 때마다 조금씩 더 이해가 쉬워지는 느낌이랄까...?
네트워크도 공부를 좀하고 읽으니까 이전에 읽었을 때와는 달리 이해는 되면서 읽었다. 역시 아는 만큼 보이는 것 같다.

0403 크롬 내부 살펴보기

브라우저의 내부 구조에 대해 설명해주는 글이다. cs-10에서 cpu하고 프로세스 스레드에 대해서 조금이나마 공부해서 다행이었다. 아니었으면 1도 이해 못하고 읽기만 할 뻔했다. 후반부로 갈 수록 이해가 잘 안됐다. 크롬의 탭마다 프로세스를 할당한다고 듣기만했는데 실제로 정리된 글을 보니 좋았다. 이제는 보안을 위해서 사이트마다 프로세스를 할당하고 있다니 계속 발전하는게 너무 멋있다.

0404 최신 브라우저의 내부 살펴보기 2 - 내비게이션 과정에서 일어나는 일

크롬의 네이게이션(사이트 이동)이 일어날 때의 과정을 소개해 주는 글이었다. 기본적으로 우리가 사용하던 기능들이 파싱을 해서 분석하고 수많은 로직을 거쳐서 진행된다는 것을 알게됐다. 이미 새로운 기능들이 하나씩 추가 되면서 더 빠르게 동작시키려 노력하는 것도 인상 깊었다. 이번 시리즈로 큰 흐름을 느껴보는것에 큰 의미가 있다고 생각한다.

0405 최신 브라우저의 내부 살펴보기 3 - 렌더러 프로세스의 내부 동작

HTML데이터를 수신하면 파싱하고 DOM tree를 만들어낸다. CSS도 레이아웃트리? 라는걸 만들어서 적용시키는 것같다. 중간중간 나오는 링크들 중에서 읽어보고 싶은 링크들이 있었다. 다음에 시간을 내서 읽어봐야겠다.
스크롤을 할 때 레스터화 또는 합성방식이 어떤 식으로 되는 것지 약간 알게 됐다.

0406 최신 브라우저의 내부 살펴보기 4 - 컴포지터가 사용자 입력을 받았을 때

크롬브라우저에서 이벤트의 진행과정에 대해 알 수 있었다. 이번 브라우저 시리즈를 가볍게 읽었지만 집중해서 읽어야 할 것 같다.

0407 리액트 useEffect: 개발자가 알아야 할 네가지 팁

• 하나uesEffect는 하나의 목적으로만 구현 (2개 이상의 상태를 조작하거나 한다면 분리하자.)
• 커스텀 훅으로 분리해서 사용하자.
• 조건부 useEffect는 useEffect 시작에 바로 return해주는게 좋다.
• useEffect 안에서 사용하는 모든 변수들은 의존성배열에 추가

0408 리액트 어플리케이션 구조 - 아토믹 디자인

최근 리액트를 처음 배우고 프로젝트를 진행하면서 디랙토리 구조를 어떻게 설계해야될까 고민이 많은데 하나의 방법에 대해 알게돼서 좋다. 컴포넌트들을 관리하기에 좋은 방법으로 생각된다.

0409 React.memo() 현명하게 사용하기

• React.momo는 얕은 비교로 메모이제이션된 것을 사용할지 새로 리렌더링 할지 결정한다.
• 하나의 컨포넌트 단위에서 하나의 probs만 변경이 계속 된다면 이외의 것들을 React.momo를 이용해 컴포넌트화하면 불필요한 리렌더링들을 막을 수 있다.
• React.momo 사용시 인자로 함수를 받는 경우는 그 함수에서 useCallback을 사용해 함수변화를 최소한으로 해줘야지 의미가 있다.

0410 프론트엔드와 백엔드가 소통하는 엔드포인트, RESTful API

RESTful API를 전반적으로 잘 설명해준 글이다. REST라는 것이 어떤 것인지도 처음알게 되었고 URI를 설계할 때 주의해야할 사항, HTTP 메소드 등 정말 훌륭한 정보가 잘 정리된 글이다. 앞으로 반복해서 읽으면 더욱 좋은 글이라고 생각된다. 꼭 완전히 습득될 때까지 다시 읽어보자.

0411 10 JavaScript Quiz Questions and Answers to Sharpen Your Skills

몇몇의 새로운 것을 알게 된 글이다. 이렇게 짧은 질문들을 이용해 몰랐던 JS메소드의 원리를 알 수 있게 돼서 좋다. Q9의 array Method binding은 처음 보는 예제로 bind가 저렇게도 되는구나라고 알게 됐다. 이런 글들은 자주 읽어주면 재미도 있고 좋을 것 같다.

0413 리액트에 대해서 그 누구도 제대로 설명하기 어려운 것 – 왜 Virtual DOM 인가?

React를 공부하면서 virtual DOM에 대해 공부를 할 수 있었던 글이다. Virtual DOM이 빠른 성능을 자랑하기 때문에 사용하는 것이 아닌 편리하게해서 생산성이 좋기 때문에 사용하는 것이라는 것도 알게 됐다.

0415 신입 개발자가 포트폴리오를 준비할 때 알아두면 좋은 것들

프로젝트 회고록을 매주 작성하면서 어떤 방향으로 작성을 하면 좋을지 항상 고민을 하면서 작성하는데 그 고민에 대한 답을 얻을 수 있었던 글이다. 항상 어떤 기술을 썼느냐보다 왜 그 기술을 사용했고, 개발하면서 어떤 문제점이 있고 어떻게 해결했냐에 집중을 해야겠다.

0416 map, reduce, filter를 유용하게 활용하는 15가지 방법

지난번에 읽었던 JS 고차함수의 활용 예시가 작성된 글이다. 이번에도 새로운 것들을 많이 배울 수 있었다. 특히 reduce의 comma operator에 대해서 새롭게 알게됐는데 이부분에 대해서 좀 알아봐야겠다.
앞으로 프로젝트하면서 하나씩 적용해보려고 노력해야겠다.

0419 깊은 복사와 얕은 복사에 대한 심도있는 이야기

결국 자바스크립트에서 깊은복사를 위한 메소드는 없다. 즉 깊은복사를 하기 위해서는 Lodash나 Ramda 같은 라이브러리를 사용해야되는데 성능상 좋지 않다. 그렇기 때문에 프로그래밍에서 깊은 복사를 사용할 때는 신중해야되고 꼭 사용해야되는건지 다시 한번 생각해보자.

0420 함수형 컴포넌트와 클래스, 어떤 차이가 존재할까?

진짜 좋은글이었다. 함수형과 클래스가 리액트에서 어떻게 다르게 동작하는지 배울 수 있었다.
핵심: 클래스의 this는 mutable이기 때문에 this.props는 mutabled하다. 반면에 함수형의 props는 immutable이다.
useRef에 대해서도 새로운 것을 알게됐고 다양하게 활용할 수 있는 방법을 배웠다.
후반부록 갈 수록 이해가 쉽지 않았다. 아직 useCallback, useReducer를 잘 알지 못해서 이해가 힘들었다.

0421 잘가, 클린 코드

마냥 리팩토링일 좋다고 생각하던 생각이 변하게 됐다. 리팩토링하는 과정이 재밌는데 그 중도를 잘 지키기 위해 리팩토링하는 목적에 대해서 항상 생각하면서 진행해야 될 것 같다.

0422UI 런타임으로서의 React

리액트가 어떻게 동작하는지 왜 이렇게 동작하는지 잘설명해준 글이다. 아직 완벽하게 이해되지는 않지만 평소에 궁금했던 배열에 컴포넌트를 넣을 때 왜 key값을 넣어줘야 되는지 알 수 있게 됐고 많은 것들을 알게 됐다. Den의 글을 항상 그렇지만 반복적으로 읽어야 겠다.

0423 useEffect 완벽 가이드

리액트를 배우는 입장이라면 무조건 봐야되는 글이라고 생각한다. 내가 이글을 조금만 더 일찍봤더라면 훨씬 좋았을 것같다. 항상 사용하면서도 확신이 없었던 useEffect에 대해 조금이라도 가까워질 수 있게해준 글이다.
지난번에 읽었던 글들이 이어져서 도움이 됐고 핵심은 리액트 hook은 클로져이기 때문에 함수내부에서 사용하는 변수는 그 당시의 props와 state이고 이 원리에 연장선으로 useEffect와 deps를 생각하면 이해가 쉽다.

0424 탄력적인 컴포넌트 작성하기

리액트의 컴포넌트를 활용할 때 주의해야될 점을 작성해준 글이다. 글이 주로 클래스기반으로 작성돼 있어서 완전히 이해할 수는 없었다. 하지만 클래스의 단점들을 보완하고자 hook이 나왔고 hook의 활용을 통해서 이글에서 말하는 주의해야될 점들을 보완할 수 있다고 한다. ESlint를 무시하지 말고 주의깊게 읽고 잘 활용하자는 생각이 들었다.

0426 Fix Like No One’s Watching

글을 읽소 지나쳤던 말들이 생각난다. 뭐 이정도는 넘어가자! 이런 부분을 정확하게 지적해주는 글이다. 눈에 드러나서 확 보인는 에러 뿐 아니라 모든 귀찮은 것들에 집중하는 습관을 기르자.

0427 좋은 코드란 무엇일까?

항상 고민하는 좋은코드에 대한 글이다. 구현하면서 항상 고민하는 주제인 것같다. 글에도 나왔듯이 정답은 없다고 생각한다. 그래도 좋은 코드를 작성하려고 고민을 하는 과정에서 더욱 성장하지 않을까 생각한다.

0429 사용자와 함께하는 당근마켓 마케팅 이야기

소소하게 읽을 수 있는 당근마켓의 이야기. 좋은 개발 문화가 있다고 알려진 당근마켓 저렇게 멋진 곳에서 일하면서 성장해보고 싶다는 생각이 든다.