2023-11-01 본 캠프 20일차 / 39일차 TIL
주요진행사항
- 리액트 입문반 강의 완강 (내일배움캠프)
- 리액트 개인프로젝트 ToDoList
리액트 개인프로젝트 ToDoList
리액트 입문반 강의 수강을 마치고 리액트를 사용해보며 공부하기 위해서 To-Do List 프로젝트를 시작하였다.
1. 프로젝트 구현 기능
- UI 구현
- 리스트 추가
- 리스트 삭제
- 리스트 수정
- 완료 여부에 따라 위치 변겅
- localStorage와 연동
2. 현재 구현 완료기능
- 리스트 추가
- 리스트 삭제
- 리스트 수정
- 완료 여부에 따라 위치 변경
- localStorage와 연동
3. 어려웠던 점, 배운점
리액트 라이브러리로 처음 개발해 보면서 기존 익숙하던 바닐라 자바스크립트 개발과는 전혀 다른 느낌이 들었다.
우선 개발 방식에 대한 고민이 많았다.
리액트은 앞서 배웠던 것 처럼 컴포넌트로 구성되어 있다.
여기서 들었던 의문점은 컴포넌트은 어떤 단위로 지정해야 하는가이다.
이 의문을 해결하기 위해서 구글 검색을 해보았으며, 인상 깊었던 내용이 있다.
"리액트 Atomic Design"
Atomic Design은 말그대로 원자 단위로 쪼개는 디자인을 말한다.
즉 컴포넌트를 더이상 쪼개지지 않는 형태로 제작하고 구성한다.
Atomic Design의 구성은 다음과 같다.
Atom (원자)
Atom은 더이상 분리될 수 없는 형태의 컴포넌트이다.
기본 구성요소인 button, texarea, input 등이 이에 해당된다.
Molecule (분자)
Molecule은 Atom을 조합하여 어떠한 의미를 만들 수 있는 컴포넌트 이다.
Organism (유기체)
Organism은 Atom과 Molecule를 조합하여 만들 수 있는 구성단위이다.
Template (템플릿)
Template은 Organism과 그 하위 요소들로 구성한 컴포넌트이다.
크게 헤더, 메인, 풋터 등 으로 나누는 것들을 의미한다.
Page (페이지)
page는 하위요소로 구성한 최종적인 결과물이라고 할 수 있다.
atomic design의 장점은
- 최소단위로 나누어 재사용성 극대화
- 유지 보수의 효율성
- 컴포넌트 계획 및 기준 구성
이라고 생각한다.
이번 프로젝트에서 Atomic Design을 시도해보면서 이미 바닐라자바스크립트에 적응되어있기 때문에 더이상 쪼개지지 않는 atom 형태까지 나누어 개발하는데 어려움을 느끼긴 했지만, 프로젝트를 구성하는데 아주 큰 도움이 되었다.
아직 부족한 부분이 많아서 완벽히 적용해보진 못했지만, 추후 개발에 Atomic Design을 좀 더 체계적으로 계획해서 사용해 볼 예정이다.
'내일배움캠프 TIL' 카테고리의 다른 글
| 2023-11-03 본 캠프 22일차 / 41일차 TIL (background-attachment 문제해결) (2) | 2023.11.04 |
|---|---|
| 2023-11-02 본 캠프 21일차 / 40일차 TIL (1) | 2023.11.03 |
| 2023-10-31 본 캠프 19일차 / 38일차 TIL (1) | 2023.11.01 |
| 2023-10-30 본 캠프 18일차 / 37일차 TIL (1) | 2023.10.30 |
| 2023-10-29 주말 TIL (0) | 2023.10.30 |
