끊임없이 배우고 성장하는
Front-End 개발자 최근원입니다.

개발 입문부터 한세고 대표 앱 '한움' 개발 및 운영까지
식지 않는 열정과 포기할 줄 모르는 끈기를 통하여 배우고 성장합니다.

지난 프로젝트.

학생회 한울

기능부원, 기능부장

2023.03 ~

한움 (진행 중)

한세고의 모든 정보를 알려주는 한세고 도우미 앱, 한움

2023.09.02 ~ 최근 업데이트 (2024.03.21)

사용 기술.

TypeScript, React Native, React-Query, Recoil, React-Native-Reanimated, React-Native-Webview

이런 걸 했어요.
  • 현재 한세고의 모든 학생들이 사용하는 학교 대표 앱 "한움"을 개발하였습니다.
  • 학사일정, 시간표, 급식표, 대나무숲(커뮤니티) 등의 학교 관련 기능들을 전부 개발하였습니다.
  • 대나무숲 기능까지 한움 프로젝트의 프론트 1인 개발을 담당했습니다.
  • 기기의 테마 색깔을 가져와 그에 맞는 테마 색깔을 적용하였습니다.
  • 바텀 시트 라이브러리의 버그로 인해 직접 바텀 시트를 구현하였습니다.
  • 대나무 숲의 무한 스크롤 기능을 구현하였습니다
  • 학생회 신청 백엔드의 이슈로 인해 4시간만에 Api 연결을 해야하는 상황이 있었지만 성공적으로 해결하였습니다.
  • QR 인식 기능을 추가하여 축제때 부스의 결제를 모두 QR로 진행하였습니다.
  • 한세어울리마당 부분을 하루안에 완성해야하는 상황속에서 빠르게 개발하였습니다.
  • 한세어울림마당에 실시간 투표 기능을 추가 하였고, 행사 당일 모두 정상적으로 잘 작동했습니다.

+30

2024 학생회 소개 사이트

2024년 학생회 소개와 지원을 위한 홈페이지

2024.02.22 ~ 2024.03.21

사용 기술.

TypeScript, React.js, Next.js, Zustand, Framer Motion

이런 걸 했어요.
  • 웹 앱을 구현하였습니다
  • Zustand를 사용하여 앱 인식을 구현 하였습니다
  • 앱 인식 여부에 따른 스타일링 변화를 주었습니다
  • Framer Motion을 사용하여 숫자 count 애니메이션과 fade-in 애니메이션을 구현하였습니다

+11

한움 축제 부스 대시보드

2023년 한세고 축제 부스 대시보드

2023.09.07 ~ 2023.09.21

사용 기술.

TypeScript, React.js, Emotion, Recoil, Pnpm

이런 걸 했어요.
  • 부스의 키를 입력하면 총 잔액을 보여주고, 결제 내역을 확인하는 기능을 구현했습니다.
  • 혹여나 잘못 결제가 된 경우를 대비해, 환불 기능을 구현했습니다.

2023 학생회 신입부원 모집 사이트

2023년 학생회 신입부원 모집을 위한 홈페이지

2023.03.03 ~ 2023.03.20

사용 기술.

TypeScript, React.js, Emotion, Prettier, Yarn

이런 걸 했어요.
  • 첫 협업으로 Emotion, ESLint 그리고 Prettier를 사용하는 계기가 되었습니다.
  • 선배님들의 코드 리뷰를 통해 코드를 깔끔하게 작성하는 방법을 배웠습니다.
  • 많은 리스트들을 사용하여 반복되는 코드를 줄였습니다.
  • 절대 경로를 설정하여 import를 편하게 할 수 있게 구현했습니다.

+1

보안관제 동아리

동아리 부장 및 웹보안/개발 담당

2022.03 ~

2023 보안관제 동아리 모집 사이트 (풀스택)

2023년 보안관제 동아리 신입부원 모집과 소개 홈페이지

2023.02.11 ~ 2023.03.05

사용 기술.

TypeScript, Next.js, React-Hook-Form, Prisma, MySQL

이런 걸 했어요.
  • 프론트, 백엔드, 서버 배포까지 모두 1인 개발을 담당했습니다.
  • Next.js를 사용하여 SSR을 사용했습니다.
  • Prisma를 사용하여 데이터베이스 구축과 백엔드 개발을 담당했습니다.

+5

한북

한세고의 동아리 책 관리 웹 사이트

2023.04.17 ~ 2023.06.26

사용 기술.

TypeScript, React.js, React-Lottie, Framer Motion, Vite

이런 걸 했어요.
  • 한북 프로젝트의 프론트 1인 개발을 담당했습니다.
  • React-Lottie를 사용하여 성공, 실패, 로딩 애니메이션을 구현했습니다.
  • 사용자의 위치를 가져와 학교 안에서만 반납할 수 있게 구현했습니다.
  • 처음으로 백엔드와 통신을 React-Query를 사용하여 하였습니다.

+10

기타 프로젝트

2023.07 ~

위밋 (풀스택)

맛집과 할 일 추천해주는 사이트 "위밋"

2023.12.28 ~ 2024.02.01

사용 기술.

TypeScript, React.js, Emotion, Zustand, React-Kakao-Maps-Sdk, Nest.js, Prsima, OpenAI, Naver Open API

이런 걸 했어요.
  • 프론트엔드와 백엔드를 담당하였습니다
  • Zustand를 사용하여 상태관리를 하였습니다.
  • useDebounce 커스텀 훅을 만들어 실시간 검색 변환 기능을 구현하였습니다.
  • react-kakao-maps-sdk를 사용하여 지도를 구현하였습니다.
  • 백엔드에서 온 응답을 이용하여 map으로 표시하는 기능을 구현하였습니다.
  • OpenAI의 ChatGpt3.5를 사용하여 각 지역에 대한 추천 서비스를 구현했습니다
  • Naver Open API를 사용하여 검색 기능을 구현했습니다.

+5

우리, 함께 (한세톤 수상작)

취미가 같은 사람들이 모이는 플랫폼 "우리, 함께"

2023.07.21 ~ 2023.07.21

사용 기술.

TypeScript, React.js, React-Leaflet-Location-Picker, Styled-Components, Recoil, Vite

이런 걸 했어요.
  • 제6회 한세톤에서 2등을 수상했습니다.
  • "우리, 함께" 프로젝트의 프론트 1인 개발을 담당했습니다.
  • React-Leaflet 라이브러리를 사용하여 지도 기능을 구현했습니다.
  • 사용자의 위치를 지도에 표시하는 기능을 구현했습니다.
  • PWA를 사용하여 웹을 앱처럼 사용할 수 있게 구현했습니다.

개인 프로젝트

~

@choi138/react-text

React.js 텍스트 라이브러리

2023.10.06 ~ 2023.11.02

사용 기술.

TypeScript, React.js, Emotion, Prettier, Pnpm

이런 걸 했어요.
  • Pnpm을 사용하여 라이브러리를 직접 배포하였습니다.
  • 매번 Text 컴포넌트를 만들다보니 불편함을 느껴서 만들게 되었습니다.
  • Rem을 사용하여 반응형으로 구현하였습니다.
  • Emotion을 사용하여 스타일링을 하였습니다.

FMCC

영화 기본 정보와 예고편을 볼 수 있는 웹 사이트

2022.12.14 ~ 2023.02.09

사용 기술.

TypeScript, React.js, Slick-Carousel, React-Query, TMDB API

이런 걸 했어요.
  • 처음으로 직접 사이트를 만들어보았습니다.
  • React-Query를 사용하여 TMDB API에 있는 정보를 가져왔습니다.
  • Slick-Carousel을 사용하여 이미지 슬라이더를 구현했습니다.

+1