City At Night

[MernStack] Blog 만들기 18. [React] 로그인Modal 만들기.

Wuny — Wed, 30 Jun 2021 01:43:47 +0900

한 5~6개월만에 다시 블로그 포스팅을 시작한다. ㅜㅜ
이직이라는 변명으로 포스팅을 못했다..
이직은 성공했고 연봉폭은 높아졌지만 ... 정신과 마음은 더 힘들어졌다.
연봉은 만족스럽지만 그 외 만족스럽지 못해 스트레스다
개발보단.. 사무업무와 운영업무가 더 많은 업이다...

SM회사다 보니...그렇다...
개발회사로 이직을 준비하련다...

(이번편 포스팅 작성완료 시간 : 2022.01.24 00:16)

먼저, 로그인 기능을 만들기전 로그인Modal창 먼저 구현해보겠다.

1. componets/auth/LoginModal.js 생성

const LoginModal = () => {
  return (
    <div>
      <NavLink onClick={''} href="#">
        Login
      </NavLink>
      <Modal isOpen={'modal'} toggle={''}>
        <ModalHeader toggle={''}>Login</ModalHeader>
        <ModalBody>
          <Form onSubmit={''}>
            <FormGroup>
              <Label>Email</Label>
              <Input />
              <Label>Password</Label>
              <Input />
              <Button color="dark">Login</Button>
            </FormGroup>
          </Form>
        </ModalBody>
      </Modal>
    </div>
  );
};

LoginModal창 구성도는 이렇다.

<Modal>
     <ModalHeader></ModalHeader>
     <ModalBody>
     	<FormGroup>
        	<Input/>  //Email
            <Input/> //Password
        </FormGroup>
     </ModalBody>
<Modal>

Modal이라는 큰 틀안에 Header와 Body가 있다.
Body안에 Email과 Password를 적는 Input이 있는데 이 Input들을 FormGroup으로 감싼다.

import {
  FormGroup,
  Modal,
  ModalBody,
  ModalHeader,
  NavLink,
  Label,
  Button,
  Form,
  Input,
} from 'reactstrap';

Modal창 작성할때 Import할 reactstrap 모듈들이다.
굳이 먼저 Import할 필요는 없고 태그를 작성하다보면 자동으로 작성되는데
나는 Button, Label들 몇개는 자동으로 import가 안되어 수동으로 적어줬다.
(에러코드에 다 알려주니 그때그때 불러주면 된다.)

마지막으로 export해주어 모듈화 시킨다.

export default LoginModal;

2. Components/AppNabar.js
먼저 페이지가 열리면 자동으로 LoginModal창 나오게끔 테스트를 할 것이다.
기존 코드를 수정한다.

const AppNavbar = () => {
  return (
    <Fragment>
      <Navbar color="dark" dark expand="lg" className="sticky-top">
        <Container>
          <Link to="/" className="text-white text-decoration-none">
            Side Project's Blog(Wuny)
          </Link>
          <NavbarToggler />
          <Collapse isOpen={true} navbar>
            <Nav className="ml-auto d-flex justify-content-around" navbar>
              {false ? (
                <h1 className="text-white">authLink</h1>
              ) : (
                <LoginModal />   <- 수정한 코드
              )}
            </Nav>
          </Collapse>
        </Container>
      </Navbar>
    </Fragment>
  );
};

기존 <h1 className="text-white">authLink</h1> 를 삭제하고
1번에서 작성한 <LoginModal/>을 넣어준다.

3. React Server 실행

React 서버 실행한 모습이다. 기능은 구현 안했기에 로그인 버튼을 눌러도 아무 반응이 없다.이 전 포스팅까진 Linux에서 개발했지만 이번 포스터부턴 Windows10기반이다.

다음 포스팅에선 이제 기능을 구현해보겠다.

Linux에서 VScode 사용시 한글 받침 안써지는 이슈 해결법.

File -> Preferences -> Settings -> Text Editor -> Font -> Font Family 에서 'Droid Sans Fallback' 을 제거한다

[MernStack] Blog 만들기 17. [React] Login API 만들기.

Wuny — Tue, 22 Jun 2021 02:23:19 +0900

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/json"
        }
    }
    return axios.post('api/auth', loginData, config)
}

}

loginUserAPI라는 함수를 만들고 loginData를 파라미터값으로 받는다.
headers: {~} 이 부분은 우리가 서버작업을 할때 포스트맨드로 테스트할때 그 형식이다.(기억이 가물가물)
로그인은 서버로 데이터를 전송하기때문에
return axios.post 를 적어주고 3개의 정보를 보낸다. (api/auth,loginData,config)
1. 'api/auth' 인증정보의 주소 (현재는 localhost:3000)
2. loginData
3. config 데이터의 형식.(?) // 사실 이건 잘 감이 안온다.

2.로그인에 관한 generator함수 작성

[authSaga.js]

import { all, put, takeEvery,call,fork } from 'redux-saga/effects';
import { LOGIN_FAILURE, LOGIN_REQUEST, LOGIN_SUCCESS } from "../types";

그 다음 all,put,takeEvery,call,fork를 불러와주다.
(all,put,takeEvery,call,fork 에 대한 설명_ 클릭)

저번 포스팅에서 만들어놓은 로그인에 관한 처리 type도 import 해준다.

function* loginUser(action) { 
    try{
        const result = yield call(loginUserAPI,action.payload) //action.payload??가 뭐지?
        console.log(result)
        yield put({
            type : LOGIN_SUCCESS,
            payload: result.data
        })
    }catch(e){
        yield put({
            type: LOGIN_FAILURE,
            payload: e.response
        })
    }
}

function* 은 generator함수인데 yeild함수를 사용할 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function*
yeild를 사용하여 여러개의 값을 순서에따라 반환 할 수 있다.

try문 안에는 로그인에 성공했을때 catch문 안에는 로그인에 실패했을때 처리를 해준다.

3. 로그인 상황을 처리하는 함수 작성

[authSaga.js]

function* watchLoginUser(){
    yield takeEvery(LOGIN_REQUEST, loginUser)
}

watchLoginUser 라는제네레이터 함수를 작성한다.
이 함수는 계속 로그인 요청을 기다리다 takeEvery 메서드를 사용하여
LOGIN_REQUEST가 들어오면 loginUser를 실행시킨다.

지금까지 작성했던 authSaga.js는 리덕스 패턴으로 많이 사용된다.
<지금까지 패턴>
1. watchLoginUser함수가 LOGIN_REQUEST를 받고 loginUser함수로 던져준다.
2. loginUser함수는 LOGIN_REQUEST를 받고 성공 또는 실패에 대한 처리를 한다.
3. 성공일시 loginUserAPI 함수로 던져준다.
4. loginUserAPI는 서버로 로그인한 정보를 뿌려준다.

4. 모듈로 내보내기

[authSaga.js]

export default function* authSaga() {
    yield all([
        fork(watchLoginUser) //fork 함수
    ])
}

fork함수를 사용하여 모듈화한다.
//fork함수가 뭔지 봐보자.

5. sagas/index.js함수 작성

[sagas/index.js]

import {all,fork} from 'redux-saga/effects'
import axios from 'axios'

import authSaga from './authSaga'
import dotenv from 'dotenv'
dotenv.config()

axios.defaults.baseURL = process.env.REACT_APP_BASIC_SERVER_URL



export default function* rootSaga(){ //제네레이터 함수 .. 여러값을 반환할수 있음 .
    yield all([
        fork(authSaga)
    ]);
}

8번째 줄 axios.defaults.baseURL = process.env.REACT_APP_BASIC_SERVER_URL
이 부분은 .env로 작성하였다.
만약 .env로 작성 안하고 바로 서버 주소를 노출하게 된다면
axios.defaults.baseURL = http://localhost:7000 처럼 작성할 수 있다.
(지금은 로컬주소라 상관없지만 추후 배포시 문제가 생길 수 있다)
주소가 적나라게 보이면 보안에 취약할 수 있으니 닷엔브파일을 만들어 작성한다.

[client/.env]

REACT_APP_BASIC_SERVER_URL = "http://localhost:7000"

react로 만든 앱은 반드시 REACT_APP으로 시작한 다음 이름을 지어야한다.

[authSaga.js] 전체 코드

import axios from 'axios';
import { all, put, takeEvery,call,fork } from 'redux-saga/effects';
import { LOGIN_FAILURE, LOGIN_REQUEST, LOGIN_SUCCESS } from "../types";

//Login Api만들기
const loginUserAPI = (loginData) => {
    console.log(loginData, "loginData") //파라미터 체크
    const config = {
        headers: {
            "Content-Type" : "application/json"
        }
    }
    return axios.post('api/auth', loginData, config)
}

function* loginUser(action) { //function* 을 사용하면 yeild함수를 사용할 수 있다?
    try{
        const result = yield call(loginUserAPI,action.payload) //action.payload??가 뭐지?
        console.log(result)
        yield put({
            type : LOGIN_SUCCESS,
            payload: result.data
        })
    }catch(e){
        yield put({
            type: LOGIN_FAILURE,
            payload: e.response
        })
    }
}

function* watchLoginUser(){
    yield takeEvery(LOGIN_REQUEST, loginUser)
}
// 계속 로그인 리퀘스트를 받을 함수를 작성함
// takeEvery 계속 실행됨 
// LOGIN_REQUEST가 들어오면 loginUser를 실행시켜라

//여기까지가 리덕스 패턴으로 많이 사용됨

export default function* authSaga() {
    yield all([
        fork(watchLoginUser) //fork 함수
    ])
}

[MernStack] Blog 만들기 16. [React] 로그인구현을 위한 Reducer setting

Wuny — Fri, 18 Jun 2021 01:39:45 +0900

이제는 로그인 기능을 구현하겠다.
로그인의 기능을 대충 세분화하면

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_FAILURE = "LOGIN_FAILURE" 

// CLEAR ERROR
export const CLEAR_ERROR_REQUEST = "CLEAR_ERROR_REQUEST"
export const CLEAR_ERROR_SUCCESS = "CLEAR_ERROR_SUCCESS"
export const CLEAR_ERROR_FAILURE = "CLEAR_ERROR_FAILURE"

types.js에서는 로그인 요청,성공, 실패에 대한 타입과 에러를 클리어했을때의 타입을 정의한다.

2. 상황에 맞는 상태관리 작성

[redux/reducers/authReducer.js ]

const initialState = {
    token:localStorage.getItem('token'),
    isAuthenticated: null,
    isLoading: false,
    user: "",
    userId:"",
    userName:"",
    userRole:"",
    errorMsg:"",
    successMsg:"",
}

이부분은 현재 상태 기본값을 설정하는 부분이다.
기본값은 다 null 또는 빈값으로 넣어준다.
store.js 에서 선언한 initialState를 사용한다.
strore.js는 웹에 모든 상태를 담고 있는 초기값을 저장하는 부분이다.
자세한 내용은 11번 포스팅 참고.

const authreducer = (state = initialState, action) => {
    switch(action.type){
        case LOGIN_REQUEST:
            return {}
        case LOGIN_SUCCESS:
			return {}
        case LOGIN_FAILURE:
			return {}
        case CLEAR_ERROR_REQUEST:
			return {}
        case CLEAR_ERROR_SUCCESS:
            return {}
        case CLEAR_ERROR_FAILURE:
            return {}
        default:
            return state
    }
}
export default authreducer

authreducer함수를 만들고 state라는 변수에 현재 상태 기본값을 넣어준 initialState로 초기화 시켜주고
switch문으로 위에서 작성했던 로그인 상태에 관한 type들 받아준다.
(Login_Success,Failure.. 등등..)

각 타입마다 동작할 return값을 작성한다.

const authreducer = (state = initialState, action) => {
    switch(action.type){
        case LOGIN_REQUEST:
            return {
                ...state, //... 은 얕은 복사를 의미함
                errorMsg:"",
                isLoading: true 
            }
        case LOGIN_SUCCESS:
            localStorage.setItem("token", action.payload.token) //서버에서 인증토큰값을 가져온다(jwt)
            return{
                ...state,
                ...action.payload,
                isAuthenticated: true,
                isLoading: false,
                userId: action.payload.user.userId,
                userRole : action.payload.user.role,
                errorMsg:""
            }

        case LOGIN_FAILURE:
            localStorage.removeItem("token") // 로그인이 실패하였으므로 token을 제거함
            return{
                ...state,
                ...action.payload,
               token : null,
               user : null,
               userId: null,
               isAuthenticated: false,
               isLoading : false,
               userRole: null,
               errorMsg: action.payload.data.msg
            }
        case CLEAR_ERROR_REQUEST:
            return{
                ...state,
                ERRORmSG: null,
            }
        case CLEAR_ERROR_SUCCESS:
            return{
                ...state,
                ERRORmSG: null,
            }
        case CLEAR_ERROR_FAILURE:
            return{
                ...state,
                ERRORmSG: null,
            }
        default:
            return state
    }
}
export default authreducer

...state에서 ...은 얉은 복사를 의미한다.
state값을 복사하는 이유는 기존의 state값과 현재 바뀐 state값을 비교하여
바뀐 부분만 반영하기 위해서이다.

[redux/reducers/authReducer.js ] 전체코드

import { NULL } from 'node-sass'
import { CLEAR_ERROR_FAILURE, CLEAR_ERROR_REQUEST, CLEAR_ERROR_SUCCESS, LOGIN_FAILURE, LOGIN_REQUEST, LOGIN_SUCCESS } from '../types'

const initialState = {
    token:localStorage.getItem('token'),
    isAuthenticated: null,
    isLoading: false,
    user: "",
    userId:"",
    userName:"",
    userRole:"",
    errorMsg:"",
    successMsg:"",
}

const authreducer = (state = initialState, action) => {
    switch(action.type){
        case LOGIN_REQUEST:
            return {
                ...state, 
                errorMsg:"",
                isLoading: true 
            }
        case LOGIN_SUCCESS:
            localStorage.setItem("token", action.payload.token) 
            return{
                ...state,
                ...action.payload,
                isAuthenticated: true,
                isLoading: false,
                userId: action.payload.user.userId,
                userRole : action.payload.user.role,
                errorMsg:""
            }

        case LOGIN_FAILURE:
            localStorage.removeItem("token")
            return{
                ...state, 
                ...action.payload,
               token : null,
               user : null,
               userId: null,
               isAuthenticated: false,
               isLoading : false,
               userRole: null,
               errorMsg: action.payload.data.msg
            }
        case CLEAR_ERROR_REQUEST:
            return{
                ...state,
                ERRORmSG: null,
            }
        case CLEAR_ERROR_SUCCESS:
            return{
                ...state,
                ERRORmSG: null,
            }
        case CLEAR_ERROR_FAILURE:
            return{
                ...state,
                ERRORmSG: null,
            }
        default:
            return state
    }
}
export default authreducer

이제는 로그인시 발생할 상황에 대해 기능적으로 구현을 했으니
다음 포스팅에서는 모달창이라는 것을 활용하여 로그인창을 띄워 로그인기능과 연동 시켜보겠다.

[MernStack] Blog 만들기 15. [React] Navigator 작업

Wuny — Fri, 4 Jun 2021 01:09:15 +0900

components/AppNavbar.js 생성을 한다.

[AppNavbar.js ]

import React, { Fragment } from 'react';
import {Navbar, Container} from 'reactstrap';
import { Link } from "react-router-dom";
// 크롬확장자 page Ruler Redux설치하여 웹의 픽셀을 구할 수 있다.
const AppNavbar = () =>{
    return(
        <Fragment>
    <Navbar>
        <Container>
            <Link to="/" className="">
                Side Project's Blog(Wuny)
            </Link>
        </Container>
    </Navbar>
</Fragment>
    )
}

export default AppNavbar;

<Link to ="/" className=""> 에서 to는 어디로 이동할지를 나타낸다.
LInk to의 "/" 는 홈으로 가게한다.
그 다음 className을 적어 줄것인데 우선 잘 작동하는지 테스트를 위해 아무것도 작성하지 않는다.
(아래서 작성함)

//크롬 확장도구인 Page Ruler Redux 를 설치하면 웹사이트의 컨테이너 픽셀을 구할 수 있다.

[Routes/Router.js]

const MyRoter = () => (
  <Fragment> 
    <AppNavbar/>
      <Header/>
      <h2>Hello Body</h2>
      <Footer/>
  </Fragment>  
);

위에서 우리가 작성한 AppNavbar를 Header위에 불러준다.

헤더위에 우리가 작성한 글씨가 보인다.
마우스를 가져가면 밑줄이 생겨 하이퍼 링크가 생긴걸 알 수 가 있다.
우린 디자인상 밑줄을 안보이게 작업하겠다.

[AppNavbar.js ]

import React, { Fragment } from 'react';
import {Navbar, Container, NavbarToggler, Col, Collapse, Nav} from 'reactstrap';
import { Link } from "react-router-dom";
// 크롬확장자 page Ruler Redux설치하여 웹의 픽셀을 구할 수 있다.
const AppNavbar = () =>{
    return(
        <Fragment>
    <Navbar color="dark" dark expand="lg" className="sticky-top">
        <Container>
            <Link to="/" className="text-white text-decoration-none">
                Side Project's Blog(Wuny)
            </Link>
            <NavbarToggler/>
            <Collapse isOpen={true} navbar>
                <Nav className="ml-auto d-flex justify-content-around" navbar>
                //ml : 왼쪽 마진.. margin left
                {true ? <h1 className="text-white">authLink</h1> : <h1 className="text-white">guestLink</h1>}
                </Nav>
            </Collapse>
        </Container>
    </Navbar>
</Fragment>
    )
}

export default AppNavbar;

Container태그의 ClassName을 text-white text-decoration-none 으로 설정해준다.
NavbarToggler라는 것을 달아준다.

Toggler는 창을 최소화 하였을시(또는 모바일) 네비게이션 메뉴들이 아래 사진의 세줄메뉴 버튼으로 합쳐져
저 버튼을 누르면(Collapse) 네비게이션 메뉴들이 나오것을 말한다.

Collapse태그가 방금 말한 버튼을 나오면 네베게이션이 나오게 해준다.

<Collapse isOpen={true} navbar>
상태를 기본값으로 true로 설정한다.

{true ? <h1 className="text-white">authLink</h1> : <h1 className="text-white">guestLink</h1>}
만약 Collapse가 true이면 <h1 className="text-white">authLink</h1> 가 출력되고
false이면 <h1 className="text-white">guestLink</h1>가 출력이 된다.

우린 true로 박아뒀기에 authLink가 나오는 걸 볼 수 있다.

화면 사이즈를 줄였을시 NavbarToggler로 바뀐다.

<Nav className="ml-auto d-flex justify-content-around" navbar>를 보면 d-flex라는 것을 사용했는데
flexbox를 의미한다.
flexbox는 레이아웃을 배치를 좀 더 쉽게 하기위해 사용되는 것이다.
자세한 내용은 클릭

Flexbox - Web 개발 학습하기 | MDN

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용

developer.mozilla.org

부트스트랩 flexbox 사용법 클릭

Flex

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

getbootstrap.com

[MernStack] Blog 만들기 14. [React] Header 작업

Wuny — Thu, 3 Jun 2021 01:04:26 +0900

너무 급하게 마음을 먹지않고 천천히 공부하니 프론트딴에 재미가 들렸다.
요즘 회사에서도 틈틈히 공부를 하고 있지만 턱 없이 부족하다 ㅜㅜ

footer까지 작성했고 이제 head를 작성할 차례이다.
head는 내 블로그의 이름이 들어가고 이미지를 박아둘 수 있다.
사용차 관점에서 Header부분은 아주 중요하다.
만약 사용자가 내 블로그를 방문했다가 디자인이 너무 딱딱하고 보잘것 없다면 바로 창을 닫아버릴게 뻔하다.
사람을 처음 볼때 첫 이미지와 같은 느낌이랄까..?

1.Header 작성

[components/Header.js]

import React from 'react';
import {Row,Col} from 'reactstrap'

const Header = () => {
    return (
        <div id="page-header" className="mb-3">
            <Row>
                <Col md="6" sm="auto" className="text-center m-auto">
                    <h1>Read Our Blog</h1>
                    <p>Wuny's side project Work Blog</p>
                </Col>
            </Row>
        </div>
        )
    
};

export default Header;

<Col md="6" sm="auto" className="text-center m-auto">
midium size일땐 6
small size일땐 auto로 자동으로 반응형으로 사이즈를 잡아준다.
여기서 기준은 12이다.
ex ) 6일때
웹 가로 크기(colums)는 12가 기준이므로 12칸 중
1 2 3 | 4 5 6 7 8 9 | 10 11 12
4~9 사이에 우리가 작성한 UI가 보여진다.
자세한 내용은 클릭

2. Header의 Css작성

[assets/custom.scss]

#page-header {
    height : 230px;
    background:url('../assets/img/LoadView_At_night.jpg');
    background-position: 50% 72%;
    background-attachment: fixed; //고정
    color : #fff;
    border-bottom: 1px #eee solid;
    padding-top: 60px;
}

assets에 img 폴더생성 후 마음에 드는 이미지 로드한 후 background url로 불러온다.
unsplash라는 사이트에서 많은 고화질의 이미지를 무료로 다운로드 할 수 있다.
background-position: 가로 시작지점% 세로 시작지점% 이다.
(이 포인트는 이미지에 맞게 설정해주자)
border-bottom : 경계선을 bottom에만 그린다.

[MernStack] Blog 만들기 13. [React]Footer 작업하기

Wuny — Fri, 28 May 2021 01:10:43 +0900

React자체를 처음부터 공부하느라 많이 늦어졌다.
하루에 한 강의를 잡고.. 한 강의당 포스팅 하나 하려니 진도가 너무 안나간다...

웹은 크게 header, body, footer 로 나눌 수 있다.(더 세분화하면 무수히 많다)

https://helpx.adobe.com/kr/dreamweaver/how-to/make-website-pt3-add-html5-elements.html

지금까진 <div>태그를 사용하여 웹에 글자만 박아 뒀다.
이젠 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 year
    };

    return (
        <div>
            <Row>
                <Col>
                    <p>
                        Copyright &copy; <span>{thisYear()}</span>
                        
                    </p>
                </Col>
            </Row>
        </div>
    )
};

export default Footer;

new Date().getFullYear() 는 현재 년도를 가져오는 함수이다.
리엑트스트랩을 사용하여 <Row> <Col> 태그를 사용한다
그러면 보잘것 없는 footer가 완성이된다.

너무 보잘것 없기에 css작업을 할 것 이다.

2. footer 수정

[Footer.js]

div태그에 id를 main-footer로 작성하고
className으로 text-center p-2로 해준다.
(p는 패딩을 뜻함.. p-2대신 m-auto로 하여 마진값을 자동으로 맞춰주게끔 할 수 있지만 별로다.)
className은 부트스트랩을 사용하는 편리한 프레임 워크이다.

 return (
        // <div id="main-footer" className="text-center p-2"> 
        // m-auto 왼쪽오른쪽 여백 알아서 맞춰라. m : margin
        <div id="main-footer" className="text-center p-2"> 
            <Row>
                <Col>
                    <p>
                        Copyright &copy; <span>{thisYear()}</span>
                    </p>
                </Col>
            </Row>
        </div>
    );

3. scss 작성
assets폴더에 custom.scss 파일 생성한다.
npm i node-sass sass-loader 설치 ( scss를 css로 바꿔주는 라이브러리)
라이브러리를 설치후 서버를 재시작해줘라 꼭!!

[src/assets/custom.scss]

#main-footer {
    background: #343a40;
    color : #fff;
}

css 또는 scss에서 {#}은 id를 나타내고 { .} 은 class 뜻한다.
우린 div태그 id를 main-footer로 했기때문에 #main-footer를 적어줬다.
scss 작성을 하였으니 웹에 반영해야한다.

app.js가서 방금 작성한 scss를 불러주자.

[App.js]

import "./assets/custom.scss";

확인을 해보면 어느정도 괜찮게 css작업이 된 것을 볼 수 있다.

컴파일 에러 뜨면 버전이 node-sass버전이 맞지 않은 문제이므로 삭제한 다음

$ npm uninstall node-sass

4.14.1 버전으로 재설치 해주세요.

$ npm i node-sass@4.14.1

너네들이 찾는거 나왔다.↘↘

[MernStack] Blog 만들기 12. Front_Router세팅

Wuny — Fri, 7 May 2021 01:31:48 +0900

이번 강의편은 에러가 너무 많이 발생하여서 노드를 삭제하고 LTS버전으로 재설치하고 이것저것 삽질하느라 나도 이해를 못했다..
우선 흐름을 파악하고 추후에 수정하겠다.

나는 차라리 Java로 짜는 Spring이나 JSP가 훨씬 더 쉬운것 같다..

1. component 폴더에 Header.js와 Footer.js를 만든다.

<Header.js>

import React from 'react';

const Header = () => {
    return <div>Header</div>
};

export default Header;

<Footer.js>

import React from 'react';

const Footer = () => {
    return <div>Footer</div>
};

export default Footer;

2. 라우터 세팅

routes폴더안에 2개의 폴더를 생성한다.

첫 번째, 누구나 접근 할 수 있는 normalRoute폴더
두 번째, 권한이 있는 사람만 접근 가능한 protectedRoute를 만든다

접근제한 라우터는(protectedRoute) 게시글 수정은 글을 작성한 사람만이 가능하기에
게시글 수정 URL로 권한이 없는 자의 접근을 막는 역할을 한다.
우선 폴더만 생성하고 추후에 작업할 것 이다.

2.1 routes폴더 안에 Roter.js 파일을 생성한다.

<Router.js>

import React, { Fragment } from 'react'
import Header from '../components/Header'
import Footer from '../components/Footer'

//{(retrun)} ...이고 {} 없이 ()사용하면 retrun을 생략한다.
const MyRoter = () => (
  <Fragment> 
      <Header/>
      <h2>Hello Body</h2>
      <Footer/>
  </Fragment>  
);

export default MyRoter;

여기서 <Fragment>~</Fragment> 이러한 형식을
<>~ </> 으로 Fragment를 생략 가능하다.

3. src의 app.js 추가 및 수정

<app.js>

import React from 'react'

import {Provider} from 'react-redux'
import {ConnectedRouter} from 'connected-react-router'
import store,{history} from './store'
import MyRoter from './routes/Router'

import "bootstrap/dist/css/bootstrap.min.css"


const App = () => {
    return (
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <MyRoter />
            </ConnectedRouter>
        </Provider>
    );
}

export default App;

그 다음 터미널을 실행 후 client 폴더로 이동후 npm run start를 하여 react를 실행한다.

마지막에 npm run start 했을시 에러가 뜬다면 아래 두 사이트를 참고하길.
https://stackoverflow.com/questions/39959900/npm-start-error-with-create-react-app https://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc

이거 괜찮겠는데..?

[MernStack] Blog 만들기 11. Front에 사용할 라이브러리 설치(Redux)

Wuny — Thu, 6 May 2021 00:03:22 +0900

아직 나는 Front쪽에 많이 약하다. 아니 처음이다.
아직 공부중인걸 바탕으로 작성하니 많이 틀린 내용이 있을 수 있지만 현재 내가 듣고 있는 강의를 기반으로 작성한다.

만약 잘못된 정보가 있으면 지적해주면 감사히 받아 들이겠습니다.

1.필요한 라이브러리를 설치

client폴더로 이동후 설치를 한다. 꼭 client폴더로 이동하자!

$> npm i redux react-redux redux-saga react-router-dom connected-react-router bootstrap reactstrap dotenv

<설치목록>
-redux
- react-redux
- react-saga
- react-router-dom
- connected-react-router
- bootstrap
- reactstrap
- dotenv

2. 작업할 폴더 생성

redux 폴더안에 reducers와 sagas라는 이름으로 폴더를 생성후

reducers폴더안에 index.js 파일 생성,
sagas폴더안에 index.js 파일 생성 한다.

3. reducers의 index.js생성

< reducers- index.js>

import {combineReducers} from 'redux';
import {connectRouter} from 'connected-react-router'

const createRootReducer = (history) => combineReducers(
    {router: connectRouter(history)}
);

export default createRootReducer;

4. sagas의 index.js생성

$> npm i morgan

log를 관리해주는 morgan이라는 라이브러리를 설치해준다.

< sagas- index.js>

import { format } from "morgan";
import {all} from 'redux-saga/effects'


export default function* rootSaga(){ //제네레이터 함수 .. 여러값을 반환할수 있음 .
    yield all([]);
}

주석에 써진것처럼 function*함수는 제네레이터 함수로 일반함수와 다르게 여러값을 반환할 수 있다.

우선 여기서 reducers와 sagas가 하는일은
reducers는 요청을 받고 처리하는 곳이라고 한다.( 예를 들면 로그인 실패,로그인 성공..등등)
sagas는 reducers에서 요청을 받고 처리할때 사용하는 함수들을 정의 하는 곳이다.
( 아직 돌려보지 않았으므로 자세하게 적지는 못한다. // 추후 추가 작성 )

4. src의 store.js 생성

$> npm i history

먼저 history를 설치한다.

< store.js>

import {createStore, compose, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {createBrowserHistory} from 'history'
import { routerMiddleware } from 'connected-react-router'

import createRootReducer from './redux/reducers/index'
import rootSaga from './redux/sagas'

export const history = createBrowserHistory()

const sagaMiddleware = createSagaMiddleware();

const initialState = {}

const middlewares = [sagaMiddleware, routerMiddleware(history)]
const devtools = window.__REDUX_DEVTOOLS_EXTENTION_COMPOSE__

const composeEnhancer = process.env.NODE_ENV === "production"
    ? compose
    : devtools || compose;           // 배포시 개발자 도구를 삭제 하기위한 코드 

const  store = createStore(
    createRootReducer(history),
    initialState, //웹에 모든 상태를 담고 있는 초기갑ㅅ // 모든 갑을 store에서 다 저장함.
    composeEnhancer(applyMiddleware(...middlewares))
)
sagaMiddleware.run(rootSaga)

export default store

store의 역할은 모든 값을 store에서 저장후 필요할때 store에서 꺼내 쓴다고 한다.
예를 들면... abcde
E의 부모노드는 D이고
D의 부모노드는 C이고
C의 부모노드는 B이고
B의 부모노드는 A이다.

E에서 작업을 하고 있고 어떠한 값을 사용중이였다고 치자.
그 값은 최상위 노드인 A에서 생성된 값인데
그 값의 위치를 찾기위해 상위 노드 D를 찾아보고 D에 없으니 C를 찾아보고.. C에도 없으니 B를 찾아본다.
이런 번거러움을 없애고 편의성을 위해 웹에 모든 상태를 담고 있는 값을 store에 담아 사용한다.

대박이네 여기..

[MernStack] Blog 만들기 10. Front작업, React 설치

Wuny — Wed, 5 May 2021 22:33:03 +0900

저번달은 개인 사정으로 포스팅을 하지 못했습니다 !!
다시 오랜만에 이어서 글을 쓸려고하니 뭐가 뭔지 하나도 모르겠지만 포스팅을 다시 처음부터 보고 이어서 작성하겠습니다.

이제부터는 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를 제외하고 나머지 파일들 삭제한다.
추후에 작업할 assets, componets,redux,routes폴더 생성한다.

3. src의 App.js와 index.js 코드 정리

<App.js>

//import logo from './logo.svg'; //삭제
//import './App.css';  //삭제
import React from 'react' //추가


const App = ()=> {
  return (
    <div>
     Hello
    </div>
  );
}

export default App;

funtion부분을 const로 바꾸고 위와 같이 바꿔준다.

<index.js>

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.js도 위와 같이 바꿔준다.

App.js의 div태그안에 hello를 넣어줬기 때문에 React서버를 실행하면 hello가 나올것이다.

$> npm start

터미널에 실행하면 로컬서버 주소로 웹이 실행된다.

<에러 발생시>

There might be a problem with the project dependency tree.

It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"babel-loader": "8.1.0"

이런 에러가 발생한다면 작업하고 있는 최상위 루트로 이동하여
npm uni babel-loader 를 해주어 babel 을 삭제한다.

그 다음 8.1.0으로 설치 한다.

npm i babel-loader@8.1.0 -D

이런 사이트가 있었다니..?

[MernStack] Blog 만들기 9. auth Router (로그인 , 로그아웃 기능)

Wuny — Tue, 30 Mar 2021 01:33:56 +0900

이제는 로그인과 관련된 라우터를 만들겠다.

사용자가 입력한 아이디와 패스워드를 서버로 전송하고
서버에서는 저장되어 있는 아이디와 패스워드를 비교하여
일치하면 토큰값과 로그인 성공 응답을 보내주고,
일치하지 않 으면 에러 메세지를 띄워 로그인 실패 응답을 보내준다.

이에 관련한 auth Router를 만들겠다.

1.auth.js 라우터 생성
routes/api 폴더에 auth.js를 생성한다

<auth.js>

import express from "express";
import bcrypt from "bcryptjs";
import jwt from "jsonwebtoken";
import auth from "../../middleware/auth";
import config from  "../../config/index";
import {JWT_SECRET} = config;

//model
import User from "../../models/user";

const router = express.Router();

// @route    POST  api/auth
// @desc     Auth  user
// @access   Public

router.post("/", (req,res) => {
    const {email, password } = req.body; // req.body에 사용자가 입력한 아이디와 패스워드를 보낸다.

    //Simple Validation
    if(!email || !password) {
        return res.status(400).json({msg : "모든 필드를 채워주세요 "});
    } // 둘중 하나라도 채우지 않으면 에러메세지를 띄운다
    
    //check for existing user
    User.findOne({email}).then((user) => {
        if(!user) return res.status(400).json({msg: "존재하지 않는 유저입니다. "});
        
        //validate password
        bcrypt.compare(password, user.password).then(isMatch) => {
            if(!isMatch) 
            return res.status(400).json({msg : "비밀번호가 일치하지 않습니다. "})
            
            // 로그인 성공시 ...
            jwt.sign(
                { id : user.id},
                JWT_SECRET,
                { expiresIn : "2 days"}, //토큰의 유효기간은 2달로 지정
                (err, token) => {
                    if (err) throw err;
                    res.json({
                        token,
                        user:{
                            id: user.id,
                            name : user.name,
                            email : user.email,
                            role: user.role,
                        }
                    })
                }
                )
        }
    })
})

export default router;

2. auth Router 사용하기위해 app.js에 등록
<app.js>

import authRoutes from  './routes/api/auth';
//....
app.use('/api/auth', authRoutes)

3. 포스트맨으로 테스트

전전 포스팅에서 가입한 아이디와 패스워드를 입력하고 auth 주소로 POST요청을 하면 토큰값과 user정보를 보내준다.

4.로그아웃 기능 만들기

<auth.js>

router.get("/user", auth, async (req, res) => {
  try {
    const user = await User.findById(req.user.id).select("-password");
    if (!user) throw Error("유저가 존재하지 않습니다");
    res.json(user);
  } catch (e) {
    console.log(e);
    res.status(400).json({ msg: e.message });
  }
});

export default router 위에 추가 해준다.

5. 포스트맨에서 테스트

로그인했을때 받은 토큰값을 넣어 GET요청을 하면 아래와 같이 회원정보가 나오면 성공이다.