Node & React basic

Node & React 기초 강의를 듣기 시작했다.node는 이미 깔았기 때문에 terminal에서 boilerplate가 될 폴더를 만들어준다.mkdir boilerplatenpm init그리고 기본으로 설정을 해주면 됨vsc의 터미널에서 npm i express -

Schema & Model 스키마와 모델을 만들어 보자. 모델은 스키마를 감싼다. 그럼 스키마는? (몰려오는 정처기의 기억) 데이터베이스에서 하나하나의 정보를 지정해 줄 수 있는 구조를 말한다. models라는 폴더를 만들어주고 그 안에 User.js라는 파일을 만들

우리는 지금 여기에서 서버를 만들고 있는데,클라이언트가 넘겨주는 정보를 받을 수 있는 구조가 필요하다.그 역할을 하는 것이 Body-parser dependency이다.body-parser는 클라이언트에서 넘어오는 정보를 서버가 분석해서 가져올 수 있게 한다.npm i

소스에 수정을 가할 때마다 서버를 내렸다 올렸다 해야하는데nodemon이 있으면 소스를 변경할 때마다 이를 감지하여 자동으로 서버 재시작을 해준다(고 한다)npm i nodemon --save-dev\--save뒤에 -dev가 있는데 이는 배포하기 전, local에서만

mongoDB 데이터베이스 아이디와 비밀번호 때문에 레포지토리를 private으로 만들었었는데, 이걸 .gitIgnore를 이용해서 감춰보도록 하자.개발환경이 로컬인지 배포모드인지에 따라서도 따로 해주어야 한다(예를들어 heroku서비스를 통해 배포한다든지..).최상위

우리가 postman에서 보내는 password는 암호화가 1도 안 되어 있어서 보안상 문제가 있다. 이번에는 Bcrypt로 비밀번호를 암호화해보자.터미널에서 npm i bcrypt --save를 입력해서 bcrypt를 깔아준다.그리고 암호화는 Register Rout

이제 로그인을 해보자.로그인을 하려면 확인할 것이 있는데1\. 로그인 요청된 이메일이 데이터베이스에 존재하는지 찾아본다.2\. 이메일이 있다면 비밀번호가 일치하는지 확인한다.3\. 비밀번호까지 맞다면 토큰을 생성한다.그럼 User에서 post를 해보도록 하자.역시나 콜

오늘이야말로 토큰 생성을 해보자.토큰 생성을 위해 JsonWebToken이라는 라이브러리를 다운로드해야 한다.npm i jsonwebtoken --saveJsonWebToken 문서이와 같이 사용하라고 적혀있음유저 스키마에 토큰생성 메서드를 만들어주러 가자.인자 하나만

오늘은 Auth(Authentication)기능을 만들어 본다.이게 왜 필요하냐? 사이트 내에서 로그인을 해야만 이용 가능한 정보와 그렇지 않은 정보가 있는데 이를 체크하기 위해서이다.저번에 token을 만들었는데 이 토큰은 클라이언트쪽에서는 쿠키에 저장이 되고, 서버

오늘은 로그아웃 기능을 구현해 본다.이를 위해서는 로그아웃 Router를 만들고 유저를 데이터베이스에서 찾은 다음그 유저의 토큰을 지워줘야 한다.토큰을 지워주면 되는 이유는 지난번 Authentification기능을 만들 때, 클라이언트의 토큰을 가져와서 DB와 비교했

이제 프론트엔드로 넘어왔다.React는 JS라이브러리이다(프레임워크가 아님)컴포넌트로 이루어져있어 재사용성이 뛰어나다.Real DOM vs Virtual DOMReal DOM \-여러 리스트가 있을 때 한 가지의 리스트만 업데이트하고 싶어도 전체 리스트를 다시 Rel

폴더 구조를 좀 바꿔보자. HOC? higher order component 컴포넌트안에 다른 컴포넌트를 갖는 function 자격을 판단하여 다음 action을 취할 수 있게 함. React-Router-Dom 이 페이지를 참고하면 되는데 v6는 실습을 제공

갑자기 velog가 안돼서 일단 여기에 기록을 한다.서버는 5000번 포트를, 클라이언트는 3000번 포트를 가지고있는데 이렇게 두 개의 다른 포트를 가지고 있는 서버는 아무 설정 없이 Req를 보낼 수가 없다.왜? CORS정책 때문이다.Cross-Origin Reso

Concurrently를 이용해 프론트와 백 서버를 한번에 켤 수 있다.(현재는 두 개의 터미널을 켜서 서버를 켜고 있음)npm i concurrently --save 로 Concurrently를 설치하도록 하자.설치는 전체폴더에서 하고 있다.여기서 확인가능!사용방법

CSS는 framework를 이용할 것이다. 기능보다 CSS에 너무 신경을 쓰게 될 수 있기 때문에..CSS framework에는 Material UI, React Bootstrap, Semantic UI, Ant Design, Meterialize 등이 있는데 우리는

Class component가 더 기능이 많지만 코드가 길어지고 처리가 느릴 수 있다.그러나 React 16.8부터 Hooks가 등장해서 Function component에서도 기능을 다 사용할 수 있다!예를들어 라이프사이클을 useEffect등으로 구현할 수 있게 됨

오늘은 Register 페이지를 만들려고 한다.Login페이지와 비슷한 점이 많을 거라, 일단 Login페이지를 그대로 옮겨왔다.다만 로그인 페이지에는 이메일과 비밀번호 창, 로그인만 있는 데 반해 register에는 이메일, 이름, 비밀번호, 비밀번호 확인, 확인의

로그아웃 기능을 만들어보고자 한다!이건 로그아웃을 위한 페이지를 만드는 게 아니라랜딩페이지에 로그아웃 버튼을 만드는 게 다이기 때문에 금방 끝날듯랜딩페이지에 Log Out(<button onClick={onClickHandler}>Log Out</button

인증된 사용자만이 할 수 있는 기능들이 있기 때문에 이를 위해서 인증 체크를 하려고 한다.들어갈 수 있는 페이지들에 대한 통제를 위해 HOC를 이용해야 한다.Higher Order Component.다른 컴포넌트를 받아 새로운 컴포넌트를 반환하는 컴포넌트로, 유저가 해

저번에 메인페이지에서 아무것도 안 뜬다고 했는데, auth.js에서 console에 response를 띄우기로 요청을 보냈기에 어떻게 뜨는지 궁금해서 console을 열었더니 Warning: Functions are not valid as a React child. T

저번에 적은 에러 때문에 정말 포기하고 싶었다.나랑 같은 오류가 뜨는 사람들이 있으면 모를까 왜 그런 질문은 하나도 없는건지..하지만 다 해놓고 포기할 순 없었다.역시나 그 문제는 useNavigate때문이었다. 주석처리 해도 오류가 떴던 이유는 모르겠음..해결하기 위