인프런 React 강의 듣고 사이트 만들기 _ back작업 02. 패스포트를 통해 로그인 구현하기, 쿠키/세션
back작업01번에 이후 작업을 진행하겠습니다. 실제 api 요청과 응답 값 받아서 로그인 절차를 진행해보겠습니다. Front front 하위에 sagas 폴더를 생성한 후에 관리할 파일명으로 js파일을 생성합니다. 예를 들어 user 정보를 관리할 것이다라고 한다면 user.js가 되겠죠. 저는 user.js로 만들었습니다. sagas는 리덕스 생태계 패키지입니다. 비동기 작업을 세분화 시킬 수 있습니다. reducer는 리액트의 상태 생성자입니다. 액션이 오면 리듀서가 스토어의 상태를 변경시키는 방식으로 동작합니다. reducers와 sagas를 짝으로 사용하기때문에 동일한 파일명으로 작업했습니다. 두 파일모두 확인해보겠습니다. sagas/user.js api 호출 주소는 back의 서버 포트를 입력..
인프런 React 강의 듣고 사이트 만들기 _ back작업 01. 노드로 서버구성, express로 라우팅, MySQL과 시퀄라이즈를 사용해서 모델만들고 관계 설정하기(DB작업)
이쪽 분야는 거의 갓난아기 수준이라 강의에서 가르쳐준대로 진행했습니다. (따로 제가 검색해서 개선하거나 추가한 부분이 없다는 의미) 제가 만들고자한 테이블은 강의보다 단순해서리..ㅎㅎ; ++ back/app.js에서 라우터 연결할때 첫번째 인자 app.use('/guestbook', GuestbookRouter); 처럼 '/'가 있어야합니다. ++ back 폴더를 생성 front 폴더를 만들어 작업한 것처럼 root 폴더 하위에 back 폴더를 생성합니다. front 와는 별개로 서버를 돌리기 때문에 back 폴더에 들어가서 npm init을 해줍니다. npm init front 서버, back 서버 모두 run 시켜줘야 사이트를 정상 작동시킬 수 있습니다. express를 통해 라우팅을 진행 할 것이기..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 07. 메모창 만들기 (마우스로 움직일 수 있게 만들기)
기본 스티커 메모를 아시나요? 헤더 부분을 드래그하면 이동되는 것과 메모 입력하는 기능을 흉내내보았는데요. 제 사이트에는 딱 저 2가지 기능만 필요하여 저 부분만 작업했습니다! Memo.js import React, { useCallback, useRef, useState } from 'react'; import styled from 'styled-components'; const Wrap = styled.div` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; background: yellow; border: 1px solid #c0c0a4; box-sizing: border-box; `; c..
Modal 팝업 작업을 진행했습니다. 일단 공식문서에서 useRef, useImperativeHandle, forwardRef를 확인해보세요! (저는 useRef로만 작업 했습니다.) ko.reactjs.org/docs/hooks-reference.html#useref ko.reactjs.org/docs/hooks-reference.html#useimperativehandle ko.reactjs.org/docs/react-api.html#reactforwardref useImperativeHandle과 forwardRef... 사용해서 해보려고도 하다가.. 이것저것 하느라 시간이 걸렸습니다. 컴포넌트 형식 작업도 약간 헷갈리기도 하고^^; 그러다가 블로거님의 코드를 보고 짜잔 해결했습니다. 아래는 참고한..