Frontend Developer

Channel.

Github. github.com/Ju-MINJAE Blog. velog.io/@min_ja

Contact.

Email. [email protected] Phone. 010 7591 1040

ABOUT ME.

빠르게 변화하는 기술 트렌드에 관심이 많으며, 지속적으로 새로운 기술을 학습하고 프로젝트에 적용하는 것을 즐깁니다. 최신 도구와 프레임워크를 활용하여 실용적이고 혁신적인 솔루션을 개발하는 데 열정이 있습니다.

문제를 해결할 때 항상 깊이 있는 분석과 창의적인 접근 방식을 시도하며, 복잡한 과제도 꾸준히 도전하여 결과를 만들어냅니다. 특히, 사용자 경험과 성능 최적화를 중요하게 생각하며, 프로젝트의 완성도를 높이는 데 주력합니다.

저에게 포기는 없습니다. 안되면 될 때까지 합니다. 끈기와 열정으로 목표를 달성하며, 변화와 도전을 기회로 삼습니다.

Project #1 채우다 Chaeuda

최근 빈집을 구매해 리모델링하여 거주하는 사람들이 점차 증가하고 있습니다. 이러한 흐름에 맞춰, 활용되지 못하고 방치된 빈집 빈집을 소개하는 부동산 사이트입니다.

2024.12 ~ 2025.01 (진행중)

FE 3명, BE 3명

https://github.com/chaeuda-TEAM/oz-main-fe-06-team2

나의 역할

• Naver Map API를 Next.js에 script 형태로 불러와 지도 컴포넌트 구성
• 자체 회원 로그인시 사용자 정보를 상태 관리하고 토큰은 쿠키에 저장
• Middleware로 로그인 상태에 따라 페이지 접근을 제어
• 웹소켓으로 구매자와 판매자 간의 실시간 채팅

사용 기술

• Next.js14 - 서버 컴포넌트를 사용하기 위해 App Router를 선택했습니다.
• TypeScript - 타입 안정성을 높여 코드의 오류를 사전에 방지하기 위해 사용했습니다.
• TailwindCSS - 빠르고 효율적인 스타일링 작업을 위해 선택했습니다.
• Zustand - 상태 관리를 단순화하고 가벼운 성능으로 필요한 상태만 효율적으로 관리하기 위해 사용했습니다.

로그인 화면

검색 화면

채팅 화면

1. 웹소켓으로 실시간 채팅 구현

WebSocket을 통해 양방향 통신을 구현하여 실시간 메시지 전송 및 수신을 처리했습니다.

• 실시간 메시지 송수신: 서버와의 WebSocket 연결을 통해 양방향 메시지 전달을 지원합니다.
• 필터링: 채팅 목록에서 구매/판매와 같은 필터를 통해 채팅 분류 제공합니다.
• 자동 재연결: 네트워크 장애 시 자동으로 WebSocket 연결을 복구하는 로직 구현합니다.

2. Middleware로 인증 라우팅 제어: 로그인 상태에 따른 페이지 접근 제한 구현