[글또 10기]프론트엔드 큐레이션 글들을 읽어보자!(5~8회차)

이제 2025년도 2달이 지나가고 3월이 되었습니다. 저는 그동안 큐레이션에 선정되진 않았는데요.

한번 더 큐레이션 글들을 봐야겠습니다.

그래서 제작한 이번 주제! 프론트엔드 큐레이션 글들을 읽어보자! 2편으로 왔습니다.

재미있게 봐주세용

혹시 글또 큐레이션에 대해 잘 모르시는 분은 이전 글을 참고해주세요.

큐레이션 살펴보기

이번 큐레이션 살펴보기는 기술 스택 별로 살펴볼 예정입니다. 이미 얼추 어떤 유형의 글이 있는지 알고 있으니까요.

온전히 제가 보면서 정리해봤습니다.

그리고 기술 스택은 뭔가 이게 더 어울릴 것 같다 싶은 부분으로 정했습니다.

또한 제 의견이 좀 많이 주관적이니 댓글로 반박 환영하고, 링크를 통해 한번 더 글을 읽어주시면 되겠습니다.

CSS

https://velog.io/@ainochi95/CSS%EC%9D%98-%EC%83%88-%EB%A1%9C%EA%B3%A0-Color-rebeccapurple%EC%97%90-%EA%B4%80%ED%95%9C-%EC%9D%B4%EC%95%BC%EA%B8%B0

• CSS의 새 로고 색깔에 관한 이야기
• 어느 날 CSS의 새 로고 색깔과 관련한 기사를 보고 해당 기사의 이야기를 찾아봄
• 글의 순서는 다음과 같음
  1. 이 내용을 소개하게 된 이유
  2. 이 내용과 관련된 인물 소개
  3. 보라색이 왜 rebeccapurple이라는 이름이 붙었는지 시간 순으로 설명
  4. 10년 뒤, 새로운 CSS로고 색에 관한 논의 과정을 시간 순으로 설명
  5. logo.css 저장소 소개 글 해석
  6. 마무리
• 원래 기사는 정말 단순하게 해당 사건에 대해 이야기 했는데, 여기서 나아가 두가지 사건을 나누어 직접 찾아보고 해석한 것이 인상깊음
• 마지막으로 관련이 깊은 해당 인물인 에릭 마이어의 개인 사이트 글을 해석하면서 뭔가 여운을 줌
• 하나의 스토리를 몰입감 있게 풀어냄

JavaScript(TypeScript)

https://d5ng-blog.vercel.app/JavaScript/reflow

• Reflow와 관련한 글
• 글의 순서는 다음과 같음
  1. Reflow를 작성하게된 계기
  2. Reflow 설명
  3. 의문에 대한 해답 제시
  4. 마무리
• Chrome 개발자도구의 Performance 탭을 활용하여 Reflow를 설명함
• 왜 이렇게 되는지 의문을 던지며 깊게 고민하고 탐구는 것이 인상깊음

https://wormwlrm.github.io/2024/12/30/String-Normalize.html

• nomalize 메서드와 관련한 글
• 글의 순서는 다음과 같음
  1. 서론 - 주어진 문제를 normalize메서드로 해결함
  2. 유니코드란?
  3. 유니코드의 등장배경
  4. 유니코드의 특징
  5. JS에서의 유니코드
  6. 마무리
• 처음에 GPT로 문제를 해결했다는 솔직함에 놀람
• 실제 유니코드 공식문서를 참고하여 작성함
• 다양한 JS코드로 특정 케이스에 대한 궁금증을 해소할 수 있음

https://blog.sjoleee.info/posts/date

• JS의 시간 측정과 관련한 글
• 글의 순서는 다음과 같음
  1. 문제 제기
  2. 컴퓨터에서 다루는 시간
  3. 인간이 다루는 시간
  4. 컴퓨터와 인간이 다루는 시간이 다른 이유
  5. ISO 8601
  6. JS에서 시간 다루기
  7. 마무리
• 실제 참고한 부분 마다 참고 링크를 달아줌
• 헷갈릴 수 있는 부분들이 많아보이는데, 예시 코드 등으로 명확하게 설명해줌

https://witch.work/ko/posts/javascript-dance-with-with-statement#with%EC%99%80-%EA%B4%80%EB%A0%A8%EB%90%9C-%EB%85%BC%EB%AC%B8

• JS의 with문을 탐구한 과정을 담은 글
• 글의 순서는 다음과 같음
  1. 서론
  2. 탐구하게 된 계기
  3. MDN 문서 번역 및 원문 기여
  4. with문과 관련한 논문 읽고 코드 작성
  5. 마무리
• 누군가에겐 오래된 레거시로 무시될만 하지만, JS와 관련한 역사를 읽고 더 나아가 MDN 문서를 찾아본다는 것에서 JS에 대한 엄청난 애정이 느껴짐
• 트위터(X)에서 개발과 관련한 이야기가 많이 오간다는 사실이 흥미로움

React

https://velog.io/@bo-like-chicken/%EC%9D%B4%EC%83%81%EC%A0%81%EC%9D%B8-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%EC%9D%98-%ED%8A%B9%EC%A7%95-%ED%81%B4%EB%A6%B0-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%EB%A5%BC-%ED%86%B5%ED%95%B4-%EB%B0%94%EB%9D%BC%EB%B3%B8#%EC%9D%B4%EC%83%81%EC%A0%81%EC%9D%B8-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98

• 아키텍처 관련 글(리액트 코드가 많아서 리액트로 분류함)
• 글의 순서는 다음과 같음
  1. 서론: 아키텍처 글을 쓰게된 이유
  2. 아키텍처의 특징 3가지
  3. 마무리
• 이 글의 상징이 잘 돋보임(스키야키)
• 프론트엔드에서 아키텍처 관련 글을 많이 못봤는데, 주제를 잘 정한 것 같음(SEO 측면에서 블루오션이라 생각됨)
• 정답이 없는 분야이나, 이를 어떻게 해결해나갈지 방안을 제시해줌

https://medium.com/@howyoujini/react-fiber-architecture-b41ca01c9d21

• React의 Fiber 아키텍처 관련 글
• 글의 순서는 다음과 같음
  1. 서론: 해당 지식을 공부하게된 계기
  2. 초기 React에서 사용한 알고리즘 소개 + 직접 구현
  3. Fiber 아키텍처를 적용한 알고리즘 소개 + 직접 구현
  4. 마무리
• 직접 구현했다는 부분에서 인상깊음(과연 필자였다면 구현까진 안해봤을 것이다..)
• React Conf나 fiber 아키텍처 깃허브 저장소 까지 외국 자료들을 직접 참고함

Next.js

https://velog.io/@bbbjihan/NEXTPUBLIC-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98%EB%A5%BC-%EB%B9%8C%EB%93%9C-%EC%9D%B4%ED%9B%84%EC%97%90-%EC%88%98%EC%A0%95%ED%95%A0-%EC%88%9C-%EC%97%86%EB%82%98-%ED%95%A8%EA%BB%98-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

• Next.js의 환경변수와 관련된 글
• 글의 순서는 다음과 같음
  1. 서론(문제 발생)
  2. 환경변수 알아보기
  3. 문제 해결 방법 나열
  4. 마무리
• 직접 초기 세팅 환경에서 환경 변수에 대해 설명함
• 환경 변수와 관련한 next.js 공식문서를 참고하여 작성함
• 문제에 대한 대안을 3가지 나열함으로써 해당 문제에 대한 고민을 잘 드러냄

https://velog.io/@bbbjihan/Next.js-%EC%BA%90%EC%8B%B1-%EB%95%8C%EB%AC%B8%EC%97%90-Axios-%EC%9D%B8%ED%84%B0%EC%85%89%ED%84%B0%EB%A5%BC-%ED%8F%AC%EA%B8%B0%ED%95%98%EB%9D%BC%EA%B3%A0-Axios-adapter-%EC%84%A4%EC%A0%95%EC%9C%BC%EB%A1%9C-Next.js-caching-%EC%A7%80%EC%9B%90-%EB%B0%9B%EA%B8%B0

• Next.js의 캐싱을 axios에서 사용하는 방법에 대한 글
• 글의 순서는 다음과 같음
  1. 문제 제기
  2. 해결 방법 살펴보기
  3. 직접 작성해서 확인하기
  4. 테스트하기
  5. 결과
  6. 마무리
• 직접 각 케이스마다 얼마나 걸리는지 테스트 해보는 것이 인상깊음
• 그리고 next.js와 axios의 소스코드를 살펴보고 비교한 부분에서 지식의 깊이가 깊게 느껴짐

https://blog.huns.site/blog/posts/dev/research/improve-seo-of-my-blog

• Next.js로 만든 블로그의 SEO를 개선하는 과정이 담긴 글
• 글의 순서는 다음과 같음
  1. 문제 제기(SEO의 부재)
  2. 문제 분석
  3. 목표 설정
  4. 실제 구현
  5. 구현 결과
  6. 마무리(좋은 점, 아쉬운 점, 앞으로 나아갈 점)
• 마지막 마무리 부분에서 KPT 회고가 생각나서 인상깊음
• 여러 해야하는 작업들을 병렬로 처리하지 않고, 직렬로 처리함으로써 독립적으로 집중이 잘됨

https://witch.work/ko/posts/blog-auto-translation

• Next.js 블로그 영어 버전 도입관련 글
• 글의 순서는 다음과 같음
  1. 영어 버전 도입 이유 설명
  2. GPT API 적용
  3. 블로그에 영어 버전 적용
  4. 파일 변경 시 메일보내는 기능 구현
  5. 마무리
• 어떻게 의사결정하는지 합리적으로 이야기함
• 목차를 .으로 구분하여 지금 어디에 있는지 쉽게 확인 가능함
• 예시 코드가 아닌 실제 코드를 보여줘서 복잡하지만 이해가 더 쉬웠음

Web

https://seri-log.netlify.app/web_font_optimization/

• 웹 폰트 최적화와 관련된 글
• 글의 순서는 다음과 같음
  1. 서론
  2. 문제 분석(폰트의 용량이 큰 이유)
  3. 폰트 형식
  4. 폰트 최적화 방법
  5. 최적화 결과
• 이미 한번 최적화된 폰트를 한번 더 최적화하는 과정을 거침
• 최적화 방법에 대해 2가지 대안을 제시하고, 이 중 하나를 선택하는데, 명확한 이유를 제시함
• 그리고 그 대안 중에서 직접 그 대안을 사용할 툴을 선정하여 어떻게 최적화 했는지 제시함
• 글 자체가 생각보다 짧아서 읽는 것 자체는 편안함

https://springfall.cc/article/2025-01/ga

• Google Analytics(GA) 설정과 관련한 글
• 글의 순서는 다음과 같음
  1. GA 설명
  2. GA 용어 설명, 적용하기
  3. 클릭 이벤트 데이터 수집하기
  4. 마무리
• 사전 지식과 다루지 않는 부분을 언급하며 이 글을 읽으면 좋을 독자를 알려줘서 친절하다 생각됨
• 용어를 알려주는 부분도 친절하게 다가옴
• 이미지를 최대한 많이 사용한 것이 보임

Project

https://medium.com/@howyoujini/gravidot-0-1-0-%EB%8B%A4%EA%B0%99%EC%9D%B4-%EC%95%84%EC%9D%B4%EB%94%94%EC%96%B4%EB%A5%BC-%ED%84%B0%EC%B9%98%ED%95%B4%EB%B3%BC%EA%B9%8C%EC%9A%94-%EF%B8%8F-f814499cd39c

• Gravidot 버전 0.1.0 프로젝트와 관련한 글
• 글의 순서는 다음과 같음
  1. 프로젝트 만들게된 계기
  2. 프로젝트 핵심 원리(멀티 터치)
  3. 기술 스택
  4. 프로젝트 초기 세팅
  5. 프로젝트 어려운 점
  6. 앞으로 업데이트 할 기능들
• 멀티 터치를 통해 한 손으로 도형을 간단하게 만든다는 것이 인상깊음
• 기술 스택에 대해 자세하게 작성함
• 글을 읽다보면 자신의 의견에 대해 소신있고, 강하게 이야기한다는 느낌이 들음

https://velog.io/@sumi-0011/figma-plugin-webp

• Figma 플러그인 프로젝트와 관련한 글
• 글의 순서는 다음과 같음
  1. 서론
  2. 왜 플러그인을 만들었는가
  3. 사용할 플러그인 기능 정하기
  4. 플러그인 구현하기
  5. 마무리
• 프로젝트 구현 이외에 개발에서 신경썼던 부분이나, 개선하고 싶은 부분을 이야기 한것이 인상깊음
• 글 자체에 친절하게 정리한 것이 눈에 들어옴

https://gamguma.dev/post/2025/01/state-machine

• 유한 상태 기계를 활용한 상태 관리 적용 글
• 글의 순서는 다음과 같음
  1. 유한 상태 기계 설명
  2. 프로젝트에서 마주한 문제 설명
  3. 구현 과정 설명
  4. 마무리
• 목록을 활용하여 깔끔하게 작성함
• 예시 코드를 한글로 작성한 것이 흥미로움

https://sungpaks.github.io/chrome-extension-performance-optimization/

• 햄부기 프로젝트 최적화 글
• 글의 순서는 다음과 같음
  1. 문제 제기
  2. 배경 지식 설명
  3. 1차 성능 최적화
  4. 오류 수정
  5. 성능 테스트
  6. 2차 성능 최적화
  7. 마무리
• reflow를 줄이는 방법에서 더 나아가 성능 측정한 데이터를 분석하는 코드를 만들고, 레이어를 줄이는 과정까지 보여줌(정말 자세하고, 인상깊다 생각함)

숫자로 보는 큐레이션 5회차 ~ 8회차

• 총 큐레이션 수: 17
• CSS: 1
• JS: 4
• React: 2
• Next.js: 4
• Web: 2
• Project: 4

프론트엔드 큐레이션의 공통점

이번에도 큐레이션 글들을 읽고 정리해보며 개인적으로 느낀 공통점에 대해 설명해보겠습니다.

명확성

글 자체에 주장을 강하게 할 만큼 사실을 기반하여 근거를 만들어 내는 것에 많이 주목했습니다.

특히 개인적으로 ~~ 할 것입니다. 가 아닌 ~~ 입니다같이 이야기하는 습관이 독자에게 신뢰를 줄 수 있겠더라구요.

참고하는 자료의 수준

이번에도 참고하는 자료의 수준이 참으로 뛰어나다고 생각합니다.

특히 외국의 공식문서나 영어자료를 참고하여 어쩌면 한글로만 봤다면 모를 가장 최신의 글을 봐서 참 좋았다 생각합니다.

저도 어서 영어 공부를 좀 해야겠습니다.

탐구하는 수준

이번에 보면 딥다이브한 지료들이 굉장히 많았습니다.

예를 들어, 그냥 넘어갔을 React fiber도 한번 코드로 구현해보며 이렇게 동작하니 ~~한 이점을 남긴다는 글과, 기존 React의 알고리즘도 구현해보며 이렇게 동작해서 ~~한 단점이 있다는 식의 글도 보기 좋았습니다.

새로 알게된 커뮤니티

이제 알게된 개발자 커뮤니티가 있는데, 바로 트위터(X)입니다. 생각보다 많은 분들이 트위터로 개발이야기를 하더라구요.

뭔가 트위터 특유의 폐쇄성이 개발자 커뮤니티와 잘 맞아서 그런 것 같습니다.

저도 한번 트위터에 가입하여 개발 이야기를 나눠봐야겠습니다.

마무리

이렇게 해서 큐레이션 5~8회차까지 회고와 기술이 아닌 기술 스택 별로 한번 살펴봤습니다.

솔직히 1~4회차를 보고 와서 뭐 다른게 있나 싶었지만, 그래도 많이 깨닫고 가네요.

앞으로 마무리 9~12회차도 많은 관심 부탁드립니다.

피드백과 반박은 환영입니다.