#1.목표
- React.js를 학습한 후, 잘 할수 있는지 확인해보고자 제작
- 배운것들을 최대한 적용시켜보자.
- Styled-component를 사용한 스타일링
- useState, useEffect 훅을 적절하게 사용해보기
- Router를 이용하여 SPA를 구현하자
- Redux를 사용하여 전역 데이터를 관리해보자
#2. 작업기간
- 23.07 ~ 23.08 (6일)
#3. 사용기술
React(Router, Redux, Styed-Components)
uuid4, moment
#4. 폴더 구조
Componets
- 화면 구성요소하는 모듈들을 담아놓은 폴더.
images
- 제작에 필요한 이미지를 담아놓은 폴더
pages
- Router를 통해 생성된 page들을 담아놓은 폴더
styles
- GlobalStye, FontSize, Colors 등 전역으로 사용할 스타일들을 담았습니다.
#5. 구현기능
1) 메모 생성
2) 메모 보기
3) 메모 삭제
4) 메모 수정
5) 메모 정렬(최신순 / 등록순)
6) 메모 검색 (타이틀, 내용)
#6. 구현기능 상세
1. 메모 생성
useState에 제목과, 내용 저장
고유 id는 uuid4를 사용하여 생성, 작성시간은 momet를 사용하여 생성.
작성완료 버튼 클릭시, 해당 데이터들이 object형태로 localStorage에 저장되도록 작업
이때, JSON.stringify를 이용하여 localStorage에 저장된 데이터의 변형을 막았다.
2. 메모 보기
메모 생성시 추가한 id를, Route path param 에 추가하여 구현
useParams와 findIndex() 매서드를 사용, 'memoList' 중 `params.id === memoList.id `인 데이터의 인덱스 저장 후 화면에 출력
find가 아닌, findIndex를 이유는, 추후 삭제 구현시, 용이하기 위함이다.
3. 메모 수정
메모 수정은 작성하기 페이지와 동일한 페이지이다.
useParams을 이용하여, params.id의 존재 여부에 따라, 수정하기 / 작성하기 페이지로 분기해두었다.
params.id가 있을때만, findIndex()를 사용, params.id === memo.id 인 데이터의 index를 받아와, 제목과 내용에 수정 데이터 삽입해
수정완료 버튼 클릭시, spice메서드를 사용, 현재 index에 업데이된 데이터를 저장한 후, localStorage에 반영
기존 데이터의 id와 dateTime은 그대로 넣고, 업데이트돤 제목과 내용만 업데이트 하며, 데이터 순서의 변동이 없도록 처리
4. 메모 삭제
/view 페이지에서 이미 얻어온 index와 spice()메서드 사용,
memoList에서 해당 index만 제거한 후 localStorage에 반영
5. 메모 검색 (타이틀, 내용)
결과 리스트를 필터링 하는데는, onInput이벤트, filter(), includes() 메서드를 사용
'memoList' 제목이나 내용에 input vlaue가 포함된다면, 그 결과를 필터해주었고, 해당사항을 memList에 set해주었다 .
이때, 원본데이터는 따로 변경이 되지 않도록, 리스트에는 복제된 memoList를 뿌려두었다
그리고 filter에는 변경이 없을 원본데이터를 이용하여 진행했다.
변경사항은 memList에 검색 결과의 오류를 줄이고자 했다.
6. 메모 정렬(최신순 / 등록순)
정렬 변경 또한 원본 데이터에는 변경이 되지 않도록, 카피 데이터를 따로 만들어두었으며,
카피된 데이터 내에서 .sort()메서드를 사용하여, 최신순, 등록순으로 memoList가 재정렬되도록 작업했다.
#7. 회고록
어려웠던점
1. styled-components 유연하게 사용하기
1) reset, Global Style넣기
style 작업 전, 의문이 생겼다. styled-components는 컴포넌트별로, 스타일을 넣어두는데.. 보통 전역으로 사용하는 reset이나, base style은 어떻게 처리하는냐에 대해 말이다.
styled-components 에서는 이 파일도 컴포넌트 단위로 생성했었다. createGlobalStyle 를 import 해서 GlobalStyles 파일을 만들어서, App.js 에 컴포넌트 형태로 삽입하니 되었다.
2) 공통 사용 컴포넌트 효율적으로 만들기
공통 버튼과 같은 공통 컴포넌트의 재사용 용이성을 높이려면 어떻게 넣는게 효율적일지에 고민하고 있었다. styled-components 내에서도 props를 사용할 수 있었고, 버튼의 경우, background-color를 props로 처리해, import 시, background-color를 지정할 수 있도록 처리해 두었다.
props를 사용할때는 주의점이 있었다. props이름 앞에 $를 붙일것.. !
버튼에 bg라는 이름으로 props를 넣었더니, wraning 이떴다. (it looks like an unknown prop bg....)
차분히 wraning만 잘 읽어보면 해결할 수 있는 문제였다. props로 설정한 bg가 DOM에서 attribute로 인식될 수도 있으니, $bg로 바꿔 구분을 해달라는 말.
찾아보니, 공식문서에서도 passed-props 라는 말로 설명하고 있었다!
3) 컴포넌트를 조금더 flexable하게 만드려면..?
scss로 작업할땐 공통으로 사용하는 color나, flex, 공통 font style 같은 것들은 변수로 지정해서 사용하며 코드 작성시간도 줄이고, 일관성도 늘릴수 있었다. styled-components 이걸 어떻게 해야하나 고민했다.
다른분들 찾아보니, 어차피 js파일이니 object형태로 넣어서, import 해오면 될일이이었다. 이렇게 하니까 일관성을 지키기가 역시나 좋더라. styled-components도 꽤나 효율적인 스타일 구성법이라고 생각했다.
2. 깃허브 페이지 Router 문제
뿌듯하게 프로젝트를 완성하고, github page에 배포를 했는데, 로컬에서 잘 나오던 프로젝트가 빈 화면만 나오는 것..!
구글링 결과, URL이 달라졌는데, 이에 따른 처리를 해주지 않아서 였던것.. !
index.js BrowerRouter에 basename을 추가하니 정상적으로 배포 되었다 ㅜ0ㅜ
<BrowerRouter basename={process.env.PUBLIV_URL}>
3. 원본 데이터는 살려둘것
문제는 검색을 구현하면서 발생했다. 인풋 입력시, 처음에는 검색이 잘 되는데, 두번째 검색부터 데이터가 사라지더라.
'memoList' 데이터의 원본은 따로 마련해두지 않고, 'memoList'로만 필터링하고.. 리스트에 뿌려줘서 생기는 문제였다.
'memoListOri'라는 데이터로, 실제 데이터 변형은 시키지 않고 필터만 할 데이터를 저장해두고, 뿌려지는 데이터는 memoList로 해당 데이터만 변경시키니, 검색도, 필터도 정상적으로 작동시킬 수 있었다. ㅠ0ㅠ
알게된점 / 의의
1. 리액트로 혼자 앱 만들수 있다! styled-components 사용해서 스타일 넣을 수 있다!
가장 큰 의의는 이것이다. 이제 혼자 힘으로 리액트 앱을 만들수 있다는 용기..! styled-components를 사용해서도 스타일을 넣을수 있다는 자신감..!
2. error들도 차분히, 영어를 해석하면 쉽게 해결할수 있구나..
error, warning이 나타나면 당황하며 왜지!?! 싶었는데, 리액트.. 상세하게 설명해주더라. 차분히 error나 warning을 해석해보면 해결방법까지 잘 설명해주고 있더라..
3. uuid4를 사용해 게시글 id를 넣어보기
기존 vue 프로젝트 작업시에는, 배열의 length를 사용해서 고유 id 를 넣어두었었는데, 이번 프로젝트에선 uuid를 사용해 보았다. uuid4를 사용하면 랜덤으로 쉽게 고유 id를 생성할수 있고, 보안성도 높일수 있다는것.. !
4. React, Vue랑 좀다르네 (feat. 근본은 JavaScript)
Vue도, React도 딥하게 프로젝트를 진행해 본것은 아니지만 둘이 꽤.. 다르다는 생각이 들었다.
Vue 확실히 간편하고, React는 좀 더 바닐라 자바스크립트에 가깝달까? 사람들이 Vue가 더 쉽다~~ 라고 말하는 의미를 이해했다.
Vue에서는 html문은 그냥 원래 쓰던대로, if문이나 for문을 사용할때도 v-if, v-for와 같이 vue에서 제공해주는 명령어들이 있었는데, 리액트에선 일단 JSX 도 기존 HTML 작성법 생각하며 생각없이 작성했다간, 한두번씩 에러를 만나고.. (그럼에도 불구하고 JSX가 있음에 감사함.).. JSX안에서 if문 사용하려면 , 삼항연산자 형태로, for문은 map형태로 사용하는 것들이 javaScript스럽게 느껴졌다.
역시.. 근본은 JavaScript다. JavaScript 공부를 더 열심히 해야겠다.
도움 받은 참조 문서
* styled-componets rest 바로가기
* passed props 바로보기
* 깃허브페이지 빈화면 문제 바로가기
* uuid 바로가기
* 프로젝트 참고 바로가기
'Study > Projects' 카테고리의 다른 글
| [Vue.js 프로젝트] 중고거래 플랫폼 만들기 (0) | 2023.08.04 |
|---|
