미리보기

팀원 4명

프로젝트 목적

기존 sns 의 과도한 정보속에서 사진 중심의 여행기록 서비스 필요성을 느껴 구현하게

되었습니다.

맡은 페이지

• 알림페이지

• 글쓰기 페이지

• qna 페이지

• 팔로우 버튼 기능

• not-found 페이지

문제점 (어려웠던 점) / 해결방안

1. 알림페이지 날짜 순으로 불러오기

알림페이지에서 최신순으로 불러와야 하는 데 파이어베이스에 문자열로 저장되어서 날짜순으로

불러오는 것처럼 보여지지만 중간에 옛날알림들이 섞여있다는 문제점이 있었습니다.

해결방안

찾아보니 파이어베이스의 Timestamp 타입이 있다는 것을 알게 되어 활용해서 파이어베이스에

날짜로 저장될 수 있었습니다. 최종적으로는 데이터베이스에서 알림을 가져 올때 날짜를

최신순으로 받아올 수 있게 되었습니다.

2. 글쓰기페이지에서 강조효과

글쓰기 페이지에서 글쓰는 페이지를 시각적으로 나타내기 위해 타이핑효과를 주고 싶었습니다.

해결방안

검색을 통해 제가 원하는 react-type-animation 이라는 라이브러리를 발견했습니다. 제가 원하는

효과랑 비슷했고 그 결과 사용자에게 시각적으로 게시글을 쓰는 페이지라는 것을 강조 할 수

있었습니다.

사용언어및 개발환경

• TypeScript, React, Next.js, Tailwind Css, tailwind-merge, Reactquery, Zustand, React

context

• Database/서비스연동

o Firebase, Kakaoapi, Tourapi

참고자료

Github : https://github.com/kunghwan/lastProject

배포링크 : https://last-project-main.vercel.app/

개인 프로젝트

프로젝트 목적

엑셀로 요구사항을 관리하는 것은 번거로운 작업이었습니다.

또한 이동 중이거나 컴퓨터가 없는 환경에서도 언제든지 요구사항을 확인하고 수정할 필요성을

느꼈습니다.

주요업무 및 상세역할

기능

• 수정/삭제 버튼을 통하여 자신의 프로젝트이면 수정과 삭제가 가능하도록 구현상세역할 • 공유버튼을 구현하여서 클릭시 링크가 복사되도록 하였습니다.

• 프로젝트의 제목을 클릭하여 들어가면 요구사항을 작성할 수 있도록 하였습니다.

• 요구사항에는 진행상태/요구사항이름/담당자/요구사항내용등 요구사항을 적을때 필요한 내용들을 입력할 수 있습니다.

o 누구나 볼 수 있도록 공유를 하기 위해 checkbox 를 클릭시 다른 유저도 볼 수 있도록 기능 구현

사용언어및 개발환경

• TypeScript, React, nexr.js, React-router-dom. Tailwindcss, tailwind-merge, React context

• Database

o Firebase

참고자료

배포링크 : https://tmdtmddl.github.io/requirements-project/

Github : https://github.com/tmdtmddl/requirements-project

개인 프로젝트

프로젝트 목적

React, TypeScript 사용경험 및 숙련도 향상을 위해 진행

주요업무 및 상세역할

기능 (md 파일들에 상세히 작성 되어있습니다. )

• 상품 클릭 시 디테일 페이지로 이동

• 상품가격 * 상품 개수 장바구니에 담기

• 결제할 때 토스 페이먼츠로 결제 비스므리한 시스템 도입

• 결제페이지에서 수량 수정 가능

• 장바구니에서 결제할 아이템만 별도 선택 가능

• 결제한 아이템만 장바구니에서 삭제 후 나의 주문내역으로 이동

• 회원 정보 수정 가능

• 다크모드 구현

사용언어및 개발환경

• TypeScript, React, React-router-dom, Tailwindcss, Vanilla extract, React context, React-query, Zustand

• Database

o Firebase

참고자료

Github : https://github.com/tmdtmddl/dazone

개인 프로젝트

프로젝트 목적

React, TypeScript 사용경험 및 숙련도 향상을 위해 진행

소개

개발자,디자이너,기획자의 프로젝트 팀 매칭 프로젝트

주요업무 및 상세역할

기능• 홈페이지에서 개발자랑 디자이너,기획자에 따라 미리 어떤직군을 찾는지 미리

선택해서 회원가입을 할 수 있도록 구현

• 팀 목록에서 내가 찾는 직군만 표시될 수 있도록 직군선택필터를 구현

• 직접 공고를 올릴 수 있도록 기능 구현

• 종료된 공고는 다시 재공고 할 수 있도록 개발

• 팀 매칭 시작하기 버튼을 누르면 공고를 스크랩 하도록 구현

o 스크랩한 공고는 나의 매칭 진행중 팀에서 확인할 수 있도록 기능 구현

• 매칭이 완료된 팀은 나와 매칭완료로 이동

• 프로필에서 이름을 변경 가능

• 자신이 등록한 공고는 수정이 가능

• 공고를 통해 지원자들중에 내가 원하는 지원자를 선택 가능

문제점 (어려웠던 점) / 해결 방안

문제점: 웹소켓대신 실시간 채팅 구현 중 useEffect 와 Firebase 실시간 리스너 충돌

Firebase 의 onSnapshot 실시간 리스너를 사용하여 채팅 기능을 구현하던 중, useEffect 가

반복적으로 계속 감시를 하면서 호출이 되었습니다.

해결방안 및 임시 조치

• useEffect 의존성 배열을 최소화.

• 웹소켓 미도입 상태에서 Firebase 리스너만으로 기능을 최소한으로 구현.

한계 및 계획

• 현재 구현 방식은 Firebase 의 실시간 리스너에 의존하고 있어, 정밀한 타이밍 제어나

이벤트 처리 한계 존재.

• 추후 WebSocket 기반으로 전환 예정

사용언어 및 개발환경

• TypeScript, React, React-router-dom, Tailwind Css, Tailwind-merge, React context, React Query, Zustand

• Database

o Firebase

참고자료

Github : https://github.com/tmdtmddl/find-crew