본문 바로가기

분류 전체보기

[MongoDB-atlas ]user is not allowed to do action [insert] on [test.users] atlas를 처음 사용하게 되면 유저를 만들고 사용을 해야한다. 그때 권한을 설정해 주지 않으면 api 요청을 보내는 과정에서 데이터베이스에 접근을 못하고 아래와 같은 에러가 뜨게 된다. 에러 user is not allowed to do action [insert] on [test.users] 해결법 1. Database Access로 들어가기 2.Data base User Privileges 의 Built-in Role의 설정을 각자 상황에 맞는 권한을 부여한다. 대부분 Atlas admin 을 주며 배포 까지 하는 프로젝트일 경우 다시 공부를 해 봐야겠다. 더보기
회원가입 회원가입 페이지 UI 생성하기 위와 같은 다지인이 목표 기본 입력 틀 갖춘 다음 div 단 복사해서 email, name, password 도 같이 생성 회원가입 버튼 만들기 아이디가 있다면 로그인 페이지로 가게 라우팅 React-Hook-Form react-hook-form 을 이용한 유효성 체크 렌더링도 효율적으로 되게함. npm install react-hook-form useform를 사용하여 from을 관리하는 객체 선언 register : input 관련 함수 handlesubmit : 제출 관련 함수 errors: form 입력값의 유효성 결과값을 저장하는 객체 reset : 제출시 초기화관련 함수 유효성 체크를 위한 객체 생성 유효성 체크 등록 에러가 있을 경우 에러 표시 Axios ins.. 더보기
리액트 Redux Toolkit 개념 정리 Redux Toolkit Redux Toolkit APIs 더보기
리액트 리덕스 개념 정리 [John Ahn] 왜 쓰는가? 1.pros 문법 귀찮을 떄 모든 컴포넌트가 props 없이 state를 stroe에서 직접 꺼낼 수 있다. 2. 상태 관리 위해서 리듀서 : state 수정 방법에 대한 요청(action)을 가지고 있다. 컴포넌트에 state 수정 요청을 하려면? dispatch를 사용(인자로 action을 줌) 리덕스란? 미들웨어 없이 리덕스 카운터 앱 만들기 combineReducers Redux Provider npm i react-redux --save useSelector & useDispatch 리덕스 미들웨어 Redux Thunk 더보기
서버 깃허브에서 main에 있는거 한방에 pull로 당겨오기 sudo git fetch —all // 원격 저장소에서 모든 변경 사항을 가져오기 sudo git reset —hard origin/main //로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정 sudo git pull //원격 저장소의 변경 사항을 로컬 저장소로 가져오고 병합 주로 다른 개발자가 main 브랜치에 변경 사항을 커밋하면 sudo git fetch --all을 사용하여 해당 변경 사항을 로컬 저장소로 가져온다. 그런 다음 sudo git reset --hard origin/main을 사용하여 로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정 한다. 이렇게 하면 로컬 저장소의 변경 사항이 모두 삭제되고 원격 저장소의 main 브랜치의 변경 사항만 남게 된다. 마.. 더보기
백엔드 기본구조 생성하기 package.json 세팅 및 설치 npm init npm install bcryptjs cors dotenv jsonwebtoken mongoose npm install -D nodemon nodemon 스크립트 작성 "dev" : "nodemon src/index.js", 전체 폴더 구조 생성 express.static() 이미지, CSS 파일 및 JavaScipt 파일과 같은 정적 파일을 제공하려면 Express의 express.static 내장 미들웨어 기능을 사용. 바로 upload 폴더에 있는 이미지 파일들을 프론트로 나중에 보낼수 있게 public 이라는 폴더에 있는 정적인 파일을 제공할 수 있다. 가상 경로를 지정하여 특정 url 을 지정할 수 있다. 상대경로를 path 모듈을 사용해서 .. 더보기
프론트엔드 기본 구조 생성하기 Vite을 이용한 리액트 생성하기 전체 폴더 및 파일 생성 Vite ESlint 설정하기 import를 하지 않아도 에디터에서 빨간줄이나 에러가 안뜨는 건 eslint를 설정하지 않아서이다. 그래서 설치를 해주자 타입스립트를 사용할 경우 eslint가 없어도 큰 문제가없다. 3가지 라이브러리 설치 npm install -D vite-plugin-eslint eslint eslint-config-react-app eslint plugin 적용 및 eslintrc 파일 생성 후 rules 생성 언어 버전 지정, 규칙 설정 및 플러그인 사용을 포함하여 eslint의 동작을 구성할 수 있다. 구성 파일은 extends 구성에서 규칙을 확장하거나 덮어쓸 수도 있다. TailwindCSS 를 앱에 적용하기 3가지 .. 더보기
리액트 라우터 핵심 개념 정리 React Router Outlet 자식 경로 요소를 렌더링 하려면 부모 경로 요소에서 을 사용해야 한다. 이렇게 하면 하위 경로가 렌더링 될 때 중첩된 UI가 표시될 수 있다. 부모 라우트가 정확히 일치하면서 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다. 라우팅 설정 예시 (App.js): import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( ); } export default App; Ho.. 더보기

티스토리툴바