미리보기
기본 정보
- 하나의 프로덕트를 처음부터 끝까지 만들어보는 것에 흥미가 있어 Mini PC를 구입해 도메인 구입부터 시작하여 Nginx를 통한 Docker와 연결 및 관련된 프론트엔드(React) 와 백엔드(Nest)하에 배포해본 경험이 있습니다. - 회사 내 메인 프로젝트인 U+ 모바일 매니저 의 개발을 처음부터 끝까지 참가하며 처음에는 작은 페이지나 간단한 탭 기능부터 현재 코어기능에 해당하는 Native앱과의 이벤트 소통 및 페이지 전환 부분을 설계 및 구성하여 Native와 웹 간 화면 전환 및 이벤트의 전달과 수신 등을 처리한 경험이 있습니다. - 어떤 것이 고장 나거나 작동하지 않을 때 이러한 것을 고치고 문제를 해결하는 것을 좋아하여 1년 이상 개발 기간이 걸린 프로젝트인 아이들 나라 Smart TV (클라우드) 프로젝트를 인수인계 받아 32건의 이슈 사항을 파악하고 실제 구동 환경을 조성하며 해결한 경험이 있습니다. - 같이 고민하고 공유하여 새로운 경험을 확장하는 것을 언제나 생각하며 커뮤니티등을 통해 나의 경험을 공유하고 각자의 고민거리에 대하여 같이 생각하고 해결하는 것을 좋아하여 어느덧 커리어리의 답변수를 300건을 넘기게 되었습니다.
경력
주식회사 파인원커뮤니케이션즈
전임 | 서비스플랫폼사업부 | 재직 중
2023.08. ~ 재직 중 (1년 7개월)
오키드 호텔
주임 | 호텔리어
2019.11. ~ 2023.07. (3년 9개월)
손님의 기본적인 체크인 및 전화응대
호텔 내 예약 및 CMS와 PMS를 통한 전산 관리
호텔 내 인스팩션 및 유지보수 관리
카나가와 치과대학 부속병원
레지던트 | 종합치과
2019.02. ~ 2019.09. (8개월)
치의학과 인턴으로써 기본적인 환자 접대 및 대응
임상시 기본적인 기공 (치모형 작성) 등과 환자에 대한 전반적인
기초시술 (스케일링 , 사전소독) 진행
기술 스택
JavaScript, HTML/CSS, React, TypeScript, Next.js, tailwind-css, vercel, Redux, zustand, docker-compose, nginx, NestJS, PostgreSQL
프로젝트
U+ 모바일 매니저
파인원 커뮤니케이션즈
2023.08. ~ 진행 중
U+ 모바일 통합 웹앱(Native)
앱 다운로드 : 링크
기술 : React Axios Redux Crypto-js
Why (목적):
이 프로젝트의 핵심 목적은 오래된 모바일 매니저 앱을 고도화하여 U+ 모바일 사용자의 사용자 경험을 개선하고, 모바일 앱 내에서의 사용자 편의성을 높이는 것입니다.
What (내용):
페이지 개발: 사용자에게 개인화된 서비스 제안부가 서비스 연동: 부가 서비스를 쉽게 이용할 수 있도록 외부 앱과의 연동자연스러운 페이지 전환 및 헤더 제어: 사용자 인터페이스의 자연스러운 사용성 향상Native 와의 웹앱 전체 이벤트 제어: 협업을 통해 Native <-> Web 간 각종 이벤트를 개발 적용 플로우 작성
How (방법):
소통 맞춤형 제안 & 라이프스타일 페이지 개발
백엔드 팀과 협력하여 REST API를 통한 seamless한 연결을 구현하고, API 규격을 정립하여 UI/UX를 최적화했습니다부가 서비스 연동
딥 링크와 외부 앱의 API를 활용하여 사용자가 부가 서비스를 쉽게 이용할 수 있도록 했습니다. 이를 통해 옵션 선택과 가입 플로우를 원활하게 진행할 수 있게 되었습니다.페이지 전환 및 헤더 제어
React Hook을 사용하여 슬라이드에 따른 페이지 전환 및 스크롤에 따른 헤더 제어 기능을 개발, 사용자 인터페이스의 자연스러움을 향상시켰습니다.
Native 와의 웹앱 전체 이벤트 제어
Native 와 Web간의 페이지 이동시 발생하는 history 관리 및 플로우를 작성하고 로딩 및 메뉴와 해더등 Web + Native 의 하이브리드 화면을 위한 각종 이벤트와 플로우를 작성했습니다.
U+ 아이들 나라 (Smart TV)
파인원 커뮤니케이션즈
2023.12. ~ 2024.04.
저사양 단말을 위한 Cloud 웹앱
U+ 스마트 TV 내장 - 링크
기술 : React Redux Axios Base64-js Anime.js
Why (목적):
스마트 TV 사용자 경험을 극대화하고, 플랫폼의 안정성 및 반응성을 개선하기 위해 시작된 프로젝트입니다. 기존 개발된 클라우드 Native에서 이슈 및 사용성 중심으로 개선 작업을 진행 하였습니다.
What (내용):
스마트 TV 포커스 기능 개선: 실행 환경의 문제로 인해 발생한 포커스 관련 에러 해결스마트 TV 네이티브 환경 최적화: 내부 설정 환경 관리를 위한 새로운 컨트롤 함수 개발CORS 에러 해결: 새 API 주소 도입 후 발생한 CORS 문제 해결 및 이미지 로딩 속도 개선리액트 DOM 문제 해결: 이미지 렌더링과 관련된 DOM 문제 해결 및 UI의 반응성 향상
How (방법):
포커스 기능 개선
내장된 Navigation 함수와 프로젝트의 내부 설정을 철저히 분석하고, 리모콘 동작 중 발생하는 문제를 식별하여 수정함으로써 문제를 해결했습니다.네이티브 환경 최적화
스마트 TV의 API 연결 주소 제어 로직에 대한 이해를 바탕으로 새로운 컨트롤 함수를 개발, 동적 API 경로 결정을 가능하게 하여 시스템의 유연성과 확장성을 개선했습니다.CORS 에러 해결
CORS 문제에 대한 깊은 분석을 통해 preflight 문제를 해결하고, 이미지 요청 방식을 개선하여 로딩 속도를 50% 향상시켰습니다.리액트 DOM 문제 해결
리액트의 의존성과 DOM 로딩 순서를 재검토하여 전체 컴포넌트의 동기화를 달성, UI 표시 순서를 최적화하고 사용자 인터페이스의 반응성을 크게 개선했습니다.
파인마켓
파인원 커뮤니케이션즈
2024.01. ~ 2024.03.
주요 역할 : 주로 백엔드를 전담하는 팀 프로젝트로 로그인/API 통신 로직에 전담하며 적합한 백엔드를 개발 적용
배포 (프론트엔드) : React
배포 (백엔드) : Nest
레포지토리 (프론트엔드) : https://github.com/zerosial/Pinemarket_Frontend_React
레포지토리 (백엔드) : https://github.com/zerosial/Pinemarket_Backend_Nest
업무 성과 :
리액트 + Nest를 활용하여 API의 개발을 직접 프론트엔드에 적용해보며 스킬 학습
주로 백엔드의 전반적인 로직과 API를 다뤄보며 특히 로그인에 대한 전반적인 전처리&후처리를 학습
1:1 문의하기 with 풀스텍
개인
2023.12. ~ 2024.01.
주요 역할 : 웹 프론트엔드와 백엔드를 같이 만들며 전체적인 풀스택 경험
배포 (프론트엔드) : Question - React
배포 (백엔드) : Question - Next
레포지토리 (프론트엔드) : https://github.com/zerosial/Question_Frontend_React
레포지토리 (백엔드) : https://github.com/zerosial/Question_Backend_Nest
업무 성과 :
리액트 + Nest를 활용하여 API의 개발을 직접 프론트엔드에 적용해보며 스킬 학습
L and K 컨설팅 사이트
개인
2023.05. ~ 진행 중
주요 역할 : 전반적인 사이트 제작
업무 성과 :
- 반응형 사이트 최적화 (모바일/PC 반응형웹 + 다크/라이트모드)
- SEO 최적화 및 CI/CD 자동화
헤이! 케이크 (수제 케이크 제작 플랫폼)
프로그래머스 (FE 3명 + BE 4명)
2023.02. ~ 2023.03.
주요 역할 : 메인, 관리자, 마켓 관련 페이지, 배포, 비동기 통신 세팅
저장소 : https://github.com/prgrms-web-devcourse/Team-7sung-heycake
업무 성과 :
- 작업시 반응형 웹 구성 (모바일 , 데스크톱)
- Axios의 기본 협업 세팅 (사용하기 편한 커스터마이징)
- Vercel 배포 & 연동을 통한 자동 테스팅 및 개발 + 상업 페이지 분리
- Next.js의 SSG와 ISR을 활용한 렌더링 개선 (페이지 별 갱신주기 관리)
- 스켈레톤 UI 및 로딩 시 UX 개선
- 메인 페이지의 전반적인 기능 개발 (해더 , 지역선택 컴포넌트, 아이콘등)
- 관리자 페이지의 전반적인 기능 개발 (3개의 페이지 텝에 맞는 공용 컴포넌트)
- 마켓 정보조회를 위한 전반적인 기능 개발 (카카오 맵 연동)
- 5차례에 걸친 중간 리팩토링을 통해 코드개선 및 타입, 린트 최적화
뽀모 (타이머와 커뮤니티를 통한 공부 커뮤니티)
프로그래머스 (FE 4명 + 완성된 Api를 통한 비동기 연결)
2023.01. ~ 2023.02.
주요 역할 : 전반적인 사이트 제작
업무 성과 :
- 회원가입/로그인 제작 시 Axios의 instance 기능을 활용해 공용 헤더나 주소를 관리
- 토큰을 활용하여 인증/인가를 진행, LocalStorage에서 회원 정보를 삭제 혹은 설정
- 내 정보/사용자 정보조회를 개발하며 React-Query로 비동기 데이터의 상태 관리
- 비동기 통신시 데이터가 받아오는 중간에 스켈레톤 코드등을 활용하여 로딩 UI 제작
- 팔로우 & 팔로잉 기능을 개발하며 타입스크립트를 활용한 타입의 유추와 통일
- Serverless 기능을 사용하여 API_END_POINT가 노출되지 않고 CORS에러를 우회 관리
SIMPLE Notion
개인
2022.10. ~ 2022.10.
팀 구성 : 개인
주요 역할 : 전반적인 사이트 제작
웹 : https://zingy-sunburst-bf6f87.netlify.app/FEDC3-4_Project_Notion_VanillaJS/zerosial
저장소 : https://github.com/prgrms-fe-devcourse/FEDC3-4_Project_Notion_VanillaJS
업무 성과 :
- 바닐라 자바스크립트만을 사용하여 리액트와 유사하게 SPA 방식으로 사이트 제작
- CSS는 빠른 작성을 위한 TailwindCSS를 채용하여 직관적으로 수정하며 배치
Netflixx
개인
2022.04. ~ 2022.06.
팀 구성 : 개인
주요 역할 : 전반적인 사이트 제작
업무 성과 :
- Framer-motion을 통한 쉽고 빠른 애니메이션 제작 및 숙달
- Styled-component를 사용하여 같은 화면 단에서 CSS의 바른 수정
- 무료 제공되는 영화 API를 통해 넷플릭스와 유사한 형식의 사이트 개발
포트폴리오 (구)
개인
2022.03. ~ 2022.04.
팀 구성 : 개인
주요 역할 : 전반적인 사이트 제작
업무 성과 :
- Html + Javascrip + Css를 활용한 첫 제작 사이트
- 평소 흥미 있던 Parcel과 Bootstrap을 사용해서 html 중심으로 제작
포트폴리오
교육
프로그래머스 데브코스 3기
사설 교육 | 웹개발 (프론트엔드)
2022.10. ~ 2023.03. | 졸업
바닐라코딩 직장인 부트캠프 13기
사설 교육 | 웹개발 (프론트엔드)
2022.03. ~ 2022.05. | 졸업
카나가와 치과대학
대학교(학사) | 치의학과
2012.03. ~ 2018.02. | 졸업
아주대학교
대학교(학사) | 컴퓨터 공학과
2008.03. ~ 2009.02. | 중퇴
원주삼육고등학교
고등학교 | 고등학생
2005.03. ~ 2008.02. | 졸업
외국어
영어
일상 회화 가능
일본어
원어민 수준
자기소개
도전적인 목표 설정과 해결 과정 : 도커를 통한 풀스텍 배포
- 도전: Mini PC와 도메인 구입 (cielui.com) 부터 프로젝트의 배포까지의 전 과정을 담당하고 복잡한 네트워크 설정과 도커 활용에 대한 도전을 하였습니다.
- 과정: 기술 문서와 커뮤니티의 도움을 받아, 문제를 단계별로 해결했습니다. Docker에서 컨테이너, 설정, Volume 등을 파악해 DB부터 배포용 프론트 사이트를 개발 및 적용하였으며 CORS에러를 해결하기 위한 백엔드에서 프론트엔드에 이르는 통신 흐름을 파악하고 적용했습니다.
- 결과: 프론트엔드(React) 와 백엔드(Nest) 프로젝트의 개발 및 동일 출처 하에 배포 경험과 설정 등을 통해 Cookie를 컨트롤 하고 CORS에 대한 에러 처리를 개발/배포 단에서 분리하여 처리 및 활용하는 경험을 얻었습니다.
비효율적인 업무를 효율적으로 진행하기 위한 과정 : 문서 배포 자동화
- 상황: 문서의 지속적인 업데이트와 배포 과정에서 시간 소모가 많은 문제 및 최신 관리가 어려운 상황에서 개선을 하고자 했습니다.
- 행동: 기존 활용한 Docker와 회사 내 상시 배포 PC를 통한 배포 자동화 및 연관된 웹사이트를 작성하여 상시 배포 및 자동화 설정을 진행하였습니다.
- 성과: 매일 자동화 배포로 업무 최적화와 더불어 폴더 및 파일구조를 분석하고 Github에 연동하여 폴더 내 문서를 올리면 자동 갱신하여 웹사이트를 구조화 하였습니다.
새로운 경험을 확장하고 다양한 문제 해결: Q&A 소통 및 기술블로그 운영
개발 지식과 경험을 공유하고, 커뮤니티와의 활발한 소통을 통해 지식의 폭을 넓혀가는 것을 중요하게 생각합니다. 티스토리와 커리어리에서 제 경험을 공유하고, 다양한 개발 관련 질문에 답변함으로써 커뮤니티 내에서 지식을 나누고 있습니다. 이 과정에서 다양한 기술적 문제에 대한 해결 방안을 모색하고, 고객사와의 지속적인 소통을 통해 발생하는 실제 사례를 바탕으로 유연하고 효율적인 대응 방법을 개발하였습니다.
전문적인 프론트엔드 기술 향상을 위한 노력: 다양한 프로젝트
다양한 프로젝트 참여를 통해 프론트엔드 기술을 발전시켰습니다. U+ 아이들 나라 (Smart TV) 프로젝트에서는 스마트 TV용 애플리케이션을 React와 Redux로 개발하며 특수 환경에 맞는 사용자 인터페이스를 구현했습니다. U+ 모바일 매니저 에서는 1000만 명 이상이 사용하는 앱을 React로 고도화하며, 큰 규모의 서비스 경험을 쌓았습니다. 파인마켓 에서는 Vite + React를 활용하여 프론트엔드와 백엔드 개발을 같이 경험했으며, 헤이! 케이크 에서는 Next.js와 TypeScript로 서버 사이드 렌더링과 정적 사이트 생성을 통해 최적의 사용자 경험을 제공했습니다. 또한, 뽀모 에서는 React-query와 서버리스 함수를 사용해 데이터 관리 및 CORS 문제 해결에 기여했습니다.
2008년 저는 컴퓨터 게임을 좋아하는 학생이었습니다. 이러한 게임들을 하다 보니 개발자가 되고 싶어 아주대학교 컴퓨터 공학을 지원하여 합격하였습니다. 하지만 그때 당시 개발자는 부모님을 비롯한 주변의 인식이 좋지 않아 꿈을 이어가고 싶었지만, 전문직이 더 좋다는 설득으로 중퇴 후 일본의 치과에 입학 후 졸업하였습니다.
하지만 치과학과의 생활은 제게 맞지 않았습니다. 수술과 치료 과정은 제게 어려움을 주었고, 특히 피를 보는 것은 어려웠습니다. 이러한 상황에서 고향인 한국이 그리워져 결국 한국으로 돌아왔습니다.
한국에서는 원주의 오키드 호텔에서 프론트 직원으로 일하면서, 처음에 흥미를 느꼈던 프로그래밍에 대한 열망이 다시 생겼습니다. 그래서 독학과 온라인 강의를 통해 프로그래밍을 다시 시작하였고, 이를 통해 웹 개발에 대한 깊은 흥미를 발견하게 되었습니다.
처음에는 웹의 모든 부분을 다루는 풀 스택 개발자를 목표로 하였지만, 점차 기술 영역을 확장해가기로 결정했습니다. 그래서 저는 프론트엔드 개발에 주력하며 특히 Javascript에 집중했습니다. 이후 회사를 퇴사하고 프로그래머스 프론트엔드 부트캠프에 참여하여, 1년 6개월 동안 10개 이상의 프로젝트를 수행하였습니다.
프론트엔드 개발의 세계에서, React와 Next.js라는 기술에 특히 주목하게 되었습니다. React의 컴포넌트 기반 아키텍처와 Next.js의 서버 사이드 렌더링 기능에 큰 흥미를 느꼈습니다. 부트캠프를 수료하면서, 이 두 기술을 중심으로 다양한 프로젝트를 수행하였습니다. React와 Next.js를 활용한 이러한 프로젝트들은 제 개발 능력을 향상시키는 데 도움이 되었고, 팀 프로젝트를 통해 협업과 커뮤니케이션 능력도 향상시킬 수 있었습니다.
저는 사용자 경험을 중시하는 웹 서비스 개발을 중요하게 생각합니다. 디자인에도 관심이 많아서 Bootstrap, TailwindCSS, 그리고 Chakra.UI와 같은 다양한 디자인 도구를 사용해보았습니다.