hahagarden의 블로그

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..

1️⃣ 카카오 로그인 1. 네이버 로그인을 구현한 후 카카오 로그인을 추가했다. 둘은 isLoggedIn상태를 공유한다. 네이버 로그인을 하거나 카카오 로그인을 하면 setIsLoggedIn상태끌어올리기를 통해 isLoggedIn상태가 true로 갱신되고, MyGptea컴포넌트가 조건부 렌더링된다. 2. 네이버 로그인 api는 함수를 제공하여 code를 받고 access_token을 요청하는 과정 없이, 로그인 버튼을 누르면 바로 redirect url로 access_token을 발급해주었다.(함수 내부에서는 과정을 거친다.) 카카오는 redirect url로 Authorization Code를 받아 이것으로 access_token을 요청하는, Authorization Code Grant Type 과정을..

1️⃣ 네이버 로그인 네이버 로그인 API 공식문서는 예전 버전 이후로 업데이트가 안된 것 같다. 또한 gptea프로젝트는 타입스트립트를 사용하므로 다른 블로그들도 함께 참고하였다. 1. App컴포넌트의 isLoggedIn 상태를 상태 끌어올리기를 통해 1. Loggedin컴포넌트와 2. MyGptea컴포넌트의 Nav컴포넌트가 공유한다. isLoggedIn이 true이면 MyGptea컴포넌트를 렌더링하여 서비스를 이용할 수 있고, false라면 Welcome컴포넌트를 렌더링하여 로그인버튼이 있는 페이지가 뜨도록 했다. 컴포넌트별로 url을 다 다르게 할지, 지금처럼 같은 '/'경로에 조건부 렌더링을 할지 고민했는데, github가 이렇게 되어있어서 참고했다. '/'경로인 홈에서 github 로그인 페이지..

1️⃣ API 요청하기 백엔드로부터 API문서를 받았다. chats, messages, scrapbooks, scraps를 GET으로 받아오는 것이다. 다른 요청들은 작업중이라고 한다. fetch를 사용해서 요청을 하는데 CORS에러가 나왔다. 이제 CORS가 무엇인지 안다! 그런데 어떻게 해결하지..? CORS에러는 출처가 다른 곳에서 자원을 공유할 때, 필요한 설정이 되어있지 않아서 생기는 문제이다. 백엔드 서버는 구축이 되었고, 사용할 홈페이지 주소와 홈페이지 테스트용 주소만 허용을 해놓았다고 한다. 나는 지금 localhost에서 작업중이므로 임시로 proxy를 쓰기로 했다. 리액트에서 제공하는 간단한 방법이 있어 다음 포스팅과 같이 해결하였다. React CORS에러 해결 CORS에러가 떴다. ..

지난번 프로토타이핑 작업에 이어서 다음을 추가하였다. 구현한 것 - Chat컴포넌트: Prompt 클릭하면 커서 깜빡임 → . 누르면 질문 입력됨 → Enter 누르면 질문 등록됨 → action delay이용하여 GPT 답변 입력됨 → Prompt 다시 클릭하면 처음으로 돌아감 '데이터베이스' 대화창, '데이터베이스 심화' 대화창 모두 Chat컴포넌트의 인스턴스. - Bookmark컴포넌트: 클릭하면 색칠됨 → 다시 클릭하면 색칠 해제됨 완성본 🙌 gptea 피그마 프로토타입 링크 🙌 Figma Created with Figma www.figma.com

🙌 gptea 피그마 프로토타입 링크 🙌 Figma Created with Figma www.figma.com 구현한 것 - 전체컴포넌트: 호버효과와 클릭하여 페이지 전환 기능, - Chats컴포넌트: ChatItem 이름 수정아이콘 기능(데이터베이스->데이터베이스 심화->데이터베이스) - Scraps컴포넌트: Scrap 클릭하면 확장, 다시 클릭하면 축소 기능, 화살표아이콘 누르면 해당 Chat으로 이동 추가할 것 - Chat컴포넌트에서 propmt 커서 깜빡임 구현 ✅ - propmt 질문 입력하면 메세지 추가되는 UI 구현 ✅ - Scrap마크 클릭하면 색칠되고, 다시 클릭하면 투명해지는 UI 구현 ✅ 추가한 내용은 다음 포스팅에서 다루었다. gptea☕ Figma 프로토타이핑 추가 완성본 🙌 gp..

문제상황 처음 테이블 목록은 1위 타이타닉, 2위 헤어질 결심, 3위 세 얼간이이다. 데이터를 수정하면 랭킹순서대로 정렬되지 않는다. (드래그앤드롭으로 순위를 변경하는 것은 문제없이 잘 된다.) 데이터 수정 후 내가 지정한 랭킹(1위, 2위, 3위) 순서가 아니라, 데이터베이스에 데이터를 추가한 시간 순서대로(2위 헤어질 결심, 1위 타이타닉, 3위 세 얼간이) 정렬이 되고 있다. 🩹 초기 구현 리스트 데이터를 수정하면 파이어베이스의 snapshot기능으로 자동으로 업데이트된 데이터를 가져온다. 이 때 가져온 쿼리데이터로 likes상태를 업데이트 해준다. 데이터베이스에는 데이터가 생성된 시간 순서대로 정렬이 되어있고, 이 순서대로 쿼리데이터를 가져오며, likes상태(배열)에도 이 순서대로 저장된다. 한..

🙌 github commit 🙌 refactor: change state logic, rendering position and modal-event, sty… · hahagarden/project-machine@9a975fa …le: add ModalBackground github.com 1. 전체 모달창 로직 수정 🩹 초기구현 MyLikes프로젝트에 모달창이 3종류 있다. 카테고리 추가창(addCategoryModal), 리스트 등록창(RegisterModal), 리스트 수정창(UpdateModal). 초기에 모달창을 켜는 상위컴포넌트, 모달창을 그리는 컴포넌트 두 개에서 모달에 대한 상태가 공통적으로 사용되어 전역상태로 관리하였다. 켜지면 true, 꺼지면 false였다. 그런데 부모-자식 관계이고,..

6개월 전에 작성한 코드를 리팩토링을 하려고 한다. 상태를 다루기 위해서 전역상태만 사용했는데 상태 끌어올리기를 사용하여 로직을 더 효율적으로 개선할 수 있을 것 같고, 이벤트는 핸들러에 전달인자를 넘겨주는 방법으로 코드를 줄일 수 있을 것 같다. 특히 UpdateModal컴포넌트 부분이 지금 보니 왜 이렇게까지 비효율적으로 했는지 모르겠다. 💬 1. UpdateModal 로직 수정 🩹 초기 구현 초기에는 어떤 리스트를 더블클릭하면 해당 리스트를 수정하기 위한 모달 창이 나타나고, 서버에서 데이터를 받아와 해당 데이터로 input을 초기화한다. Table컴포넌트에서 리스트를 더블클릭하고, UpdateModal컴포넌트에서 리스트의 데이터를 렌더링하여 한 상태를 두 컴포넌트에서 사용하였다. 처음에는 상태 끌..

[Project] 질문 게시판👀 만들기 Agora States Project 자바스크립트의 기초 문법과 DOM조작법을 학습하고 이를 이용하여 질문 게시판 만들기 프로젝트를 진행했다. 바닐라 자바스크립트 프로젝트이다. 프로젝트 개요 이름과 제목, 내 hahagarden.tistory.com 위 포스팅에 이어지는 내용이다. 추가 개선 사항 1. 페이지네이션 기능을 추가하였는데 1페이지가 아닌 다른 페이지에 있는 상태에서 '좋아요' 목록을 렌더링하려고 하면 아무 것도 렌더링되지 않는다. 오류가 뜨진 않아서 코드에서 빠진 부분이 있는 것 같다. 다음과 같다. currentPage변수를 업데이트해주지 않아서 6페이지에서 ❤️버튼을 누르면 좋아요 목록의 6페이지가 렌더링되어서 아무 것도 나타나지 않는 것이었다. 좋..