Library, Tool

Git의 동작원리

Git의 버전관리 Git은 분산 버전 관리 시스템(이하 DVCS)으로, 각 클라이언트가 전체 저장소의 복사본을 소유한다. 이는 중앙 서버에 대한 의존성을 줄이고, 네트워크 연결이 불안정한 상황에서도 작업을 지속할 수 있게 한다. 모든 커밋은 sha-1을 통한 Hash를 가지며, 저장하기 전 checksum을 통해 검사하므로 데이터의 무결성을 보장한다.DVCS에서는 클라이언트가 단순히 최신 파일을 체크아웃하는 것이 아니라 전체 저장소를 복제한다. 따라서 과거 버전으로 돌아갈 때 Git은 서버할 필요 없이 로컬 데이터베이스에서 직접 읽어온다. 또한 대부분의 Git 작업은 로컬 파일과 리소스만으로도 수행할 수 있어, 네트워크상의 다른 컴퓨터로부터 정보를 받을 필요가 없다. 따라서 깃의 동작은 매우 빠르다. G..

CSS Framework들의 특징과 장단점 비교 (tailwind, styled-componets)

Introduce CSS 프레임워크를 선택하는 것은 웹 개발에서 매우 중요한 결정이다. 왜냐하면 CSS 프레임워크는 개발 속도와 코드 유지 보수성에 큰 영향을 미치기 때문이다. 다양한 CSS 프레임워크가 존재하며 각각의 프레임워크는 고유한 특징과 장단점을 가지고 있다. CSS 프레임워크를 선택할 때는 프로젝트의 요구 사항과 팀의 역량을 고려해야 한다. 따라서 이 글에서는 기업들에서 많이 사용하는 Tailwind, Styled-components, 두 가지 프레임워크를 비교하여 어떤 프레임워크가 적합한지 살펴보고자 한다. TailwindAboutTailwind CSS는 최근 웹 개발 커뮤니티에서 급격히 인기를 얻고 있는 utility-first CSS 프레임워크이다. Tailwind는 빠른 UI 개발을 위..

Recoil 사용이유와 사용방법

서론 비즈니스 모델의 복잡성이 증가함에 따라 프론트엔드 개발에서 처리하는 데이터의 양과 복잡도도 더욱 커지고 있다. 사용자와 상호작용하는 뷰는 점차 더 많은 액션을 포함하게 되고, 데이터베이스에서 데이터를 가져오는 횟수와 데이터의 크기도 증가하고 있다. 이러한 환경에서 데이터를 효율적으로 관리하는 것은 필수적이다. 실제로 프론트엔드 개발자라는 직군이 등장한 배경도 이러한 필요성에서 비롯된 것이라고 본다. 이 글에서는 프론트엔드 개발에서 데이터를 효율적으로 관리하는 데 도움을 주는 상태 관리 라이브러리 중 하나인 Recoil의 사용 이유와 기본적인 사용 방법에 대해 살펴보겠다. 왜 Recoil인가 상태 관리 라이브러리를 사용해야 하는 이유는 앞에서 간략하게 설명하였다. 상태 관리 라이브러리에는 redux,..

상태 관리 라이브러리 비교: 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을 만들 시 다른 ..