저는 말이죠.

사용자에게 원하는 서비스를 제공하는 것이 목표인 개발자입니다.

사용자에게 맞춘 서비스를 위해 어떤 기술이든 받아들일 준비가 되어 있습니다. 따라서 저는 사용자와 구성원들에게 가치 있는 서비스를 제공하고 사용자 경험을 개선하는 것이 목표입니다.

성장을 위해 어떤 도전이든 주저 없이 경험하고 있습니다.

기술을 배우고 적용하는 것 뿐만 아니라 어려움을 극복하며 다양한 경험을 쌓고 있습니다. 웹 프론트엔드의 기본적인 지식과 RESTful API에 대한 깊은 이해를 바탕으로 React.js나 Next.js등의 프레임워크를 활용하며 다양한 프로덕트를 만들어본 경험이 있습니다.

저는 팀원들과의 소통을 중시합니다.

팀원들의 의견을 존중하고 통합하여 최상의 결과물을 만들기 위해 노력합니다. 저는 Github을 통한 코드리뷰와, 비동기 협업을 통해 팀 내외에서의 의사소통과 문제 해결에 기여하는 것을 중요하게 생각합니다.

팀 프로젝트

프로젝트 Insam(23. 9. ~ 24. 5.)

• 개요

  스마트 화분 프로젝트를 진행하여 웹 콘솔로 화분 환경을 제어할 수 있도록 했습니다.

  프로젝트 웹사이트

  GitHub 리포지토리

• 문제 상황

  스마트 팜이 일반 소비자에게 서비스되는 경우, 높은 가격에도 불구하고 일반 화분보다 성능이 떨어지는 경우가 많았습니다.

• 목표

  • 저렴하면서도 스마트 팜과 비슷한 성능을 제공
  • 사용자가 편리한 인터페이스 제공
  • 타임랩스 기능 지원: 특정 시간대에 화분 사진을 받아와 한 번에 보여줌
  • 화분과 지속적으로 통신하여 상태 값을 가져오고 클라이언트에서 화분 조작 가능

• 경험

  • NextJS의 미들웨어를 사용하여 로그인하지 않은 상태에서는 콘솔에 접근하지 못하도록 랜딩 페이지로 리다이렉트
  • Zustand를 활용하여 access token 관리, 로컬 스토리지를 사용을 하지 않도록 함
  • WebSocket을 통해 화분과 통신하여 온습도, 물의 양 등의 상태 값을 얻고 화분을 조작할 수 있게 함
  • TypeScript로 state 설정 시 참조 가능한 값 지정, 개발 효율성 향상

• 문제 해결

  1. WebSocket 연결 시 헤더를 사용할 수 없어 사용자 검증 문제 발생:
     • 쿼리 스트링으로 값을 전달하는 대신, 먼저 WebSocket에 접속 후 토큰을 메시지로 보내 검증하도록 설계
     • 잘못된 토큰을 보낼 경우 연결이 끊기도록 구현
  2. 로그인되지 않은 상태에서 콘솔 접속 시 깜빡임 현상:
     • 로컬 스토리지를 활용한 방식에서 쿠키를 사용하는 방식으로 전환
     • NextJS의 미들웨어를 통해 쿠키를 가져와 상태를 판단하고 랜딩 페이지로 리다이렉트

• 사용 기술

  • NextJS, zustand, WebSocket, TypeScript

레전드 캐치마인드

• 개요

  친구들과 함께 웹에서 플레이할 수 있는 캐치 마인드 게임을 구현했습니다.

• 배경

  게임 런처나 모바일 앱이 아닌 웹에서 동작하는 캐치 마인드를 만들고자 했습니다.

• 목표

  캔버스와 채팅 기능을 모두 구현하여 사용하는 데 불편함이 없도록 하는 것

• 역할

  • StompJS와 SockJS를 사용해 백엔드 소켓 서버와 연결하여 채팅 기능 구현
  • Canvas API를 이용해 다양한 색깔과 붓으로 그림을 그릴 수 있게 하고, 그림을 base64 이미지로 변환하여 WebSocket으로 전송
  • Recoil을 사용해 access token 관리