이 게시글은 현업에서 사용하는 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)에 구현되는 것이 많기 ..
웹 개발을 하다보면 자주 CORS 에러를 만날 수 있습니다. 이번에야 말로 CORS가 무엇인지 확실히 알아보고 왜 있어야 하는지 알아봅시다. CORS가 나를 괴롭힌다 로컬에서 개발하고 있던 중 서버에 http 요청을 했을 때 위와 같은 에러를 보게 되었습니다. 'Access-Control-Allow-Origin' header is present on the requested resource. 요컨데 클라이언트의 주소는 localhost:5173인데 api요청 주소는 localhost:8080이기 때문에 origin이 다르다. Access-Control-Allow-Origin 헤더가 따로 설정되어 있지 않기 때문에 이 요청은 내가 막았다! 랍니다.. 기존 해결법 저는 제대로 이해도 안한채 그..
쿠키와 세션 자주 들었는데 이번 기회로 명확히 알아봅시다. 먼저 이 기술이 등장한 배경을 이해해야 합니다. HTTP 프로토콜은 stateless(무상태), connectionless(비연결지향) 특성을 가지고 있기 떄문에 클라이언트의 요청에 대해 어떤 클라이언트인지 식별할 수 없습니다. Stateless: 커넥션이 종료되는 순간 상태정보를 유지하지 않는 특성 Connectionless: 클라이언트가 요청을 보내고 서버의 응답을 주면 연결을 끊는다. 초기에는 클라이언트의 IP 주소를 이용하여 식별하려 했으나 몇개의 문제점이 존재했습니다. 여러 사용자가 한 대의 컴퓨터를 사용한다면 하나의 IP로 어떤 사용자인지 식별할 수 없다. 인터넷 서비스 제공자(ISP)는 사용자가 로그인하면 동적으로 IP 주소를 할당한..