키리Kirri's IT노트

📆 Calendar [🔨 Stack] CRA(Create React-App) [📸 Screenshots] [🌎 URL] ↓↓ https://cdcoc0.github.io/calendar-react-datejs/ React App cdcoc0.github.io [🧾 Description] Date.js 객체로 달력 구현 이번 달 달력에 포함되는 지난 달의 마지막 주, 다음 달의 첫 주는 글자색을 연하게 설정 날짜를 클릭하면 해당 날짜로 포커스 이동 포커스 설정된 날짜를 더블클릭하면 일정 추가 모달 창 팝업 모달은 라이브러리 없이 구현 [📂 APIs / Libs] - Date Date.js로 날짜 정보를 가져옴 Day.js를 사용해 날짜 정보의 포맷 설정 - Context API 모달에서 포커스된 날짜 정보..

📋 Momentum [🔨 Stack] CRA(Create React-App) [📸 Screenshots] [🌎 Link] ↓↓ https://cdcoc0.github.io/momentum-react/ React App cdcoc0.github.io [📂 APIs / Libs] - Background Unsplash API to get random pictures - Date / Time Date function to get date, time information Day.js for formatting the date info - Weather Navigator function to get geolocation information Free Weather API Axios - CSS Mainly styl..

컴포넌트 라이프사이클 메서드 컴포넌트가 페이지에 렌더링되기 전 「준비과정 ~ 페이지에서 사라질 때」까지의 수명 주기 컴포넌트를 처음으로 렌더링할 때, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 경우, 불필요한 업데이트를 방지해야 할 때 사용 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용. 함수형 컴포넌트에서는 Hooks를 사용해 비슷한 작업 처리 라이프사이클 메서드의 이해 : 라이프사이클 메서드의 종류는 총 9가지로, 이 9가지 라이프사이클을 마운트, 업데이트, 언마운트 총 세 가지 카테고리로 나눈다. Will: 어떤 작업을 작동하기 전에 실행되는 메서드 Did: 작업을 작동한 후에 실행되는 메서드 이 메서드들은 컴포넌트 클래스에서 덮어 써 선언함으로써 사용가능 1)마운트(Mount) :..