- 사용성과 효율을 중심으로 디자인과 데이터 안정성 강화
- 웹과 앱 모두 최적화된 디자인을 제공
- 사용자 친화적인 경험과 직관적 인터페이스를 통한 빠른 적응 목표
- 기존 기능에서 조금더 업데이트된 기능 구현
이제는 자버에서 더 편리한 서비스를 만나보세요!!🤗
개발 기간 : 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를 업데이트 시켜줄 수 있습니다.
import { produce } from 'immer';
setWall(
produce(wall, (draft) => {
draft.wallInfoBlock.wallInfoTitle = '새로운 값';
}),
);
|
|
|
|
이정우(팀장) (Front-end) |
김하은 (Front-end) |
방미선 (Front-end) |
|
|
|
|
|
|
이미연(팀장) (Back-end) |
선예은 (Back-end) |
양수현 (Back-end) |
김희현 (Back-end) |
윤현진 (Back-end) |