미리보기

[퇴사 사유]
회사 폐업으로 인한 사업 철수

[서비스 개요]
매일 시간 내 글 읽기, 단어퀴즈, 중심 문장 찾기, 문제 풀기 등의 다양한 형태의 학습을 지원하여 중고등학생들의 문해력 향상을 지원하는 웹 기반 학습 서비스입니다.

[기술스택]
Next.js(13↑ app router), typescript, tailwind, zod, zodios, valtio, monorepo

[맡은 업무]

• zod 를 사용하여 스키마 선언과 유효성 검사를 처리하여 프로젝트의 안정성과 효율성을 높였습니다.
• valtio 상태 관리 라이브러리를 도입하여 복잡한 상태 관리를 효율적으로 처리하였고, zodios 라이브러리를 통해 API 요청과 데이터 처리를 안정적이고 일관된 방식으로 구현하였습니다.
• 프로젝트 팀 내에서 프론트엔드 개발자들과 함께 Git 컨벤션을 정하고 사용하여 협업 효율성을 높였습니다. 주기적인 코드 리뷰를 통해 코드 품질 향상과 지식 공유를 촉진하였습니다. Daily Stand-up 미팅과 스크럼 방식을 활용하여 개발 목표 등을 공유하였습니다. 이를 통해 팀원 간의 소통과 협업을 원활하게 유지하였습니다.
• 팀원들과 함께 프로젝트의 전체적인 아키텍처와 기술 선택, 라이브러리 조합 등을 고민하고 구현하였습니다.

[서비스 개요]
LMS 학습관리 프로그램을 개발하는 프로젝트로, 학습자들의 학습 환경을 관리하고, 학습지를 제작하는 서비스입니다.

[기술스택]
React, Javascript, Nivo(chart), styled-components,

[맡은 업무]

• 대시보드, 알림, 수업 관리, 학급 관리, 학생 관리, 과제 등록의 하위기능을 포함한 LCMS 웹 페이지 퍼블리싱 및 제작하였습니다.
• nivo 차트 라이브러리를 활용하여 과제 제출율 및 학생 정보를 시각적으로 표현하고 분석 및 의사 결정에 필요한 정보를 시각적으로 전달하였습니다.
• html2canvas와 jsPdf 라이브러리를 활용하여 선생님 제작 학습지를 PDF 형식으로 변환하는 기능을 제작하여 사용자들의 편의성을 향상시켰습니다.

[서비스 설명]
IT 프로젝트 작업자 실시간 자동 매칭 온디맨드 클라우드 플랫폼으로 작업자의 대시보드, 의뢰자의 대시보드 제작에 참여하였습니다.

[기술스택]
React, JavaScript, Redux, Styled-components, rechart

[맡은 업무]

• rechart 라이브러리를 활용하여 작업자의 포인트 사용량을 시각화하였으며, 시각적인 데이터 표현으로 정보 전달의 효과를 극대화하였습니다.
• 프론트 코드에 가능한 범위 내에서 유효성 검사를 처리해주고, 데이터 유무에 따른 에러 분기 로직을 추가하는 등 방어적 개발 방식을 도입하여 기존 API 호출 횟수 및 에러 발생 횟수를 50% 이상 줄임으로써, 안정성과 성능을 높였습니다.

[서비스 설명]
에그픽은 1000원에 즐기는 온라인 가챠 서비스로 어드민 페이지 유지보수, 신규 기능 개발을 담당하였습니다.

[기술스택]
React, Javascript, CoreUI, styled-components

[맡은 업무]

• 기존의 클래스형 컴포넌트와 콜백 함수를 사용한 비동기 처리 방식을 함수형 컴포넌트와 async-await 비동기 처리로 리팩토링하여 코드의 가독성 및 성능을 향상시켰습니다. 리팩토링을 수행하며 코드의 구조와 성능을 향상시키는 능력을 키웠습니다.
• 유저가 업로드한 엑셀 데이터를 추출하여 폼에 입력될 수 있도록 업무를 자동화하여 하여, 기존의 발생하던 반복적인 입력 업무 시간을 80% 이상 단축시켰습니다.
• 7일 단위의 개발 목표를 설정하고 꾸준한 스크럼 방식을 도입하여, 개인 개발 과업보다 20% 이상 더 많은 작업을 동일 기간 내에 완료하였습니다.
• 테스트 시나리오를 작성하고 테스트를 수행하여 고객사의 오류 발생을 최소화하였습니다.

[프로젝트 설명]
카드를 스와이프하는 직관적인 인터랙션 방식을 통해 다양한 직무의 it 인력을 추천하고 매칭해주는 프로젝트입니다.

[사용 기술]
Next.js(app router), typescript, tailwind, zod, zustand, framer-motion, SSE (Server-Sent Events)

[맡은 업무]

• 사용자 경험 향상을 위해 SSE (Server-Sent Events) 기술을 활용하여 실시간 매칭 알림과 메시지 알림 시스템을 구축하였습니다. 이를 통해 웹 페이지를 새로 고치거나 추가적인 조작 없이도, 실시간으로 들어오는 매칭 제안 및 메시지 알림 등을 사용자들이 확인할 수 있게 하였습니다.
• 외부 리소스의 이미지 최적화를 위해 Next.js 내부의 image 태그를 활용하여 이미지를 적절하게 최적화하고, 웹 접근성을 고려하여 이미지에 적절한 alt 텍스트와 aria-label을 추가하는 등 성능 및 웹 접근성 개선사항을 통해 모든 페이지 내의 라이트하우스 성능 점수를 90점 후반대로 끌어올렸습니다.

[프로젝트 설명]
북모지는 책을 읽고 느낀 점을 감정으로 표현하여 저장할 수 있는 독서 기록 웹 사이트입니다. 책을 검색하여 리뷰를 작성할 수 있고 작성한 리뷰에 대한 정보를 시각화한 차트를 제공합니다 . 또한 다른 사람들의 리뷰를 볼 수 있는 기능들을 가지고 있습니다.

[사용 기술]
React, javascript->typescript, styled-components, react-query, chart.js

[맡은 업무]

• Styled-Components를 활용하여 다양한 기기에서 최적화된 레이아웃을 제공하며, 모바일 환경에 특화된 디자인을 구현하였습니다.
• Javascript로 제작하였던 프로젝트를 Typescript로 리팩토링 하였고 추후 데이터 효율성을 위해 React Query를 도입하였습니다. JWT 토큰 관련 이슈로 로컬 스토리지 저장 및 함수 실행의 순서 충돌이 발생한 문제를 axios 인터셉터를 활용하여 해결하였습니다.
• Chart.js 라이브러리를 활용하여 원형 차트와 막대 차트를 생성하여 사용자의 독서 기록 데이터를 시각적으로 표현하는 시각화 기능을 구현하였습니다.
• 웹사이트 배포는 Netlify를 활용하여 진행하였으며, 사용자들의 피드백을 수렴하여 지속적으로 웹사이트를 개선하였습니다.