코드를 작성하기 전에 시도할 수 있는 것들

1년간 일하면서 겪은 시행착오와 개선 노력에 대해 이야기해볼게요. 코드 작성 전 요구사항 정리하기, 디버깅 행동 지도 그리기, 팀원과 구두로 논의하기 등을 통해 개발 프로세스를 개선하고 더 나은 결과물을 만들어가는 과정을 함께 나눠보려 해요.

2023 회고

디프만 13기 회고 (IT 동아리에서 뭘 얻을 수 있을까?)

16주간 디프만 활동을 하면서 고민한 내용과 경험을 공유하면서 앞으로 디프만 활동하시는 분들이 더 의미 있는 시간을 보냈으면 하는 바람으로 글을 작성해 봅니다.

글또 8기를 끝내며

글또 8기 회고록입니다.

React 렌더링 이해하기 (with useState)

React 렌더링과 setState의 동작 방식에 대해서 다시 알아봤습니다. 공식 문서와 소스 코드를 보며 잘못 이해한 부분을 바로 잡기 위한 과정을 정리해 봤습니다.

Form 다루기2: 불필요한 렌더링 방지하기

React에서 폼 상태 관리 및 최적화에 대한 고민을 정리해봤습니다.

Form 다루기1: 폼과 입력 컴포넌트 구조

다양한 Form과 Input을 다루면서 어떻게 하면 디자인 시스템을 활용하고 반복되는 로직을 줄일 수 있을까 고민해 봤습니다.

Axios Instance와 Interceptor: HTTP 요청과 응답 관리하기

Axios의 Instance와 Interceptor를 활용하여 기본 설정과 공통 처리 로직을 중앙집중적으로 관리하여 중복 코드를 줄일 수 있었습니다. 또한, 필요한 경우 Instance와 Interceptor를 통해 요청마다 다른 설정과 로직을 유연하게 정의할 수 있었습니다.

API 요청 상태를 시각적으로 전달하기 : FE의 구현 경험

FE에서 API 요청을 보낸 뒤 해야할 일이 무엇일까요? API 요청은 비동기적인 요청으로 순서가 보장되어 있지 않기 때문에 얼마나 기다려야하는지 알기 어렵습니다. 이 때, FE에서 응답을 기다리면서 사용자에게 적절한 경험을 보여주다가 응답이 돌아오면 다음 해야할 일을 해야한다고 생각합니다. 해당 기능을 구현하기 위해 React에서 custom hooks와 HOC를 활용해봤습니다.

여기저기 떨어진 Route 관련 코드를 모으자

프로젝트를 진행하며 라우팅을 효과적으로 다뤄야 할 필요성을 느꼈습니다. react-router-dom(v6)에서 제공하는 useRoutes와 Outlet를 활용하여 라우팅과 관련된 코드를 모아 응집도를 높였습니다.

다크모드 개발기(feat. css variable)

CSS 변수를 활용한 다크모드 개발 과정을 소개합니다. 초기 렌더링 시 깜빡이는 에러(dark mode flash)와 iframe 댓글 컴포넌트(utterance, giscus)에 다크모드가 적용되지 않은 에러를 해결했습니다.

글을 잘 쓰고 싶은 이유 (feat. 글또 8기 다짐)

글쓰기를 꾸준히 해야겠다는 계기와 글또 8기 다짐에 관한 글입니다.

Storybook 도입 및 사용 후기(컴포넌트 주도 개발)

프로젝트를 진행하며 스토리북을 활용한 컴포넌트 주도 개발에 대해 고민해보고, 프론트 개발자로서 디자이너와 협업하는 과정에 대해 고민해봤습니다.

MSW를 활용한 API Mocking

MSW와 faker.js를 활용해 Mocking 환경을 구성해 프론트 엔드 개발 생산성을 개선해본 경험에 대한 글입니다.

CORS란? (feat. proxy를 활용한 해결방법)

웹 개발을 하다보면 cors 이슈를 한 번쯤은 경험하게 됩니다. CORS이슈를 만날 때마다 여러 블로그글에 나와있는 해결방법을 따라하기 급급했는데 이번 기회에 CORS가 무엇인지 개발과정에서 어떻게 다뤄야할지 공부해봤습니다.