README.md

Jober [자버]

📌 웹 서비스 소개

자버의 리뉴얼 및 개선된 서비스

• 사용성과 효율을 중심으로 디자인과 데이터 안정성 강화
• 웹과 앱 모두 최적화된 디자인을 제공
• 사용자 친화적인 경험과 직관적 인터페이스를 통한 빠른 적응 목표
• 기존 기능에서 조금더 업데이트된 기능 구현
  

이제는 자버에서 더 편리한 서비스를 만나보세요!!🤗

개발 기간 : 2023년 9월 25일 월요일 ~

🛠 기술 스택

Front-end 기술 스택
Front-end 배포
배포	🔗 JavaJober[자바자버]
노션	👉 노션 바로가기

💡 주요 기능

웹 화면	기능
	홈 - 자버에서 로그인 후 나오는 홈페이지 API입니다. - 홈에서 간단한 개인 정보와 스페이스, 문서 등을 확인할 수 있습니다.
	카테고리 - 카테고리에 맞춰서 공유 페이지 형식을 각각 제공합니다.
	블록 추가 - 공유 페이지에서 블록을 추가,삭제 및 작성하여 저장할 수 있습니다. - 블록 종류에는 파일 블록, 목록 블록, 자유 블록, SNS 블록이 있습니다.
	템플릿 - '템플릿 추가하기' 탭 클릭 시 선택한 카테고리 별 추천 템플릿이 나옵니다. - '템플릿 선택하기' 모달에서 검색 바 클릭 시 모든 템플릿 데이터가 카테고리 별로 분류되어 나옵니다. - '템플릿 선택하기' 모달에서 키워드 검색 시 키워드에 맞는 템플릿이 나옵니다.
	스타일 세팅 - 템플릿에 사용되는 스타일을 적용할 수 있는 탭입니다. - 배경, 블록 스타일, 테마를 설정할 수 있습니다.
	드래그앤드롭 - 블록 별로 드래그앤드롭하여 순서 이동이 가능합니다.
	임시 저장 - 임시저장 내역이 있을 때, 저장 내역을 이어서 작성하거나 삭제할 수 있습니다.
	저장 + 공유페이지 완성 - 커스텀한 블록과 스타일을 저장할 수 있습니다. - 완성된 공유페이지는 '외부 공개' 탭을 사용하여 전체 공개 할 수 있습니다.
	공유페이지 url - 공유페이지 편집하기 시 url도 커스텀이 가능합니다. - url로 공유페이지에 접근이 가능합니다.

📂 프로젝트 구성도

아키텍쳐(Architecture)
개체-관계 모델 (ERD)

📂 API 명세서 🔗

API 명세서

✨ 프로젝트 를 하면서 배웠던 "리액트 불변성" 에 관하여.

리액트에서는 state의 불변성을 지켜야 합니다.

import { useState } from 'react';

export default function App() {
  const [cat, setCat] = useState({
    name: 'howoo',
    age: 6,
  });

  const handleChangeCatName = () => {
    cat.name = 'mango';
    setCat(cat);
  };
  console.log(cat); //{ name: 'mango', age: 6 }

  return (
    <div style={{ textAlign: 'center' }}>
      <div>고양이 이름 : {cat.name}</div>
      <button onClick={handleChangeCatName}>이름변경</button>
    </div>
  );
}

버튼을 누르면 console.log(cat)을 통해 실재 cat.name은 변경이 된것을 확인할 수 있지만 cat의 참조값은 그대로이기 때문에 재랜더링이 발생하지 않습니다.

불변성을 지켜야한다는 의미는 얕은 비교를 하는 리액트의 특성상 참조형 데이터의 원본은 변하지 않게 유지해야하고 재랜더링을 위해 새로운 참조값을 set해야 함을 의미 합니다.

본 프로젝트에서는 wall(공용페이지에서 보여지는 모든 정보) 객체가 있습니다.

const wall = {
  category: 'personal',
  memberId: 1,
  spaceId: 1,
  shareURL: 'howooking',
  wallInfoBlock: {
    wallInfoBlockId: 9,
    wallInfoTitle: '이호우',
    wallInfoDescription: '안녕하세요. 고양이 개발자 이호우입니다.',
    wallInfoImgURL: 'https://avatars.githubusercontent.com/u/87072568?v=4',
    backgroundImgURL:
      'https://images.unsplash.com/photo-1696251143046-2d32fb985b59?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2670&q=80',
  },
  blocks: [
    {
      blockUUID: '1108fff1-0106-4340-b505-280e15626ecc',
      blockType: 'listBlock',
      subData: [
        {
          listBlockId: 33,
          listLabel: '학력/경력',
          listTitle: '학력',
          listDescription: '서울대학교',
          isLink: false,
        },
      ],
    },
    ... 생략

✅ 문제점의 시초

-> 공유 페이지에서 발생하는 모든 onChange 이벤트는 wall 내부 값들을 실시간을 변경시켜야 합니다.

예를 들어 wall.wallInfoBlock.wallInfoTitle값을 새로운 값으로 변경하기 위해서는 다음과 같이 해야 합니다.

setWall({
  ...wall,
  wallInfoBlock: { ...wall.wallInfoBlock, wallInfoTitle: '새로운 값' },
});

위와 같이 wall 객체의 깊이가 얕은 경우는 어렵지 않게 불변성을 지킬 수 있으나 깊이가 깊어짐에 따라 불변성을 지키는 것은 불가능에 가까워 집니다.

✅ 문제 해결 방법

-> 이 문제를 해결해주는 라이브러리가 'IMMER' 입니다.
문제점에 대한 해결 방법을 찾고 해당 라이브러리를 찾아 적용하기까지 많은 시간이 걸렸습니다.
이전에는 react 의 장점만 경험했던 부분과는 다르게, 해당 문제를 겪으면서 react 의 단점도 확연하게 느낄수 있게 된 경험이였습니다.
사용하는 기술 스택에 대해 장,단점을 모두 깨닫은 후에 해결 방안을 찾던 도중 react의 단점을 최소화 할수 있고, 더 나은 코드 개선을 위한 라이브러리 `IMMER'을 선택하게 되었습니다.

IMMER를 사용하면 기존의 객체의 값를 다루는 문법을 사용하여 state를 업데이트 시켜줄 수 있습니다.

✅ IMMER 적용 방법

import { produce } from 'immer';

setWall(
  produce(wall, (draft) => {
    draft.wallInfoBlock.wallInfoTitle = '새로운 값';
  }),
);

👨‍👩‍👧‍👦 개발 팀 소개

💜 Front-end

이정우(팀장) (Front-end)	김하은 (Front-end)	방미선 (Front-end)

💜 Back-end

이미연(팀장) (Back-end)	선예은 (Back-end)	양수현 (Back-end)	김희현 (Back-end)	윤현진 (Back-end)