React Query커스텀hook 추가 유저 로그인 상태 쿼리 키 관리하는 커스텀 훅 import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; const useLoginStatus = () => { const { data, isLoading, error } = useQuery(['loginStatus'], async () => { return await axios .get('/api/users') .then((res) => { if (res.data.isAuth === false) return false; if (res.data._id) return true; }) .catch((error) => { console.log(e..
이번 주말동안 크게 한 것은 로그인 상태관리(서버)를 Redux에서 ReactQuery로 바꿨다는 점 작업하는동안 크게 느꼈던 것 부터 적고가자.. Redux는 클라이언트의 상태관리, React Query는 서버의 상태관리 HTTP 통신 시 요청(requset)과 응답(response)의 데이터를 꼭 확인하면서 작업하자. useQuery의 Promise함수는 꼭 response를 return을 해야 data에 값이 들어온다. const { data, isLoading, error } = useQuery( ['isLoggedIn'], async () => await axios .get('/api/users') .then((res) => { ✅ if (res.data.isAuth === false) retu..
유저 인증용 스키마 작성 MongoDB에 저장할 데이터 구조 즉, schema를 작성하고 외부에서 사용할 수 있도록 export 했다. 일단은 유저 회원가입 및 로그인에 필요한 내용만 작성했다. root에서 model 디렉토리를 만들고 그안에 User.js 파일을 생성했다. const mongoose = require('mongoose'); const saltRounds = 10; /* userSchema */ const userSchema = new mongoose.Schema( { nickname: { type: String, maxlength: 10, trim: true, unique: true, // required: true, }, email: { type: String, trim: true, ..
한 문장으로 여러사람들에게 동기부여와 여러 메세지들을 담을 수 있는 공간을 제작하고 싶었다. 개인 프로젝트를 제작하기 위해 서버를 구축하는 법부터 알아야했다. Node, Express, MongoDB, Mongoose 의 사용법을 어느정도 알고 제작을 시작했다. Javascript하나로 프론트와 서버를 직접 만들수 있기 때문에 도전해봤다. Express : 웹 서버 생성용 node전용 웹 프레임워크 MongoDB : 데이터들을 저장할 NoSQL 데이터베이스 (NoSQL : 관계형 데이터베이스가 아닌 SQL) Mongoose : node와 MongoDB를 연동해줄 라이브러리 MongoDB 연동하기 MongoDB Atlas 회원가입과 클러스터 및 컬렉션 생성은 여러 블로그와 영상을 찾아보면서 생성했다. 프로..
백준(BOJ) node.js 문제 풀이법 백준에서 Node.js로 입력을 받는 방법은 크게 두 가지가 있다. readline 모듈 fs 모듈 readline보다 fs모듈을 사용하는 것이 더 빠르다. var fs = require('fs'); var input = fs.readFileSync('/dev/stdin').toString().split(' '); var a = parseInt(input[0]); var b = parseInt(input[1]); console.log(a+b); 위 코드는 백준 언어 도움말에서 제공하는 코드다. fs모듈(FileSystem Module) 파일 처리를 하는 모듈로, 직접 입력 파일을 읽어와서 처리한다. 위 코드는 입력값 전체를 하나의 문자열로 만들어 split 메소드..
내가 직접 겪고 해결한 에러들을 모아둔 글이다. 새로운 에러를 맞이할 때마다 업데이트할 예정. adding embedded git repository 해당 디렉터리를 다시 add 하기 위해 git 캐시 제거 sudo git rm --cached jpro-profile/src/vendor/scssphp/scssphp .git 파일 검색 sudo find -name '.git’ root 경로의 .git 파일을 제외하고 모두 제거 sudo find . -mindepth 2 -name '.git' -prune -exec rm -rf {} + Desktop에 .git 설치 됐을 때 터미널에 입력하여 root repository 확인 git rev-parse --show-toplevel 해당 경로로 이동 cd /u..
기본 작성 Markdown 언어를 이용해 작성한다. 뱃지 기술 스택이나 사용 툴 등을 간결하게 표현하고 싶을 때 인스타, 블로그 등 다양한 바로가기 링크들을 깔끔하게 나타내고 싶을때 로고와 공식컬러를 포함한 예쁜 아이콘 뱃지 Simple Icons 2435 Free SVG icons for popular brands simpleicons.org 방법1 https://shields.io/ 사이트에 가서 직접 커스텀하기 방법2 아래 코드 복사해서 적절히 변형하기 (링크도 추가할 수 있다) 이름 : 뱃지에 쓸 이름(내용) 색상코드 : # 제외하고 입력 (ex. #FFCA28 -> FFCA28) 로고명 : 아이콘 이름 정확하게 입력 로고색 : 로고의 색 방문자 수 HITS Easy way to know how ..
Mac 사용자의 기준에서 작성되었음 Git 명령어 분류 명령어 내용 설명 $ git init .git 하위 디렉토리 생성(폴더를 만든 후, 그 안에서 명령 실행 => 새로운 git저장소 생성) $ git clone 기존 소스 코드 다운로드/복제 $ git clone /로컬/저장소/경로 로컬 저장소 복제 $ git clone 사용자명@호스트:/원격/저장소/경로 원격 서버 저장소 복제 $ git add $ git add * 커밋에 단일 파일의 변경 사항을 포함(인덱스에 추가된 상태) $ git add -A 커밋에 파일의 변경 사항을 한번에 모두 포함 $ git commit -m "커밋 메시지" 커밋 생성(실제 변경사항 확정) $ git status 파일 상태 확인 $ git branch 브랜치 목록 $ gi..
Mac 사용자의 기준에서 작성되었음 Git 깃은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 1. Git 설치/삭제/업데이트 홈브루를 통해 깃과 VScode를 설치한다. homebrew 설치 /bin/bash -c "$(curl -fsSL [https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"](https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)") brew경로 환경변수에 추가 echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >/Users/PC계정명/..
문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 조건 N의 범위 : 100,000,000 이하의 자연수 나의 풀이 function solution(n) { return (n+'').split('').reduce((acc, curr) => acc + parseInt(curr), 0); } 다른 풀이 function solution(n) { var a = (n + '').split(''); var b = 0; for(var i = 0; i < a.length; ++i) { b += parseInt(a[i]); } return b; //return n...
