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번이 실행되고..
지난번 학습한 createAsyncThunk를 이용하여 chats와 messages를 실시간으로 업데이트합니다. 이번에 채팅 UI를 구현하면서 가장 최신의 메세지가 있는 가장 아래로 스크롤이 위치하도록 구현했습니다. 해당 내용은 다음 포스팅에서 볼 수 있습니다. React useRef 사용하기 with TypeScript useRef는 컴포넌트 내부에서 직접 DOM을 조작해야 할 때 사용합니다. React에서도 바닐라 자바스크립트와 마찬가지로 JSX 엘리먼트에 id속성을 부여하고, 자바스크립트로 document.getElementById(id)를 통해 hahagarden.tistory.com 결과 아직 ChatGPT API를 연동하지 않아(마지막에 할 예정) 서버에서 답변이 오는게 아니라 단순 텍스트만 ..
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..
- Total
- Today
- Yesterday
- 공릉 술집
- Til
- 태릉 꼬치
- 공릉 카페
- 을지로맛집
- 맥 깃허브 데스크탑
- 롯데월드 매직패스 프리미엄
- sitemap
- 신불당 술집
- 구글서치콘솔
- 깃허브 데스크탑 로그아웃
- 이수 맛집
- 태릉삼겹살
- 춘천맛집
- 공릉맛집
- solo project
- 티스토리검색
- 티스토리
- 태릉맛집
- 회고
- 태릉 술집
- 공릉 밀크티
- 태릉 이자카야
- 롯데월드 보조배터리
- 홍천 삼겹살
- 공릉 꼬치
- 롯데월드 키오스크
- 춘천닭갈비
- 공릉 맛집
- 공릉 이자카야
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |