감귤밭 호지차 농장

구글 oAuth 로그인 로직을 구현하기 앞서 기본적인 핑퐁핑퐁에 대해서 정리해보자면,,, * : 클라이언트 파트 1. 클라이언트 -> OAuth Server ( 사용자 인증 ) : 클라이언트가 OAuth server에 허가 코드를 요청 : 2. OAuth Server -> 클라이언트 : OAuth Server가 "허가코드를( Authorization Code ) " Redirect URL을 이용해서응답 - OAuth로 사이트에서 발급받은 "ID/Password/Credit"등을 넣는다. - 대부분의 OAuth는 Developer Tap에서 API와 ID 등을 발급 받을 수 있다. * Authorization Code - Redirect URL 구글 OAuth의 승인된 redirection URL 은 정상..

메인 프로젝트의 코드를 재 구성하고 공부하면서 여러모로 왜 코드를 저렇게 짰을까 하는 생각이 드는 코드들이 많았다... 몇 달 전 ... 나... 정신.. # 파일 구조 CommunityDetail ( 커뮤니티 데이터 전체 조회 ) - CommentBox ( 개별 커뮤니티 아이템 ) 어제 밤에 코드를 좀 정리하고 (특히, Comment 파트) 잘 돌아가는거 확인하고? 오늘 아침에 다시 정리하려고 딱 켰는데... ... # 게시글 상세 클릭 시 벌어지는 일 : 공포 그 자체 어제는 안 그랬는데 왜 갑자기 게시글 상세 요청이 무한 요청이 되는 거지.....라는 두려움이 발생했다.. 우리의 GPT 씨의 도움으로 상위에서 랜더링 되는 의존성의 useState 요소가 하위에서 건드려지면서 무한으로 계속 리랜더링 ..

주제 : React-Icon을 사용하다가 동일한 컴포넌트 형태인데 상위 컴포넌트에서 하위로 icon 을 내려줄 수 없는지가 궁금해졌다. 원래 React-icon 사용법은 아래처럼 마음에 드는 아이콘을 찾아서 위에서 선언하고 그대로 부러와서 사용하면 된다. :: React-Icon import { LiaLockSolid } from 'react-icons/lia'; //생략 //생략 하지만 지금 메인 프로젝트 리팩토링 하다가 동일한 형식의 디자인에서 결국은 같은 Input 폼인데 들어가는 type 과 아이콘만 다를 이 컴포넌트들의 재사용성을 높이고 싶었다. ( 사실 일일히 다시 디자인하고 사용하기 귀찮았..던.. 크흠) 그래서 기존에 아래와 같았던 폴더 구조에서 login - login.tsx - logi..

이러한 에러와 함께 댓글 등록이 안되는 현상을 발견했습니다. Error : #321 페이지 React - Error Decoder A JavaScript library for building user interfaces legacy.reactjs.org useEffect 나 useState 를 쓸 때 잘못 import 했을 때 발생하는 에러라고 하네요. 원래 댓글 등록 할 때 새로고침을 해야지만 새롭게 뜨는 문제 때문에 상위 컴포넌트에서 useState 트리거를 내려줬는데 이때문에 뭔가 꼬인 듯 합니다. 우선은 삭제 해주었고 다시 댓글을 등록 했을 때 바로 댓글이 뜰 수 있게 나오도록 수정을 어떻게 해야 하나 고민이네요 # 업데이트 댓글의 작성 컴포넌트 부분하고 수정 삭제 컴포넌트하고 나눠져있고 해서 각..

드디어 메인 프로젝트 1차 완료가 끝났습니다. 어쨌든 배포를 하고 데이터를 불러오고 원하는 기능을 구현했다는 점에서 뿌듯? 하면서도 아쉬움이 많이 남는 프로젝트였습니다. 추가적으로도 계속 업데이트를 해나갈 예정이지만 다들 워낙 바쁘다 보니 원하는 만큼 이야기 공유가 안될 것 같은 슬픈 예감이 드는 군요.. 밤도 새가면서 열정을 다 바친 첫 프로젝트라 굉장히 뿌듯하다는 생각이 듭니다. 이 프로젝트를 1차 완성한 기념으로 자체 질의응답 및 회고록 시간을 가져볼까 합니다. 기술 스택들을 선택 이유 : React Vite TypeScript Tailwind CSS Styled-Components Twin.macro Redux-toolkit Axios # React x Vite React는 대표적인 SPA/ CS..

해당 에러는 useSelector를 컴포넌트 함수가 아닌 다른 함수(call 함수)에서 사용하고 있다는 것을 나타냅니다. useSelector는 리덕스 스토어에서 상태를 가져오기 위해 리액트 함수 컴포넌트 내에서만 사용해야 합니다. 이러한 경우, useSelector를 사용하려는 함수(call 함수)를 리액트 함수 컴포넌트로 변경해야 합니다. 또는 useSelector를 사용해야 할 컴포넌트 함수 내부에서 해당 함수(call 함수)를 호출하여 상태를 사용하도록 해야 합니다.

구글 oAuth 로그인 로직을 구현하기 앞서 기본적인 핑퐁핑퐁에 대해서 정리해보자면,,, * : 클라이언트 파트 1. 클라이언트 -> OAuth Server ( 사용자 인증 ) : 클라이언트가 OAuth server에 허가 코드를 요청 : 2. OAuth Server -> 클라이언트 : OAuth Server가 "허가코드를( Authorization Code ) " Redirect URL을 이용해서응답 - OAuth로 사이트에서 발급받은 "ID/Password/Credit"등을 넣는다. - 대부분의 OAuth는 Developer Tap에서 API와 ID 등을 발급 받을 수 있다. * Authorization Code - Redirect URL 구글 OAuth의 승인된 redirection URL 은 정상..

JWT JWT -> accessToken, refreshTokenac처럼 이증 방식 , OAuth, 쿠키 Header : 암호화 알고리즘 방식 기술 Payload : 시제 전달하고자 하는 JSON 데이터 Payload 와 시크릿 키로 Verify signature 부분이 결정 - payload 부분이 바뀌면 signature 부분이 바뀌게 되고 이걸 통해서 JWT 토큰이 유효한 값인지 변조된 값인지 확인 가능합니다. base64 인코딩 되어 있어서 누구든 다시 디코딩하여 Payload 에 어떤 정보가 들어있는지 확인 하는 것이 가능. 민감한 정보는 ㄴㄴ / JWT 를 사용하는 이유는 토큰이 유효한지 만 검사하기 위해 사용하는 것 입니다. 설명이 너무 잘 되어있는 블로그 1 : https://time-m..

여기서 handleTitle props 로 내려줘서, TitleForm에서도 버튼 클릭 시 isTitle값 이 변할 수 있게 하려했음. 왜 안되냐잉...내 생각대로라면 TitleForm안의 저 버튼을 눌렀을 때 TitleForm이 사라져야 하는데 사라지지 않으... 했으나 내가 바보였음 당연히 다른 버튼 누르면서 왜 안되냐! 이러고 있는데 되겠냐!!!!!!1 참고로 useState에서 set값 은 의 타입은 이거임.. React.Dispatch