City At Night

이제는 로그인 기능을 구현하겠다. 로그인의 기능을 대충 세분화하면 1. 아이디와 비밀번호등 인증을 서버로 요청하고 2. 서버에서는 인증에대한 성공 또는 실패에 관한 결과를 응답해준다. 이번 포스팅에선 클라이언트쪽에서 서버로 인증을 서버로 요청할때 상태, 서버에서 인증에대한 성공 응답에 대한 상태 또는 서버에서 인증에대한 실패 응답에 대한 상태 관리를 기능적으로 구현하겠다. 1.로그인상태 및 에러 클리어 Type 설정 redux폴더에 types.js를 생성한다. [redux/types.js] //LOGIN export const LOGIN_REQUEST = "LOGIN_REQUEST" export const LOGIN_SUCCESS = "LOGIN_SUCCESS" export const LOGIN_FAIL..

너무 급하게 마음을 먹지않고 천천히 공부하니 프론트딴에 재미가 들렸다. 요즘 회사에서도 틈틈히 공부를 하고 있지만 턱 없이 부족하다 ㅜㅜ footer까지 작성했고 이제 head를 작성할 차례이다. head는 내 블로그의 이름이 들어가고 이미지를 박아둘 수 있다. 사용차 관점에서 Header부분은 아주 중요하다. 만약 사용자가 내 블로그를 방문했다가 디자인이 너무 딱딱하고 보잘것 없다면 바로 창을 닫아버릴게 뻔하다. 사람을 처음 볼때 첫 이미지와 같은 느낌이랄까..? 1.Header 작성 [components/Header.js] import React from 'react'; import {Row,Col} from 'reactstrap' const Header = () => { return ( Read O..

저번달은 개인 사정으로 포스팅을 하지 못했습니다 !! 다시 오랜만에 이어서 글을 쓸려고하니 뭐가 뭔지 하나도 모르겠지만 포스팅을 다시 처음부터 보고 이어서 작성하겠습니다. 이제부터는 Front 작업 입니다. 1.React 설치 client폴더를 생성 후 client 경로로 이동하여 ( cd client) $> npx create-react-app . 리엑트 패키지를 설치한다. ( (.)의 의미는 현재 폴더에 설치하겠다는 뜻임) ( 만약 npx create-react-app mert 라고 하면 mert라는 폴더에 설치가 된다) 설치가 성공적으로 완료 되었다면 public , src폴더가 생긴다. 2. 필요없는 파일 삭제 및 정리 src폴더에서 app.js와 index.js를 제외하고 나머지 파일들 삭제한다..

우선 Middleware는 운영 체제와 해당 운영 체제에서 실행되는 응용 프로그램 사이에 존재하는 소프트웨어이다. 응용 프로그램이 운영 체제로부터 제공받는 서비스 이외에 추가적으로 이용할 수 있는 서비스를 제공하는 소프트웨어이다. 그럼 auth Middleware는 인증을 도와주는 소프트웨어이다. 전 포스팅에서 token이란걸 설명했다. 다시 간단하게 설명하면 사용자가 아이디와 패스워드를 입력하면 그 데이터가 서버로 전송이 된다. 서버는 DB에 저장되어 있는 아이디와 패스워드를 비교하여 일치하면 토큰을 사용자에게 날려준다. 사용자는 이 토큰을 가지고 인증을 필요로하는 서비스를 이용하게 된다( 글쓰기,회원검색등) 1. middleware폴더 생성, auth.js 파일 생성 server폴더안에 middlew..

1. MongoDB 기본적인 셋팅 MongoDB 홈페이지 접속 후 Start free를 눌러 회원가입 후 로그인을 해준다. 그 다음 프리티어로 선택을 하고 클러스터를 생성한다.(가장 가까운 지역 일본을 선택한다) 그 다음 좌측 Network Access로 이동하여 Add IP Address를 눌러 나의 아이피 주소를 등록한다. Add current ip adress를 눌러 자신의 아이피를 입력시킨다. 나는 이미 내 아이피를 등록을 하여 current Ip Address가 안보이지만 처음인 사람들은 보이니 클릭한다. Network Access는 내가 등록한 아이피에서만 데이터베이스에 접근 할 수 있게 한다 집이나 사무실에서만 한다면 추가를 해주고 Comment로 그 아이피주소의 명칭을 넣어주자. 다시 좌측..