리액트 개발 일지 (2021년 3월 ~)

이번 프로젝트에서는 아주 작은 것이라도 한 단계 한 단계 배운 것들을 정리하고 기록해 보려고 한다.리액트에서, URL에 따라 다른 컴포넌트를 보여줄 때는 router를 사용하면 된다. 그러나 같은 URL, 같은 페이지 내에서 보여주는 컴포넌트를 전환하기 위해 useSt

진행 중인 프로젝트의 메인 화면에 들어갈 캘린더 컴포넌트 만들기 기본적으로 사용자 호키도키님의 포스팅을 참조해서 만들되, 내가 이해할 수 있는 방식으로 뜯어냈다. 1. 레이아웃 잡기 2. 오늘의 날짜 불러오기 3. 월 이동 버튼 만들기 4. 개선사항

캘린더 바디 영역 중 요일이 붙어있는 헤더를 만들 차례. 사용자 호키도키님의 포스팅을 참조해서 만들었다.배열에 "일"부터 "토"까지 일곱 개의 요일을 담는다..map을 이용해 해당 배열에 담긴 요일을 차례차례 불러오며 className을 설정해준다. 일곱 개의 요일 d

캘린더 본문을 만들기 위해, 컴포넌트간 데이터 전달이 필요해졌다.지금 만들고 있는 캘린더는 전체가 캘린더라는 커다란 컴포넌트로 감싸져 있고, 그 아래 헤더(해당월 지정하는 부분)와 바디(달력 본문)라는 두 개의 컴포넌트가 들어온다. 이 때 헤더에서 달력의 월을 앞뒤로

이전 포스팅에서는 자식(Header) -> 부모(Calendar) -> 자식(Body)으로 데이터를 전달했다. 그런데 useState를 이용해 데이터를 변화시켜도, 마지막 자식 컴포넌트(Body)에서 리렌더링 되지 않는 문제가 발생했다. 이를 해결하지 못해, redux

사진 업로드, 미리보기 기능 구현하기리액트에서 파일을 업로드 할 때, 보통은 input 태그를 사용한다. <input type="file"> 을 이용하면 보편적으로 보이는 파일 선택 버튼을 볼 수 있다. 그러나 이 업로드 버튼을 예쁘게 커스텀해보려고 한다. 이 포

사진 썸네일과 삭제 버튼이 들어있는 div 레이아웃을 생성한다. 추가한 사진을 배열로 저장한다. 배열의 요소 하나는 등록될 사진 하나에 해당되며, 요소의 내용으로는 1) 해당 사진의 파일과 2) 파일의 URL을 가진다.배열에 사진을 저장할 때 미리보기할 URL을 함께