Home

💫 요거! 어땨?

기존 프로젝트 '이거! 어때?' 사이트를 개선하는 프로젝트로,

위키에서 일별 개선 사항 및 새로운 기능 추가 과정에 대해 기록합니다.

✅ 프론트엔드 기술적 요구사항

1. 기존 자바스크립트로 작성된 코드를 타입스크립트로 마이그레이션한다.
2. 기존의 페이지별로 구분된 컴포넌트를 아토믹 디자인을 기준으로 분리하여, 유지보수와 재사용성을 개선한다.
3. 기능이 추가됨에 따라 복잡해진 상태를 관리하기 위한 상태 관리 도구(Redux)를 도입한다.
4. 개발된 Component들은 Storybook을 사용하여 CDD 방법론으로 개발한다.
5. 소프트웨어 품질 향상을 위해 테스트 코드를 작성한다.

✅ 백엔드 기술적 요구사항

1. ..
2. ..

🤔 기존 서비스에서 발생하는 문제

1. [FE] 크로스 브라우징

• 모바일 화면에서도 화면 상 깨지는 부분이 없어야 한다.

2. [FE/BE] 보안 강화

• 회원가입/아이디/비밀번호/게시글 기능에서 SQL 조작 가능성이 있는 입력문으로 DB 실행이 되어서는 안된다.
• 또... 정보보안에서 뭐 배웠었지? XSS, SQL 인젝션 등 방어

3. [FE] 무한 스크롤

• 방대한 양의 데이터가 있어도 필요한 만큼의 데이터만 불러와 스크롤이 자연스럽게 작동되어야 한다.

4. [FE] SPA 페이지 안에서의 뒤로가기 작동 불가

• 기존 서비스는 React-Router를 사용하여 뒤로가기 작동 불가능 + 새로고침하면 맨 처음의 렌더링 페이지로 이동한다는 불편함이 존재한다.
• React-Router를 BrowserRouter로 변환하여, 해당 문제를 개선한다.

5. [FE/BE] 로그인/회원가입 시 오래 걸리는 부팅 시간

• 해결 방법 찾아보기

🎯 비즈니스 요구사항

• 프론트엔드 관련

  • 기존 자바스크립트로 작성된 코드를 타입스크립트로 변환하여, 보다 안정적이고 개발에 용이한 코드로 마이그레이션한다.
  • 기존의 제공되지 않던 모바일 UI를 반응형으로 개발한다.
  • 사용자 관점에서 더 편리하고 명확한 기능을 제공하기 위해 기능 수정 및 추가한다.
  • 개발된 Component들은 Storybook을 사용하여 CDD 방법론으로 개발한다.
  • 기능이 추가됨에 따라 복잡해진 상태를 관리하기 위한 상태 관리 도구 도입한다.
  • 기존 버전의 프로젝트에서 발생한 문제점을 해결하여 서비스 품질 향상시킨다.

• 백엔드 관련

  • nodeJS로 작성된 코드를 JAVA로 변환한다.

📋 API 명세서

API 명세서