(21년 4월) 기술 아티클 읽기 챌린지!
in Review Tech Articles on article
매일 매일 한 개의 기술 아티클 읽기 도전 중 (2021-04-01 ~ 2021-04-30)
4월
1일
코드스쿼드 코드리뷰를 통해 알게된 Proxy 객체. Proxy를 사용하여 옵저버 패턴을 구현할 수 있다는 것을 알게 되었다. Proxy 객체를 사용하는 방법은 여러가지지만, 내가 짜는 코드에 Proxy를 어떻게 적용해볼지는 아직 미지수다. Proxy는 여러가지 행위 (조회, 열거, 함수 호출 등)에 커스텀 동작을 정의할 수 있다.
2일
최근 기상청 API를 사용하여 프로젝트를 구현하던 중 CORS 에러를 마주했다. 이 글을 통해 먼저 CORS가 무엇인지 이해했다면 브라우저에서 fetch 요청을 보내고 머리를 감싸쥐며 스트레스를 받을 일은 없었을텐데.. CORS 에러를 계속해서 마주하고 있다면 시간내서 읽어보자!
3일
프론트엔드 개발자라면 브라우저가 어떻게 동작하는지 이해하는 것은 필수다. 브라우저의 동작 방식 이전에 CPU, GPU, 프로세스 그리고 스레드에 대해 간략하게 설명한다. 항상 들어가는 크롬, 그리고 매번 새로운 창을 열기 위해 눌렀던 탭에서 많은 작업들이 이루어지는 걸 알게 되었다. 크롬에는 서로 다른 프로세스들이 존재한다. 이러한 프로세스들은 서로 제어하는 부분들이 다르다. 또, 각 탭은 독립적인 렌더러 프로세스에 의해 실행된다. 자세히 설명되어 있었지만 처음 마주하는 단어들이 많아 오늘 하루만 읽고 모든 것을 이해할 수는 없을 것 같다. 시간이 날 때 틈틈히 계속 보는걸로..
4일
어제 읽은 브라우저 내부 살펴보기 1의 다음 편이다. 웹 페이지가 어떤 단계들을 거쳐 화면에 그려지는지 설명해준다. 프로젝트에 캐시스토리지를 사용하며 서비스워커와 함께 사용된다는 글을 MDN에서 읽은 기억이 있는데, 이 글에서도 서비스워커에 대해 간략한 설명이 있다. 오늘 글의 핵심은 ‘사용자가 사이트를 요청한 이후, 브라우저는 어떤 액션을 취하고 페이지 렌더링을 준비하는가?’이다. 단순히 URL을 입력했지만 4단계나 된다. 추가로 작업하는 것까지 생각한다면 5단계? beforeunload 이벤트가 있다는 것도 알게되었다. 다른 페이지로 넘어가기 전 한번 더 확인한다.
5일
DOM, CSSOM 등 브라우저가 리소스를 어떻게 화면에 렌더링을 해줄까? HTML 문서를 바탕으로 브라우저는 어떠한 절차를 통해서 우리에게 보여주는 걸까? 와 같은 질문들에 명쾌한 대답을 해주는 글이다.
6일
최신 브라우저 시리즈의 마지막 글. 항상 이벤트와 핸들러를 사용했지만 몰랐던 부분들을 짚고 넘어갈 수 있다. 이후, 더 공부해야할 개념은, Lighthouse, 성능 측정 방법, 사이트에 기능 정책 추가’
7일
리액트를 배우며 관련 글을 찾다가 발견했다. useEffect를 사용할 때 알면 좋을 네가지 팁을 알려준다. 아직 useEffect의 기초적인 사용법만 알고 있지만, 추후 개발할 때 적용시킬 몇몇의 예시들을 기억하고 있어야겠다.
8일
리액트로 개발하며 파일이 정말 많아져서 관리하기가 힘들게 느껴진다. 아토믹 디자인을 적용하여 아주 작은 단위부터 페이지 단위까지 디렉토리를 보다 쉽게 관리할 수 있게 됐다. 아직 어떤 파일을 atom 혹은 molecules 폴더에 넣어야할지 고민이 된다.
9일
React.memo, 아직 내게는 사용하기 어려운 hook이다. 불필요한 리렌더링을 건너뛸 수 있는 유용한 hook.
10일
현재 백엔드와 협업하여 프로젝트를 진행하고 있다. 항상 혼자, 혹은 두명의 프론트가 모여 개발을 했었지만 이번에는 백엔드도 함께 한다. 처음 백엔드와 같이 개발을 하면서 규칙들을 정하기 위해 많은 대화를 나누었다. 규칙에서 빠질 수 없는 한가지를 고르라면 서로가 API를 통해 데이터를 주고 받는 부분이 아닐까 생각된다. 막연히 알고 있던 RESTful API에 대해 알아봤다.
11일
현재 자바스크립트에 대해 얼마나 이해하고 있는지 간단히 체크할 수 있는 문제들이 나열되어 있다.
10 JavaScript Quiz Questions and Answers to Sharpen Your Skills
12일
SSR, CSR의 차이가 무엇인지, 어떠한 이유로 네이버 모바일은 SSR을 도입하게 되었는지 알려준다. 나는 현재, 리액트로 프로젝트를 진행하면서 CSR의 기본적인 개념들만 알고 있다. 이 글을 통해 네이버 모바일은 SSR 아키텍처가 가질 수 있는 장점들을 알려준다. 가장 흥미로운 점은 ‘SSR을 사용하면 프런트엔드 영역과 백엔드 영역을 완전히 분리한다’ 라는 말이다. 또, CSR도 함께 적용해 각각의 장점들을 이끌어 낼 수 있다는 점도 SSR을 도입한 이유 중의 한가지가 아닐까 싶다. 나도 언젠가 react와 nextjs를 함께 사용해보고 SSR을 경험할 수 있겠지.
13일
코드스쿼드 동기들과 함께 리액트를 공부하며 Virtual DOM이라는 것을 알게 되었다. 하지만 이해한 것 같으면서도 다른 사람에게 설명을 하라하면.. 이번 기회를 통해 동기들과 Virtual DOM이 정확하게 무엇인지 알아가기 위해 이번 글을 읽게 되었다. 가상의 DOM을 통해 연산을 먼저 한 후, 브라우저의 연산 과정을 줄인다. 글 하단 추가내용을 확인해보면 이런 말이 있다. 리액트 입문자들 중에서 일부 사람들이 오해하고 있는것이, 리액트 = 빠르다! 인데, 이는 잘못된 인식입니다. 최적화 작업을 잘한다면 리액트를 사용하는 것 보다 빠르다. 그러나 생산성을 따지자면??
14일
최근 오디오채팅으로 기반으로 한 클럽하우스가 인기를 얻고 있다. 클럽하우스가 급속도로 성장하면서 UX를 중심으로 어떤 문제가 있고 어떻게 해결할 수 있을지 설명해주고 있다. 단순하게 넘어갈 수 있을 UX 문제일 수 있지만 좀 더 세밀하게 살펴본다.
15일
오일나우 팀에서 쓴 블로그 글. 코드스쿼드에서 개발 공부를 하면서 가끔 취업에 대한 고민을 한다. 교육이 끝나고 취업을 준비할 때 포트폴리오를 준비하게 될 텐데… 이 글이 방향을 잡는데 도움이 되었다. 프로젝트를 준비하는 과정을 정리하며, 또 단순히 프로젝트를 끝맺는 것에 의의를 두는 것이 아니라 이후에도 계속 프로젝트를 발전시켜나가는 것이 중요한 것 같다.
16일
Javascript를 쓰다보면 메소드 체이닝을 이용해 보다 간편하고 보기 쉬운 코드를 짤 수 있다. 자주 사용하는 map, reduce, fitler를 더 효율적으로 짜는 예시를 보여준다.
17일, 18일
주말, 오랜만에 쉬었다.
19일
자바스크립트를 사용하면서 객체를 복사하여 사용하는 경우가 많았다. 그때마다 얕은 복사 혹은 깊은 복사에 대한 문제를 가끔 마주할 수 있었다. 이번 글을 통해 얕은 복사와 깊은 복사의 차이가 무엇이며, 어떠한 방법으로 깊은 복사를 진행할 수 있는지도 확인할 수 있었다.(JSON.stringify or library-Lodash, Ramda 사용) 하지만 깊은 복사를 해야하는 상황이 온다면 블로그의 마지막 문단이 떠오를 듯.
깊은 복사를 하기 전에 과연 깊은 복사를 무리하면서까지 해야하는지 아키텍쳐 관점에서 다시 한 번 생각해봄이 좋지 않을까 하고 생각한다. - watch 기술 블로그
20일
리액트를 처음 배울 때 공식문서를 읽으며 리액트를 클래스로 먼저 접했다. 이후, Hook이 생기고 나서 클래스로 개발하며 가질 수 있었던 장점을 함수형 컴포넌트에서도 똑같이 가질 수 있게 되었다. 함수형 컴포넌트와 클래스의 차이는 무엇일까? 본문에서는 무엇이 더 좋냐를 따지는 것이 아니라 하지만… 읽으면서 함수형 컴포넌트가 더 좋은데? 라는 느낌을 받게 된다.
21일
글을 읽으며 공감가는 문장들이 많았다. 단순히 나의 코드가 짧아지고 가독성이 좋아보이는게 좋아서 코드를 깔끔하게 짜려했던 게 아닐까? 되돌아 본다.클린코드는 좋지만, 무작정 클린코드를 맹신하며 코드를 고치는 것은 바람직하지 못하다. 본문에 하나의 단계일 뿐입니다라는 말이 와 닿는다.
22일
리액트는 어떻게 동작할까? UI 런타임의 관점으로 기본적인 리액트의 동작 방식을 약32분의 방대한 분량의 글로 설명해주고 있다. 아직 모든 것을 이해할 순 없지만 반복해서 읽어봐야겠다. 리액트를 더 깊게 이해할 수 있도록 도와준다.
- 런타임이란? 런타임(영어: runtime→실행시간)은 컴퓨터 과학에서 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 말한다. - 위키백과
23일
useEffect는 도대체 어떻게 작동하는 걸까? 내가 쓰면 왜 Eslint에 자꾸 걸리지? 제대로 사용하는 것은 맞나? 이러한 의문들을 풀어줄 수 있는 글이다. 앞서 22일에 읽었던 UI 런타임으로서의 React를 먼저 읽으면 더 도움이 된다.
24일
Dan Abramov의 Overreacted 블로그를 연속해서 계속 읽는 중. 모든 글이 내게 정말 큰 도움이 되고 있다. 이번 글은 eslint 스타일 충이 되지 말라는 간략한 메시지와 함께 글을 시작한다. 코드가 제대로 작동하고 로직에 문제가 없는데 eslint에 걸린다면, 내가 사용하고 있는 eslint가 필요한가? 한번 더 생각해야한다.
완벽히 유효한 코드를 들고 와서는 “React가 이 코드에 대해 불평해요”라고 말하지만, 사실 불평하고 있는 것은 그 사람들의 lint 설정인 경우를 저는 수도 없이 봐왔습니다!
몇몇의 예시들이 클래스로 작성되어 있어 완전히 이해하지는 못했지만 글이 말하고자 하는 핵심과 흐름을 이해하려 노력했다.
25일
소프트웨어 아키텍처 패턴이 이렇게나 많아? 내가 알고 있는 건 MVC 패턴 뿐! 본문 마지막에 각 아키텍처 패턴의 장단점을 요약해서 보여주고 있다.
26일
오늘은 다시 Dan의 블로그. 거슬리지 않아서, 너무 작은 이슈이지만 많은 것을 바꾸게 만들어서, 갖가지 이유로 나도 모르게 쌓여가는 기술적 부채들을 어떻게 해야할까?
27일
좋은 코드가 무엇인지 한번 더 생각하게 된다. 중복된 코드가 보이면 클린코드를 한답시고 하나로 합치는 작업을 많이 했었다. 이전에 읽었던 Dan 블로그에서도 클린코드충이 되지 말라는 격언이 있었다. 확장성을 고려하고 많은 예외들을 생각한다면 나누는게 해가 될 수도 있다. 요즘 파일 디렉토리를 어떤 구조로 가지고 있어야 하는지 고민이 많이 된다. 그 부분에 대해서도 이야기를 해주어 도움이 많이 되었다.
28일
예전에 DnD(drag and drop)을 구현하면서 HTML5에서 지원하는 wep api를 사용했었는데, 이분은 단순히 마우스 이벤트로만 to-do list를 구현하였다. 깔끔한 설명과 코드들 때문에 이렇게 저장해놓는다.
29일
오랜만에 쉬어가는 느낌으로 당근마켓의 마케팅 이야기를 읽었다. 놀면뭐하니에서 당근마켓을 통해 자전거를 가르쳐주는 편을 재밌게 봤었다. 단순하게 생각했던 중고거래 플랫폼이 이렇게나 커지고 영향력을 끼칠 수 있다니… 당근마켓 중고거래 범위를 바로 옆 이웃까지 작게 만들겠다는 말을 유튜브영상에서 얼핏 본 것 같았는데. 그렇게 될 수 있을까?
30일
글이 조금 어려웠다. IAA와 IAP와의 하이브리드 비즈니스 모델이 무엇인지 잘 모르는 상태에서 글 전문을 읽기에는 이해가 쉽지 않았다. 비트망고가 기존 성과를 늘리기 위했던 전략의 3가지는 1. 게임 레벨 밸런스, 2. 게임 경제 밸런스, 3. 개인화된 머천다이징 최적화이다.
