🤓 Study Now

🔗 Study Now 바로가기

[체험계정]
💙 계정 ID : studyNow@studynow.com
🔓 계정 PW : test1T

---

🍭 서비스 소개
🍭 개요-특징 및 성과
🍭 주요 기능 및 페이지
🍭 트러블슈팅

🤓 Study Now

📖 서비스 소개

studyNow 는 공부 등 자기 계발을 위해 설계된 다기능 플랫폼입니다. 자기계발을 위한 퀴즈, 효과적인 협업을 위한 스터디그룹 모집 및 채용정보 제공, 구성원 간 원활한 소통을 위한 실시간 채팅 기능을 갖춘 종합 플랫폼입니다.

1. 퀴즈 플레이를 통한 개인 실력 향상

   • 개인의 기술과 지식을 향상시키기 위해 다양한 퀴즈 주제에 도전하고 시간 경과에 따른 진행 상황을 확인할 수 있습니다.
     

2. 스터디 그룹을 통한 공통 학습 목표 달성 및 협업 능력 향상

   • 스터디 그룹을 게시하고 가입하여 다양한 학습 주제를 탐색하고 스터디원와 협력하여 공통 학습 목표를 달성할 수 있습니다.
     

3. Chatting 서비스를 통해 스터디원과 자유롭게 대화

   • 스터디원과의 원활한 소통을 위한 실시간 채팅이 가능합니다.
     

4. 최신 채용 공고에 대한 최신 정보를 유지하고 구직 과정을 간소화

   • 서울시 채용정보 연계를 통한 채용 정보에 대한 최신 정보 및 구직 과정을 간소화 시킬 수 있습니다.

   TOP 🔼

📖 개요

🎈 프로젝트

• 프로젝트명 : Study Now
• 프로젝트 기간 :
  • 기획 : 2023.10
  • 개발기간 : 2023.11
  • 리팩토링 : 2023.12 ~ 계속

🐣 특징 및 성과

이 프로젝트는 Next.js와 TypeScript 및 MongoDB를 기반으로 구축되었으며 사용자 경험 향상과 성능 최적화에 중점을 두고 있습니다. 주요 특징과 성과는 다음과 같습니다.

1. Next.js & TypeScript

• 각 페이지 CRUD 구현
• 모듈화 및 재사용성 향상
• mongoDB를 사용한 데이터 관리
• API Route를 통한 serverless function
• SSR을 통한 초기 페이지 로딩 시간 단축 3ms -> 1.5ms, 50% 단축
• SEO 검색엔진 최적화 향상
• revalidate = 60; 이용하여 서버 부담 최소화

2. 사용자 경험 향상

• 다양한 기기와 화면 크기에 대응하는 반응형 웹을 통한 사용자 친화적
• 전략적 SEO 개선 및 최적화를 통해 92점에서 -> 100점으로 약 9%개선, Lighthouse SEO 평가 점수 100 달성
• 불필요한 쿼리를 줄이고 로딩 속도를 개선하여 전반적인 성능을 향상
• 이미지 최적화(Image component)
• skeleton UI 및 Loading 통해 사용자 경험 개선 및 bounce rate 최소화
• debounce를 사용하여 검색페이지 사용자 경험 개선
• OAuth 구현을 통한 간소화된 로그인으로 인한 사용자 경험 개선(+ JWT 로그인 개발)

3. 개인 프로젝트이지만 언제든 develope 가능하도록

• GitHub Flow 방식을 채택하여 효과적인 코드 통합과 버전 관리를 수행
• Pull Request 및 코드 리뷰를 통해 코드의 품질을 높이고, 충돌을 방지하며 안정적인 개발을 진행
• 확장성 염두한 application architecture
• 모든 과정 문서화 및 ISSUE 관리
• StudyNow Logo design - figma

⚙ 개발 환경

📂 구조

TOP 🔼

📖 주요 기능 및 페이지

💡 메인 페이지

메인페이지(반응형웹)	메인페이지

• 반응형 웹으로 사용자 편리성 향상
• scroll event 및 해당 플랫폼 소개 design
• 회원가입 및 로그인의 경우 main page 상단에만 표시

Nav (layout.tsx)

• pc 버전의 경우 상단 / mobile, tablet 버전의 경우 하단 위치하여 사용자 편리성 증대

Carousel

• 라이브러리 사용하지 않고 직접 개발 및 개선
• background에 linear-gradient를 통한 pc 버전 전체 통일감 부여

💡 스터디 게시판 페이지

스터디 게시판 페이지(반응형)

💡 스터디 모집 게시글 목록 페이지

모집상태 tab	카테고리별 검색	글쓰기 페이지 modal

• 최신순 정렬(글 작성 시 DB 함께 저장한 날짜)
• 글 작성 날짜(최신/일/주/연월일 순으로 시간별 표시 - time)
• 스터디 글 검색 기능(useDebounce 사용으로 사용자 경험 개선)
• 모집중/모집완료 표시(tab 기능 개발로 원하는 조건 확인 편리)
• 게시글 목록 badge에 해당 모집글 상태 표시(모집여부, 장소 등)
• 각 badge(장소, 종류 등)별 select하여 검색 가능
• 캐싱(revalidate = 60;) 이용하여 서버 로드 최소화
• chattingWith 실시간 채팅 서비스 advertisement 추가
• skeleton UI를 통한 DB data 로딩시 사용작 경험 향상 및 bounce rate 최소화

💡🌼 스터디 모집 게시글 작성 페이지 & 서버 개발

편리한 상태표시	유효성검사 및 modal	유효성 통과후 (modal 통일감)

• 작성, 수정 공통 컴포넌트 writingEditor를 통한 코드 개선
• 유효성 검사를 통한 필수 작성 목룍 표시 - 등록 버튼 후 modal 통해 표시
• 유효성 통과 후, 서버 및 DB data 통신
• client에서 유효성 검사 후, 서버 API에서도 예외처리 - 이중 방지
• 스터디 모집 상태 표시(모집상태, 온오프, 장소, 종류, 연락처 등)

💡🌼 스터디 모집 게시글 수정 & 서버 개발

dyanamice route	게시글 수정	게시글 삭제

• 작성, 수정 공통 컴포넌트 writingEditor를 통한 코드 개선
• dyanamice route를 통한 각 게시물 별 수정 페이지 연결
• DB data 받은 것으로 기본 틀
• 작성과 마찬가지로 유효성 검사 후, DB data 통신
• 스터디 모집 상태 표시(모집상태, 온오프, 장소, 종류, 연락처 등)
• 게시글 작성자 및 수정 요청자 비교하여 서버 통신(client,server 이중처리)

💡 스터디 모집 게시글 상세 페이지

• dyanamice route를 통한 각 게시물 별 상세 페이지 연결
• 수정, 삭제 modal 컴포넌트화 및 toggle화
• 스터디 모집 상태 표시(모집상태, 온오프, 장소, 종류, 연락처 등)

🌼 스터디 모집 삭제 서버 개발

• 게시글 작성자 및 삭제 요청자 비교하여 서버 통신(client,server 이중처리)

💡 퀴즈 페이지

퀴즈 페이지 (반응형)

퀴즈 사용자 설정	퀴즈 플레이(+시간경과)	퀴즈 결과 페이지

💡 퀴즈 셋팅 페이지

• 문제 유형, 문제 갯수 및 문제 시간 사용자가 직접 설정 가능하여 이용 편리성 극대

💡 퀴즈 플레이 페이지

• 사용자가 설정한 셋팅 정보를 통한 DB data 호출
• 각 문제 답변 local storage 기록화하여 퀴즈 진행도중 초기화 되더라도 데이터 날림 방지
• 시간제한 및 문제 갯수 표시
• 각 문제별 시간 제한 초과 시, 답변창 입력 불가 처리

💡 퀴즈 결과 페이지

• 각 문제별 사용자 답변 및 정답지 각 확인 가능
• local storage 활용하여 사용자 답변 호출

💡 채용 페이지

채용페이지(반응형웹)	검색(지역)

• 서울 API 데이터 활용
• sticky를 통한 검색창 상단 고정하여 사용자 편리성 개선

💡 마이 페이지

마이페이지(반응형웹)	검색(지역)

• 사용자 별 session 정보를 통한 마이페이지 표시
• 조건부 랜더링을 통한 로그인 이전 시, 로그인 및 회원가입 표시
• grid를 통한 반응형 웹 개선

💡 로그인 및 회원가입 페이지

로그인(OAuth/JWT)	회원가입(+유효성)

• OAuth 소셜 로그인 (깃헙, 카카오) - Session
• 일반 로그인 및 일반 회원가입 - JWT (JSON Web Token)

💡 Contact 페이지

contact 페이지	modal

• 공지, 문의, 뉴스, 이벤트 페이지

🌝 Common 기능

Modal

• props로 btn content, message, mark 표시 등을
• 확인 및 오류메시지 전송까지 한번에 가능하도록 편리하게 사용 가능하도록 리팩토링 지속하여 개발 완료

Toggle - custom hook

• 자주 사용하는 toggle의 경우 custom hook으로 개발

useIntersectionObserver - custom hook

• 스크롤 이벤트 및 무한스크롤 적용(main, event, 채용페이지)
• threshold를 통해 해당 지점 작동 위치 조정

TOP 🔼

🎃 트러블 슈팅

🎃 (공공데이터) 외부 API - Mixed Content

▶ 요약

채용 페이지의 공공데이터 채용연계 정보 API 이용 시, 배포 사이트에서 Mixed Content 문제 발생

▶ 어떤 문제?

• 외부 API (서울시 공공데이터 채용연계 정보) Vercel 배포 사이트에서 Mixed Content 문제 발생
• HTTPS로 로드 되는 환경에서 API 요청받는 곳이 HTTP 프로토콜로 되어있어 보안문제상 이를 막아주며 발생하는 문제

▶ 해결 방안

1. (임시) - nextConfig 를 통해 source에 fetch 요청 경로를 조정하여 외부 API 호출 임시 https에서 http로 변경
2. proxy server
3. API route - serverless function issue로

🔗 GIT ISSUE 정리 mixed content issue 바로가기

🎃 serverless function

▶ 요약

• vercel 무료 배포의 경우 serverless function 12개까지

▶ 어떤 문제?

• vercel의 무료 배포의 경우 serverless function이 12개까지만 가능하기에, 프로젝트 초기 기획하였던 기능들을 모두 담지 못하는 이슈 발생

▶ 해결 방안

[Offload serverless functions]

• 기획 수정을 통해 일부 서버 기능의 경우 다른 플랫폼 이용
• chatting 기능의 경우 다른 배포 사이트에 연결하는 광고 형식으로 변경
• (mobile ver) study list 상단 / (pc ver) study list 왼쪽에 위치하게 하여 자연스럽게 접근 가능하도록 변경
• chatting server의 경우 koyeb 배포 이용

🔗 GIT ISSUE 정리 [issue 바로가기]()

🎃 props array

▶ 요약

퀴즈 플레이 페이지에 props가 array에 제대로 들어오지 않는 문제 발생

▶ 어떤 문제?

• props로 받아온 숫자만큼 array 생성이 안 되는 문제
• quizUserSetting 쪽에서 quizPlay로 보내는 props 값 중에 questionNum으로 받는 number 타입의 문제 갯수에서 문제
• quiz user setting에서 quiz play page로 보내는 props type 조정에도 array에 제대로 들어오지 않는 문제

▶ 해결 방안

• (놓친 부분)
  1. Array에 props 값이 들어올 때는 단일 요소로 들어오게 됨
  2. questionNum props를 number type으로 받았기에 당연히 숫자로 들어올 줄 알았던 것에 대한 실수
  3. Array(questionNum)이 결국 1개의 배열요소만 배출
  4. 일단 props 자체는 number type이 맞지만, Array에 받을 때는 단일요소로 들어가기 때문에 [’5’]로 받게 됨
• props Number 감싸서 Array 생성하니 제대로 동작 완료

🔗 GIT ISSUE 정리 [issue 바로가기]()

🎃 sticky

▶ 요약

채용정보 페이지 검색창 스크롤바 내릴 시, sticky 적용 불가 문제

▶ 어떤 문제?

• 검색창에 적용한 sticky가 제대로 동작하지 않는 문제
• sticky 적용한 부모에 height, 혹은 body 밑에 바로 걸고 사용해도 제대로 동작 안하는 문제

▶ 해결 방안

• 해답은 부모요소들 중에 overflow: hidden, auto, scroll 속성이 적용되어 있으면 안된다는 것
• 부모 요소중에 적용한 것이 없는데 계속해서 문제가 발생하는 것이 이상하여 혹시하고 global.scss를 확인해보니 기본초기 셋팅값이라고 overflow-x:hidden; 을 넣어뒀던 것을 발견하여 수정 완료 후 정상 작동 확인

🔗 GIT ISSUE 정리 [issue 바로가기]()

🎃 local storage build - SSR

▶ 요약

퀴즈 페이지에서 local storage 오류 발생

▶ 어떤 문제?

• build 작업 중 퀴즈 페이지의 local storage로 인한 오류 발생
• SSR 환경에서는 local storage 이용 불가
• 당연한 것이 local storage는 브라우저 환경에서만 사용 가능하기에, 서버 환경에서 지원하지 않음

▶ 해결 방안

• 해당 페이지 CSR로 변경

🔗 GIT ISSUE 정리 [issue 바로가기]()

🎃 배포사이트 img block

▶ 요약

• 메인화면의 카드 4개 중 1,4번째 배경화면 뜨지 않는 문제 (배포사이트에서만)

▶ 어떤 문제?

• 일부 이미지는 가능
• 배포사이트에서 개발자도구 통해 확인했을때 정상적으로 파일링크 동작하고 있는 것을 확인
• 나오지 않는 1,4번째를 다른 이미지로 대체하니 정상적으로 동작하는 것을 확인
• 타 섹션의 경우에도 동일한 문제 발생하는 것을 파악
• 단순히 1,4번째 랜더링 문제가 아닌 것을 파악
• 절대 경로(실패) & git upload 주소 방법을 시도하려했지만, 근본적 문제 파악 위해 분석 확장자 명 jpg 혹은 JPG 인 것을 확인

▶ 해결 방안

• [오타, 대소문자, 확장자명까지 제대로 확인하자]
  • 해당 이미지 파일들 확장자명까지 동일하게 교체
  • 대소문자 구분 수준의 경우 개발모드에서는 문제 없었으나, 배포사이트에서는 중요 파일명 오타 없음을 확인하였지만, 문제 발생하여 의아했음. 결국 확장자 대소문자 문제였음. 크흠..며칠..을..

🔗 GIT ISSUE 정리 배포사이트 img block issue 바로가기

🎃 vercel 국내 DNS ver.app 차단 이슈

▶ 요약

국내 DNS 도메인 차단으로 인한 vercel 접속 이슈 현재 본인 상황에서는 모바일만 접근 가능하고, tablet 및 웹에서 접근이 불가.

▶ 어떤 문제?

• 내용 참고 사이트
  
• vercel issue
  

최근 국내에서 Vercel 접속 시 속도 이슈가 있었던 상황에서 국내 DNS 에서 .vercel.app 도메인에 대한 차단이 이루어진 것으로 보임 이전에 문제가 있었던 국내 ISP CloudFlare R2 차단 때처럼 해당 DNS도 동일한 이슈가 아닌가 싶음 언제 해결될지는 미지수이지만, 프로젝트 내 도메인 연결 시 접근 가능(.vercel.app만 아니면 되는 것 같음)

▶ 해결 방안

1. 커스텀 도메인 사용 및 변경
2. 다른 배포 사이트 이용 - 3일 내로 해결되지 않을 경우, 타 배포 사이트 이용

🔗 GIT ISSUE 정리 vercel 국내 DNS 문제 issue 바로가기

TOP 🔼