당신의 인생을 기적으로 바꾸는 기록 앱 미라클 메모리📝

[배포 URL]

URL: https://react-project-jy.web.app/

💡 개요

📝 미라클 메모리 앱은 "미라클 모닝"의 영감을 받아 제작된 어플리케이션 입니다

🖋️ 특별한 삶은 매일 끊임없는 기록을 통해 완성된다고 믿습니다.

⛅ "기적의 아침"을 도와주는 미라클 메모리 앱을 통해서 매일 특별한 아침을 기록하세요.

⚙️ 개발 환경 및 일지

[기술]

FrontEnd: React, Redux, Styled-components, LocalStorage

[ 개발 일지 ]

[ 개발 이슈 ]

💡 구현사항

[기능]

Automic Patten DX
Redux ducks patten
Closuer를 활용한 월 별 데이터 상태 변경
게시글 Carete/ Read/ Update/ Delete
sort, filter 메서드를 활용한 데이터 날짜별 정렬 및 필터링

[UI Interaction]

액자형, 앨범형 UI
Splash Screen
Active Button

0.Splash	1.홈화면

2.홈화면 - 앨범,리스트	3.홈화면 - 옵션

4.Create	5.Update

6.Delete	7.Detail

🧐 프로젝트 특징

AutoMic Design 패턴 그게 뭔데?

아토믹 디자인 패턴이란 ?

“ 디자인 요소들을 나누어 파악하고 이 요소들이 조합되는 과정을 통해서 디자인을 구성하는 방식 ”

출처: 아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기

ATOM 최소 디자인 요소들을 Atoms(원자들)로 파악한다
MOLECULES Atoms들이 조합되어 MOLECULES(분자들)을 형성한다
ORGANISMS MOLECULES(분자들)이 조합되어 보다 큰 의미 단위인 ORGANISMS(유기체)를 구성한다
TEMPLATES ORGANISMS(유기체)이 모여 구성하는 실질적 디자인 화면이다.
PAGES TEMPLATES(템플릿)들이 상황과 컨텐츠에 맞게 적용되면서 PAGES(페이지)를 구성한다.

난 왜 Automic Design 패턴을 왜 적용하려 하는가?

난 체계적인것을 좋아하고 정리하는 것을 좋아한다. 개발을 하는데 있어서 프로젝트에 체계화가 잡혀있다면 데이터의 흐름을 빠르게 이해할 수 있다. 그 중에서도 리액트의 컴포넌트 단위의 모듈과 함께 잘 갖추어진 디자인 시스템을 갖고 있다면 유지보수를 하기 편할 뿐 아니라 다른 사람들과 함께 협업을 하는데 있어서도 유리하다. 쉽게 말해서 아토믹 디자인 패턴을 적용하면 객체지향디자인 패턴의 장점인 재사용성, 생상성 향상, 자연적인 모델링, 유지보수의 우수성을 가져갈 수 있다. 다만 단점으로는 용량이 커질 수 있는 부분과 설계단계에 시간이 오래 걸린다는 것은 알아야 한다.

Automic Design 패턴 적용 실패 경험

지난번 팀 프로젝트를 진행하면서 처음으로 아토믹 디자인 패턴을 알게되었고 아토믹 디자인 패턴을 구현하려고 했다. 하지만 리액트에서 상태관리를 어떻게 해야하는지 이해하지 못했다. 상태관리 라이브러리인 Redux에 대한 이해도가 낮았기 때문에 결국 도입하려다가 실패했다. 하지만 이제는 Redux를 통한 상태관리가 어떤 흐름으로 진행이 되는지, 그리고 리액트는 어떨 때 리-렌더링이 되는지, 리-렌더링을 최적화 하려면 어떻게 해야하는지 어느정도 흐름을 이해했다고 생각한다. 그렇기에

어떤식으로 AutomicDesign System을 적용했는가?

Tree 구조

폴더 구조

Component폴더 하위에 atom, molecule, organisms, template으로 구성했다

폴더구조 - Atom

최소 디자인 요소들로 구성

예제 코드

const Button = ({ text, type, onClick }) => {
  const btnType = ["positive", "negative"].includes(type) ? type : "default";
  return (
    <StyledButton className={btnType} onClick={onClick}>
      {text}
    </StyledButton>
  );
};
export default Button;

💡 Button 역할 이외에 그 어떤 역할도 하고 있지 않다. 이렇게 만들어진 Atom들은 molecule에 구성 요소로 역할을 하게 된다.

폴더구조 - molecule

Atoms들이 조합되어 MOLECULES(분자들)을 형성한다

예제 코드

import CommonText from "../../atom/text/CommonText";
const HomeInfoBox = ({ onClick, date, content }) => {
  return (
    <Wrapper onClick={onClick}>
      <CommonText descript={content} size={18} />
    </Wrapper>
  );
};
export default HomeInfoBox;

💡 분자들은 Atoms의 조합으로 생기게 된다. Atom으로 생긴 요소들은 하나의 Wrapper 태그 아래 Atom요소를 덮는 요소로 사용이 된다. 이렇게 구성된 박스들은 주로 상위 컨테이너의 flex 속성으로 인한 정렬 대상이 된다

폴더구조 - Organism

MOLECULES(분자들)이 조합되어 보다 큰 의미 단위인 ORGANISMS(유기체)를 구성한다

예제코드

import SubTitleBox from "../../molecule/common/SubTitleBox";
import EditorEmotionList from "./EditorEmotionList";

const EditorEmotionItem = () => {
  return (
    <section>
      <SubTitleBox />
      <EditorEmotionList />
    </section>
  );
};
export default EditorEmotionItem;

Organism은 Molecule들의 집합으로 이루어져있다. 성격에 따라서 List가 될 수 있고 Item이 될 수 있다. 예를들어 Organism의 성격을 띄고 있지만 Organism 요소 안에서 또 다른 Organism이 존재할 경우 List > Item 으로 구분짓는다.

Organism in Organism

예를들면 각 게시글 하나는 Organism Item의 성격을 가지고 있다. 3개의 분자가 모여 구성된 Case이기 때문이다. 하지만 이 게시물을 담고있는 Organism 역시 Organism의 구성요소로 볼 수 있다. 이 외에도 Edit 페이지의 EidtorEmotionItem과 List는 둘은 동시에 Organism 성격을 갖고있다. 이로써 두 가지 상황이 가능하다

List 성격을 가진 Organism이 Item 컴포넌트에 속하는 경우
Item 성격을 가진 Organism이 List 컴포넌트에 속하는 경우.

이런 상황에는 UI의 속성에 맞게 Organism > Organim으로 분류를 해주었다.

폴더구조 - Template

예시코드

import HomeSelectItem from "../organisms/home/HomeSelecItem";
import HomeMemoList from "../organisms/home/HomeMemoList";

const HomeContainer = ({ MonthData }) => {
  const [sortType, setSortType] = useState("latest");
  const [filter, setFilter] = useState("all");
  return (
    <Article>
      <HomeSelectItem
        sortType={sortType}
        setSortType={setSortType}
        filter={filter}
        setFilter={setFilter}
      />
      <HomeMemoList
        filter={filter}
        sortType={sortType}
        MonthData={MonthData}
      />
    </Article>
  );
};
export default HomeContainer;
// HomeSelectItem 컴포넌트와 HomeMemoList 컴포넌트는 동일한 상태값을 공유한다.

TEMPLATES ORGANISMS(유기체)이 모여 구성하는 실질적 디자인 화면이다.

Template은 Container라는 파일명으로 관리된다. Template은 Organism의 집합으로 이루어진 UI를 의미한다. 보통 Template은 두 Organism이 화면에 보여질 상태값을 공유할 때 묶여진다.

폴더구조 - Pages

PAGES TEMPLATES(템플릿)들이 상황과 컨텐츠에 맞게 적용되면서 PAGES(페이지)를 구성한다.

import CommonHeader from "../components/organisms/common/CommonHeader";
import HomeContainer from "../components/template/HomeContainer";

const Home = () => {
  return (
    <>
      <CommonHeader />
      <HomeContainer />
    </>
  );
};

export default Home;

마지막으로 화면에 보여질 Template과 Organism의 레이아웃을 합하여 화면에 실제로 보여질 요소들로 구성을 시킨다. 이로써 페이지의 화면을 구성한다. 이때 template으로 묶어진 요소들의 특징은 서로가 상태값을 공유한다는 것이다.

마치며

컴포넌트 리-렌더링 최적화에 대한 가이드라인을 제대로 잡고 다시 학습하도록하자

State 선언 위치의 중요성
객체 타입의 State는 최대한 분할하여 선언하기
React.Memo를 이용한 컴포넌트 메모이제이션
useMemo를 통한 변수 메모이제이션
useCallback을 통한 함수 메모이제이션

디자이너와의 소통이 중요할 것 같다.

디자이너와 정말 많은 커뮤니케이션이 일어나야 할 것 같다는 생각이 들었다. 디자이너 역시 아토믹 디자인 패턴을 공부하여 컴포넌트가 어떻게 재사용 될 수 있는지 혹은, 컴포넌트간에 상태가 어떤식으로 공유가 되는지를 파악하여 디자인을 시안을 프론트엔드 개발자에게 전달해주면 소통이 원할하게 이루어 질 수 있겠다는 생각이 들었다. 하지만 그런 상황이 아닐 경우에는 서로 커뮤니케이션을 하며 문제를 해결해 나아가야 할 것 같다 !

EditorCotainer 같은 경우에는 상태를 입력함에 따라 상태값이 변화가 되는 경우가 많았다. 예를들면 위 Item요소들을 한 군데로 묶어버리고 Props로 상태 변경을 하는 상태변경 함수를 전달하여 레이아웃을 좀 더 명확하게 분리를 하는 방법도 있지만 그렇게 할 경우 Item 요소중 하나의 값만 변경이 되어버려도 컴포넌트 전체가 리-렌더링 되는 문제가 발생하게 된다. 그래서 Page의 구조를 살리지 못하고 일단은 EditorContainer에 모든 Organism을 구성했다.

Header Organism 컴포넌트라도 분리해서 State 끌어올리기를 통해서 분리를 해주려고 했으나 오히려 더 복잡한 버그가 발생해서 해결하지 못했다. 이 부분에 대해서는 추후과제로 조금 더 공부해 봐야 할 것 같다.

결론

결국에는 이런 디자인 시스템을 적용하기 위해서는 디자이너와 정말 많은 커뮤니케이션이 일어나야 할 것 같다는 생각이 들었다. 디자이너가 오로지 디자인의 관점으로만 레이아웃을 만들고 개발자가 UI를 만들어야 하는 상황이 온다면 개발자는 디자이너가 의도한대로 컴포넌트를 재 설계해야한다. 이 과정에서 최적화와 상태관리를 위하여 프로젝트 구조의 흐름을 깨뜨리는 상황이 발생할 수 있을 것 같다고 생각했다.

2. 사용자 경험 개선

반응형 웹 적용

사용자 의견

👩🏻 사용자1,2 : IPhone 11 Pro에서는 레이아웃이 깨집니다.

원인 분석

기존에 반응형 웹을 만들기 위해서 390px ~ 600px ViewPort를 고려하여 만들었음. 하지만 Ipone 11 Pro 모델 같은 경우에는 ViewPort가 375px 기준이기에 반응형 ViewPort의 기준을 변경하기로 결정했음.

경험 개선

(왼) 개선 전 (오) 개선 후
360px ~ 600px 단위로 레이아웃 재구성

TodoList 기능 추가

사용자 의견

🧑🏻 사용자3 : 아침 일기를 작성함과 동시에 아침에 해야할 일을 체크할 수 있는 투 두 리스트가 있으면 좋겠습니다. 또한 상세 페이지로 들어갈 경우 요일 정보가 나오지 않아서 불편합니다.

경험 개선

To do List 기능 추가
상세 페이지에 요일 정보 나타나게 업데이트

네비게이션 추가 및 빈 여백 UI 추가.

사용자 의견

🧑🏻 사용자4 : 앱 초기 화면을 보자마자 조금 어색한 느낌이 들었습니다. 어떻게 메모를 입력해야하나요?

원인 분석

네비게이션을 UI를 통해서 새로운 기록을 바로 남길 수 있는 기능을 더하면 좋을 것 같고 그리고 텅 빈 느낌보다는 메모가 가능한 공간이라는 UI를 더해주면 좋을 것 같다고 생각했음. 하단에 네비게이션 기능을 추가할 때 작성할 수 있는 버튼을 추가했으며 텅빈 공간이라는 느낌을 주기 위해서 빈 여백지 UI를 더했음.

경험 개선

(왼) 개선 전 (오) 개선 후
여백 UI 추가
Navigation UI 추가

📲 프로젝트 실행 방법

🖥 코드 실행

npm install
npm start

📁 프로젝트 구조


src
 ┣ components
 ┃ ┣ atom
 ┃ ┃ ┣ etc
 ┃ ┃ ┣ icon
 ┃ ┃ ┣ img
 ┃ ┃ ┣ logo
 ┃ ┃ ┗ text
 ┃ ┣ molecule
 ┃ ┃ ┣ common
 ┃ ┃ ┣ detail
 ┃ ┃ ┣ editor
 ┃ ┃ ┣ home
 ┃ ┃ ┗ todo
 ┃ ┣ organisms
 ┃ ┃ ┣ common
 ┃ ┃ ┣ detail
 ┃ ┃ ┣ editor
 ┃ ┃ ┣ home
 ┃ ┃ ┗ todolist
 ┃ ┗ template
 ┣ hooks
 ┣ module
 ┣ pages
 ┣ styles
 ┣ util
 ┣ App.js
 ┣ index.js
 ┗ store.js

💡 라이브러리


    "lodash": "^4.17.21",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "redux": "^4.1.2",
    "redux-devtools-extension": "^2.13.9",
    "styled-components": "^5.3.3",
    "styled-reset": "^4.3.4",

About

Add your Miracle Memory

Languages

Language:JavaScript 98.9%Language:HTML 0.8%Language:CSS 0.3%

당신의 인생을 기적으로 바꾸는 기록 앱 미라클 메모리📝

[배포 URL]

💡 개요

**⚙️ 개발 환경 및 일지**

[기술]

[ 개발 일지 ]

[ 개발 이슈 ]

💡 구현사항

[기능]

[UI Interaction]

🧐 프로젝트 특징

AutoMic Design 패턴 그게 뭔데?

난 왜 Automic Design 패턴을 왜 적용하려 하는가?

어떤식으로 AutomicDesign System을 적용했는가?

폴더구조 - Atom

폴더구조 - molecule

폴더구조 - Organism

폴더구조 - Template

폴더구조 - Pages

마치며

컴포넌트 리-렌더링 최적화에 대한 가이드라인을 제대로 잡고 다시 학습하도록하자

디자이너와의 소통이 중요할 것 같다.

결론

2. 사용자 경험 개선

반응형 웹 적용

TodoList 기능 추가

네비게이션 추가 및 빈 여백 UI 추가.

📲 프로젝트 실행 방법

📁 프로젝트 구조

💡 라이브러리

About

Languages

⚙️ 개발 환경 및 일지