https://github.com/9oodam/React-miniProject

조건

1. 회원가입, 로그인, 게시판 CRUD
2. 데이터베이스 사용 (mysql)
3. component는 최대한 분리하고 styled-components 사용해서 css 꾸미기

구현

1. npx create-react-app frontEnd

   • App.js

2. pages, components 만들기

   Signup과 Login 페이지는 동일한 LoginBox component 사용

   Add와 Edit은 동일한 InputBox component 사용

   

   • Login
   • Signup
   • Board
   • Add / Edit

2-1. 액션 생성 함수 / 리듀서

• 액션 생성 함수 : 단순히 파라미터를 받아와서 액션 객체 형태로 만들어주는 역할
  • dispatch({type : “”, payload : “”})
• 리듀서 : 변화를 일으키는 함수, 현재 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어 반환

  • 각각 기능별 reducer를 만듦 (login, signup, board)

  • combineReducers()로 rootReducer를 만듦

    // src/redux/reducer/index.js
    
    import { combineReducers } from 'redux'
    
    import login from './login'
    import signup from './signup'
    import board from './board'
    
    const rootReducer = combineReducers({login, signup, board});
    
    export default rootReducer;
    

  • store 만들기

    import {createStore, applyMiddleware} from 'redux'
    import rootReducer from './reducer'
    import thunk from 'redux-thunk'
    
    export const store = createStore(rootReducer, applyMiddleware(thunk));
    

1. backEnd (오랜만이라 왕 헷갈렸다)
   • app.js
   • models (데이터베이스)
   • controllers

후기 겸 시사점

최근 배웠던 react도 재밌었고, 회원가입/로그인/게시판은 많이 했던 작업이라 수월 할거라 생각했는데 전혀 아니었다

이상한데서 시간 많이 썼다 😞

• front와 back 모두 변경 사항이 있으면 npm start를 잘 해주자…. 제대로 수정해놓고 왜 안되지 하고있지 말고…

• 로그인 시 jsonwebtoken을 생성하여 session에 추가했는데 개발자모드 application에 추가 안되어있음

  아예 cookie를 생성해서 추가해봤는데 그것도 안됨

  req.session에 아무것도 담기지 않았기 때문에 미들웨어인 isLogin이 제대로 수행되지 않음

  const same = bcrypt.compareSync(user_pw, user.user_pw);
  
  if(!same) {
    res.json("wrongPW")
  }else {
    let token = jwt.sign({
      user_id
    }, process.env.ACCESS_TOKEN_KEY,
    {
      expiresIn : "60m"
    });
  	console.log(req.sessionID)
    req.session.access_token = token;
  
  	res.json(user_id);
  

  ⇒ front에서 get 요청을 보낼 때 {withCredentials : true} 를 꼭 넣어줘야 함!

  그렇지 않으면 요청하는 sessionID와 요청받는 sessionID가 일치하지 않기 때문에 req에 session이 추가되지 않음

  const {data} = await axios.get(`http://localhost:8080/board/add/${user}/${title}/${detail}/${todayDate}`,{
      withCredentials:true
  });
  

  

  

• 이번에 store를 새로배워서 데이터베이스에 있는 게시글 정보를 dispatch로 요청 후 state에 담아 다시 불러와 사용했는데, 글이 추가되거나 수정, 삭제 될 때마다 바로바로 리렌더링 되지 않음

  useEffect(() => {
      dispatch(boardAction.getPost());
  }, []);
  

  function getPost() {
      return async(dispatch) => {
          const {data} = await axios.get('<http://localhost:8080/board>');
          dispatch({type : "GET_POST", payload : data})
      }
  }
  

  ⇒ 추가와 수정이 성공했을 때 state의 isSucceed만 true로 바꿔주어 posts가 변한 게 감지되지 않음

  posts 에 state.posts를 다시 덮어쓰게 해주니 바로바로 리렌더링 됨