미리보기
기본 정보

1. 저는 React와 Next.js를 주력으로 사용하는 프론트엔드 개발자입니다. 2. 다양한 CSS 기술을 다루어 UI/UX에 대한 이해도 가 높습니다. 3. 백엔드 개발자와 협업 경험 및 Next.js경험을 통한 백엔드 로직의 이해도가 있습니다. 4. 최신 기술을 적극적으로 도입하며 상태 관리에 강점을 가지고 있습니다.
기술 스택
React, JavaScript, TypeScript, Next.js, scss, tailwind-css, GitHub
프로젝트
마라pick
개인
2024.08. ~ 2024.09.
-개인 프로젝트 : https://github.com/dasom-jo/marpick-kiosk.git
-포장 페이지(포장 유무 선택, 한/영변환, 관리자 로그인, 매출 현황 확인): 전역 관리는 recoil을 이용하여 관리, selector을 이용해 데이터를 가공하여 영어 지원 구현, next/auth라이브러리를 이용해 로그인 구현
-메뉴 선택 가능(재료 별 메뉴 선택, 메뉴 개수 삭제, 선택한 메뉴, 리스트 출력 총액 표시, 페이지 이동 버튼, 현재 위치 표시 아이콘) recoil을 이용해 리스트를 출력하고 페이지 이동 버튼으로 현재 페이지를 받아 현재 위치 아이콘 기능 구현
-결제 페이지(결제 기능) : tossPayment 라이브러리를 이용해 결제 기능 구현.
-결제 완료 페이지(결제 완료 문구 및 포장 페이지로 이동 버튼) :localStorage를 이용해 결제 이후 페이지가 새로 고침 되어도 다국어 지원 및 총액 전달 기능 구현.
Challen.gg + Challen.gg ver.2
개인
2024.05. ~ 2024.06.
팀프로젝트: https://github.com/JOY-org/CHALLEN.GG_FE.git
개인프로젝트: https://github.com/dasom-jo/challeng-ver.2.git
-홈페이지 (챌린지 리스트, 챌린지 모달,랭킹 시스템, 알림 시스템): useState를 이용해 상태 관리,mui 모달창 사용, Next.js와 mySQL를 이용해 데이터를 관리하여 Rest API를 이용해 데이터를 송수신, 팔로우가 되면 백엔드에 저장된 문구가 알림 시스템으로 전달되는 기능 구현.
-마이 페이지 (마이 프로필, 닉네임 이미지, 변경 기능,팔로잉 팔로우 리스트,진행 중 완료된 챌린지 리스트)Rest API를 이용해 데이터를 송,수신, 수정,삭제 기능 구현,ContextAPI를이용한 props전달.
-모바일 UI: 전체 UI 변경
어디가게
개인
2024.08. ~ 2024.09.
팀프로젝트: https://github.com/ARCHI-tecture/Eodiga-dog.git
-open API : next.js의 서버를 이용하여 데이터를 전달
-상세 페이지 : open API와 MySQL에서 데이터를 받고 useQuery를 이용해 상태 관리 및 데이터 캐싱 기능으로 렌더링 속도를 높이는 기능 구현,Next/auth기능을 활용하여 리뷰 작성 기능 구현
-마이 페이지 : 로그인 정보를 받아와 해당 유저가 선택한 리뷰와 즐겨 찾기 리스트 출력기능 구현, 보러가기 버튼 클릭 시 URL로 위,경도를 전달하여 상세 페이지에 해당 업체 출력 기능 구현
포트폴리오
교육
멀티캠퍼스
사설 교육 | 프론트엔드개발과정
2023.01. ~ 2023.06. | 졸업
Capital University Of Economics And Business(중국)
대학교(학사) | 경제무역학과
2017.06. ~ 2021.06. | 졸업
자기소개
1.직무지원동기
저는 제가 기울인 노력의 결과가 즉각적으로 나타나고, 이를 통해 사용자에게 직접적인 가치를 제공할 수 있는 분야에서 제 역량을 발휘하고 싶었습니다. 그러한 고민 속에서 프론트엔드 개발이라는 직무를 발견하게 되었고, 사용자 경험에 직접적으로 영향을 미칠 수 있다는 점과 다양한 직군과 협력하여 실시간으로 변화를 만들어 낼 수 있다는 점이 매우 매력적이라고 느꼈습니다.
프론트엔드 개발을 시작한 후, UI/UX 디자인을 실제로 구현하고 사용자가 그 결과물을 직접 경험할 수 있는 과정은 저에게 매우 큰 동기부여가 되었습니다.
이러한 관심은 프로젝트에서 잘 나타납니다
챌린지지 프로젝트에서 '인간 인지 능력 7±2 법칙'을 제시하며, 인간은 한 번에 7개 이상의 정보를 처리할 때 혼란을 겪기 때문에 화면에 6개 이하의 요소를 배치하는 것이 좋다는 의견을 팀원들에게 설득한 경험이 있습니다. 이에 따라 심사위원들로부터 "가장 사용자의 경험을 고려하는 개발자"라는 긍정적인 피드백을 받은 바 있습니다.
또한 챌린지지 버전 2를 진행할 때 건강 앱 특성상 모바일 버전이 필수적이라고 생각되어 개인 프로젝트를 진행하였으면서 그 과정에 사용자에게 불필요한 기능들을 제거하며 사용자 경험을 최적화할 방법을 학습하였습니다.
UI의 시각적인 요소와 UX의 사용자 중심 설계가 잘 결합한 결과물이 사용자의 만족도로 이어지는 것을 직접 확인할 수 있는 일은 제가 찾던 성취감을 충족시켜 주었습니다. 또한, 프론트엔드는 단순히 혼자만의 작업이 아니라, 백엔드 개발자, 기획자, 디자이너 등 여러 직군과 협업하여 하나의 완성된 제품을 만들어 가는 과정에서 다양한 시각을 배우고 함께 성장할 수 있는 기회를 항상 잡고 싶습니다.
2.지원 직무와 관련하여 전문성을 키우기 위해 노력한 경험
프론트엔드 개발자로서의 전문성을 갖추기 위해 약 6개월 동안 멀티캠퍼스에서 '프론트엔드 개발(React)' 과정을 수료하였습니다. 이 과정에서는 HTML, CSS, JavaScript와 같은 웹 개발의 기본 기술뿐만 아니라, React 라이브러리를 활용한 SPA(Single Page Application) 개발 등 다양한 기술을 실습을 통해 익혔습니다. 실습으로 실제 프로젝트에서 적용할 수 있는 기술들을 학습하면서, 복잡한 웹 애플리케이션을 효율적으로 설계하고 개발하는 방법을 배웠습니다.
특히 과정이 끝난 후에도 자발적으로 팀 프로젝트를 진행하며 한층 더 높은 전문성을 쌓을 수 있었습니다. 프로젝트를 통해 팀 협업, 코드 리뷰, 문제 해결 능력을 강화했으며, 프론트엔드와 백엔드를 연결하는 기술적인 이해도도 향상했습니다.
<React.js전문 프론트엔드 개발자>
React.js 기반으로 프로젝트를 설계하며, 상태 관리를 중요한 요소로 고려했습니다. 초기에는 useState와 useEffect를 사용했지만, 전역 상태 관리의 필요성을 느끼며 Recoil과 React Query를 도입했습니다.
키오스크(마라pick)프로젝트는 사용자 입력과 메뉴 데이터를 여러 컴포넌트 간에 실시간으로 공유해야 했습니다. 그래서 Recoil을 통해 전역 상태 관리를 도입하여, 메뉴 변경이나 사용자 선택에 따라 즉각적인 UI 변화를 구현했고, 데이터 일관성을 유지하면서도 부드러운 사용자 경험을 제공했습니다.
어디가게 프로젝트에서는 대량의 OpenAPI 데이터를 처리하면서 발생한 성능 문제를 React Query로 해결했습니다. stale-while-revalidate 패턴을 적용해 캐시된 데이터를 즉시 제공하고, 백그라운드에서 최신 데이터를 불러와 빠른 응답성과 성능 최적화를 달성했습니다. 이를 통해 불필요한 서버 요청을 줄이고 데이터 동기화 문제도 해결했습니다.
이외에도, JavaScript를 통해 복잡한 로직을 처리하고, 함수형 프로그래밍을 도입해 데이터를 가공했습니다. 필요에 따라 커스텀 훅을 작성하여 코드의 재사용성을 극대화했으며, 비동기 작업은 async/await을 사용하여 효율적으로 처리했습니다. 이러한 접근을 통해 애플리케이션의 성능을 최적화하고, 사용자 경험을 개선하는 데 기여했습니다.
저는 이러한 경험을 통해 프론트엔드 개발자로서 React. JS에 특화된 전문성을 쌓을 수 있었으며, 앞으로도 최신 기술을 도입하고 성능과 사용자 경험을 동시에 개선하는 데 집중하고 있습니다.
<Next.js와 Node.js를 통한 백엔드 이해도가 높은 개발자>
Node.js를 통해 서버와의 원활한 통신을 위한 기술적 기초를 다졌습니다. 모듈화, 객체 지향 프로그래밍, Express 프레임워크를 활용한 API 구축 및 미들웨어 개념을 학습하며 REST API와 실시간 통신 구현을 익혔습니다. 이러한 지식은 백엔드와의 협업에서 데이터 형식 조율 및 async/await를 통한 효율적 데이터 처리에 큰 도움이 되었습니다.
Next.js를 자발적으로 학습하고 프로젝트에 적용하여 서버 사이드 렌더링(SSR)을 통해 SEO 최적화와 페이지 성능을 개선했습니다. Next.js의 파일 구조와 API 라우팅을 활용하여 프론트엔드와 백엔드의 통합을 효과적으로 수행하였으며, 로그인 기능과 API 통합을 성공적으로 구현했습니다.
이 과정을 통해 Node.js와 Next.js에 대한 깊은 이해를 얻었으며, 백엔드와의 긴밀한 협업이 사용자 경험 향상에 중요하다는 것을 깨달았습니다. 협업과 커뮤니케이션을 중시하며, 사용자에게 더 나은 서비스를 제공하기 위해 끊임없이 성장하고 도전하고 있습니다.
3.본인의 장단점과 입사후 장점은 어떻게 활용되고, 단점은 어떻게 보완할 수 있는가
<거시적 시야를 가진 개발자>
거시적인 시선으로 문제를 관찰하는 습관이 있습니다. 이 습관은 자신을 돌아보는데도 사용되는데 덕분에 자기 객관화가 잘되어있습니다. 자기 객관화는 자기를 분석하고 발전하는데 좋은 도구가 됩니다. 이를 통해 남들보다 부족한 점을 잡아내었는데 가장 첫 번째가 체력이었습니다. 그래서 9-6 스케줄인 학원의 커리큘럼에 적응하기 위해 2달 전부터 주 3회 1시간 러닝을 하였습니다. 덕분에 식곤증이 사라지고 능력 외의 일이 닥쳐도 긍정적으로 생각할 수 있으며 늦은 시간까지의 공부도 무리 없이 해낼 수 있게 되었습니다. 이 점은 근무시간이 유동적이고 장시간 앉아있는 개발직군 특성에 버텨낼 좋은 방법이라고 생각합니다.
반면에 좋은 습관이었던 게 작은 문제를 일으킨 적이 있습니다. 전날에 다음날 일정을 정하여 생산적인 하루를 보내는 습관이 있었지만 반대로 불가피하게 일정 외의 일이 생긴다면 관련된 결정을 내리는 데 약간의 시간이 필요합니다. 그래서 일정 외의 일이 충분히 생길 수 있음을 인지하고 자신의 결정에 자신감을 가지는 마인드 컨트롤에 집중하고 있습니다.
이러한 자기 객관화와 체력단련 그리고 마인드컨트롤은 불확실한 상황에서도 유연하게 대응할 수 있는 능력을 키워주며, 개발자로서의 장기적인 성장을 도모하는 데 큰 도움이 됩니다.