- 사용자 중심의 UI/UX를 중시하며, 모든 사용자가 편리하게 사용할 수 있는 서비스를 만드는 것이 목표입니다.
- 동료와의 효율적인 소통이 서비스에 긍정적인 효과를 가져온다고 생각합니다.
- 다양한 사람과 피드백을 주고 받는 것을 좋아합니다.
- 새로운 것에 도전하는 것을 즐기며 이를 통해 배우고 성장하는 것을 좋아합니다.
- 맡은 일에 책임을 가지고 주도적으로 임합니다.
Work Experience.
모바일앱개발 협동조합
Web Front-end Engineer2023. 07 - 2024. 02
신우개발 장비 및 부품관리 서비스
신우개발의 장비 및 장비별 부품을 관리하는 사내 서비스 개발을 담당했습니다. 기획에도 참여하여 사용자 중심의 서비스를 만들기 위해 노력했습니다. 개발 이후 유지보수와 신규 추가 개발 등을 담당하였습니다.
React,Typescript,Vite,Emotion을 사용하여 개발 진행- 인증, 장비현황, 부품집계, 월간점검집계, 점검대장, 알림 관리, 회원 관리 등 관련 페이지 UI 개발
- 인증, 장비, 부품, 점검집계, 알림, 사용자 관련 API 연동 개발
- 프론트엔드 서버 배포 및 CI/CD 개발
AWS EC2,AWS S3,AWS CodeDeploy,Github Action을 통한 배포 자동화로 업무 능률 향상
zustand를 통한 전역 상태 관리로 데이터 반영 시간 단축- 데이터 수정, 추가, 삭제 시 변경 사항을 실시간으로 반영하여 사용자 경험 개선
- UI 일관성을 위한
GlobalTheme을 사용한 디자인 시스템 관리 react-hook-form을 도입하여 폼 전송 로직 최적화- 정보 수정 및 삭제 시, 변경사항이 있는 객체만 서버에 전달하여 사용성 개선
- 라이브러리 내 유효성 검사 기능을 활용한 에러 처리로 사용자 경험 개선
- 서비스 내 날짜, 시간 데이터 핸들링
- 특정한 format으로 날짜, 시간 데이터를 변경해 주는 로직을 함수로 분리 후 관리하여 코드 가독성 향상
ApexChart및 표를 이용한 데이터 시각화- 백엔드에서 받은 데이터를 프론트엔드 요구사항에 맞춰 포맷팅 진행
- 데이터 포맷팅 코드를 util 폴더에 특정 함수로 분리하여 코드 가독성 향상
- select 태그의 브라우저 간 디자인 일관성 부여를 위한
react-select도입 react-to-print를 사용한 페이지 내 표, 그래프 데이터 출력 기능 구현react-csv를 사용한 페이지 내 표 데이터 엑셀 파일 다운로드 기능 구현- Auth 로직 개발
- 회원가입, 로그인, 로그아웃, 유저 정보 관리 등의 인증/인가 기능 개발
Axios interceptor를 사용한 에러 처리를 통해 유지 보수성을 높임- 비로그인 유저와 권한이 다른 유저의 접근 제한을 위한 routing 로직 개발
- 로컬 환경에
https적용mkcert를 활용하여 CA 인증서 발급 및 인증서 적용
- 서브 도메인을 등록하여 테스팅 페이지 구성
- 개발 완료 후 서브 도메인을 삭제하여 서버 비용 절감
Media Query를 통한 반응형 웹 페이지 구현- 건설 현장 작업자의 편의를 위한 모바일 웹 페이지를 구현하여 사용자 경험을 개선
- 유저 권한에 따른 접속 허용 범위 설정
- 프로젝트 기획 및 문서 관리
JIRA를 통해 일정관리 진행 및 프로젝트 진행도 확인Confluence를 통한 사용자 요구사항 관리, 회의록 작성 및 관리Notion을 통한 API 문서 관리Slack을 통한 팀 소통 관리
- 페이지 로딩 속도, 불편한 화면구성에 대한 사용자 피드백을 바탕으로 UI/UX 개선 작업
Team Project.
응진씽크빅 프로젝트 캠프: Next.js 2기에서 진행한 보안시장 이슈 검사 웹 서비스 입니다.
Next.jsTypeScriptTailwindcsszustandllama3geminiFirebaseVercel
- 취약점 DB 페이지 디자인 퍼블리싱 및
Media Query를 이용한 반응형 웹 개발 Nextauth OAuth를 활용한 Github 소셜 로그인 기능 개발Firebase및 웹 스토리지를 활용한 사용자 정보 저장 및 삭제- 사용자 정보 저장 및 삭제 진행
- 검사 완료된 파일 정보 저장 및 수정, 삭제
- 서버 컴포넌트 및 클라이언트 컴포넌트에서의
session을 활용한 사용자 정보 핸들링 Github API을 사용한 현재 로그인 사용자의 repository 목록 구현 테스팅LLMAPI 테스팅 및 연결Tailwindcss를 사용하여 스타일링CodeMirror를 사용한 코드 에디터 구현zustand를 사용한 전역 상태 관리를 통해 컴포넌트 간 상태 공유sonner를 사용한 toastify UI 알림 기능 구현Node.js의Web Worker를 활용한 다수의 비동기 데이터 처리 작업 최적화- 검사 로직에
Web Worker도입 후 성능 60% 이상 개선 및 검사 처리 속도 2.5배 이상 단축 - 메인 스레드, 워커 스레드 간 메시지를 활용한 진행도 표시 모달을 구현하여 시각적 사용자 경험 개선
- 진행도 표시 모달 종료 후 재진입 시 검사 상태를 유지하여 시각적 사용자 경험 개선
- 검사 로직에
llama3/gemini서버 연결 및 캐시 데이터 핸들링llama3/gemini서버 응답의 불규칙한 구조를 정규표현식을 활용하여 고정된 형식으로 포맷팅- 개발 과정에서 발생한 오류들을 체계적으로 파악하고 수정
- 서비스의 안정성과 성능을 향상시켜 신뢰성 있는 소프트웨어 제공에 기여
엘리스 SW 트랙 3기에서 진행한 여행 동행 매칭 서비스 프로젝트입니다.
ReactTypeScriptStyled-ComponentsSassRedux
Figma을 사용하여 사용자 관련 페이지 디자인 및 기획Typescript를 사용하여 타입 안정성을 높임GlobalStyle적용,Theme에 색상과 폰트 크기를 정해 코드에 적용axios config를 수정하여 인증정보를 담은authAxios를 사용Date객체를 통한 리뷰 페이지 UI 개선- 여행 마감 7일 후 리뷰 작성이 가능한 form을 띄워주도록 설정
Cloudtype.io를 통한 배포
학습+실습을 위해 React 스터디에서 진행한 넷플릭스 UI 클론 프로젝트입니다.
ReactEmotionReact-iconVercelJira
JIRA를 통한 프로젝트 일정 관리Vercel을 통한 손쉬운 배포- grid, flex를 함께 사용한 레이아웃 구현
Emotion의 css prop을 사용하여 간편한 스타일링React-icon을 사용하여 svg icon을 간편하게 삽입 및 디자인 균일화
Personal Project.
뉴스를 간식처럼 간단하게 즐길 수 있도록 만들어주는 웹 서비스 입니다.
Next.jsTypeScriptTailwindcsszustandreact-querycheerioVercel
Figma를 사용하여 와이어 프레임 제작 및 페이지 디자인cheerio.js를 사용하여 네이버 뉴스 크롤링- 뉴스 파트별 API 제작
- 언론사별 랭킹 API 제작
next-themes를 사용하여 다크모드 적용Tailwindcss를 사용하여 스타일링- 모바일 규격에 따라 스타일링 수정
zustand를 사용하여 geolocation 데이터 및 날씨 데이터 전역 관리- tanstack
react-query를 통한 서버 데이터 관리 openWeatherMap API를 사용하여 날씨 section 제작- 뉴스 카드 및 랭킹 뉴스 리스트를 컴포넌트로 분리하여 재사용 가능하도록 함.
여기저기 흩어져 있는 반려식물들의 정보를 알기 쉽게 보여주는 웹 서비스 입니다.
Next.jsTypeScriptEmotiond3.jsgit lfsVercel
Figma를 사용하여 와이어 프레임 제작 및 페이지 디자인Theme을 적용하여 손쉽게 색상이나 폰트 크기를 변경할 수 있게 구현GlobalStyle을 통한 외부 폰트 파일 적용json파일을 통한 빠르고 간단한 데이터 관리 가능- Label을 컴포넌트로 분리하여 재사용 가능하도록 함
d3.js를 통한 자생지 World Map, Map 내 Zoom 기능 구현git lfs를 통한 용량이 큰 이미지 파일 관리Vercel을 통한 빠른 배포
