최근 여러 면접을 보며 '이 기술 써보셨나요?'라는 질문을 받을 때 '아뇨'라고 대답하는게 너무 고통스러웠다. 물론 지원하는 모든 회사의 기술을 다 섭렵하는건 어렵겠지만, 그래도 자주 보이는 기술에 대해 '사용법 정도는 압니다'라고 대답할 수 있도록 이것 저것 더 다채롭게 건드려보기로 했다. 우선 가장 최근 고통을 안겨줬던 GraphQL부터 시작이다. 왜 사용할까? 한 마디로 축약하자면 REST API의 불편한 점을 해결하기 위해서이다. REST API의 문제점들은 다음과 같다. Overfetching: 불필요한 데이터까지 가져오기 때문에 추가 비용이 발생한다. Underfetching: 필요한 데이터를 온전히 가져오기 위해 여러 번 추가 요청이 필요할 수 있다. URL 관리의 어려움: 요구사항이 복잡해..
Intro 웹 페이지를 개발하다보면 여러 모달을 만들고 관리해야 할 일이 많다. 특히 리액트에서 모달의 상태를 state로 관리하다보면 코드도 지저분해지고 비슷한 코드가 여기 저기 흩어져있기 마련이 된다. 해결법을 탐색하던 중 우연히 한 영상을 보게 되었고 그 아이디어를 차용해 내 나름대로 다시 구현해보았다. 설계 기본적인 아이디어는 아래 영상에서 가져왔다. https://youtu.be/gMzYOE0TV0g?si=0SKd5mKO1-yP1gHc 요점은 ModalController에서 stack 구조로 모달을 관리하는 것, 그리고 Context API를 활용해 프로젝트 내부 어디서나 컨트롤러에 접근할 수 있게 하는 것이다. 이를 간단히 도식으로 나타내면 다음과 같다. 1. 컴포넌트 단에서는 push/pop..
이번 글에서는 이전에 redux와 redux-thunk로 구현한 예제를 RTK로 변환하는 작업을 진행합니다. Redux Toolkit (RTK) 기존 redux의 불편한 점을 해결하고자 자주 사용되는 라이브러리를 미리 포함하여 제공하는 것이 Redux Toolkit입니다. 이를 통해 코드량을 큰 폭으로 줄일 수 있고 라이브러리 구성을 위한 걱정을 덜게 됩니다. 현재 redux는 공식적으로 RTK를 사용하기를 권장하고 있습니다. 대표적으로 포함되는 라이브러리: redux-actions, reselect, immer, redux-thunk, redux-devtools-extension, etc. 설치 npm install @reduxjs/toolkit 사전 준비 현재 프로젝트의 모든 action이 비동기로 ..
이번 글은 TodoList 구현입니다. 큰 구성은 이전 로그인 구현 글과 같습니다. Server API 먼저 TodoList의 CRUD api를 작성합니다. /src/server/index.js 각 todo에는 id가 필요하기에 uuid를 설치하여 사용하였습니다. (https://www.npmjs.com/package/uuid) 로그인 때와 마찬가지로 DB는 localStorage로 대체하였으며 통신 시간은 1초로 설정하였습니다. import { v4 as uuidv4 } from 'uuid'; // ... // todos CRUD // DB mocking with localStorage function getTodos() { return JSON.parse(localStorage.getItem('tod..
이전 글에서 동기적으로 임시 구현한 로그인 기능을 비동기적으로 구현합니다. 편의상 setTimeout으로 서버 API mocking 합니다. Server API /src/server/index.js setTimeout으로 1초 뒤에 로그인 성공/실패 결과를 반환하도록 구현하였습니다. // ... // 로그인 요청 function logInRequest(id, password) { return new Promise((resolve, reject) => { setTimeout(() => { if (id === ID && password === PASSWORD) { // 로그인 성공 시 nickname 반환 resolve({ nickname: 'devdev' }); } reject('Invalid ID/Pas..
react-redux를 기반으로 한 예제를 다룹니다. 예제는 간단한 로그인 기능 + TodoList 구현입니다. 이번 글에서는 모든 서버 관련 동작을 동기적으로 임시 구현하여 처리합니다. 추후 middleware를 이용해 비동기 동작을 처리할 예정입니다. 설치 1. react 설치 npx create-react-app my-todo 2. react-redux 설치 cd ./my-todo npm install redux react-redux 로그인 기능 구현 Server API - 동기(sync)로 임시 구현 로그인 동작을 임시로 구현하는 이유는 redux가 오직 동기적인 동작만을 처리할 수 있기 때문입니다. 비동기적인 처리는 redux-thunk나 redux-saga 등의 middleware를 사용해야 ..
