boiler-plate

노드를 간단하게 배웠고, 리액트의 기초도 어느정도 습득하여 개인프로젝트를 진행하려고 한다. 처음에는 쇼핑리스트를 만들려 했으나, 기초적인 지식으로 혼자 진행하기는 힘들것 같아 클론코딩을 하게 되었다.또한 ZeroCho님이 강의하시는 nodebird라는 클론 강의를 보며

우선 몽고디비를 사용하기위해 몽고디비 홈페이지에 들어가 회원가입을 진행했다오른쪽에 보이는 Create a New Cluster 버튼을 클릭위와같이 설정하고 (서버는 싱가포르, 티어는 무료버전) 만들면 아래와 같이 클러스터 생성이 된다.위에서 CONNECT버튼을 누른뒤

Model은 Schema를 감싸주는 역활어떠한 상품에 관련된 글을 작성한다면... 그 글의 작성자, 제목, 내용, 날짜 등등이 필요하고 해당 데이터들의 타입은 무엇이고 그 타입의 길이는 어디까지 가능한지 등등 지정해준것을 스키마(Schema)라고 말한다.회원가입과 로그

프로젝트를 진행할때 Git을 통하여 버전관리를 할 수 있다.그래서 Git을 설치해보려고 한다.Git은 그냥 홈페이지를 통하여 설치를 진행하였다.Git을 검색한 뒤 위에 보이는것처럼 해당 페이지를 들어간다.위처럼 페이지가 나올텐데, 오른쪽 아래에 보이는 Download

BodyParser > 클라이언트에서 회원가입 페이지에서 폼으로 보낸 정보들을 서버에서 받기 위해 body-parser를 이용한다. npm install body-parser --save를 이용해 모듈을 받아준다. 회원가입 기능 > 모듈을 잘 다운받았다면, 이제 기능

index.js에서 몽고디비와 로컬을 연결하기위해 몽구스의 connect 메서드로 URI를 입력하여 연결했다.하지만 이것은 보안에 취약하다. 누군가 나의 깃허브에서 소스코드를 보고 이런 키값을 찾을 수 있기때문에다.그래서 이런 중요한 정보들을 다른파일로 뺀다음 .git

클라이언트에서 받아온 비밀번호를 데이터베이스에 추가하면 그 값이 그대로 들어가게 된다.그래서 이것을 한번 암호화 하여 데이터베이스에 넣어주는 작업을 할것이다.npm install bcrypt --save 를 이용하여 bcrypt를 다운받는다.Register Router

post로 /login이라는 endpoint로 요청하는 메서드를 만들어준다.그리고 이 메서드가 해야될것은1\. 요청된 이메일(id)를 데이터베이스에서 찾는다.2\. 이메일이 존재한다면 비밀번호가 같은지 확인한다.3\. 비밀버호까지 같다면 토큰을 생성한다.이렇게 세단계로

토큰 생성 및 저장

Auth 미들웨어 생성 및 토큰 인증

로그아웃은 간단하게 진행할 수 있다.앞에서 만들어준 인증 미들웨어를 활용하면 편하다.우선 라우터를 만들어보자이렇게만 작성해도 이미 여기까지 넘어온다는것은 인증이 되었다는 것이다.그래서 우리가 해줘야 될것은 해당 유저를 찾아 토큰을 삭제해주면 된다. 그러기위해서는 몽구스

React는 Facebook에서 개발한 Javascript 라이브러리다.React는 컴포넌트란 개념을 사용하여 코드의 재사용성과 테스트 효율성을 높여주었으며, 가상의 돔을 제공하여 코드의 업데이트가 일어나면 가상의돔에 먼저 업데이트한 뒤, 실제적인 돔과 비교하여 변한부

프로젝트의 구조를 다음과 같이 수정했다.리덕스를 위한 \_actions와 \_reducers컴포넌트들을 위한 componentshoc 함수를 위한 hoc유틸들을 위한 utils특정 페이지로 이동하기전 어떠한 사전작업이 이루어져야되는 함수들을 모아둔 폴더 예를들어 어떠

리액트는 Single Page이다. 하나의 페이지로 만들어졌기 때문에 페이지 이동이 불가능하다. 하지만 리액트 라우터를 사용한다면 URL에 따른 페이지이동이 가능하다.해당 기능을 사용하기위해 client 폴더에서 npm install react-router-dom --

앞에 Server를 만들때는 현재 만들고있는 클라이언트가 없었기 때문에 테스팅을 위해 POSTMAN을 이용했다. 하지만 이제 클라이언트를 만들고 테스트를 할때는 서버가 만들어져있고 디비와 연결이 되어있기 때문에 통신을 통하여 제대로된 테스트를 진행할 수 있다.흐름은

axios통신과 함께 났던 CORS관련 이슈를 해결하고자 한다.우선 에러가 난 이유는 서버의 포트는 5000이고 클라이언트는 3000이다. 서로가 다른 주소를 가지고있기때문에 통신을하는데 제한이 걸린다. 가장 큰 이유는 보안때문에다. Cross Origin Resouc

이 모듈을 이용해 Client와 Server를 한번에 켜기npm install concurrently --save"dev": "concurrently \\"npm run backend\\" \\"npm run start --prefix client\\" "이제 npm

이번 프로젝트는 좀더 기능적인 부분에 초점을 맞추기위해 CSS는 프레임워크를 사용할려고 한다.현재 여러 인기있는 CSS Framework들이 많이 있었고, 그 중에서 나는 Ant Design이라는 프레임워크를 선택했다.이 프레임워크를 선택한 이유는 스타일이 우선 깔끔해

React에는 상태를 관리할 수 있는 state가 존재한다.state의 값을 참조하여 컴포넌트의 값을 보여주며state가 수정이되면 컴포넌트가 다시 렌더가 된다.근데 이 state를 관리하는데 까다로운점이 한가지 있는데,React의 컴포넌트들은 Tree구조라는 것이다.

로그인 페이지

전 글에서 로그인 페이지 렌더링까지 완성하였다.이번에는 이제 로그인을 했을 때 전역에 있는 유저정보를 관리하는 상태를 업데이트 시킨뒤에 로그인 성공 여부에 따라 메인페이지로 보내는 로직을 만들어 볼것이다.우선 로그인을 하기위해선 로그인 버튼을 눌러야 할것이다.그러면 f

회원가입 페이지 > 로그인 페이지와 마찬가지로 간단하게 입력하는 폼들과 회원가입 버튼을 가지는 페이지다. 해당 화면을 마크업 한다면 아래와 같다. 엄청 간단한 페이지이며, 코드는 아래와 같이 만들었다. ![](https://images.velog.io/images/w

페이지를 진입하기전에 인증을 통한 분기를 구현해보자.인증이 필요한 이유는 우선 로그인이 되어있어야만 접근이 가능한 페이지도 있고, 로그인이 안되어있어야만 접근이 가능한 페이지가 있다.또한 관리자만이 접근할 수 있는 페이지가 있을것이다.이렇게 인증에 따라 접근하수있는페이