모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..
마일스톤
프로젝트 진행을 위해 공부를 속성으로 마치고, 처음으로 할당된 업무... 상단 헤더 제작이였다. 우선 헤더는 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. 요약 일정 기간동안 시작전..
