City At Night

한 5~6개월만에 다시 블로그 포스팅을 시작한다. ㅜㅜ 이직이라는 변명으로 포스팅을 못했다.. 이직은 성공했고 연봉폭은 높아졌지만 ... 정신과 마음은 더 힘들어졌다. 연봉은 만족스럽지만 그 외 만족스럽지 못해 스트레스다 개발보단.. 사무업무와 운영업무가 더 많은 업이다... SM회사다 보니...그렇다... 개발회사로 이직을 준비하련다... (이번편 포스팅 작성완료 시간 : 2022.01.24 00:16) 먼저, 로그인 기능을 만들기전 로그인Modal창 먼저 구현해보겠다. 1. componets/auth/LoginModal.js 생성 const LoginModal = () => { return ( Login Login Email Password Login ); }; LoginModal창 구성도는 이렇다...

1. axios 다운로드 및 authSaga 작성 로그인은 서버와 통신을 하는 작업이므로 서버와 통신을 도와주는 'axios' 라는 라이브러리를 다운로드한다. $> npm i axios client 루트에서 다운로드하는걸 까먹지 말자. redux/sagas/authSaga.js생성한다. [authSaga.js] import axios from 'axios'; //Login Api만들기 const loginUserAPI = (loginData) => { console.log(loginData, "loginData") //loginData가 어떤값으로 들어오는지 console.log를 찍어 확인한다 const config = { headers: { "Content-Type" : "application/jso..

이제는 로그인 기능을 구현하겠다. 로그인의 기능을 대충 세분화하면 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..

React자체를 처음부터 공부하느라 많이 늦어졌다. 하루에 한 강의를 잡고.. 한 강의당 포스팅 하나 하려니 진도가 너무 안나간다... 웹은 크게 header, body, footer 로 나눌 수 있다.(더 세분화하면 무수히 많다) 지금까진 태그를 사용하여 웹에 글자만 박아 뒀다. 이젠 Footer라고 써진곳을 꾸밀 단계이다. 이제 footer 작업을 하겠다. 1.footer 작업 [components/footer.js] import React from 'react'; import {Row, Col} from "reactstrap"; const Footer = () => { const thisYear = () => { const year = new Date().getFullYear(); return ye..

이번 강의편은 에러가 너무 많이 발생하여서 노드를 삭제하고 LTS버전으로 재설치하고 이것저것 삽질하느라 나도 이해를 못했다.. 우선 흐름을 파악하고 추후에 수정하겠다. 나는 차라리 Java로 짜는 Spring이나 JSP가 훨씬 더 쉬운것 같다.. 1. component 폴더에 Header.js와 Footer.js를 만든다. import React from 'react'; const Header = () => { return Header }; export default Header; import React from 'react'; const Footer = () => { return Footer }; export default Footer; 2. 라우터 세팅 routes폴더안에 2개의 폴더를 생성한다. 첫..

저번달은 개인 사정으로 포스팅을 하지 못했습니다 !! 다시 오랜만에 이어서 글을 쓸려고하니 뭐가 뭔지 하나도 모르겠지만 포스팅을 다시 처음부터 보고 이어서 작성하겠습니다. 이제부터는 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를 제외하고 나머지 파일들 삭제한다..

이제는 로그인과 관련된 라우터를 만들겠다. 사용자가 입력한 아이디와 패스워드를 서버로 전송하고 서버에서는 저장되어 있는 아이디와 패스워드를 비교하여 일치하면 토큰값과 로그인 성공 응답을 보내주고, 일치하지 않 으면 에러 메세지를 띄워 로그인 실패 응답을 보내준다. 이에 관련한 auth Router를 만들겠다. 1.auth.js 라우터 생성 routes/api 폴더에 auth.js를 생성한다 import express from "express"; import bcrypt from "bcryptjs"; import jwt from "jsonwebtoken"; import auth from "../../middleware/auth"; import config from "../../config/index"; i..