이 게시글은 Vite로 React App 만들기 시리즈중 하나입니다 [Vite 시리즈 - 0] Vite로 빠르게 React App 만들기, 기초부터 심화까지! (with Todo List) [Vite 시리즈 - 1] Vite 시작하기, TailwindCss로 TodoList UI 구성하기 [Vite 시리즈 - 2] React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기 [Vite 시리즈 - 3] MSW로 API Mocking하기, React Query 사용하기 [Vite 시리즈 - 4] React Testing Library & Jest로 테스트 하기. CI 적용하기(작성중) 1. MSW란? MSW는 Mock Service Worker로 클라이언트의 http 요청을 ..

이 게시글은 Vite로 React App 만들기 시리즈 중 하나입니다 [Vite 시리즈 - 0] Vite로 빠르게 React App 만들기, 기초부터 심화까지! (with Todo List) [Vite 시리즈 - 1] Vite 시작하기, TailwindCss로 TodoList UI 구성하기 [Vite 시리즈 - 2] React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기 [Vite 시리즈 - 3] MSW로 API Mocking하기, React Query 사용하기 [Vite 시리즈 - 4] React Testing Library & Jest로 테스트 하기. CI 적용하기(작성중) 오늘은 스타일링까지 끝난 투두리스트의 기능을 완성하고 배포까지 해보겠습니다! 1. Reac..

이 게시글은 Vite로 React App 만들기 시리즈중 하나입니다 [Vite 시리즈 - 0] Vite로 빠르게 React App 만들기, 기초부터 심화까지! (with Todo List) [Vite 시리즈 - 1] Vite 시작하기, TailwindCss로 TodoList UI 구성하기 [Vite 시리즈 - 2] React Hook 활용하여 TodoList 기능 개발하기, github page로 배포하기 [Vite 시리즈 - 3] MSW로 API Mocking하기, React Query 사용하기 [Vite 시리즈 - 4] React Testing Library & Jest로 테스트 하기. CI 적용하기(작성중) 1. 프로젝트 생성(Create Vite) 다음 명령어를 입력하여 새로운 vite 프로젝트를..

Vite가 널리 쓰인지도 이제 1년 가까이 되는 것 같습니다. vite를 사용해 react 프로젝트를 여러번 만든 경험으로 새로운 react 프로젝트를 시작하는 방법을 알려드리도록 하겠습니다. 뭐든 새로 배울 때는 만들면서 하는 것이 가장 좋은 것 같은데요 TodoList를 만들면서 진행하면 좋을 것 같습니다. 핵심 로직만 구현한 상태에서 실질적으로 프로젝트를 운영할 수 있는 수준의 프로젝트를 구성할 예정입니다. 다음과 같이 여러 시리즈로 구성될 것 같습니다. [Vite 시리즈 - 0] Vite로 빠르게 React App 만들기, 기초부터 심화까지! (with Todo List) [Vite 시리즈 - 1] Vite 시작하기, TailwindCss로 TodoList UI 구성하기 [Vite 시리즈 - 2]..

안녕하세요. 이번 글에선 비트마스크의 개념과 사용법, 그리고 간단한 예제를 알아보도록 하겠습니다. 시작하기 전에 비트마스크의 개념을 이해하기 위해서 비트의 표현법과 비트 연산, 보수연산 등을 알면 좋습니다. 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 주소를 할당한..

프로젝트 설계 스프링에 관심이 좀 있었는데 토이 프로젝트를 하면서 사용해 보기로 했습니다. 기능 종류 도메인 uri method body response 투두목록 조회 Todo /todo GET {tags:Tag[], start:Date, end:Date} Todo[] 투두 추가 Todo /todo POST Todo Todo 투두 수정 Todo /todo/:id PATCH Todo Todo 투두 토글 Todo /todo/toggle:id PATCH null Todo 투두 삭제 Todo /todo/:id DELETE null null type Todo = { id: number; title: string; content: string; modifiedDate: Date; isConplete: Boolean..