노드버드 강의 복습 (react, redux, redux-saga)

image.png Redux Redux 의 (state) 를 사용하면 React 의 (state) 쓰지 않아도 된다. 하지만, 실무에서는 둘 다 혼용하는 편이다. Redux (state) 는 어려운 state에 주로 쓰고, 간단한 state 변경은 React에서 사용한다. Redux 를 사용하는 이유 안정성 state 통제 용이 Redux 주요 개념...

image.png combineReducers 리덕스는 state를 한 곳에 모아두고 적재적소에 쓰기 위해 존재하지만 그 state들을 한 파일에 치중하면 코드가 너무 많아서 관리하기가 힘들기에 각 기능에 해당하는 액션을 모아둔 store들이 있고 그 store들을 하나로 모아주는 역할을 combineReducers가 하며 이것이 곧 root store...

curring 기법 : 보통의 미들웨어 구조는 아래와 같은 curring 기법으로 사용이 된다. 하이오더 컴포넌트라는 것으로 기존 컴포넌트 위를 다른 함수로 덮어 강화시키는 것이다. => 훅스로 대체 가능 hoc(Component); connect(mapStateToProps)(Component) 리덕스는 타이머 동작을 할 수 없는 동기적인 진행 ...

리덕스 사가 effect에서 자주 쓰이는 함수 call 함수의 동기적인 호출을 할 때 사용 ex) 응답이 다 받아진 후에 LOGINSUCCESS 실행할 때 사용 fork 함수의 비동기적인 호출을 할 때 사용 ex) call 과 다르게 순서 상관없이 실행해야할 때 사용 put 액션 함수 (dispatch)로 진행시킬 때 사용 takeEvery 모든 액...

로그인을 위한 준비 로그인 과정은 회원가입과 마찬가지로 db에서 해당 유저를 찾고 data를 클라이언트에 보내는 과정은 같지만 거기서 끝이 아니다. 서버가 로그인 완료를 알아차리기 위해선 브라우저에 기록을 남겨야하는데 프론트단에는 이 기록을 쿠키를 이용해 남긴다. https://velog.io/@mollang/2019-12-23-1512-%EC%9E%91%...

파일 구조 pages/signup.js reducers/user.js sagas/user.js image.png

image.png image.png image.png

백엔드 서버 구동에 필요한 모듈들 노드 : 자바스크립트를 실행해주는 실행기 노드가 제공하는 http 서버가 있으나 편하게 서버 개발을 하기 위해서 노드 위에 백엔드용 서버 프레임워크를 하나 올려서 사용한다. (리액트 위에 넥스트를 하나 올려서 사용하는 것과 같은 개념) 이 강의에서는 그 서버 프레임워크를 EXPRESS로 선택했다. npm i expres...

sequelize : sequelize 라는 명령어를 사용하기 위함 sequelize init 을 실행하면 config 파일이 생성된다 config 파일 수정 models/index.js 수정 (해당 설정 수정으로 인해 db(SQL문)를 자바스크립트로 제어 가능하게 한다) models / table 파일 만들기 models/user.js models/p...

image.png 파일 구조 >index.js expree 연결, db 연결, api router 연결 >models/index.js 시퀄라이즈(mysql) 연결, config 파일(db정보)연결, 각 모델들을 db에 담아 db.User 등... 으로 사용할 수 있게 설정 >routes/post.js http://localhost:8080/api/p...

이해한대로 그림화 우선... 추후 수정 가능 image.png front 사용자가 로그인 시 >http://localhost:8080/api/user/login api 요청을 보낸다(post) components/LoginForm.js : 로그인 버튼 클릭시 LOGINREQUEST 리듀서가 진행을 실행한다. id 는 userId, password 는 pa...

파일 구조 backend index.js frontend sagas/user.js index.js sagas/user.js 서버에 요청을 보내는 axios 함수와 요청을 받는 백엔드 서버의 index 파일에 credentials: true 설정을 추가하면 다른 도메인간에 쿠키를 주고 받을 수 있다. 1.PNG 쿠키 생김새 2.PNG

파일 구조 backend routes/user.js frontend components/UserProfile.js routes/user.js components/UserProfile.js

db에서 가져온 정보 중 비밀번호를 지우고 써야하는 것과 같이 한 번 수정을 할 때는 이런 식으로 req.user.toJSON() 정보를 json 형태로 바꿔준다.

#을 기준으로 문자열을 쪼개는 정규표현식 => 결과 : ["", "", " 좋아요", ""] #를 포함하여 문자열을 쪼개는 정규표현식 => 결과 : ["", "#밥", "", "#고기", " 좋아요", "#진짜로", ""] 파일구조 frontend components/PostCard.js 포스트의 문자열을 해시태그(#)를 포함한 문자열을 기준으로...

@제로초님 강의 @리액트/넥스트 기반의 SNS 만들기