미리보기

개요

자취를 시작하게 되며 고물가에 조금이라도 돈을 아껴보고자 하기 위해 팀원을 모아 제작

사용기술

• Next.js, TypeScript, styeld-components, axios

• Vercel

• Figma, Github, Postman

담당 파트

• 기획

  • 협업 프로젝트로 팀빌딩 아이디어 제시

  • 크롤링 관련, 웹사이트 구조, 사이트 형식(커뮤니티)를 정함 ○ 각종 기능 및 레퍼런스 자료조사

• 개발 (프론트)

  • 메인페이지

  • 구글 로그인

  • 핫딜

  • 랭킹

  • 검색

  • 커뮤니티

  • 게시글 작성

  • 모든 FE 페이지 제작 및 구현

이슈 해결

• ReactQuill을 처음 사용하면서 에디터 초기 설정 및 커스터마이징에 어려움 발생.

  • globalStyle설정으로 인한 버튼부분 오류 발생

  • 공식 문서와 예제를 참고하여 ReactQuill의 기본 설정을 이해.

  • 특필요한 기능에 맞게 툴바와 옵션을 커스터마이징.

  • 초기화 및 데이터 바인딩 문제를 해결하여 에디터가 안정적으로 동작하도록 구현.

• styled-components 렌더링 이슈

  • 스타일 적용 전 렌더링 되어 뒤 늦게 스타일이 적용되는 문제

  • styled-components 공식문서를 확인

  • ServerStyledSheet 컨텍스트 api 를 통해

  • _document에서 sheet.collectStyles을 사용하여 스타일을 직렬화후 _app에 적용

  • 바벨 플러그인 설정하여 SSR환경에서도 스타일을 미리 적용

성과

• 몇몇의 유저가 아닌 많은 유저들이 사용할 수 있는 웹사이트 첫 제작

느낀점

• 백엔드, 디자인의 실력이 부족하다 보니 의견소통과 개발 진행속도에 많은 문제가 발생하여 지속적으로 체크하고, 확인하는 습관을 가지게 됨

개요

구글 일정관리를 위한 웹서비스 프로젝트를 위해 만들어진 소모임

사용기술

• Next.js, TypeScript, styeld-components, axios

• Vercel

• Figma, Github, Postman

담당파트

• 기획

  • 협업 수준에서 제작 가능한 기술 기획

  • BE팀장과 회의 후 가능한 부분 정립 후 역할 분배

  • 각종 기능 및 레퍼런스 자료조사

• 개발 (프론트)

  • Todo List, Google 캘린더 연동 제작

  • 메인 캘린더 제작

  • 데일리, 친구관리, 일정 수정 제작

  • 각종 기능 검토 후 코드 수정

이슈 해결

• React 캘린더 라이브러리 사용 시 CSS 수정이 어려움.

  • 캘린더 라이브러리의 기본 스타일을 덮어쓰기 위해 CSS 커스터마이징 전략을 적용.

  • 특정 클래스나 요소를 타겟으로 하는 스타일링을 통해 원하는 디자인으로 수정.

  • CSS 모듈이나 스타일 컴포넌트를 활용해 캘린더 스타일을 유연하게 조정.

• 스타일드 컴포넌트 사용으로 인한 중복 스타일 문제

  • themeProvider를 사용한 공통 스타일 지정 및 globalStyle 지정으로 해결

• 공통 컴포넌트

  • 프론트엔드 개발 인원 3명으로 페이지,기능 단위로 나누어 개발

  • 공통적으로 쓰이는 기능과 컴포넌트가 많아짐

  • 기능 수정과 유지보수의 어려움이 발생

    • 공용 컴포넌트와 공통적으로 쓰이는 라이브러리의 래핑

    • customHook 적극 활용

    • 중복 코드 제거 및 유지보수 용이성 확보

• 상시 코드리뷰

  • 프론트엔드 팀에서는 코드(prettier)와 커밋,PR 컨벤션을 지정

  • 매 PR마다 코드리뷰를 통해 상시 코드를 점검했습니다.

  • 코드리뷰 approve를 받지 않은 PR은 머지가 불가능 하도록 설정하여 코드의 질을

    높이는데 기여

성과

• 코드리뷰 경험

  • 1인 이상에게 approve를 받아야 머지될 수 있는 방식을 차용

  • 질 높은 코드를 생산하는데 기여

• 구글 로그인 경험

  • OAuth 2.0을 사용해 구글 로그인 API를 연동.

  • JWT(JSON Web Token)를 활용해 사용자의 인증 상태를 관리.

  • 로그인 성공 후, 사용자 정보를 안전하게 로컬스토리지에 저장하여 유지.

• 느낀점

  • 인원이 많아질수록 프로젝트의 역할분담이 쉽지 않다는 점을 느끼게 되었으며 여러 의견들 이 나오게 되면서 충돌이 많다는 것을 느끼게 됨

  • 의사소통은 수평적이되 결정은 수직적으로의 방침을 세우게 됨

  • 제작만 중요한 것이 아닌 디자인, 백엔드와의 의사소통의 중요성에 대해 느낌

개요

기숙사 근로 중 기존 시스템의 비효율을 줄이기 위해 제작
행복기숙사 근로자가 사생을 효율적으로 관리하기 위해 제작

사용기술

• Next.js, TypeScript, emotion, axios

• Vercel, EC2

• Figma, Github, Notion, Postman

담당 파트

• ● 기획

  • 행복기숙사 근로중 실제로 불편했던 일들 리스트화

  • 기존시스템의 구조파악 및 필요한 기능 설계

  • 기숙사측 요청사항 정리 후 BE에게 필요한 기능 개발 요청

  • DB구조 의논

• 개발 (프론트)

  • 로그인 관련 페이지 제작

  • 근로생 출근 시간표, 업무캘린더, 업무 ToDo List 제작

  • 학생 데이터 업로드 및 조회 페이지 제작

  • PDF 관리 페이지 제작 (입 퇴사 신청서)

  • 순찰 페이지, 카드키 관리대장, 민원접수내역, 방역 호실점검 제작

이슈 해결

• 프론트엔드와 백엔드 간 날짜 형식 불일치로 데이터 전달 오류 발생.

  • 날짜 형식을 맞추기 위해 입력된 날짜를 강제로 ISO 8601 형식으로 변환.

  • 변환된 날짜를 백엔드에 전달하여 데이터 저장

  • 모든 입력 날짜에 대해 정상적으로 작동하는지 테스트 완료.

• 메인 페이지에서 많은 자료 요청으로 인해 웹 브라우저에 부하 발생.

  • 불필요한 상태를 제거하고, 필요한 경우에만 상태를 사용하도록 최적화.

  • 상태 리프팅을 통해 공통 부모 컴포넌트에서 상태를 관리.

  • 리렌더링을 줄여 성능을 개선하고, 브라우저 부하를 줄임.

• PDF 파일 다울로드로 인한 지연로딩

  • 클라이언트 측에 로딩 스피너를 추가해 UX 개선.

  • 로딩 직전에 중간 로딩 페이지를 두어 사용자에게 진행 상황을 표시.

  • 서버 사이드 렌더링의 특성을 고려하여 클라이언트 측 로딩 처리만 적용.

• EC2에서 로컬 배포된 서버가 윈도우 환경에서 컴퓨터 부팅 시 자동으로 실행되지 않음.

  • EC2 인스턴스의 시작 시 서버 자동 실행 스크립트를 설정.

  • 윈도우 작업 스케줄러를 사용해 컴퓨터 부팅 시 서버 실행 스크립트를 트리거.

  • 컴퓨터가 켜질 때마다 EC2에서 서버가 자동으로 실행되도록 설정 완료.

성과

• 유저 친화적 UI/UX 구현

• 유지보수와 가독성을 위한 코드 구현

• 저사양 컴퓨터(기숙사 컴퓨터)에서 쾌적한 이용

• 유지보수가 최대한 필요하지 않은 환경 구축

• 기숙사측 요구사항 (서버가 학교에 있을 것) 충족

느낀점

• 협업을 처음으로 진행한 프로젝트다 보니 기획한 의견을 전달하는 법, 기록을 남기는 법, 협업 개발을 같이 할 때 생기는 문제점 등 모든 부분이 새로웠으며 많이 부족하다는 점을 깨달음

• 기숙사 측의 요구사항 및 기한에 맞추기 위해서 포기해야 하는 부분과 가능한 부분이 많이 존재하였으며 개발 순서의 중요도에 대해 깨달음

배포

https://domidomis.duckdns.org/user/home

(Id: dev1@email.com Pw: dev1)

Git Organization

https://github.com/DominestSKHU

Git FE

https://github.com/DominestSKHU/Frontend

Git BE

https://github.com/DominestSKHU/Backend

Notion(회의록)

https://www.notion.so/Dominest-0c231effb7924f8ba66c1bf87e9123af