Frontend 33

React.js - 클래스형 컴포넌트의 생명주기(Life Cycle)

React는 함수형과 클래스형 컴포넌트의 생명주기 형태가 다르다. 나같은 경우는 처음 리액트를 독학할 때는 클래스형 기준으로 공부하고 이후 프로젝트 개발할 때는 함수형으로 주로 쓰다 보니 개념이 뒤죽박죽이 되었다. 블로그에 정리하면서 복습해 보자. (2021-11-01에 부족한 부분을 업데이트했습니다.) 마운트 1. construnctor() : 컴포넌트가 처음 렌더링될 때 호출(생성자 메소드) => 단 한 번만 실행 constructor(props) { super(props); } 2. getDerivedStateFromProps() : props로 받아온 값을 통해 state를 갱신하기 위한 메소드 render() 직전에 실행되며, 여러 번 실행될 수 있음 return된 값이 초기 state의 초기값..

Frontend/React 2021.06.09

React.js - Github Pages에 배포하는 법

심심해서 이번 주말에 LH 전환보증금 계산기를 만들었다. 리액트 문법 까먹을까봐 리액트로 만들었는데 컴포넌트도 안나누고 넘나 개떡같이 만든 것 같다. 다음 리액트 프로젝트는 이쁘게 만들어 보자. 이건 내가 까먹을까봐 정리하는 리액트 프로젝트 github pages에 배포하는 방법이다. 절차 1. gh-pages 패키지 설치 npm install --save gh-pages // 또는 yarn add gh-pages 2. 프로젝트 폴더 내 package.json를 열고 "homepage" 요소 추가 { // ... "homepage" : "http://sap03110.github.io/lh-deposit-calculator", // 본인 깃허브 주소 + 리퍼지토리명 // ... } 3. package.js..

Frontend/React 2021.05.20

CSS - 스크롤바를 꾸며보자

CSS를 이용하여 스크롤바를 건들 수 있다! 사실 기본 스크롤바는 아주 못생겼다. 못생긴 사진 먼저 보고 가자. 이제 스크롤바를 바꿔보자! 1. 스크롤바 숨기기 가장 기초인 스크롤바 숨기기부터 해보자. .layer-pop__round.grade::-webkit-scrollbar { display: none } 2. 스크롤바 디자인 변경 - 스크롤바 너비 변경 .layer-pop__round.grade::-webkit-scrollbar { width: 5px; } - 스크롤바 헤더 부분 디자인 변경 .layer-pop__round.grade::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 10px; } - 스크롤바 바디 부분 디자인 변경..

Frontend/CSS 2021.05.10