페이지의 세세한 내용을 먼저 작성하고 기능 구현을 하면 내용의 상당수를 갈아엎어야 하는 불상사가 일어날 수 있으므로 기능 구현을 우선 하기로 하였다. 구현할 기능은 언어 선택, 테마 선택, 반응형 세 가지이다. 언어 & 테마의 상태 관리 언어 선택과 테마 선택 정보는 전역적으로 관리해야 하므로 RTK를 사용한다. user preference를 뜻하는 preferSlice에 언어를 뜻하는 lang과 테마를 뜻하는 theme 상태를 추가하고 reducer를 작성하였다. 사용자가 페이지에 다시 방문했을 때나 새로고침을 했을 때 상태가 손실되지 않도록 상태 변경 시마다 localStorage에 해당 정보를 저장하도록 구현하였다. 언어 선택 언어 선택은 nav bar 우측의 언어 선택 버튼을 클릭하여 토글되는 방..
UI Design 이번 디자인 컨셉은 'Neumorphism'으로 정했다. 간혹 SNS에서 웹 디자인 관련 게시글이 추천되는데, 그 중 눈길을 사로잡는 디자인이 있어 찾아보니 이런 이름을 가졌다는 것을 알게 되었다. Neumorphism은 나름의 장단점이 있으나 포트폴리오 페이지를 만드는데는 장점이 더 크게 작용할 것이라 생각되어 사용하기로 하였다. Neumorphism Neumorphism의 대표적인 이미지이다. 특징이라면 단순한 색 구성에 더불어 버튼이나 카드가 단순히 배경에서 떠있는 것이 아닌 배경으로부터 솟아오른 듯이 보이는 것이다. 이는 좌상단과 우하단에 서로 다른 두 가지 box-shadow를 적용하여 구현할 수 있다. Neumorphism은 skeuomorphism과 flat design..
지난 8월 경 포트폴리오를 한 차례 만들었지만 아쉬운 점이 있어 다시 만들고자 한다. 그 전에 먼저 지난 포트폴리오에 대한 회고를 진행하자. 지난 포트폴리오의 문제 먼저 페이지 자체에 대해 아쉬웠던 점은 다음과 같다. 명확한 디자인 컨셉의 부재 포트폴리오를 만들고자 하는 의지는 있었으나 디자인에 대한 컨셉은 없었다. 따라서 그 때 생각나는대로 디자인을 짜다보니 전체적인 통일감도 떨어지고 디자인 공부를 해보지 않은 사람이 만든 예쁘지 않은 페이지 구성이 되어버린 것 같다. responsive하지 않음 처음에는 웹에서만 보여줄 생각을 했기에 따로 반응형으로 짜진 않았다. 하지만 내 포트폴리오 페이지를 볼 사람이 항상 브라우저를 화면에 꽉 차게 띄워놓고 본다는 보장도 없다. 심지어 모니터 크기가 작으면 페이지..
이번 글에서는 이전에 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..
