기록하고 싶은 것들

프로젝트를 진행시에는 버튼과 헤더 같이 자주 사용되는컴포넌트가 존재한다. 이를 매번 새로만드려고 한다면, 엄청난 시간이 걸리며 일일히 관리하는 것도 힘들 것이다. 따라서 버튼, 헤더 컴포넌트를 따로 생성해주고 prop에 따라서 재사용이 가능한 컴포넌트로 제작을 해주었다. MyButton 이 버튼 컴포넌트는 버튼에 들어갈 text,버튼의 종류에 따른 type, 버튼이 클릭시 실행될 콜백함수 onClick을 props로 전달받아, 재사용 가능하게 만들어 주었다. 특히 type에 따라 스타일링을 다르게 하기 위해서 className={["MyButton", `MyButton_${btnType}`].join(" ")} 클래스명을 type에 따라 다르게 받아 주어 스타일링을 해주었다. MyHeader 헤더는 he..

기존에 구현했던 페이지 기능에서, 추가적으로 url에서 params나 query를 가져오는 기능을 구현하였다. 기존 기능에서는 정해진 url로만 이동하였다. 예를 들어 /diary 는 인식하였지만 , /diary/123 는 인식하지 못하였다. diary는 고유의 id를 부여할 예정이므로 Route를 아래와 같이 수정을 해주었다. 코드를 변경함으로써, parameter를 붙여서 다이어리 id를 지정해서 이동할 수 있게 되었지만, 페이지 내부에서는 그 id를 알 수가 없다. 따라서 useParams를 사용하여서 id를 인식할 수 있게 해주었다. id가 10인 것을 console로 통해서 다시 확인해주고 있다. 이후 query의 경우도 useSearchParams를 이용하여 query내부의 값들을 가져올 수 ..

기존에 만든 일기장을 바탕으로, 배포가 가능한 감정일기장을 제작하기로 하였다. 감정 일기장을 제작하기 위해서 프로젝트에 react-app을 설치해주었고, 기본적으로 일기장에 필요한 페이지들을 생성해주었다. Home: 기본 홈 페이지 Diary: 다이어리 세부 내용을 볼 수 있는 페이지 New: 새로운 다이어리를 작성하는 페이지 Edit: 다이어리를 수정하는 페이지 위 4개의 페이지를 생성해준 뒤에, react-router-dom을 이용하여 각각의 페이지로 이동가능하게 Route 기능을 연결해주었다.