REACT

좋은 기회로 친구와 함께 마일스톤을 관리하는 프로젝트를 진행하게 되었다. 처음 하는 협업 프로젝트는 약 3개월 동안 진행될 예정이며 현재 2주간의 설계 단계를 마무리 했다. 소개 페이지 사용자의 업무, 개인적으로 진행해야 할 일정들을 보여주는 서비스를 제공하는 것이 마일스톤의 목적이다. 프로젝트의 주제를 선정하던 중 마일스톤의 수요는 꾸준하게 있었지만, 깔끔한 디자인의 마일스톤이 없었고, 새로운 기술들을 배우며 적용할 좋은 기회가 될거같아 프로젝트의 주제를 마일스톤으로 선정하게 되었다. 마일스톤의 표시는 총 3가지로 할 예정이다. 1. 기본 가장 흔히 보여지는 마일스톤의 형태로 일자별로 나타나는 막대모양의 일정을 보여준다. 2. 달력형 한달동안의 일정을 표시하는 형태이다. 3. 요약 일정 기간동안 시작전..

이전에 로그인 API를 구현하고 이제는 컴포넌트들을 생성하여 API와 연결해줘 완성을 했다. 만드는 동안 발생했던 에러들과 내가 새로 알게된 것들과 함께 정리하는 시간을 갖아보려한다. 내가 공부한 로그인 방법의 API를 정리한 글에서 나와있듯이 데이터 입력 > 데이터 검토 > 유효성 검사(토큰확인) > 결과 와 같은 순서로 구성되어있으며, 위의 기능들을 하기 위한 장치들은 API에서 모두 만들어 놨으므로 이제는 이용하는 일만 남았다. 모듈에서는 액션, 액션생성함수, 리듀서, 초기State를 담아주고, 최상위 index에서는 store와 sagaMiddleware, localstorage를 관리해준다. 그리고 컨테이너에서 dispatch로 액션을 전달하여 State에 정보를 전달해준다. 데이터의 흐름은 페..

로그인을 구현하려는 목적? 우리가 네이버나 구글의 메일 서비스나 다른 서비스를 이용할 때, 거의 필수적으로 거치는 과정이 있다. 바로 로그인이다. 그만큼 대부분의 웹에 들어가는 기능인 로그인을 구현해보는 시간을 갖도록 하자. 이 계획은 여러 단계로 나누어 글을 작성할 것이다. 오늘은 기본적인 api 구성까지 해보도록 하자. 사용하는 주요 기술 Express : express를 이용해서 서버를 구현할 예정이다. (koa로 하려 했지만 아직은 express가 부족하다 생각하기에 이번에는 express를 이용해 공부를 더 할 예정이다.) Joi : 스키마 언어를 검토해주고, node용 validator보다 관계에 따른 정의가 가능하다. (ex. 옵션 설정에서 a는 필수 요소로 지정하고 b는 필수가 아니라 지정..

body-parser 란 무엇인가? 간단히 말하자면 Express 4.16.0 버전 부터 내장 모듈로 포함되어있는 미들워어로써 req(요청)와 res(응답) 사이에서 요청의 본문을 지정한 형태로 파싱해주는 미들웨어이다. app.get('/link', (req, res) => { res.send('테스트'); console.log(req.body); }); 위의 코드에서 console.log(req.body) 에서 req.body를 이용해 request의 body를 설정한 형태로 파싱하여 활용할 수 있다. body-parser 설정 //body-parser 모듈 불러오기 const bodyParser = require('body-parser'); app.use(bodyParser.json());// req..

2달 반의 짧다면 짧고 길다면 긴 기간동안 처음 진행한 개인 프로젝트를 마무리 지었다. 이 프로젝트를 하면서 많은 것을 배우고 많은 에러를 보며 많은 것을 고쳤다. 이번 프로젝트로 배우게 된 것을 나열하자면 1. gif를 react에서 재생시키는 법 2. Kakao Map API 사용법 3. mySQL 사용법 (간단하게), axios를 이용한 데이터 가져오기 4. express를 이용한 웹 배포 5. AWS와 EC2를 이용한 배포 6. FullPage Scroll 사용 법 7. redux에 대한 사용 방법 가장 어려웠던 점은 redux 사용법이다. 이 프로젝트를 하기 전까지는 redux는 상태관리뿐만 아니라 axios가 하는 http 통신또한 하는줄 알았다....정말 어리석은 생각이였다.....진짜 몸으..

이제는 웹서버를 EC2 인스턴스에 git clone을 통해 다운로드했다. client에서 build를 해주고 server에서 node를 이용해 동작시켜주니 AxiosError와 데이터를 DB에서 받아오지만 컴포넌트에는 적용이 안되는 모양을 보여주었다. 발생한 에러중 AxiosError에 관심을 갖았다. 내가 발견한 에러는 아래와 같다. Uncaught (in promise) Error: Request failed with status code 404 at createdError 이 에러는 axios.get('받아오는 주소')에서 문제가 되는것으로 보인다. 받아오는 주소에서 데이터 전송이 없거나 잘못된 주소를 사용하면 이러한 에러가 발생한다고 한다. 그래서 생각해봤다. 내가 사용하는 주소는 localhos..