기록하고 싶은 것들

오늘은 프로젝트의 요구사항에 따른 화면 정의서를 제작해보았다. 내가 맡은 페이지는 마이페이지(profile),유저페이지(profile),질문 작성 페이지, 헤더였다. 마이페이지(profile) 유저페이지(profile) 질문 작성 페이지 헤더 직접 화면의 기능들을 명시화하고 구체화하니 실제 프로젝트를 진행할 때, 어떤 점을 중요시하고 구현해야할지가 대략적으로 보이는 시간이었다.

오늘은 프리 프로젝트의 UI 컨셉을 정하는 회의를 하였다. 우선 백엔드 파트와의 협의에서 기한안에 구성하지 못할 것 같은 기능들에 대해서는 과감하게 없애거나, 수정하였다. 회의 내용은 반응형 구현, 메인 컬러, 컨셉, 폰트 사이즈 등 공통적으로 정해야할 우선순위들에 대해서 정했다. 반응형은 기능 구현이 끝난 이후에, 후순위로 미루어 졌고, 아래 처럼 기본적인 설정을 마쳤다. 이후 각자 맡은 부분을 피그마로 구현하였는데, 나는 Nav, Header의 제작을 맡았다. 추가적으로 시간이 남아서 질문 상세 페이지의 구현을 도왔다. 아래는 구현한 페이지들의 목록이다.

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..