콜백함수 정리

리액트의 상태 관리 관련 많은 라이브러리가 있지만 리덕스가 가장 많이 사용되고 있습니다. 물론 리덕스는 리액트가 없어도 사용할 수 있고 리액트도 리덕스 없이 Context API를 통해서 글로벌 상태 관리를 충분히 할 수 있습니다. 따라서 리덕스를 사용한다면 내 "

로그 아웃을 하기 위해서는 로그 아웃 하려는 유저의 DB를 찾아 해당 유저의 토큰을 제거합니다.Auth 인증 권한을 이용한 방법으로 DB에 있는 토큰이 클라이언트 사이드 쿠키에 위치한 토큰과 같지 않다면 권한이 풀리게 됩니다.User.findOneAndUpdate()는

글을 작성하거나 삭제하는 것 같은 권한이 필요한 컨텐츠와 로그인 유무등을 체크하기 위해 구현이를 구현하기 위해서 클라이언트 쿠키에 저장된 토큰과 서버 데이터 베이스에 저장된 토큰이 일치하는지 확인합니다.var token = jwt.sign(user.\_id.toHexS

로그인 기능을 구현하기 위해 login route 코드를 작성위 로직을 코드로 해석하면 아래와 같습니다.코드 해석DB에서 요청한 Email 찾기mongoDB에서 제공하는 findOne() 메소드를 사용DB에서 요청한 Email이 있다면 비밀번호가 같은지 확인user에

MongoDB 사용법 참고 클라이언트와 서버 어느쪽이든 개발을 진행할 때 노출되어선 안되는 데이터가 있기에 이러한 민감한 데이터를 관리하는 방법 config Index.js 위 코드에 "복사한 url과 id/password"는 노출되어서는 안되는 데이터입니다.

DB에 저장될 데이터를 위해서 Model, Schema 구현 Model은 스키마를 감싸주는 역할 스키마는 객체처럼 데이터를 작성하는 규칙 방법 등등으로 생각 npm install nodemon --save-dev -dev는 로컬에서 개발할때만 사용한다 굳이 다운받을

Node.js >Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼 org : Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(runtime)입니다. runtime 프로그램이 실행되고

리액트에서 클라이언트와 서버를 동시에 개발하기 위한 초기 세팅

공공데이터포털 API를 통해서 JSON 데이터를 받아오고 싶은데 아무리 찾아도 XML 형식밖에 없어서 JSON으로 변환시키는 방법을 작성합니다.방법은 크게 2가지로 나뉘는데 코드로 구현하는 것과 라이브러리를 사용하는것당연히 라이브러리가 있으면 라이브러리를 사용하는게 쉽

NavLink의 기능 active는 스타일 코드를 작성할 때 매우 유용하게 사용할 수 있는데 하나의 태그만 active가 되어야 하는데 path="/"가 항상 active가 되어있어서 해결방법을 작성합니다.위 처럼 대부분 Home 컴포넌트 경로를 "/"로 사용할텐데 뒤

리액트로 만들어진 웹을 GitHub Pages에 올리기 위한 방법

Router SPA인 리액트(브라우저)에서 페이지를 전환하는 방법 v6 이상 Router 사용방법 설치 npm i react-router-dom or yarn add react-router-dom 대부분의 경우 App.js를 기준으로 Router를 Runder하는

리액트 시작하기 리액트를 사용하기 가장 편리한 방법으로 creat-react-app이 있다. 사용방법은 공식문서에 친절하게 나와 있다. 리액트 시작하기 다만 생성을 완료하고 나면 불필요한 파일들이 있으니, 필요없다고 판단되는 파일들을 삭제하고 사용하면 된다. Mod

음식의 원가를 계산하는 방법은 보통 엑셀을 사용해서 어렵지 않게 할 수 있지만 주변에 엑셀을 사용할 수 없어 수기로 원가 계산을 하는걸 보고 "웹이나 앱으로 음식의 원가 계산을 할 수 있으면 좋겠다"라고 생각해서 만들게되었다.

git 에러 해결방법

oh my zsh 테마 사용하기

우분투에서 카카오톡을 사용하는 방법 중 가장 많은 분들이 사용하는 방법인 와인을 이용한 설치 방법 및 한글 깨짐 문제를 해결하는 방법입니다.

위 그림처럼 State가 업데이트되는 해당 컴포넌트는 전체적으로 렌더링이 다시 일어나게됩니다. 이때 만약 해당 컴포넌트가 api 요청과 같은 많은 양의 데이터를 받아온다고 가정한다면 아래와 같습니다. 이런 경우를 방지하게 위해 리액트는 useEffect라는 기능

React (Vue, Angular)를 사용하는 이유 HTML, CSS, JS만 사용해도 웹을 충분히 만들 수 있지만 React 혹은 Vue, Angular 등과 같은 라이브러리(프레임워크)를 사용하는 이유는 다양할텐데 페이지 렌더 시 필요한 부분만 업데이트할 수 있