hahagarden의 블로그

1. AccessToken 이용해서 unlink 요청 초기에 구현할 때 unlink 요청은 accessToken으로 하면 요청 에러가 발생했다. 요청 파라미터가 부족하다는 에러가 자꾸 났었다. 구글링을 해보니 어떤 인턴하셨던 분께서 정리해놓은 글에도 똑같이 accessToken방식은 요청이 계속 실패한다는 글을 보고 나도 Admin키로 요청하고 있었다. 그런데 오늘 다시 로그인 부분 코드를 수정하고 있는데 문서에 다음과 같은 글을 보았다. 어드민 키는 서버에서만 사용하라는 것. 오늘 AccessToken으로 요청해보니 성공했다. 😳 AccessToken을 사용해서 요청하는 방법으로 바꾸기로 했다. 어드민 키로 요청을 하기 위해서 사전에 user_id가 필요했는데, IDtoken을 추가적으로 받고 파싱해서..

스크롤 제일 아래로 보내는 이벤트와 스크랩 페이지에서 선택했던 메세지가 있는 곳으로 이동시키는 스크롤 이벤트 두 가지가 있다. 1. 컴포넌트 초기 렌더링 시 URI에 hash가 있으면 hash로 스크롤 위치시키고 없으면 맨 아래로 내려야 함. scrollRef.current.scrollTop에 할당. useEffect(( ) => { // hash 엘리먼트로 scroll 이동시키는 로직 }, [ ]) 2. useSelector가 렌더링 이후에 실행되기 때문에 업데이트된 messages 상태를 가지고 scroll을 내리기 위해 useEffect(( ) => { // messages 맨 아래로 scroll 이동시키는 로직 }, [messages]) 3. 이렇게 되면 1번은 항상 덮어씌어진다. 1번이 실행되고..

카테고리 추가시 이미 존재하는 경우 예외 처리 const ERROR_CATEGORY_DUPLICATE = "이미 등록된 카테고리입니다."; const { register, handleSubmit, setError, formState: { errors }, } = useForm(); const categoryTemplate = useRecoilValue(categoryTemplateAtom); const addCategorySubmit = async (data: IAddCategoryForm) => { if (categoryTemplate[data.categoryName]) return setError("categoryName", { message: ERROR_CATEGORY_DUPLICATE }, { s..

전체적인 스타일링 변경 중간완성을 한 데 이어 모달창 디자인을 개선하려고 한다. MyLikes💖 스타일링 변경 중간완성 이전 포스팅에서 프로젝트 전체 디자인을 새롭게 변경하기로 계획했다. 피그마로 초안을 작성하고 코드로 옮기는데 대략 3주정도 걸렸다. 중간완성은 했고 부분부분 보완하고 추가할 기능이 보 hahagarden.tistory.com Figma 디자인 특히 선택형 필드의 옵션값을 추가하는 방법으로 여러 사이트에서 사용하는 해시태그를 추가하는 UI를 적용해보기로 했다. 쉼표를 입력하면 입력한 텍스트가 박스형식으로 변하고 지울 수도 있다. Tagify라는 라이브러리로 손쉽게 구현 가능한데, 직접 연습해보기로 했다. 결과 직접 구현해보니 눈에 잘 안들어와서 디자인을 조금 바꾸었다. 분홍색깔을 더 잘어..

그동안 초기스타일링이었긴 하지만 기존 디자인 자체가 웹페이지의 전체 영역이 아닌 중간 부분만 쓰는 것이어서 비효율적이고 조금 답답하게 느껴진다는 피드백을 받았다. 스타일링을 수정하였다. 전체 페이지를 전부 사용할 수 있도록 하고 조금 더 웹 페이지의 느낌을 주었다. 또한 팀원과 highlight기능은 빼고 완성도에 집중하기로 하였다. 앞으로 스크랩 기능과 마이 페이지 기능을 완성한다.

이전 포스팅에서 프로젝트 전체 디자인을 새롭게 변경하기로 계획했다. 피그마로 초안을 작성하고 코드로 옮기는데 대략 3주정도 걸렸다. 중간완성은 했고 부분부분 보완하고 추가할 기능이 보여서 조금 더 작업을 해야할 것 같다. MyLikes💖 전체적인 스타일링 변경하기(Figma 디자인) MyLikes 프로젝트 기능구현을 거의 완성해간다. 예외 케이스를 더 추가하고, 리팩토링이 남았다. 그런데 중간에 사람들에게 보여줬더니 디자인이 조금 구리다는 피드백을 받았다....😅 나도 동감 hahagarden.tistory.com 스타일링 적용 후 중간완성본 Restructure 아무래도 첫 프로젝트이고, 개념이 많이 없는 상태에서 시작하다보니 라우팅이 무분별하게 되어있었고 프로젝트 구조가 복잡했다. 불필요한 컴포넌트와..

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

완성 모습 프로젝트 레포지토리 및 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추가하여 이곳에 작업들을 기능단위로 추가한다. 이 때, 팀원과 입코딩으로 브레인스토밍하듯이..