한번에 이해하기는 쉽지 않았다. 다른 블로그글을 조금이나마 이해간 코드를 코드펜에 남겼다.
신기한게 Proxy로 만들면 객체가 나오는데 배열도 target에 적용한다음에 인덱스로 값을 get할 수 있다는 점.
확실히 set
,get
같은 상황에 추가적인 작업을 설정해 놓을 수 있으니까 유용한 것같다. 위의 예제에서도 옵저버패턴과 proxy를 함께 사용했는데 set
이 될 때 프록시로 자동으로 notify
가 되니까 편해보인다.
옵저버패턴은 상태를 요즘 점점 많이 다루게 되는데 유용하게 사용될 같은데 프록시와 함께 사용하면 훨씬 편리한 코드가 될 것 같다.
개발하면서 종종 만난 CORS 만날 때마다 찾아봤지만 읽어볼 때마다 조금씩 더 이해가 쉬워지는 느낌이랄까...?
네트워크도 공부를 좀하고 읽으니까 이전에 읽었을 때와는 달리 이해는 되면서 읽었다. 역시 아는 만큼 보이는 것 같다.
브라우저의 내부 구조에 대해 설명해주는 글이다. cs-10에서 cpu하고 프로세스 스레드에 대해서 조금이나마 공부해서 다행이었다. 아니었으면 1도 이해 못하고 읽기만 할 뻔했다. 후반부로 갈 수록 이해가 잘 안됐다. 크롬의 탭마다 프로세스를 할당한다고 듣기만했는데 실제로 정리된 글을 보니 좋았다. 이제는 보안을 위해서 사이트마다 프로세스를 할당하고 있다니 계속 발전하는게 너무 멋있다.
크롬의 네이게이션(사이트 이동)이 일어날 때의 과정을 소개해 주는 글이었다. 기본적으로 우리가 사용하던 기능들이 파싱을 해서 분석하고 수많은 로직을 거쳐서 진행된다는 것을 알게됐다. 이미 새로운 기능들이 하나씩 추가 되면서 더 빠르게 동작시키려 노력하는 것도 인상 깊었다. 이번 시리즈로 큰 흐름을 느껴보는것에 큰 의미가 있다고 생각한다.
HTML데이터를 수신하면 파싱하고 DOM tree를 만들어낸다. CSS도 레이아웃트리? 라는걸 만들어서 적용시키는 것같다. 중간중간 나오는 링크들 중에서 읽어보고 싶은 링크들이 있었다. 다음에 시간을 내서 읽어봐야겠다.
스크롤을 할 때 레스터화 또는 합성방식이 어떤 식으로 되는 것지 약간 알게 됐다.
크롬브라우저에서 이벤트의 진행과정에 대해 알 수 있었다. 이번 브라우저 시리즈를 가볍게 읽었지만 집중해서 읽어야 할 것 같다.
uesEffect
는 하나의 목적으로만 구현 (2개 이상의 상태를 조작하거나 한다면 분리하자.)useEffect
는 useEffect
시작에 바로 return해주는게 좋다.useEffect
안에서 사용하는 모든 변수들은 의존성배열에 추가최근 리액트를 처음 배우고 프로젝트를 진행하면서 디랙토리 구조를 어떻게 설계해야될까 고민이 많은데 하나의 방법에 대해 알게돼서 좋다. 컴포넌트들을 관리하기에 좋은 방법으로 생각된다.
React.momo
는 얕은 비교로 메모이제이션된 것을 사용할지 새로 리렌더링 할지 결정한다.React.momo
를 이용해 컴포넌트화하면 불필요한 리렌더링들을 막을 수 있다. React.momo
사용시 인자로 함수를 받는 경우는 그 함수에서 useCallback
을 사용해 함수변화를 최소한으로 해줘야지 의미가 있다.RESTful API를 전반적으로 잘 설명해준 글이다. REST라는 것이 어떤 것인지도 처음알게 되었고 URI를 설계할 때 주의해야할 사항, HTTP 메소드 등 정말 훌륭한 정보가 잘 정리된 글이다. 앞으로 반복해서 읽으면 더욱 좋은 글이라고 생각된다. 꼭 완전히 습득될 때까지 다시 읽어보자.
몇몇의 새로운 것을 알게 된 글이다. 이렇게 짧은 질문들을 이용해 몰랐던 JS메소드의 원리를 알 수 있게 돼서 좋다. Q9의 array Method binding은 처음 보는 예제로 bind가 저렇게도 되는구나라고 알게 됐다. 이런 글들은 자주 읽어주면 재미도 있고 좋을 것 같다.
React를 공부하면서 virtual DOM에 대해 공부를 할 수 있었던 글이다. Virtual DOM이 빠른 성능을 자랑하기 때문에 사용하는 것이 아닌 편리하게해서 생산성이 좋기 때문에 사용하는 것이라는 것도 알게 됐다.
프로젝트 회고록을 매주 작성하면서 어떤 방향으로 작성을 하면 좋을지 항상 고민을 하면서 작성하는데 그 고민에 대한 답을 얻을 수 있었던 글이다. 항상 어떤 기술을 썼느냐보다 왜 그 기술을 사용했고, 개발하면서 어떤 문제점이 있고 어떻게 해결했냐에 집중을 해야겠다.
지난번에 읽었던 JS 고차함수의 활용 예시가 작성된 글이다. 이번에도 새로운 것들을 많이 배울 수 있었다. 특히 reduce의 comma operator에 대해서 새롭게 알게됐는데 이부분에 대해서 좀 알아봐야겠다.
앞으로 프로젝트하면서 하나씩 적용해보려고 노력해야겠다.
결국 자바스크립트에서 깊은복사를 위한 메소드는 없다. 즉 깊은복사를 하기 위해서는 Lodash나 Ramda 같은 라이브러리를 사용해야되는데 성능상 좋지 않다. 그렇기 때문에 프로그래밍에서 깊은 복사를 사용할 때는 신중해야되고 꼭 사용해야되는건지 다시 한번 생각해보자.
진짜 좋은글이었다. 함수형과 클래스가 리액트에서 어떻게 다르게 동작하는지 배울 수 있었다.
핵심: 클래스의 this는 mutable이기 때문에 this.props는 mutabled하다. 반면에 함수형의 props는 immutable이다.
useRef
에 대해서도 새로운 것을 알게됐고 다양하게 활용할 수 있는 방법을 배웠다.
후반부록 갈 수록 이해가 쉽지 않았다. 아직 useCallback
, useReducer
를 잘 알지 못해서 이해가 힘들었다.
마냥 리팩토링일 좋다고 생각하던 생각이 변하게 됐다. 리팩토링하는 과정이 재밌는데 그 중도를 잘 지키기 위해 리팩토링하는 목적에 대해서 항상 생각하면서 진행해야 될 것 같다.
리액트가 어떻게 동작하는지 왜 이렇게 동작하는지 잘설명해준 글이다. 아직 완벽하게 이해되지는 않지만 평소에 궁금했던 배열에 컴포넌트를 넣을 때 왜 key값을 넣어줘야 되는지 알 수 있게 됐고 많은 것들을 알게 됐다. Den의 글을 항상 그렇지만 반복적으로 읽어야 겠다.
리액트를 배우는 입장이라면 무조건 봐야되는 글이라고 생각한다. 내가 이글을 조금만 더 일찍봤더라면 훨씬 좋았을 것같다. 항상 사용하면서도 확신이 없었던 useEffect에 대해 조금이라도 가까워질 수 있게해준 글이다.
지난번에 읽었던 글들이 이어져서 도움이 됐고 핵심은 리액트 hook은 클로져이기 때문에 함수내부에서 사용하는 변수는 그 당시의 props와 state이고 이 원리에 연장선으로 useEffect와 deps를 생각하면 이해가 쉽다.
리액트의 컴포넌트를 활용할 때 주의해야될 점을 작성해준 글이다. 글이 주로 클래스기반으로 작성돼 있어서 완전히 이해할 수는 없었다. 하지만 클래스의 단점들을 보완하고자 hook이 나왔고 hook의 활용을 통해서 이글에서 말하는 주의해야될 점들을 보완할 수 있다고 한다. ESlint를 무시하지 말고 주의깊게 읽고 잘 활용하자는 생각이 들었다.
글을 읽소 지나쳤던 말들이 생각난다. 뭐 이정도는 넘어가자! 이런 부분을 정확하게 지적해주는 글이다. 눈에 드러나서 확 보인는 에러 뿐 아니라 모든 귀찮은 것들에 집중하는 습관을 기르자.
항상 고민하는 좋은코드에 대한 글이다. 구현하면서 항상 고민하는 주제인 것같다. 글에도 나왔듯이 정답은 없다고 생각한다. 그래도 좋은 코드를 작성하려고 고민을 하는 과정에서 더욱 성장하지 않을까 생각한다.
소소하게 읽을 수 있는 당근마켓의 이야기. 좋은 개발 문화가 있다고 알려진 당근마켓 저렇게 멋진 곳에서 일하면서 성장해보고 싶다는 생각이 든다.