중간 발표

🧘🏻 프로젝트 주제

‘’SNS 팀 프로젝트 시작’’

---

프로그래머스 데브코스 4기 첫 팀 프로젝트 과제는 API 를 활용하여 SNS 를 만드는 것입니다.

이에 저희는 명상 테마로 한 SNS 를 만들게 되었습니다.

🧘🏻 니르바나

‘’명상을 테마로 한 SNS’’

---

문제 상황

‘숏폼’ 보다 밤 새우는 대학생들, 중독 치료하려 병원 찾는다… 조선일보 기사. 원문 링크

• 현대인의 SNS 및 숏폼 중독 현상이 심각합니다.
• SNS 와 숏폼은 마치 게임이나 도박 중독처럼 자극적인 내용을 더 빨리, 더 자주 찾도록 도파민 분비를 유도합니다.

아이디어

도파민 중독의 경각심을 사람들이 갖게 되면서 도파민 중독을 유발하는 다양한 매체들로부터 멀어지기 위해 **디지털 디톡스**라는 단어가 유행하기 시작했습니다.

이에 저희는 역으로 SNS 를 사용하여 디지털 디톡스 운동을 도울 수 있는 테마를 기획하게 되었습니다.

"자극적 콘텐츠·스마트폰 차단" 도파민 디톡스가 뜬다… 스포츠조선 기사. 원문 링크

니르바나

머리 긴 승려처럼 나는 Nirvana를 느껴🦋

• 니르바나(Nirvana, निर्वाण)는 ‘열반’이라는 뜻을 가진 단어입니다.
• 열반이란? 번뇌의 불을 꺼서 깨우침의 지혜를 완성하고 완전한 정신의 평안함에 놓인 상태를 의미합니다.
• 이 서비스의 이용자들이 일상적인 명상을 통해 정신적 평안함에 놓이길 바라는 의미로 작명하였습니다.

예상 효과

• 명상을 일상적인 루틴으로 포함시키면서 자연스러운 디지털 디톡스가 가능하도록 합니다.
• SNS이기 때문에, 서비스 이용자 간 사회적 관계를 돋움으로써 소속감을 만듭니다.
• 다양한 명상 기법을 서로 공유하여 더 많은 참여를 유도합니다.
• 명상을 권하는 긍정적인 문화 형성에 기여합니다.

🧘🏻 기능

“니르바나는 명상이 중심이 됩니다”

---

명상 기능

• 사용자는 명상을 하지 않으면 게시글를 읽는 것만 가능합니다.
• 명상 시간 동안 사용자는 명상을 진행하고, 명상 시간이 끝난 이후엔 게시글를 작성할 수 있습니다.
• 명상을 하지 않으면 사용자는 다른 사람의 명상 후기를 읽는 것만 가능합니다.

명상 기록

• 동기부여를 위해 사용자의 명상 기록을 보여줍니다.
• 포스트를 많이 쓴 사람은 명상을 많이 진행했다는 의미가 되어, 다른 사람의 명상 기록을 통해 의지를 다질 수 있도록 합니다.

🧘🏻 기술 선택

‘’우리 팀은 왜 해당 기술을 사용할까요?’’

---

라이브러리

• React
  • VirtualDOM 사용
    • DOM은 페이지가 바뀔 때 마다 새 HTML을 불러와서 DOM 전체를 렌더링하게 되는데 React에서는 실제 DOM이 아닌 가상 DOM을 사용하여 실제DOM과 비교해서 달라진 부분만 찾아내서 UI 업데이트를 처리하기 때문에 최소한의 DOM 조작이 가능합니다.
  • 컴포넌트 기반
    • 특정 기능 혹은 UI를 독립적인 단위인 컴포넌트로 분리하여 재사용과 유지보수가 용이하며 컴포넌트 들을 조합하여 복잡한 UI를 구성할 수 있습니다.
  • 단방향 데이터 흐름
    • 리액트는 데이터의 흐름을 단방향으로 유지합니다. 양방향 바인딩은 데이터의 변경과 UI 요소의 상태 변경이 서로 영향을 주어 동시에 업데이트 되지만 단방향 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트하기 때문에 UI가 복잡해져도 성능저하 없이 DOM을 렌더링 할 수 있습니다.
• TypeScript
  • 자바스크립트에서는 선언할 때 타입을 지정해주지 않기 때문에 코드가 동작하면서 암시적 형 변환이 일어날 수 있습니다. 이런 의도치 않은 동작을 방지하기 위해 TypeScript를 사용해서 타입을 지정해 줄 수 있으며 에러가 발생하면 컴파일 과정에서 알 수 있습니다. 이로 인해 런타임에서 발생할 수 있는 에러가 상당부분 줄어들게 됩니다.
  • 타입스크립트를 사용하면 변수의 이름뿐만 아니라 그 데이터의 타입까지 알 수 있기 때문에 코드를 직관적이게 만들어줍니다. 또한 객체의 속성을 IDE가 자동으로 리스트업 해주기 때문에 코드를 작성하기 편해집니다.

상태관리

• Recoil
  • Recoil은 기존의 리액트 프로젝트에서 사용되던 상태 관리 라이브러리에 비해 더 간단하게 상태 값을 관리할 수 있습니다. 같은 상태관리 라이브러리인 Redux와 비교하면 같은 기능을 하는 코드이지만 코드의 양은 확연히 줄어드는 것을 확인할 수 있습니다. (코드 예시 추가 필요)
  • 비동기 데이터를 처리하는 데도 유용하며, 상태 업데이트를 처리하는데 필요한 보일러플레이트 코드가 없고 전역상태의 설정/정의가 매우 쉬우며, Recoil이 지원하는 Hooks로 이를 get/set 하기 때문에 React 문법과 매우 유사하여 러닝커브가 낮고 코드 작성 시간을 줄일 수 있습니다.
  • Redux vs Recoil 비교 코드

    • Redux

      // Redux 액션 타입 정의
      const INCREMENT = 'INCREMENT';
      
      // Redux 액션 생성자
      const incrementAction = () => ({
        type: INCREMENT,
      });
      
      // Redux 리듀서
      const initialState = { count: 0 };
      
      const rootReducer = (state = initialState, action) => {
        switch (action.type) {
          case INCREMENT:
            return { ...state, count: state.count + 1 };
          default:
            return state;
        }
      };
      
      // Redux 스토어 생성
      import { createStore } from 'redux';
      import { Provider, connect } from 'react-redux';
      
      const store = createStore(rootReducer);
      
      // Redux 컴포넌트
      const Counter = ({ count, dispatch }) => (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => dispatch(incrementAction())}>Increment</button>
        </div>
      );
      
      // Redux 컴포넌트를 스토어에 연결
      const ConnectedCounter = connect((state) => ({ count: state.count }))(Counter);
      
      // Redux 앱 렌더링
      ReactDOM.render(
        <Provider store={store}>
          <ConnectedCounter />
        </Provider>,
        document.getElementById('root')
      );

    • Recoil

      // Recoil 상태 정의
      import { atom, useRecoilState } from 'recoil';
      
      const countState = atom({
        key: 'countState',
        default: 0,
      });
      
      // Recoil 컴포넌트
      const Counter = () => {
        const [count, setCount] = useRecoilState(countState);
      
        const increment = () => {
          setCount(count + 1);
        };
      
        return (
          <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
          </div>
        );
      };
      
      // Recoil 앱 렌더링
      ReactDOM.render(
        <RecoilRoot>
          <Counter />
        </RecoilRoot>,
        document.getElementById('root')
      );

API 요청

• axios

  HTTP 비동기 통신 라이브러리로, API 요청과 같은 네트워크 요청에 사용합니다.

  XML기반이며 PromiseAPI를 지원합니다. axios는 데이터를 바로 전달해주기 때문에 별도의 JSON 파일 변환이 필요 없습니다.

  axios가 제공하는 interceptors(인터셉터)를 사용하면 네트워크 요청이 처리 되기 전 요청과 응답을 가로채어 별도의 처리를 할 수 있습니다(네트워크 요청 취소, 응답시간 초과 설정 등)

  400, 500번 대 에러 발생 시 catch문을 통해 에러를 잡을 수 있습니다. (400, 500에러에 대한 예외처리 필요 없음)

• react-query

  • React Query는 데이터 요청, 변경에 관련된 코드를 단순화 시켜 줍니다. 이를 통해 서버와의 데이터 요청과 응답을 처리하는 코드를 작성하는 시간을 줄일 수 있고 애플리케이션의 성능을 향상시키고 유지보수성을 높일 수 있습니다.
  • React Query는 데이터를 캐싱하고 캐시된 데이터를 사용하여 중복된 요청을 방지하고 불필요한 API 콜을 줄여 애플리케이션의 성능을 향상시킬 수 있습니다.

디자인, 스타일링

• emotion

  CSS-in-JS 라이브러리 중 하나입니다. 스타일이 컴포넌트의 일부가 되어 스타일과 컴포넌트간 매핑하지 않습니다. class명 대신 prop을 사용하여 상태에 따라 css를 바꿀 수 있습니다. styled-component가 곧 컴포넌트기 때문에 단위 테스트가 가능합니다.

• Figma UI

  UI 디자인 제작 툴이며, 팀원들과 디자인을 실시간으로 공유할 수 있습니다 개발자가 참조 가능한 개발 툴바를 제공하여 디자이너와 개발자의 소통에 효과적이며, 별도의 가이드 라인 없이도 개발자가 디자인 수치 들을 확인할 수 있습니다.

번들러

• Vite
  • 빌드 도구 중 하나 입니다.
  • Dependencies(패키지)와 Source code(소스 코드)를 분리하여 빌드하기 때문에 개발 서버의 시작 시간이 다른 번들러에 비해 월등히 빠릅니다.

🧘🏻 팀 규칙

‘’프로젝트를 위한 팀 규칙!’’

---

스크럼

• 오픈 스크럼, 클로즈 스크럼 총 두번의 스크럼 을 진행합니다.
• 15~20분 내로 진행하여 효율적으로 의사정보를 전달할 수 있도록 합니다.
• 오늘 개발할 사항 / 애로사항 / 건의사항 등에 대한 이야기를 나눕니다.

칸반 보드 **& 스프린트**

• 칸반 보드

  • 현재 진행사항, 완료된 사항을 실시간 공유하기 위해 운영합니다.

  • 상황에 따라 원하는 형식으로 Task를 모아 볼 수 있도록 카테고리를 나누었습니다.

  • 칸반 보드

    [NIRVANA - Kanban Board](https://www.notion.so/860003e5ae49437a9ad7b8de59e310a8?pvs=21)

• 스프린트

  • 프로젝트 계획을 잘 이행하기 위해 매주 일요일마다 일주일간 진행된 사항과, 다음 주 진행될 사항에 대해 공유합니다.

컴포넌트 설명서

자신이 만든 컴포넌트를 팀원들이 쉽게 이해할 수 있도록 각자의 컴포넌트를 문서화 하였습니다.

[니르바나 코드 & 컴포넌트 정리](https://www.notion.so/2cad0415eaff4aff8673e4c5e3c08ada?pvs=21)

컨벤션

• **코드 컨벤션 및 디렉터리 구조**
  • ESLint & Prettier
  • 프로젝트 Build & Setting
  • 디렉터리 구조
  • Javascript 코드 컨벤션

커밋 메세지 규칙

🚨 Fix: [파일 명.tsx] - [수정 내용]
✨ Feat:	새로운 기능 추가
🎉 Init:	프로젝트 초기 생성
📝 Chore:	그 외 자잘한 수정에 대한 커밋
🚀 Build:	빌드 관련 파일 수정 / 모듈 설치 또는 삭제에 대한 커밋
💄 Style:	CSS, styled-component 스타일 관련 변경
🔨 Refactor:	코드 리팩토링에 대한 커밋
🍱 Asset: 파일(이미지, 아이콘 등) 추가
🔄 Rename:	파일 혹은 폴더명 수정하거나 옮기는 경우
🗑️ Remove:	파일을 삭제하는 작업만 수행하는 경우

PR 규칙

• PR 템플릿 사용

  PR 작성 시 팀원들이 보다 쉽게 코드를 이해하고 코드의 중심 내용이 무엇인지 알 수 있도록 하기 위해 PR 템플릿을 만들었습니다.

  

• Merge Rule

  • main 브랜치에 병합을 하기 위해서 반드시 2명 이상 리뷰어의 승인이 있어야 합니다.
  • 관여하지 않았던 다른 사람의 코드를 보고 자신이 맡은 부분 외에도 이해할 수 있도록 하기 위함입니다.

  

• Slack Github app 알림 사용

  • 효율적인 의사소통을 위해 Github 알람을 Slack 과 연동하여 PR 알람, merge 알람 등을 받고 처리합니다.