2024 05. 아티클 읽기

2일: Web: React Hooks의 등장 배경과 의의

원문 보기
클래스 기반으로 작업을 하던 나에겐, 함수 컴포넌트는 큰 변화로 다가왔다.
함수 컴포넌트에서 클래스의 생명 주기를 어떻게 구현할지가 제일 궁금했었고, 가장 먼저 useEffect를 찾아봤었다.

그리고 왜 클래스 컴포넌트가 버려졌을까에 대한 의문이 많았는데, 이 글을 통해 납득할만한 이유를 알게 되었다. (상태에 따라 그 결과 값이 의도치 않게 변한다는 문제)

 

3일: [React Anatomy] useState 의 동작 원리를 직접 구현하며 알아보자

원문 보기
useState가 closure의 원래로 동작한다는 것은 알고 있었지만, 구현 과정을 코드로 확인해 보니 쉬운 듯 어려웠다! 클로저까지는 괜찮았지만 갑자기 등장한 모듈 패턴부터 머리가 복잡해져서 이해하기 위해 더 열심히 본 것 같다.

모듈 패턴: JavaScript에서 비공개 변수와 메서드를 만들기 위해 사용되는 디자인 패턴
즉시 실행 함수 표현식(IIFE)을 사용하여 실행되며 데이터 캡슐화와 코드 조직을 통해 상태를 외부에서 직접 접근하지 못하게 하는 것이 목적이다.

 

7일: 프론트엔드 개발자에게도 AI가 필요할까요?

원문 보기
ChatGPT한테 이미지도 보낼 수 있다니! 앞으로 유용하게 써야겠다.
모든 코드를 AI한테 맡길 수는 없겠지만, 간단한 코드들은 대신시켜서 업무 시간을 단축하면 좋을 것이다.

 

9일: 개발자의 이름 짓는 법, 네이밍 컨벤션

원문 보기
다양한 네이밍 컨벤션의 사용처를 알게 되었다.
토스의 세종대왕 프로젝트나 슬랙을 통해 다 같이 컨벤션을 정하는게 인상 깊었다. 같은 팀에서 의견을 합치는 것도 어렵고 상황에 따라 항상 새로운 고민이 생기는데, 다같이 고민하며 맞춰가는 환경이 좋아 보인다.

 

11일: localhost 와 127.0.0.1의 차이점이 뭘까?

원문 보기
동일하지만, localhost는 DNS이다.

최근에 서버 변경 작업을 하며, 웹서버와 도메인을 연결하기 전에 hosts 파일을 조작한 적이 있었는데, 그 상황이 다시 기억이 났다.
역시 모든 배우고 알아야 직접 사용하거나, 다른 분들의 말을 쉽게 이해할 수 있는 것 같다.

 

16일: styled-components가 런타임에 css를 주입하는 방법

원문 보기
Styled component를 사용하면서 이렇게 편리할 수가! 언젠가 원리를 찾아봐야겠다~라고 생각만 했었는데, 해당 아티클 덕분에 자세하게 알게 되었다.
그리고 CSS-in-JS 방식이 성능이 안 좋다는 건 알고 있었는데, 그 자세한 이유를 드디어 알 게되었다.
편리하게 사용하는 만큼 내부 로직이 복잡하고, 동적인 스타일을 처리하기 위해 런타임에 많은 일을 한다.. 편리하게 사용하는 만큼 단점이 뚜렷하기에 해당 기술을 사용할 때는 프로젝트의 규모와 필요성을 먼저 판단해야겠다.

 

19일: 대형 웹 애플리케이션 Micro Frontends 전환기 (1)

원문 보기
Micro frontends에 관심이 있어 이전에도 찾아본 적이 있었다. 당시에 별도의 프로젝트를 만들고, 인프라에서 도메인에 따라 다른 프로젝트를 보여주는 방식은 이해를 했지만, Module federation 방식은 그 당시 이해하지 못해 그냥 넘어갔었다.

이 글을 통해 Module federation 방식을 드디어 이해하게 되었다! 완전히 모든 원리와 방식을 이해한 건 아니지만, '하나의 앱을 모듈 단위로 배포가 가능하고, 런타임에 통합하는 방식'이란 걸 알게 된 것만으로도 큰 성과라고 생각한다.
다음 내용은 컨퍼런스 발표 자료를 보면서 더 공부해야겠다.

 

21일: Alert, Confirm UI를 편하게 다루기 위한 고민과 해결법

원문 보기
업무에서는 UI 라이브러리를 사용하기 때문에, 다양한 UI를 구현하며 고민하는 시간이 적은 게 아쉽게 느껴진다.
그나마 클론 코딩 프로젝트를 하며 컴포넌트를 직접 구현하고 있지만 아직 초기 단계라 많이 부족하다.
지금은 바빠서 손을 놓고 있지만 빨리 복귀해서 여러 고민을 하고 싶다.

 

23일: 기술 너머, 모두를 위한 웹 접근성

원문 보기
웹 접근성에 대해 생각할 때 가장 중요한 건 ‘접근성’을 생각하는 것 자체에 있습니다.
요즘 접근성에 더욱 관심을 가지면서 코드에 접목시키고 있는데, 이전에도 지금도 모든 사용자를 고려하지 못했다는 사실이 가끔 압박감으로 다가왔다. 의기소침해 있는 나에게 위 문구는 큰 힘과 위로로 느껴진다. 할 수 있는 만큼이라도 접근성을 지키며, 사용자뿐만 아니라 내 코드를 보는 다른 누군가에게도 좋은 영향을 끼치고 싶다.

 

24일: 패키지 매니저의 과거, 토스의 선택, 그리고 미래

원문 보기
회사에서 패키지매니저로 npm을 사용하는데, “원래 쓰던 방식이니까”라는 생각으로 왜 npm을 사용하고, 다른 패키지 매니저를 고려하지 않고 매번 자연스럽게 npm만 찾았을까 싶다. 사실 이 게시글 이전까지는 npm과 yarn이 뭐가 다른 지도 몰랐다는 게 부끄럽다. 다음 프로젝트 때는 yarn을 한 번 써보는 것도?

 

28일: UX를 해치지 않는 팝업의 3가지 조건

원문 보기
좋은 팝업은 UI와 UX 라이팅이 모두 필요한 영역이라고 생각한다. 나는 다크 패턴 중에서도 팝업의 버튼 위치가 바뀌어있는 걸 제일 싫어하고, 가끔은 해당 서비스를 아예 이용하지 않기도 한다. 나만 예민한가 싶었는데, 팝업으로 이탈되는 사용자가 많다고 한다. 그만큼 중요한 팝업 UX! 마주할 수 있는 상황과 좋은/안 좋은 예시에 대한 그림이 있어 훨씬 읽기 좋고 내용도 좋았던 아티클이었다.