전체 글

Postman 자동화하는 방법 with Csv Intro. 어디다가 써먹으려고 하는가? 난 데이터베이스에 더미 데이터를 넣고 싶은데 여간 귀찮은 일이 아니었다. 수 많은 데이터를 Postman으로 하나씩 쿼리를 날려 데이터를 넣는게, 과연 개발자스러운가…? 싶어 꼭 자동화를 하고 싶었다 사용하기에 따라 자신의 API들을 전부다 테스트하는 용도라던가, 서비스 점검 할 때도 사용할 수 있을 것 같다! 사용 방법 Collection과 Request 생성 일단 collection을 만들어야 한다. 쿼리들을 담을 폴더를 생성한다 생각하면 된다 난 사용자 등록 매크로란 이름의 collection을 만들었다. 만든 collection에 오른쪽 마우스 클릭을 하면, Add request가 보인다. 이 걸로 reques..

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에 접근하면 안된다는 것이다. 내가 작성한 코드 흐름..

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