모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..
REACT
프로젝트 진행을 위해 공부를 속성으로 마치고, 처음으로 할당된 업무... 상단 헤더 제작이였다. 우선 헤더는 Figma에서 설계한대로 제작했다. 위와 같은 모양으로 제작을 했으며 헤더가 위아래 스크롤시에도 고정되게 했다. 결과는 아래와 같다. 아이콘 이미지의 모듈화 또한 했으며 코드는 아래와 같다. import { Link } from 'react-router-dom'; import icon from 'statics/img/icon/gamalda_icon.png'; import 'styles/components/modules/icon/icon_default.scss' type Test = { link: boolean } // link Prop을 이용해서 이미지만 필요할 때와 link와 같이 사용할 때 구..
좋은 기회로 친구와 함께 마일스톤을 관리하는 프로젝트를 진행하게 되었다. 처음 하는 협업 프로젝트는 약 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..
