이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Vitest로 테스트 하기, CI 적용하기 소프트웨어 공학에서 테스트란, 소프트웨어의 품질을 보장하기 위해서 소프트웨어가 요구사항에 맞게 동작하는지, 결함이 없는지, 사용자가 기대하는 결과를 제공하는지 검증하는 과정입니다. 테스트는 왜 하는가?테스트는 코드의 안정성을 높이고, 장기적으로 생산성을 향상시키기 위해 매우 중요한 ..
이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Jest로 테스트 하기. CI 적용하기1. MSW란?MSW는 Mock Service Worker로 클라이언트의 http 요청을 가로채 mocking한 응답을 반환해주는 라이브러리입니다. 이를 이용하여 서버와 통신하는 것 처럼 흉내낼 수 있습니다.만약 여러분이 프로젝트를 하는데 아직 서버의 API 개발이 안되었거나 문제가 있는..
이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Jest로 테스트 하기. CI 적용하기오늘은 스타일링까지 끝난 투두리스트의 기능을 완성하고 배포까지 해보겠습니다!1. React Hook으로 비즈니스 로직 관리하기이전 시간에는 App에서 TodoList의 데이터를 관리했습니다. 이럴 경우 다음과 같은 문제점이 생길 수 있습니다.App의 역할이 너무 거대해진다.비즈니스 로직의..
이 게시글은 현업에서 사용하는 React 고급 웹 개발 기법 배우기 (Feat. TodoList) 시리즈중 하나입니다Vite 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing Library & Jest로 테스트 하기. CI 적용하기1. 프로젝트 생성(Create Vite)다음 명령어를 입력하여 새로운 vite 프로젝트를 만들어봅시다!npm create vite@latest프로젝트 이름을 적어주세요~ 프레임워크를 선택해주세요~ 저희는 React로 하겠습니다 Typescript 또는 Typescript + SWC로 해..
Vite가 널리 쓰인지도 이제 1년 가까이 되는 것 같습니다. vite를 사용해 react 프로젝트를 여러번 만든 경험으로 새로운 react 프로젝트를 시작하는 방법을 알려드리도록 하겠습니다.뭐든 새로 배울 때는 만들면서 하는 것이 가장 좋은 것 같은데요 TodoList를 만들면서 진행하면 좋을 것 같습니다.핵심 로직만 구현한 상태에서 실질적으로 프로젝트를 운영할 수 있는 수준의 프로젝트를 구성할 예정입니다.다음과 같이 여러 시리즈로 구성될 것 같습니다.Vite로 시작하기, TailwindCss로 TodoList UI 구성하기React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기MSW로 API Mocking하기, React Query 사용하기React Testing ..
안녕하세요. 이번 글에선 비트마스크의 개념과 사용법, 그리고 간단한 예제를 알아보도록 하겠습니다. 시작하기 전에 비트마스크의 개념을 이해하기 위해서 비트의 표현법과 비트 연산, 보수연산 등을 알면 좋습니다. 1. 비트마스크란? 현대의 모든 CPU는 이진수를 이용해 모든 자료를 표현합니다. 따라서 컴퓨터들은 이진법과 관련된 연산들을 아주 빠르게 할 수 있습니다. 이와 같은 특성을 이용해 이진수 표현을 자료구조(특히 집합)로 쓰는 기법을 비트마스크(bitmask)라고 합니다. 엄밀히 말하면 비트마스크는 자료구조의 한 종류라기보단 이진수 표현을 이용해 집합을 표현하는 하나의 테크닉이라고 할 수 있습니다. 2. 비트마스크를 쓰면 좋은 점 (1) 빠른 수행시간 : 비트마스크 연산은 O(1)에 구현되는 것이 많기 ..