hahagarden의 블로그

지난번 학습한 createAsyncThunk를 이용하여 chats와 messages를 실시간으로 업데이트합니다. 이번에 채팅 UI를 구현하면서 가장 최신의 메세지가 있는 가장 아래로 스크롤이 위치하도록 구현했습니다. 해당 내용은 다음 포스팅에서 볼 수 있습니다. React useRef 사용하기 with TypeScript useRef는 컴포넌트 내부에서 직접 DOM을 조작해야 할 때 사용합니다. React에서도 바닐라 자바스크립트와 마찬가지로 JSX 엘리먼트에 id속성을 부여하고, 자바스크립트로 document.getElementById(id)를 통해 hahagarden.tistory.com 결과 아직 ChatGPT API를 연동하지 않아(마지막에 할 예정) 서버에서 답변이 오는게 아니라 단순 텍스트만 ..

useRef는 컴포넌트 내부에서 직접 DOM을 조작해야 할 때 사용합니다. React에서도 바닐라 자바스크립트와 마찬가지로 JSX 엘리먼트에 id속성을 부여하고, 자바스크립트로 document.getElementById(id)를 통해서 DOM요소를 조작할 수 있습니다. 그러나 React는 컴포넌트로 이루어져 있고, 컴포넌트는 재사용됩니다. 컴포넌트의 JSX엘리먼트에 id를 부여하면, id는 유일해야 하는데 중복 id를 가진 DOM이 여러개 생기니 잘못된 사용입니다. 또한 React에서는 state를 사용하여 웹페이지를 쉽게 조작할 수 있습니다. input의 DOM요소를 가져오고, onChange이벤트로 innerText를 변화시키며 직접 DOM을 조작하지 않아도, [value, setValue] = us..

미니쇼핑몰🎁 프로젝트에서 상품리스트/북마크 리스트 컴포넌트를 만드는데 무한스크롤과 카테고리 필터 기능을 함께 구현하면서 useEffect사용이 많아졌습니다. useSelector로 전역상태인 상품리스트를 가져오고 이를 의존하여 다른 상태들을 useState로 사용하는데, useSelector는 렌더링 후에 실행되고, useState는 렌더링 전에 실행되기 때문에 useEffect로 상태를 동기적으로 업데이트 해주어야 했습니다. 그런데 이는 불필요하게 렌더링이 많아지는 문제가 있었습니다. 필터 또는 리스트 상태가 바뀌면 3번씩 렌더링되고, 무한스크롤시 2번씩, 새로고침을 하면 아래 사진과 같이 9번씩 리렌더링됐습니다. 초기 코드는 아래와 같습니다. function List() { const DATA_PER..

완성 모습 프로젝트 레포지토리 및 ReadMe GitHub - hahagarden/fe-sprint-coz-shopping Contribute to hahagarden/fe-sprint-coz-shopping development by creating an account on GitHub. github.com 프로젝트동안 사용한 브랜치 * 11bafd6 (HEAD -> main, origin/main, origin/HEAD) Merge pull request #24 from hahagarden/readme |\ | * ffe5204 (origin/readme) Update README.md |/ * 0b5520c Merge pull request #23 from hahagarden/fix |\ | * ..

반응형 스타일링 추가 노트북으로 작업을 했었는데, div의 width와 height를 rem단위로 주었더니, 사이즈가 큰 모니터에서는 위 사진처럼 너무 작게 나오거나, 상품리스트 페이지에서 데이터가 12개씩만 화면에 보여서 스크롤이 발생하지 않아 데이터를 더 불러올 수 없는 점 등이 있었다. 단위를 rem에서 vw, vh, %로 변경하여 수정했다. 그리고 상품리스트 페이지, 북마크 페이지에서 한 페이지에 로드되는 데이터 개수를 30개로 늘렸다. 수정 전 수정 후 필터 활성화 스타일링 추가 currentFilter 상태에 현재 필터 정보를 저장하고 이것으로 렌더링할 리스트를 filter한다. 이 때, currentFilter값을 통해 조건부 스타일링하여 구현하였다.

MyLikes 프로젝트 기능구현을 거의 완성해간다. 예외 케이스를 더 추가하고, 리팩토링이 남았다. 그런데 중간에 사람들에게 보여줬더니 디자인이 조금 구리다는 피드백을 받았다....😅 나도 동감하는 바여서... 대문짝만한 헤더와 색깔... 최대한 깔끔하게 만들고 싶었는데 색 조합이 어려웠다 ㅋㅋ 어떻게 손을 봐야할지 ... 이 참에 스타일링을 다시 하기로 결심했다. 피그마로 다음과 같이 만들었다. 이제 코드를 이리저리 옮기면서 다시 스타일링을 해보자~

1️⃣ 브라우저db에 저장하여 북마크 정보 유지할 수 있도록 로컬스토리지 사용하기 redux-persist redux-persist를 이용해서 구현했다. 사용법은 아주 간단하다. // src/redux/index.js import { combineReducers } from '@reduxjs/toolkit'; import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import bookmarkListSlice from './bookmarkListSlice'; import productListSlice from './productListSlice'; const persistConfig = {..

1️⃣ 애자일 스크럼 방법으로 5일간의 솔로프로젝트 진행하기 1. 프로젝트 요구사항 명세서 분석하기 프로젝트 요구사항 및 기능명세서, API문서, 피그마 디자인 도큐먼트를 제공받았다. 이것을 읽어보며 프로젝트를 분석한다. 2. 프로젝트 설계하기 프로젝트를 분석한 후, 팀원과 프로젝트를 설계한다. 이 과정에서 애자일 스크럼 방법을 이용했다. 플래닝 스프린트 기간동안 작업할 수 있는 총 작업시간을 책정하고, 작업들을 정한다. 프로젝트 기간은 5일이고, 코딩에 집중할 수 있는 시간을 하루에 5시간으로 잡는다. 총 작업시간은 25시간이다. github의 project board기능을 이용한다. Backlog swimlane추가하여 이곳에 작업들을 기능단위로 추가한다. 이 때, 팀원과 입코딩으로 브레인스토밍하듯이..

thunk thunk는 비동기라는 작업을 Redux에서 어떻게 다룰까 라는 생각으로 고안된 도구이다. createAsyncThunk 비동기 작업을 처리하는 액션을 만들어준다. 비동기 액션 생성자이다. 이전 포스팅에서 NewChat을 POST하고 나서 서버데이터가 자동으로 업데이트되지 않는 문제가 있었다. 이를 해결하기 위해 thunk 라이브러리의 기능을 사용한다. 리덕스에서 비동기를 다루기 위해 redux-thunk, redux-saga 등의 라이브러리가 있는데 RTK에서 thunk를 공식적으로 사용하고 있어서 thunk 라이브러리의 기능인 createAsyncThunk 함수를 사용했다. createSlice의 reducers을 통해 RTK가 액션생성자를 자동으로 만들어준다. 그런데 비동기작업에 대해서는..

1️⃣ Redux 도입하기 로그인/로그아웃 기능까지 임시로 지역상태를 사용하고 prop drilling을 통해 관리를 하였는데 코드가 많아지고 비효율적이었다. 리덕스 store에 isLoggedIn 상태를 만들었다. 코드는 하단의 깃허브 커밋 페이지에서 확인할 수 있다. 또한 새 채팅을 서버에 추가하기 위한 기능을 이번에 작업하는데, Nav컴포넌트에서 모달 오픈 상태를 true로 업데이트하고 Chats컴포넌트(페이지)에서 모달 오픈 상태를 사용해 조건부 렌더링을 하고 Modal컴포넌트에서 모달 오픈 상태를 false로 업데이트하기 때문에 여러 컴포넌트에서 모달 오픈 상태를 사용한다. 상태를 App에서 만들어서 props drilling을 깊은 단계까지 해야 하는 문제가 있다. 이러한 이유들로 지금 시점에..

1️⃣ gptea 로그인 / 로그아웃 네이버/카카오 access_token을 받고 gptea 서버로 보내면 gptea access_token을 발급해준다. gptea access_toekn을 로컬스토리지에 저장해주고, 앞으로 gptea api 요청시 헤더를 다음처럼 토큰을 포함시키도록 작성한다. headers: { Authorization: 'Bearer GPTEA_ACCESS_TOKEN', }, gptea api의 /register 요청으로 사용자를 등록하고 /sign-in 요청으로 로그인을 한다. /sign-in 요청시 사용자가 아니라는 에러가 발생하면 /register 요청을 하고 다시 /sign-in 요청을 하도록 구현했다. 네이버/카카오 로그인 버튼을 누르면, 네이버/카카오 access_toke..

세션(Session) 쿠키는 브라우저가 어떤 데이터를 쿠키로 가지고 있는 것이고, 사용자가 요청할 때마다 브라우저는 쿠키를 자동으로 서버에 전송한다. 우리가 로그인 상태를 유지할 수 있는 방법 중 하나는 세션을 이용하는 방법인데 간략하게 이야기하자면, 이 쿠키에 우리가 로그인(사용자라고 인증)을 완료한 상태임을 증명하는 세션ID를 저장하고 요청마다 이 세션ID가 든 쿠키를 전송함으로써 서버는 '이 세션ID는 등록된 사용자가 맞네, 인증된 사용자니까 요청에 응답해줄게'라며 처리를 한다. 세션은 쿠키와도 밀접하게 연관된다. 쿠키에 대해서 다음의 포스팅에서 다루었다. Cookie란, 쿠키 옵션 종류 HTTP는 stateless하다 HTTP는 웹 서버와 웹 브라우저가 데이터를 주고받기 위한 약속이다. HTTP는..