Library, Tool

상태 관리 라이브러리 비교: Redux vs Justand vs Recoil

서론 요즘 프론트엔드 개발은 비즈니스 로직이 복잡해짐에 따라 상태 관리가 점점 어려워지고 있다. 코드에서 사용하는 상태들이 많아지면서, 상태 관리는 더욱 중요해졌다. 상태들을 관리하고 어떤 상태 변화가 다른 상태 변화를 일으키는지 예측하는 게 어려워지고 있어, 이 글에서는 개인 프로젝트를 진행하며 상태 관리 라이브러리들을 선택할 때 영향을 미쳤던 요인들을 비교하고 정리해보겟다.Flux vs Atom 상태 관리 라이브러리들은 프론트엔드 개발에서 필수적인 부분이 되었다. 이들 중 대부분은 Flux 패턴이나 Atomic 방식으로 구현되어 있다. Proxy 기반의 발티오도 있지만, 대체로 개발자들은 Flux와 Atomic 중 하나를 선택한다. Flux 패턴은 top-down 방식을 따른다. 이는 데이터의 흐름이..

ESLint와 Prettier로 컨벤션 준수하기 with Webstorm

서론코드 컨벤션을 준수하는건 협업뿐만 아니라 클린코드를 지향하는데에도 필수적이다. 이를 도와주기 위한 툴로 여러가지가 있는데 그중에 가장 많이 쓰이는 eslint와 prettier를 webstorm에서 쓰는 방법에 대해 알아보고자한다. ESLint와 Prettier에 대하여 ESLint는 코드 스타일을 바꾸는데 효과적이다. 사용자가 규칙을 설정할 수 있기에 많이 쓰는 airbnb-style로 설정할 경우 스타일을 위반하면 경고문구가 출력된다. 예를 들어 airbnb-style의 경우 상수에 대문자 snakecase를 쓰는것을 권하기에 이를 준수하지 않은 경우 경고문구가 출력된다. Prettier는 코드 포맷을 바꾸는데 효과적이다. 프로젝트에서 일관된 코드 포맷을 가지게 하고 싶을때 쓰면 좋다. 예를 들어..

MSW로 실제 네트워크 환경에서 Mocking하기

개요 프로젝트를 벡엔드 개발자와 같이 하다 보면 API가 완성되지 않아 프론트 코드 구현에 어려움을 겪을 때가 있다. 왜냐하면 dummy data를 이용해 개발을 한다 하더라도 네트워크를 통한 실제 API 호출 환경과는 차이가 있기 때문이다. 이에 마감기한이 거의 다가와서야 개발을 시작할 수 있는 부분도 있는데 이를 위해 네트워크 환경에서 mocking을 할 수 있는 라이브러리인 msw.js에 대해 소개하고자 한다. Service Worker에 대해 MSW는 Mock Service Worker의 약자이다. 이 라이브러리를 이용해 실제 서버를 만들지 않고 네트워크 요청을 통한 테스트가 가능하다. 따라서 MSW는 service worker를 이용한 mocking 라이브러리이고 service worker에 대..

CSS정리: flexbox와 grid

서론 css의 모든 것은 주변에 box를 가진다. 따라서 element들을 잘 배치하기 위해서는, 좋은 layout을 위해선, 이를 잘 이해해야할 필요가 있다. css의 display속성에는 크게 inline과 block(outer display type)이 있다. 예를 들면 , ,  and 같은 태그들은 display type이 default로 inline이고  and 같은 태그들은 display type이 default로 block이다. 이 외에도 element들을 한 라인에 배열하기 위한 inline-block등이 있다. 그러나 inline-block은 반응형 웹사이트를 만들때 문제가 생기는데 width와 height로 크기, 위치를 지정하다 보니 특정 기기를 기준으로 layout을 만들 시 다른 ..