포트폴리오

포트폴리오 프로토타입은 완성했고, 스택을 선정해야하는데...스택 선정에 앞서 포트폴리오 구현에서 초점을 두고 싶은 것들을 적어보자.일번, 정적인 페이지면서 렌더링 속도 고려\-> github.io, gatsby, 이번, 디자인적인 요소(반응형, )\-> flexbox,

포트폴리오를 반응형레이아웃을 적용해서 만들고 싶었고,어떻게 구현을 할지 검색중에 여러가지 방법들이 나와서 정리해본다.Flexbox 활용design framework 활용(bootstrap, material uimedia query library(react-respons

npm이나 yarn이 패키지를 관리해주는 매니저라고 알고는 있었지만 어떤 패키지를 어떤 기준으로 선택해야하는지에 대해서는 모르고 사용해 왔었다. 이번 포트폴리오는 이전 프로젝트와 달리 프로젝트 진행속도에 지장이 있더라도, 궁금하지만 시간에 쫓겨 그냥 넘어갔던 기술부채

항상 시작은 작게 모바일 레이아웃이 쉽고 간단하기에 금방 시작할 수 있다.그 후에 media query를 활용하여 큰 화면에 맞게 레이아웃을 수정할 수 있다.

반응형 레이아웃을 만들기 위해서는 미디어쿼리를 활용한 css, flexbox를 활용한 css 등 css의 활용이 여러모로 필요하다.이번 포트폴리오에서는 material ui 디자인 프레임 워크를 사용하기로 했는데 예시에서 아래 코드처럼 스타일링 해주는걸 볼 수 있었다.

프로젝트에서 Material-ui의 기본적인 테마 이외에 나만의 테마를 위한 스타일링이 필요했다. Material-ui는 Css전처리기 대신 jss(javacript based style solution)을 사용하기 때문에 SCSS를 활용해서 컴포넌트를 스타일링하는 레