미리보기

프로젝트 요약

• 서비스: 실시간 코인 가격 및 정보 조회 플랫폼

• 담당: FE, 기획, 디자인

• 레포지토리: https://github.com/nile27/CoinBrief

• 사용 기술 : NextJS TypeScript Zustand Tailwind CSS Firebase Socket.io ExpressJS Nodemailer ApexCharts Figma

실시간 코인 시세 조회 및 환율 변환 기능을 제공하는 웹 애플리케이션으로, 웹소켓과 Upbit API를 활용하여 실시간 데이터를 반영하고 ApexChart를 통해 시각적으로 분석할 수 있도록 구현하였습니다.

구현 내용

회원 가입/ 로그인

• 회원가입 과정에서 이메일로 OTP를 전송하고, 입력값 검증을 통해 본인 인증 기능을 구현

• 비로그인 회원의 서비스 이용 방지
  => 로그인 시 토큰을 발급하고, 토큰이 없는 경우 서비스 접근을 제한하여 비로그인 사용자의 이용을 방지

• 회원가입 시 잘못된 입력값 방지
  => useForm을 활용해 유효성 검사 및 에러 핸들링을 구현하여 잘못된 입력을 사전 차단

실시간 코인 가격

• Socket.io를 이용하여 업비트 웹소켓을 연동하여, 사용자가 지정한 코인의 실시간 가격을 확인할 수 있는 기능을 구현

• Vercel 배포 시, 서버리스 함수의 한계로 인해 WebSocket 연결 유지 불가

  
  => ExpressJS를 사용해 WebSocket 서버를 별도로 구현하고, 독립적으로 배포하여 실시간 통신 문제를 해결

코인 리스트 및 상세 정보

• 업비트 API를 활용해 코인 정보를 가져오고, 가격 변화율을 차트로 시각화하여 제공

• 업비트 코인 리스트 API를 이용해 필터링할 경우, 자동완성 드롭다운 메뉴의 응답 속도가 느림
  => 코인 이름과 심볼을 DB에 미리 저장하고 매핑하여 검색 속도 개선

  
  

프로젝트 요약

• 서비스: AI기반 주식분석플랫폼

• 담당: 로그인/회원가입, 뉴스 기사 번역, 본인 인증

• 레포지토리: https://github.com/nile27/Spacspace_AightNow

• 사용 기술 : NextJS TypeScript Zustand Tailwind CSS Firebase Tavily DeepL

* Tavily AI와 배포 기간이 만료되어 현재 배포 페이지를 운영중이지 않습니다.

"스나이퍼 팩토리 - 프로젝트 캠프:Next.js" 라는 Next.js 교육 프로그램을 통해 제작하였습니다. "스팩 스페이스" 라는 기업을 통해 "AI기반 주식분석플랫폼" 이라는 과제를 받고 6개의 기업 주식을, AI를 통해 분석하고 보여주는, 기업 분석 리포트 사이트를 제작하였습니다.

구현 내용

회원 가입/ 로그인

• 회원가입 시, 이메일로 본인 인증 링크(리다이렉트 URL)를 발송하여 인증 절차를 구현

• Firebase는 이메일 인증 시 하나의 리다이렉트 페이지만 설정 가능하여, 회원가입과 비밀번호 찾기 등 각각의 본인 인증에 대응하기 어려웠음
  => param 값을 기반으로 목적에 따라 분기되는 공통 redirect 페이지를 제작하여, 각각의 인증 서비스에 대응

뉴스 기사 번역

• 사용자가 원하는 언어로 기사 번역 기능 구현

• 다국어 지원을 위해 HTML 내 텍스트를 정확히 분리하고 번역 처리하는 로직 필요
  =>JSdom으로 태그 내 텍스트만 추출하여 번역 후, 번역된 문자를 적용한 HTML을 반환하는 기능 구현

자동 로그인

• Firebase setPersistence메소드를 이용한 자동 로그인 구현

프로젝트 요약

• 서비스: 시간·월별로 관리하는 Todo 리스트

• 담당: FE, 기획, 디자인

• 레포지토리: https://github.com/nile27/My-Calender

• 사용 기술 : ReactJS TypeScript Redux-Toolkit styled-components MongoDB ExpressJS Figma

일정과 태그를 생성·관리하고, 검색 기능을 통해 원하는 일정을 쉽게 찾을 수 있도록 했으며, 시간/월 단위로 일정을 시각화하여 직관적인 관리가 가능하도록 구현했습니다.

구현 내용

일정 및 태그 관리

• React, Express, MongoDB를 이용한 일정 CRUD

• Redux-Toolkit을 이용하여 태그 별로 일정 필터링 기능 추가
  => 원하는 태그들을 선택하여 태그에 속한 일정만 확인 가능

공휴일 처리

• 대체 공휴일 제도로 인해 단순 공휴일 날짜 지정 방식으로는 공휴일 처리가 정확하지 않음
  => 공공데이터포털의 공휴일 OPEN API를 이용하여 대체공휴일 및 공휴일 지정

일정 및 태그 검색 기능

• 한 태그의 모든 일정이 삭제되었을 때, 태그가 아직 남는 버그 현상
  => 태그 자체에 일정 count 객체를 추가하여 count가 0이 되면 자동 태그 삭제