Intro. 무슨 문제가 있었는가 Login을 하지 않고, 바로 회원 등록 페이지인 register로 리다이렉팅 되는 것을 구현하던 중 발생한 문제 해결 방법이다. if (googleAuth == null || googleAuth?.status == "REGISTER") { navigate("/"); } Hook을 써서 유저를 판단하고 페이지 접근을 제어하는 모듈이 따로 존재하기에, 위의 코드처럼 register 페이지에 navigate(“/”)를 붙였더니 에러가 발생 했다. Can’t perform a React state update on a component that hasn’t mounted yet 에러인데, 요약하면, 렌더링하는 동안 state에 접근하면 안된다는 것이다. 내가 작성한 코드 흐름..
2023/02
Intro. CSS 왜 건드는가? 정보는 어디에서 얻었는가 난 주로 Youtube에 Obsidian template을 키워드로 검색해서 구현했다. 주로 옵시디언 사용자 분들이 공유해주신 것을 수정해서 사용한다 수정 할 때 모르는 것들은 Reddit이나 Obsidian forum에 가면 커뮤니티가 형성이 잘 되어있어서 왠만하면 금방 해결 할 수 있다. 수정하는 방법이라 함은 옵시디언 내부에서 개발자 도구를 켤 수 있기 때문에, 개발자 도구를 켜서 바꾸고 싶은 컴포넌트를 클릭해서 CSS 속성을 확인하고 바꾼다 CSS 기본적인 사용법만 알면 금방 사용하니까 도전해보자 Dash board 대시 보드는 옵시디언 접속 했을 때 Home 화면이다. 주로 데일리 노트와 Home 화면을 자주 보는 듯하다 Home을 대시..
TypeORM DataSource is Not Set for This Entity Feat yarn.lock 팀원들의 코드를 머지하고 났더니, 일부 팀원들에게서 DataSource is not set for this entity 에러가 발생했다. 접근 방식 프론트에서 날린 Axios? const handleLoginSuccess = async (code: string) => { const {data} = await axios.post("http://localhost:4000/auth/google/callback", {code}); //FIXME: 유저가 등록되어 있지 않은 경우 미리 데이터 저장하면, user id가 누락 됨 setStoredUser(data); const {status} = data; ..
문제 상황 회원 가입 폼을 만들던 중 발생한 문제이다. 로컬 스토리지에 값이 저장 되지 않는다 SSO 로그인을 해서 구글에서 유저 정보를 가져오면, 로컬 스토리지에 저장한다 그 후, 회원 정보를 등록 할 때, 저장된 정보를 가져오는 단순한 로직이다 로그인 페이지 setStorage("#user", JSON.stringify(data)); getStorage/setStorage // Function to store a string value in local storage using AES encryption export function setStorage(key: string, value: string) { const storage = new LocalStorage(); // Create a new ins..
@fastify/oauth2 라이브러리를 사용합니다 일단, oauth2 라이브러리를 yarn으로 설치합니다. fastify-oauth2 라이브러리는 간단하게 oauth 로그인 기능을 구현 할 수 있도록 보조합니다. yarn add @fastify/oauth2 @Type 추가 @fastify/oauth2 라이브러리를 커스텀해서 사용 할 때, 타입 스크립트에서 인식하지 못하는 경우가 있어 타입을 미리 선언 해줍니다. 루트 디렉터리에 @types/index.ts에 정의하였습니다 import {OAuth2Namespace} from "@fastify/oauth2"; declare module "fastify" { interface FastifyInstance { kakaoOAuth2: OAuth2Namespac..
Intro. 옵시디언에 대한 내 생각 옵시디언은 자유도가 높아서, 완전 개인화 된 나에게 맞춰진 생산 툴이 될 수 있다 생각합니다 그러나 높은 생산성을 뿜을 수도 있지만, 주객 전도 될 수 있기에 조심스럽게 사용하게 됩니다. 생산이 아닌 메모를 위한 메모를 적게 되는 경우죠. 필요 없는 플러그인을 이래저래 가져다 쓰며 시간을 의미없이 허비한다던가요. 처음엔 유튜브나 블로그 등을 보며 모두 다 제 걸로 만들려고 했습니다. 어서 배워서 강해지고 싶은 마음이 컸던거죠. 하지만, 얼마 지나지 않아 욕심임을 알았습니다. 제 표현으로 무거운 시스템이라 하는데요. 바로 제 것으로 소화하기에는 다른 분들의 프로세스가 거대하고, 복잡한거죠. 그 분들에게 이미 최적화된 시스템을 저는 수입해오는거니깐요 요즘은 마음을 비우고..
Intro. 왜 쿠키가 저장 되지 않는가? 개발자 도구의 애플리케이션에 서버에서 보낸 쿠키가 저장되지 않는 문제가 발생했다 처음에는 쿠키를 서버에서 보내지 않는건가 싶어 개발자 도구의 네트워크를 켜서 쿠키가 같이 오는 것을 확인했다. 서버에서는 쿠키를 잘 보내주고 있었다 나의 경우 fastify 백엔드 서버와 react가 별도로 구동 되고 있었다. 두 애플리케이션 간의 연결은 axios를 사용하였다. 이번 게시물에서는 무엇이 문제였는지 해결하는 과정을 기록한다 SameSite=None 및 Secure 속성 설정 개발자 도구의 네트워크 부분을 보는데 노란색 경고가 뜨고 있었다. cookie의 SameSite 속성을 default 값인 lax로 설정했다는 것이다 SameSite는 웹 애플리케이션에서 CSRF..
Intro. State 상태란 무엇인가 리액트에서는 변수를 사용하는 방법이 다양하다. 구글에 검색해보면, state를 설명 할 때에 변수 즉 데이터를 저장하는 공간으로 자주 설명하는 것을 볼 수 있다. React docs에서는 State: A Component’s Memory라 소개하고 있다. 구성 요소들의 저장 공간이란거다 화면을 구성하 고 있는 요소들은 유저와 상호작용 할 때에 표시 되는 값이 바뀌는 경우가 있다. 리액트에서는 이러한 변화하는 요소들의 값을 저장한다는 개념에서 state를 사용한다 굳이 State를 써야하는가? 우리에겐 변수가 있는걸 React docs에서 좋은 예시가 있어 들고 왔다 import { sculptureList } from './data.js'; export defaul..
Uncaught Error: Rendered More Hooks Than During the Previous Render. 해당 에러는 회원 가입 처리를 할 때 데이터 list를 select option으로 뿌리려고 할 때 발생한 에러이다. 에러를 직역하면 이전 렌더링 보다 많은 hook을 렌더링했다는 것이다. 에러 해결 const { isLoading, isError, data, error } = getCampusListQuery(); useEffect(() => { campusListFunc(); }, []); const userListFunc = () => { if (isLoading) { // console.log("isLoading"); return ; } if (isError) { consol..
Google Cloud Platform에서 OAuth 설정 먼저하자 구글 클라우드 콘솔에서는 OAuth 동의화면과 사용자 인증 정보를 등록해야 한다. OAuth 동의화면 먼저 OAuth 동의화면에서는 앱 이름, 사용자 지원 이메일과 로고 등을 설정한다. 다음은 범위(scope)를 설정해야 한다. OAuth2를 사용하여 유저 정보에 접근 할텐데 어떤 정보에 접근 할지 알아야 한다. 추후 쿼리 날릴 때 파라미터로 날려야하므로 기억하자 마지막으로, 테스트 사용자에 자신이 사용할 email을 미리 등록한다. 팀원들이 있다면 팀원들도 등록해주자. 사용자 인증 정보 구글 클라우드 콘솔의 API 및 서비스 - 사용자 인증 정보 - OAuth2.0 클라이언트 ID에서 계정을 하나 생성해주자. 사용자 인증 정보에 등록하..
