감귤밭 호지차 농장

* Redux 정리 글 Redux 정의 * Redux-Toolkit 정리 글 [Redux x Redux-toolkit] 간단 사용법 * 기타 상태 관리 도구 정리 글 (useState / useContext / Recoil / Mobix ) 참고 : React 상태관리 최강자는? React 에서 사용하고 있는 상태관리 도구들의 각각의 차이점과 장단점 정리 글 React는 여러 상태 관리 도구들을 사용할 수 있는데 각기 장단점을 가지고 있어서 이들의 차이점에 대해서 정리해보는 시간을 가지도록 하겠습니다. 참고로 저는 Redux-Toolkit을 사랑하지만 많은 회사에서는 Redux , Redux-Saga를 많이 사용하더라구용.. Recoil 도 꽤 쓰고 말이죵... 우선 프로젝트를 진행할 때 왜? 상태관리 ..

구글 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 트리거를 내려줬는데 이때문에 뭔가 꼬인 듯 합니다. 우선은 삭제 해주었고 다시 댓글을 등록 했을 때 바로 댓글이 뜰 수 있게 나오도록 수정을 어떻게 해야 하나 고민이네요 # 업데이트 댓글의 작성 컴포넌트 부분하고 수정 삭제 컴포넌트하고 나눠져있고 해서 각..

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

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

styled-components( CSS - in - JS )에서는 클래스 네이밍을 자동으로 생성해주어 겹칠 가능성이 없지만 CSS로만 구현하면 모든 스타일을 global에 선언하기 때문에 중복되는 경우가 발생할 수 있다. 이러한 불편함을 해결하기 위해 "BEM" 이 자주 사용된다. 1. BEM CSS 제작 방법으로 일종의 네이밍 컨벤션 이다. 기본적으로 class 만 사용하며, " 목적 " 에 따라 네이밍 하는 것이 특징이다. { Block }__{ Element }--{ Modifier } ex. Header__navigation--navi-text { /.../ } > 참고 : CSS-네이밍 컨벤션- BEM 2. Utility-First ( Tailwind, Bootstrap ) Utility-Fi..

> Toggle 1차 에러 발생 in Wrapper TS2769 : No overload matches this call, import styled from 'styled-components'; interface ThemeToggle { themeMode: string; toggleTheme: () => void; } const Wrapper = styled.button` background: ${({ theme }) => theme.mode.mainBackground}; border: 1px solid ${({ theme }) => theme.mode.border}; box-shadow: 0 1px 3px ${({ theme }) => theme.mode.divider}; border-radius: 3..