미리보기

프로젝트 설명 : 문서 분류, 개인정보 가명화, 문서 텍스트 추출, 문서 내 정보 요약 서비스를 제공, 보험금 청구서류 정보 입력과 같은 수작업 입력 업무의 자동화에 활용합니다.
기술 스택 : Spring boot, Jquery, javascript, ckEditor4, maria db

• 퀀텀에이아이의 문서 관리 시스템에서 문서 작성 javascript와 jquery를 사용한 page의 에디터와 UI의 상호작용 이벤트를 개발했습니다.
• Spring boot, JSP, mariaDB를 사용하여 사용자 페이지의 CRUD 기능을 개발했습니다.

프로젝트 설명

서울을 무대로 한 문화생활 정보 플랫폼입니다. 공공 API를 활용해 서울에서 열리는 다양한 문화행사 정보를 한눈에 확인할 수 있습니다.

사이트 링크 : http://seoulful.site/

깃허브 링크 : https://github.com/dlsxody1/seoulful-client

스킬 및 사용툴 : next.js 14v, tailwindcss , typescript, jotai , naver map, react-hook-form

🛴 이런 기능이 있어요

• 내 주변에 진행하고 있는 행사가 있는지 naver map을 통해 볼 수 있습니다!

• 카테고리 별로 정리된 행사들을 확인 할 수 있습니다!

• 가고싶은 행사를 북마크 해놓고 확인 할 수 있습니다!

👨‍💻 투입인원 : 3명 (프론트엔드 2명, 백엔드 1명)

📒 주요업무

• 중복 마커 제거를 통한 렌더링 성능 최적화 : 지도에 표시되는 useRef를 사용해 기존 마커들의 위치와 새로 추가되는 마커들의 위치를 비교하여 중복되는 마커는 제거하고, 고유한 위치에만 마커를 추가하는 로직을 구현했습니다.

• FSD(Feature Sliced Design)을 사용해 UI/UX의 일관성 유지 및 코드 재사용성 향상과 모듈화된 구조를 통해 각 기능의 독립성을 보장했습니다.

• React-Hook-Form 을 사용해, 효율적인 폼관리 및 유효성검사를 구현하였습니다.

• Intersection Observer API를 활용하여 무한 스크롤 기능을 구현 : 뷰포트 내의 마지막 콘텐츠 요소를 효율적으로 감지하고, 사용자가 해당 요소에 도달할 때마다 추가 데이터를 비동기적으로 로드했습니다

👀 추가 구현 사항

• 기본 기능이 전부 완성되면 리팩토링 하기 위해서 동료의 피드백을 받아 문서를 작성하고 있습니다.

https://github.com/project-may/seoulful-client/wiki/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81

프로젝트 설명

늦게까지 놀고 싶은데 돈은 많이 없는 청춘들 혹은 야근하고 어떻게든 택시비를 아끼고자 하는 직장인 등,

막차시간을 어떻게든 지켜야 하는 사람들에게 정확한 막차 알림을 직관적이고, 귀엽게 알려주는 서비스입니다!

사이트 링크 : https://makchata.store/ <- 현재 사이트 중단했습니다.

깃허브 링크 : https://github.com/dlsxody1/makchata

스킬 및 사용툴 : next.js 13v, styled-components , typescript, recoil, react-query

🛴 이런 기능이 있어요!

• 어떤 교통수단을 이용해야 하는지?

• 얼마를 아꼈는지?

• 출발지와 목적지를 설정해서 언제 자리에서 엉덩이를 떼야 도착할 수 있는지?

• 심지어 몇 분 전에 도착 하는지 진동으로 알려줍니다!

👨‍💻 투입인원 : 6명 (프론트엔드 5명, 디자이너 1명)

✨ 작업방식 :

• https://github.com/makchamakers/makchata/wiki/개발-컨벤션

• https://github.com/makchamakers/makchata/issues

📒 주요업무

• 디바운스 이벤트를 활용한 사용자 경험 최적화: 출발지와 도착지 입력 필드에 디바운스 이벤트를 적용하여 서버 요청의 빈도를 줄여 사용자 경험을 더욱 부드럽고 효율적으로 만들었습니다.

• Recoil을 활용한 효과적인 상태 관리: Recoil을 활용하여 출발지와 도착지가 확정될 때 결과를 효과적으로 저장하고 관리했습니다. 이로써 웹의 성능을 향상시키고 확장 가능한 상태 관리를 제공했습니다.

• Recoil-Persist를 활용한 데이터 영속 저장: Recoil-Persist를 활용하여 검색 결과를 로컬 브라우저에 지속적으로 저장하여 데이터 검색의 일관성을 유지하고 사용자에게 이전 검색 결과를 즉시 제공하도록 했습니다.

• React-Query를 이용한 상태 변경에 대응: React-Query를 통합하여 검색 결과를 효과적으로 가져오고 표시했습니다. 이를 통해 응용 프로그램의 반응성을 향상시키고 사용자가 검색 기능과 상호 작용하는 동안 실시간 업데이트를 가능하게 했습니다.

• 로딩 인디케이터를 통한 사용자 피드백 강화: 로딩 인디케이터를 구현하여 백그라운드 프로세스의 진행 상황을 사용자에게 알리고 데이터 검색 중에 사용자에게 검색 상태를 알려줌으로써 더 나은 사용자 경험을 제공했습니다.

Makchata-server

링크 : https://github.com/dlsxody1/makchata-server-fork

기술 및 스택 : Nest.js , typescript , swagger, ec2 , nginx

📒 주요업무

• 출발지, 목적지 검색 결과를 요청 받았을 때 KAKAO API를 통한 주소 응답

• Odsay API (대중교통 길찾기) 를 통해 받은 데이터를 정제해서 전달

• Swagger 를 사용해서 api 명세서 작성

• Cors 에러 해결