<aside> 💻
백엔드로 개발을 시작해 프론트엔드 개발자로 전향하며 두 분야에 대해서 이해하고 있습니다. 협업과 통합적인 사고를 바탕으로 가독성 높고 유지보수와 쉬운 코드를 작성하기 위해 노력하며, 사용자와 개발자 경험을 모두 고려하여, 팀과 프로젝트의 성장을 목표로 합니다.
</aside>
☎️ 010-8237-2487 ✉️ [email protected] 🧑🏻💻 부산 SW마이스터고등학교 - 소프트웨어 개발과 재학 중
깃허브 - https://github.com/junghongseop
블로그 - https://blog-hong.vercel.app
2023 1학년 4반 부반장
2023 DevCoop 1학년 Project Manager
2024 밤돌이로 Project Manager
Backend 2명 Design 2명 Frontend 3명
부산SW마이스터 고등학교 입학 전형 시스템 2024.04.21 ~ 2025.02.14
Github
https://github.com/Bamdoliro/marururu
Link
Stack
Next.js styled-components recoil axios react-query
TypeScript Storybook
회고록
<aside>
마루는 부산소프트웨어마이스터고등학교의 새로운 입학전형 플랫폼입니다.
이 플랫폼은 입학 과정에서 지원하는 학생과 담당 선생님 모두에게 더욱 편리한 환경을 제공하는 것을 목표로 개발되었습니다.
학생들은 입학 설명회 일정 조회 및 신청, 원서 작성 및 관리, 입학 등록 등의 기능을 이용할 수 있으며, 선생님들은 원서 관리, 단체 메시지 발송, 입학 지원자 분석 데이터 제공 등 입학 업무에 필요한 다양한 기능을 활용할 수 있습니다.
2024년부터 사용하여 앞으로 계속해서 사용할 예정입니다.
</aside>
클라이언트 기능 구현 및 퍼블리싱 - 70%
<aside>
입학전형 설명회
선생님들이 등록한 입학 전형 설명회를 조회하고, 클릭하면 설명회 신청 폼으로 이동합니다.
getFairList를 통해 서버와 API를 연결하며, useFairListQuery 훅은 React Query를 사용해 입학 전형 설명회 데이터를 효율적으로 페칭하고 상태를 관리합니다. React Query는 데이터 캐싱, 동기화, 로딩 및 에러 상태 관리 기능을 자동으로 제공하여 네트워크 요청을 최적화하고 사용자 경험을 향상시킵니다. 또한 queryKey를 활용해 데이터를 구분하고 쿼리 상태를 간단하게 처리할 수 있습니다.
입학 설명회의 상태 및 종류에 따라 조회할 수 있도록 구현했으며, FairList 컴포넌트에서는 grid-template-columns 속성을 사용해 아이템을 두 개의 열로 배치했습니다.
원서 관리
현재 원서 상태를 확인할 수 있으며, 접수증, 수험표, 원서를 발급하고 학교 연락처도 확인할 수 있습니다.
getFormStatus를 통해 서버에서 사용자의 원서 상태를 받아옵니다. 또한, GetFormStatusRes 인터페이스를 사용해 서버에서 받아오는 데이터의 타입을 지정했습니다.
getExportForm, getExportRecipt, getAdmissionTicket을 통해 서버에서 파일을 받아오며, 사용자가 원하는 경우 다운로드할 수 있도록 구현했습니다. 단, 일정이나 원서 상태에 따라 다운로드가 제한될 수 있도록 방지 로직을 추가했습니다.
개인정보 약관
회원가입 시 사용자는 개인정보 약관에 필수적으로 동의해야 가입할 수 있습니다.
이를 위해 선생님들에게 개인정보 약관 내용을 확인하고, 그 의견을 반영하여 디자인을 설계한 후 퍼블리싱을 진행했습니다.
원서 작성
지원자는 지원자 정보, 보호자 정보, 출신 학교 및 학력, 성적 입력, 자기소개서 등의 단계를 거쳐 원서를 작성합니다.
form 폴더의 page.tsx에서는 @toss/react 라이브러리의 SwitchCase를 사용해 단계별 화면을 렌더링하며, useFormStep.ts에서 Recoil을 활용해 상태를 관리합니다.
공통 UI를 줄이기 위해 FormLayout을 구성했고, FormStatusManager와 SaveFormManager를 통해 상태별 이동 가능한 페이지를 구분하고 원서를 저장하도록 했습니다.
처음에는 5분마다 자동 저장되도록 했으나, 아무것도 작성하지 않은 상태에서 저장되면 Redis에서 원서를 불러오지 못하는 문제가 발생해, 단계를 넘어갈 때만 저장되도록 수정했습니다.
교무부 시연 중, 빈 항목이 있을 경우 작성 후 넘어가도록 요청받아, 각 페이지에서 미입력 시 경고 메시지를 띄우도록 구현했습니다.
최종 제출 후에는 1차 합격일과 안내 메시지를 표시하고, 접수증을 발급할 수 있는 버튼을 추가했습니다.
입학 등록
최종 합격한 지원자는 입학 등록을 해야 하며, 직접 방문이 아닌 마루를 통해 온라인으로 제출합니다.
공지사항에 게시된 입학 등록 양식을 다운로드해 작성한 후, 스캔하여 PDF로 변환해 업로드하면 됩니다.
‘서류 제출’ 버튼을 클릭하면 patchFormEnter를 통해 서버와 API를 연결하고, 지원자의 원서 상태를 ENTERED로 변경합니다. 파일 업로드는 원서 상태가 PASSED인 경우에만 가능하도록 했으며, 파일을 업로드하지 않았거나 업로드 중일 경우 버튼이 비활성화되도록 처리했습니다.
</aside>
어드민 기능 구현 및 퍼블리싱 - 40%
<aside>
입학전형 설명회
입학전형 설명회 일정에 맞게 담당 선생님께서 일정을 생성및 조회가 가능합니다.
fair/post에서 폼 링크, 타입, 장소, 날짜, 신청 시작과 마감일을 작성해주면 postFair를 통해 서버와 API를 연결하여 일정을 생성합니다.
fair에서는 생성된 일정을 교사와 학생으로 구분하며 진행중과 마감된 일정으로 보여주도록 했습니다.
분석 페이지
지원자 수(경쟁률), 성적 분포, 지원 전형 비율, 지원자 성비, 출신 학교 현황을 제공하여 담당 선생님들이 서류 작업을 보다 편리하게 할 수 있습니다.
추가 요청에 따라, 지원자 수(경쟁률)와 지원 전형 비율에서 1차 합격 전후의 결과를 비교할 수 있도록 수정했습니다.
변경 전후에는 서버에 요청해야 하는 값이 다르므로, getNumberOfApplicantsList를 통해 적절한 쿼리 스트링을 전송하여 1차 합격 전후 데이터를 각각 받아오도록 구현했습니다.
</aside>
배포 전 QA 작업 - 40%
입학 기간 중 발생한 프론트엔드 이슈의 신속한 대응 및 해결 - 90%
Next.js 13 및 14 활용 경험
SSR, ISR, App Router 등의 최신 기능을 적극 활용하여 성능 최적화 및 유지보수를 고려한 개발을 수행했습니다.
특히, Middleware를 활용하여 인증및 요청 로깅을 처리하는 등 보안성과 성능을 고려한 개발 경험이 있습니다.
이를 통해 불필요한 API 요청을 줄이고, 사용자 경험을 개선하는 효과를 얻었습니다.
백엔드 개발자와 디자이너와의 협업 경험
백엔드와 협업하여 기존의 S3 직접 업로드 방식에서 보안 문제를 해결하기 위해 Presigned URL을 도입하고, 성능을 최적화했습니다.
또한, 교무부 피드백을 반영해 UI/UX를 개선하고, 증명사진 크기 조절 모달을 추가하여 사용자 편의성을 높였습니다.
디자이너와 협력해 직관적인 인터페이스를 설계하고, 이미지 리사이징 로직을 최적화하는 등 원활한 소통을 통해 다양한 문제를 해결한 경험이 있습니다.
배포 후 발생한 문제를 분석하고 신속히 해결하며 사용자 경험을 최적화 배포 후 발생한 문제를 신속히 분석하고 해결하며 사용자 경험을 최적화했습니다. 사용자 피드백과 모니터링 로그를 통해 오류를 파악하고 대응했으며, 지원서 제출 시 파일 누락 문제가 발생하는 원인을 분석했습니다. 이는 업로드 완료 전에 사용자가 웹을 닫아 발생한 문제로, 업로드 진행 중 모달을 표시하는 방식으로 수정하여 해결했고, 이후 동일한 오류는 재발하지 않았습니다.
<aside> 🚨 1. 학생이 허용되지 않은 특수 문자를 입력해 회원가입이 진행되지 않았다고 제보했습니다.
입학생 지원자 중 이름이 20자를 초과한 경우가 있어 문제가 발생했습니다. 이는 회원가입에서 이름 제한이 없어 가입된 그대로 원서에 반영되었기 때문입니다.
입학 전형 중 어드민 페이지에서 갑자기 이미지가 표시되지 않는 문제가 발생했습니다.
서버 점검으로 일시 중지하는 동안, 접속한 사용자에게 지속적으로 500 오류 페이지가 표시되는 문제가 발생했습니다.
입학 전형 진행 중, 전형별 경쟁률 환산식 오류로 인해 데이터 시각화가 잘못되었습니다.
로그인하지 않았거나 일정에 따라 접근이 제한돼야 하는 페이지에도 접속할 수 있는 문제가 있었습니다.
검정고시는 합격 연도만 입력하면 되지만, 불필요한 입력 필드가 표시되는 문제가 있었습니다.
</aside>
<aside>
💡 1. 비밀번호 입력창 아래에 특수문자(!@#*$%*&*? **중에서만 입력**)문구를 추가하였습니다.
ReadOnly 설정을 해제하고, 유효성 검사에서 입력값이 없거나 2자 이하 또는 20자 이상일 때 검토하도록 수정했습니다. 또한, 외국인의 경우에는 alert로 안내하여 문제를 해결했습니다.
Vercel의 Image 태그 요청 한도를 초과하여 문제가 발생했으나, Vercel Pro를 구매하여 해결했습니다.
점검 중에는 점검 페이지로 이동하여 다른 페이지 접근을 차단했습니다.
빠른 시간내에 올바른 수식으로 계산되도록 수정하였습니다.
middleware.ts에서 LocalStorage의 토큰 확인 및 일정에 따른 접근 제한을 적용해, 허용되지 않은 경우 경고창을 띄우도록 해결했습니다.
검정고시는 합격 연도 필드만 표시하고, 나머지 필드는 빈 문자열로 임시 저장되도록 수정했습니다.
</aside>
배포 후 원서 접수 기간 3일 동안 약 30,000+의 트래픽이 발생하는 큰 규모의 프로젝트를 경험할 수 있었습니다.
**”마루”**는 2023 밤돌이로 선배들께서 일부 개발한 프로젝트였기에, 모든 페이지를 처음부터 만들지는 않았습니다. 하지만 기존 코드를 수정하고 기능을 개선하는 과정에서 코드의 구조를 깊이 이해하고, 유지보수의 중요성을 체감할 수 있었습니다. 또한, 실제 사용자 피드백을 반영한 개선 작업, 협업을 통한 코드 수정 및 확장 등을 경험하며 실무에 가까운 개발 역량을 쌓았습니다.
특히, 실제 운영 과정에서 예상치 못한 문제들이 발생했지만, 이를 즉각적으로 해결하며 서비스 안정성을 유지하는 경험을 할 수 있었습니다. 실시간으로 오류를 빠르게 분석하고 수정하면서, 문제 해결력과 운영 대응 능력을 키울 수 있었습니다.
이 프로젝트를 통해 기존 시스템을 분석하고 개선하는 능력, 운영 환경에서의 문제 해결력을 키울 수 있었습니다. 이전보다 훨씬 더 성장할 수 있었습니다.
Backend 2명 Design 2명 Frontend 2명 AI 1명
AI로 위로받는 나의 하루 2024.07.21 ~ 11.28
Github
https://github.com/Bamdoliro/sinaVro
https://github.com/Bamdoliro/sinavrororo
Stack
React Native Next.js TypeScript Zustand
styled-components axios
회고록
<aside>
시나브로는 사용자가 작성한 일기를 AI로 분석해 캐릭터가 대신 일기를 작성해주는 서비스입니다.
AI가 사용자의 감정을 분석하고, 기존 스토리에 반영하여 일기를 수정함으로써 스스로 감정을 객관적으로 바라볼 수 있도록 돕습니다. 이를 통해 우울감과 번아웃을 완화하고, 감정의 흐름을 이해하며 건강한 마음을 유지하는 것을 목표로 합니다.
또한, 감정 데이터를 바탕으로 맞춤형 피드백을 제공하고, 지속적인 감정 관리가 가능하도록 다양한 기능을 지원할 예정입니다.
</aside>
클라이언트 퍼블리싱 및 기능 구현 - 80%
<aside>
로그인 & 회원가입
이메일과 비밀번호를 입력한 후 버튼을 누르면 postLogin을 호출하여 로그인을 진행합니다.
회원가입 과정에서는 이메일 인증 후, 비밀번호 입력 및 확인, 개인정보 수집 동의를 거친 뒤 postSignUp을 호출하여 회원가입이 완료되도록 구현했습니다.
심리 테스트
심리 테스트를 통해 사용자의 상태가 번아웃인지 확인하고, 이에 맞는 맞춤 캐릭터를 추천해 줍니다.
Zustand를 활용해 점수를 계산하고, 총점을 기반으로 적절한 캐릭터를 추천하는 로직을 구현했습니다.
또한, 테스트 질문은 연세대학교 번아웃 자가진단 질문을 기반으로 하되, 사용자에게 부담을 주지 않도록 수정하여 퍼블리싱을 진행했습니다.
메인
사용자가 선택한 캐릭터는 조건에 따라 말풍선 내용이 달라지며, 친밀도, 받은 편지 개수, 관계 등의 정보를 보여줍니다.
getCharacter를 통해 친밀도와 캐릭터 정보를 가져와 페이지를 구성하며, 사용자의 경험을 더욱 몰입감 있게 만들었습니다.
또한, 알람, 설정, 일기, 편지 등 각 페이지로 이동할 수 있도록 버튼을 배치하고, Navigation을 활용해 자연스럽게 페이지를 이동할 수 있도록 구현했습니다.
우편함 & 편지
사용자는 일주일에 한 번, AI가 일기를 분석해 작성한 편지를 조회할 수 있습니다.
getAllLetters를 통해 createdAt과 id를 받아와 해당 날짜에 편지가 있음을 달력에 표시하도록 구현했습니다.
또한, 사용자가 특정 날짜를 클릭하면 id를 활용해 해당 편지의 내용을 확인할 수 있도록 설계했습니다.
</aside>
프로젝트 초기 세팅 - 100%
앱 배포 (원스토어) - 100%
<aside> 🚨 1. 일기를 업로드하면서 AI 분석이 시작되는데, 앱을 종료하면 업로드 및 분석이 중단되는 문제가 발생했습니다.
커스텀 Splash 페이지를 동적으로 보여주기로 했으나 디자인이 정적이라 의견 충돌이 있었습니다.
로그인했거나 캐릭터를 선택하지 않은 상태에서 재접속 시, 페이지가 로그인으로 이동하는 문제가 발생했습니다.
React Native가 자동으로 반응형이 되지 않아 기기 마다 보여지는 UI가 달라 문제가 발생했습니다.
</aside>
<aside> 💡 1. 로딩 페이지를 표시하여 분석 및 업로드 진행 중임을 나타내고, 앱 종료를 방지했습니다.
react-native-fast-image를 사용하여 앱 실행 시 Splash 페이지를 띄운 후, 페이지를 이동하도록 구현했습니다.
Splash 페이지가 끝난 후, 로그인 페이지에서 useEffect를 사용하여 조건에 따라 페이지 이동을 구현했습니다.
calculateHeight와 calculateWidth를 만들어 디자인된 화면 크기에서 해당 기기의 크기를 바탕으로 값을 수정하도록 하여, 화면이 반응형으로 보여지도록 수정했습니다.
</aside>
**“시나브로”**는 처음 사용하는 React Native로 개발한 앱이라, 관련 블로그나 서적을 보며 학습했습니다.
React Native의 컴포넌트 기반 구조와 상태 관리 방식은 웹 개발과 비슷하지만, 모바일 환경에 맞는 최적화가 필요하다는 점에서 새로운 도전이었습니다. 다양한 라이브러리와 도구들을 익히면서 모바일 앱 개발의 특성에 대해 배웠습니다.
특히, 퍼포먼스 최적화와 다양한 화면 크기, 플랫폼 차이를 고려해야 한다는 점이 중요함을 느꼈습니다.
또한, React Native라이브러리에 오류가 많아 디버깅에 시간이 많이 소요되었고, 해결 방법을 찾는 과정에서 많이 배우기도 했습니다.
프로젝트를 진행하면서 React Native에 대한 이해가 깊어졌고, 새로운 기술을 배우는 재미를 다시 한 번 느낄 수 있었습니다.