기록하고 싶은 것들

styled-components를 사용 이유 기존 css 파일을 이용한 스타일링은 css 파일이 너무 길어져서 수정하려는 스타일의 위치를 찾기 어렵고, className이 중복되어 헷갈리는 경우가 있었다. 따라서 스타일을 바로 입힐 수 있고, props를 전달 받아서 컴포넌트를 만드는 styled-components 라이브러리를 사용해보기로 했다. 사용해본 경험이 별로 없어서 막막했던 면이 있었는데, 사용방법들을 조금씩 찾아보고 적용하다가 보니 생각보다 사용하기 편리했던 것 같다. styled-components 사용 예 components/MyButoon.js 아래는 styled-components로 새롭게 작성한 MyButton.js이다. 한 파일내에서 직관적으로 스타일을 입힐 수 있었다, 또한 기존..

Redux로 리팩토링하려는 이유 작성했던 일기장은 useContext, useReducer를 이용하여 전역적으로 상태 관리를 해주었다. useContext를 사용하면, 컨텍스트를 상태값 / 액션으로 나누어서 리렌더링 문제를 해결해야하고, 상태값, 액션을 따로 Provider로 적용해야하기 때문에 코드가 지저분해 보이기도 하였다. 또한 useReducer 의 경우 새로운 상태 값을 생성 할 때 해당 Context 내부에 포함된 컴포넌트들이 상태값의 일부에만 관심이 있더라도 강제로 re-render 되기 때문에 성능 문제가 발생 할 수 있었다. Redux 를 사용하면 저장소 상태의 특정 부분만 사용하고 해당 값이 변경 될 때만 re-render 할 수 있다. 따라서 상태관리 방식을 useContext에서 R..

기존의 배포한 감정일기장이 너무 단순한 디자인이라서, 피그마로 새롭게 디자인을 만든뒤에, styled component를 이용하여 다시 배포하기로 결심했다. 처음에 피그마를 쓸 때 난해하고, 이런것까지 써야한다고? 생각이 들었는데 이제는 내가 생각한 디자인의 목업을 구현하는데 피그마만한게 없다고 생각이 들었다. 기존의 프로젝트의 구성은 유지하되 디자인만 변경할 것이라, 컴포넌트들의 디자인과 감정을 나타내는 사진들을 변경시켜주었다. 새롭게 만든 디자인으로 적용해보고, styled component 도 사용하여 적용시켜봐야겠다.

빌드 만든 일기장을 배포를 하기 위해서는 빌드 작업을 거쳐야 한다. 따라서, 해당 디렉토리에서 build명령어를 실행해 주었다. npm run build 해당 명령어를 실행 뒤에는 build라는 디렉토리가 생성된다. 배포를 위해 , 지금까지 만든 결과물이 압축된 형태로 위치해있다. 배포 이번 프로젝트에서는 쉽게 배포를 할 수 있게 도와주는 firebase를 사용하였다. 프로젝트를 생성해준 뒤, firebase를 조작할 수 있는 아래의 툴을 설치해 준다. npm install -g firebase-tools 이후 프로젝트의 최상단 디렉토리 에서, 아래 명령을 실행해준다. firebase login 이후 firebase에 로그인하였던 구글계정으로 로그인을 해주면, 아래와 같은 이미지가 뜨며, 로그인이 되었다..

오늘은 기존의 적었던 다이어리의 상세 내용을 볼 수 있는 Diary page를 구현하였다. 정보 불러오기 params로 전달받은 diary의 id를 설정해준뒤, useEffect를 이용하여, id와 diaryList가 변경될 때마다 id에 해당하는 diary를 찾아 setData로 data의 상태를 변경시켜, 정보를 전달 받는다. useEffect(() => { if (diaryList.length >= 1) { const targetDiary = diaryList.find( (it) => parseInt(it.id) === parseInt(id) ); //일기 존재 여부에 따라 설정 if (targetDiary) { setData(targetDiary); } else { alert("없는 일기입니다."..

오늘은 감정 일기장의 일기를 수정할 수 있는 페이지인, Edit page를 구현해보았다. 아래의 비교 이미지와 같이 New 페이지와 동일하게 DiaryEditor 컴포넌트를 사용하여 거의 동일한 형태를 띄고있다. 하지만, Edit 페이지는 기존에 적었던 일기의 정보를 받아와야 하며, 수정의 기능과 삭제의 기능이 있어야 한다. 따라서 Edit 페이지에서는 DiaryEditor에 isEdit이라는 props를 내려주어, 세부적인 사항이 isEdit 여부에 따라 변경되게 해주었다. new와 edit 페이지 비교 일기 정보 불러오기 Edit과 originData의 상태가 변경할 때마다, originData의 정보를 불러와 useState를 이용해 저장해주어 날짜, 감정, 일기내용을 불러오도록 만들어주었다. us..

오늘은 일기장의 new 페이지를 만들어 주었다. new페이지는 새로운 일기를 쓸 때 사용하는 페이지로, 기본적으로 일기에 들어갈 날짜, 감정, 내용을 적어서 새로운 일기를 추가해주는 역할을 한다. Header 우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다. headText 부분에는 '새 일기쓰기'라는 텍스트를 넣어주었고 leftChild에는 기존에 생성했던 버튼 컴포넌트를 부착하여, 버튼을 클릭 시 뒤로 이동하게 설정해주었다. }/> input_date 일기의 날짜를 지정해 줄 수 있는 input태그이다. 날짜를 ISOString방식으로 변환하여 기본값으로 설정하였고, 원하는 날짜를 클릭 시에 변경이 되도록 설정해주었다. setDate(e.target.value)} /> input..

감정 일기장에 들어갈 기본적인 home 페이지를 만들어 주었다. Header 우선 헤더부분에는 기존에 제작한 MyHeader를 이용하여 구현하였다. headText 부분에는 현재 연도와 월을 넣어주어서, 일기장이 현재 날짜를 잘 반영할 수 있게 만들었다. leftChild와, rightChild 에는 각각 기존에 생성했던 버튼 컴포넌트를 넣어주었고 각각의 버튼을 클릭 시 1달 전,후로 headText가 바뀌게 설정해주었다. const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getM..

현재 만드는 감정일기장의 일기의 data는 CRUD 에 필수적으로 사용되는 요소임이 분명하다. data의 state를 조작하는 함수가 굉장히 많이 생기게 됨에 따라 컴포넌트 내부가 전체적으로 무거워질 것이고, 직접적으로 이 함수를 사용하지 않는 컴포넌트도 하위 컴포넌트에게 전달하기 위해서 props로 전달받게 되는 porps drilling도 발생하게 될 것이다. 따라서 useReducer로 컴포넌트 내부에 있는 함수를 바깥으로 빼내서, 로직을 분리시키고, useContext를 이용하여 전역으로 이 함수들을 관리하고자 한다. 기본적으로 일기장에서 사용할 함수들을 reducer 로 정의하여 컴포넌트 바깥에 위치하게 한다. 이후 useContext를 사용하여 생성한 context를 App에 적용 시킬 수 있..

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