미리보기
기본 정보
서비스·개발의 편리함과 생산성 향상을 중요하게 생각합니다. 클린 코드 작성을 위해 고민합니다. UI/UX를 모두 고려해 사용자의 니즈를 달성하기 위해 노력하고 있습니다.
기술 스택
JavaScript, HTML/CSS, TypeScript, React, Vue.js, SQL, AWS, Spring, JSP, jQuery, Next.js
경력
주식회사 콘텐트리중앙
사원 | 미디어개발팀 | 재직 중
2023.12. ~ 재직 중 (1년 2개월)
잡지사 기사 제작 · WCMS(웹 콘텐츠 매니징 시스템) · 웹사이트 개편 프로젝트
- 엘라스틱서치 인덱스 생성 및 관리, 로그 데이터 가공을 통한 통계 데이터 생성
- 통계 데이터를 시각화한 WCMS 콘텐츠 통계 대시보드 페이지 개발
- 매체 웹사이트 내 es 검색/집계에 필요한 프레임워크 제작 및 검색 쿼리 최적화
- 공용 함수 모던 자바스크립트 버전에 맞춰 리팩토링 및 코드 성능 개선
- Java, Spring, SpringBoot, Jsp, Jquery, ElasticSearch(ELK/EFK), Jenkins
언론사 WCMS(웹 콘텐츠 매니징 시스템) · 웹사이트 유지보수 및 운영
기존 기능의 개선이나 새로운 기능 추가, 오류 수정을 담당했습니다.
- 언론사 웹사이트 SEO 수행, 검색 쿼리 최적화
- CMS 내 복지포인트 및 현금영수증 기능 개발
- Java, Spring, SpringBatch, Jsp, Jquery, ElasticSearch(ELK), Jenkins
스콥
인턴 (현장실습) | 개발팀
2021.06. ~ 2021.08. (3개월)
상품 사진 가공 서비스 프론트엔드 개발
상품 사진을 AI를 통해 가공해 제품 이미지를 제작하는 서비스의 프론트엔드를 개발했습니다.
- 프로젝트 환경 구축, 디렉토리 구조 설계, 라우팅 구조 설게
- 이미지 선호 문답 페이지, 메인페이지 개발 및 반응형 디자인 구현
- React, styled-component, AWS EC2
프로젝트
ZIP | 공공데이터 기반 아파트 실거래가 조회 지도 서비스
삼성청년SW아카데미
2023.11. ~ 2023.11.
공공데이터를 기반으로 아파트 실거래가를 조회하고, 리뷰를 공유하는 서비스로 사용자에 최적화된 UI / UX를 제공하고 직관적인 기능을 구성하여 지도 위에서 아파트 실거래가와 정보를 조회하고자 했습니다.
제공 기능
- 지도 위치에 따른 주변 아파트 실거래가 조회
- 아파트 실거래가 상세 정보 조회
- 아파트 리뷰 공유
- 아파트 실거래가 연관 사이트 제공
사용 기술
- Vue.js, Vue-Query, Pinia
- TailWindCss, Flowbite
- Naver Map API
담당 역할
- 지도 표시 및 주변 실거래가 조회 / 공지사항 / 로그인 및 회원가입
- 지역(시군구) 및 아파트 이름으로 검색
- 아파트 상세 조회 및 실거래가 데이터 표시 / 리뷰 공유
iBelieveSurvey | 기프티콘 발송 연동 설문조사 서비스
국민대학교 알파프로젝트
2023.03. ~ 2023.06.
기존 대학생들이 사용했던 온라인 설문조사에서 발생하는 익명성 문제, 일회성 문제, 투명성 문제를 해결하기 위해 시작했습니다.
제공 기능
- 설문 폼을 사용하여 편리하게 설문 제작
- 설문 DB에 검색해 필요한 설문 결과를 열람
- 카카오톡 선물하기 API를 연동해 편리하게 기프티콘 발송 가능
- 기프티콘 전달 과정 공개를 통해 투명성 보장
사용 기술
- React.js, TypeScript, ReactQuery, Recoil, survey.js
- styled-components, styled-system, survey.js
- AWS EC2 · S3 · CodeDeploy, Github action (CI)
담당 역할
- 프론트엔드 배포 자동화 프로세스 구축 & 도메인 연결
Github Action을 통해 EC2에 자동배포하여 nginx로 구동하는 프로세스 구축
main branch에 push 발생 시 Github Action이 이를 감지하여 AWS S3에 빌드 파일 업로드
S3를 트리거로 AWS CodeDeploy가 EC2에 파일 업로드, 이를 EC2에서 nginx가 구동함
Route53을 이용해 도메인 연결하여 배포 - 기프티콘 결제 및 선택 페이지 제작
화면 구성 및 API 연결, 카카오페이 결제 API 호출 - 설문조사 작성 페이지 제작
설문 항목 폼 작성 기능(survey.js 라이브러리 사용), 기타 내용 입력 페이지 제작
PeacePiece | 환경 챌린지 가상공간 플랫폼
기타
2022.07. ~ 2022.09.
환경 보호를 위한 인식과 행동을 유발하기 위해 일상생활 속 활동을 기반으로 챌린지를 진행합니다.
챌린지 제안 기능을 통해 많은 사람들이 일상생활에서 환경을 보호할 수 있는 방법에 대해 고민하고, 사람들과 공유할 수 있다는 점에서 환경보호에 대한 관심을 증대하고 다양한 환경문제 해결법을 도출할 수 있습니다.
챌린지와 환경을 위한 SNS 커뮤니티인 피스를 통해 포인트를 획득하고, 포인트를 사용하여 섬 확장 및 아이템 구매를 통해 ‘나의 섬’을 꾸밀 수 있는 흥미로운 요소도 있습니다.
제공 기능
챌린지 : 환경 활동(재활용, 플로깅 등)을 참여해 포인트를 획득하고, 새로운 챌린지를 제안할 수 있습니다.
피스 : 환경을 위한 활동 인증 게시글을 작성하고, 댓글과 이모지를 통해 피드백하고 공유합니다.
나의 섬 : 포인트로 멸종위기 동물을 입양하고, 아이템을 구매하고, 섬을 확장해 나의 섬을 꾸밀 수 있습니다.
담당 역할
- 공용 컴포넌트 제작 및 구조 설계
재사용성을 고려하여 자주 사용되는 컴포넌트(Flex 요소가 적용된 박스, 태그 등)를 제작하고 컴포넌트 간 구조를 설계하였습니다. - ReactQuery 도입 및 API 연결
이전 프로젝트들에서 Redux를 사용했으나, 보일러플레이트가 비대해지는 문제가 있어 해결 방법을 찾던 중 카카오페이에서 유사 사례를 ReactQuery를 적용하여 상태관리를 개선한 것을 보고 이에 적용하였습니다.- 라이브러리를 사용하기 위한 설정 및 API 통신 코드를 작성
- axios interceptor를 통한 access token refresh 적용
개발 기능
- 챌린지 인증 게시글 작성 기능
- 댓글 작성 기능
- 이모지 피드백 기능
- 알림 및 유저 메뉴
- 로그인 / 회원가입
TEAMING | 프로젝트 팀원 매칭 플랫폼
국민대학교 캡스톤디자인
2022.03. ~ 2022.05.
개발자에 대한 수요가 늘어나면서, 포트폴리오를 채우고 실력을 향상하기 위해 팀 프로젝트는 필수 요소가 되었습니다.
티밍은 팀원 매칭을 통해 사용자들이 효율적이고 완성도 높은 프로젝트 경험을 얻도록 하는 웹 서비스입니다.
제공 기능
- 프로젝트 생성 및 참여
- 회원가입 시 입력한 데이터를 바탕으로 개인별 프로젝트 추천
- 프로젝트 기술 스택에 맞는 팀원 추천
- 프로젝트를 검색 조건에 따라 필터링 하여 둘러보기
- 좋아요 한 프로젝트, 진행중인 프로젝트, 완료된 프로젝트 모아보기
사용 기술
- React.js, JavaScript
- Redux, Redux-saga, styled-components
담당 역할
-프로젝트 환경 구축 및 Redux 및 미들웨어인 Redux-Saga 적용
Redux를 통한 API 통신 관리를 위해 프로젝트 환경 설정
- 프로젝트 생성 페이지 제작
여러 Input 요소를 제작하고, 게시글 작성의 경우 마크다운 에디터로 작성이 가능하도록 구현함 - 프로젝트 상세보기 및 관리페이지 제작
마크다운 형식으로 작성된 글 내용을 보여주도록 구현함 - 회원 가입 시 데이터 입력 기능
개발 분야를 입력받고, 선택한 개발 분야의 사용 가능 수준을 입력받음, 여러 기술 스택을 자동완성을 통해 추가할 수 있음
TTL | 여러 플랫폼의 TIL 모아보기 서비스
기타
2022.01. ~ 2022.05.
Github, Tistory, velog 등 다양한 곳에 나눠져 있는 TIL(Today I Learned)을 모아서 볼 수 있게 만들어주는 서비스입니다. 또한 TTL에서 글을 작성할 수 있으며 다양한 이모지를 남길 수 있습니다.
제공 기능
- TIL 피드 / 작성 / 댓글 / 북마크 기능
- 기존 Github 및 Velog 글 불러오기 및 자동 동기화 제공
- TIL에 다양한 이모지 피드백
사용 기술
- React.js, JavaScript
- Redux, Redux-saga, styled-components
담당 역할
- 글 목록 조회 및 검색 페이지 Infinity Scroll 구현
- 게시글 상세보기 및 코멘트 제작
마크다운 형식으로 작성된 게시글 내용을 보여주고, 각 언어에 맞게 코드블럭이 하이라이팅 되도록 구현 - TIL 이모지 피드백 및 북마크 제작
이모지를 게시글에 남기고 북마크를 저장할 수 있음
-회원가입 및 로그인 기능
포트폴리오
교육
삼성전자
사설 교육 | 삼성청년SW아카데미
2023.07. ~ 2023.12. | 졸업
국민대학교
대학교(학사) | 소프트웨어학부
2019.03. ~ 2023.08. | 졸업
선사고등학교
고등학교 | 이과
2016.03. ~ 2019.02. | 졸업
자격증
SQLD
- | 한국데이터산업진흥
2024.06.
정보처리기사
- | 한국산업인력공단
2023.09.
자기소개
프론트엔드 개발자가 되기 위한 노력
프론트엔드 개발자로서 제가 중요하게 생각하는 역량은 두 가지입니다. 첫째는 기술적 역량이고, 둘째는 소통 역량입니다. 개발자는 사용자의 니즈를 개발 기술을 통해 기능으로 구현하는 역할을 맡고 있습니다. 따라서 원하는 바를 구현할 수 있는 기술력과 이를 명확하게 이해하고 이해관계자들에게 전달할 수 있는 소통 능력이 필수적입니다.
기술적 역량을 키우기 위해 저는 기본기와 최신 기술 두 가지 측면에서 학습했습니다. 해커톤과 인턴을 통해 React를 접하였고, 이후 두 번의 공모전에서 React를 사용한 프로젝트를 진행하며 이를 더욱 잘 활용할 수 있게 되었습니다. React에서 사용할 수 있는 CSS-in-JS 라이브러리와 상태 관리 라이브러리인 Redux, React Query, Recoil 등을 학습하며 React에 대한 전문성을 키웠습니다.
이후 삼성청년SW아카데미를 통해 Spring, Vue.js 등 다양한 프레임워크와 기술을 배우게 되었습니다. 이를 통해 기술 습득 능력을 키웠고, 웹 서비스를 설계하는 방법 및 아키텍처에 대해서도 더 깊게 배울 수 있었습니다. 특히, 삼성청년SW아카데미에서 진행한 프로젝트에서는 Spring과 Vue.js를 활용하여 최우수상을 수상한 경험이 있습니다. 이 과정에서 웹 서비스 개발의 전반적인 흐름과 아키텍처를 깊이 있게 이해하게 되었습니다.
이 과정에서 저는 끊임없이 변화하는 웹 생태계를 쫓기 위해서는 기본을 탄탄히 해야겠다고 생각했습니다. 단순히 최신 기술을 쫓는 '프레임워크 종속적인 개발자'가 되지 않도록 프론트엔드의 기본이 되는 자바스크립트를 깊게 파고들었습니다. '모던 자바스크립트 DeepDive' 북스터디를 진행하며 클로저, 프로토타입 등 깊이 있는 자바스크립트의 기본기를 다졌습니다.
이후 다양한 프로젝트에 React.js, Vue.js, jQuery, Next.js, Vite, Gatsby 등 여러 기술을 적용해보며 각 기술의 장단점 및 사용법을 익혔고, 어떤 프레임워크나 라이브러리든 사용할 수 있다는 자신감을 갖게 되었습니다.
소통 역량을 강화하기 위해 동아리 '멋쟁이사자처럼'에서 3년간 활동하며 기획, 디자인 등 다양한 직군과 협업하는 방법을 배웠습니다. 다수의 해커톤을 통해 개발자들만 아는 언어가 아닌 모두가 이해할 수 있는 언어로 소통하는 방법을 익혔습니다. 협업을 원활하게 하기 위해 슬랙, 노션, 게더타운 등 다양한 협업 도구를 사용해 문서를 만들고 소통했으며, Git을 통해 이슈를 관리하고 브랜치 전략을 수립하여 원활한 프로젝트 진행이 가능하도록 했습니다. 또한, 대학 연합 해커톤 참여 시 Github Project를 활용해 개인 작업 사항을 수시로 공유하였고 Pull Request를 통한 코드 리뷰를 통해 오류를 줄이고 효율적인 개발이 가능하게 했습니다.
직무 선택의 기준과 가치관
직무를 선택하며 가장 중요한 기준은 '성취감과 자기효능감을 느낄 수 있는가?' 였습니다. 개발자로서의 삶은 끊임없는 문제 해결과 새로운 기술 습득을 요구하며, 이러한 과정에서 느낄 수 있는 성취감은 매우 중요합니다. 또한, 내가 기여한 부분이 실제로 프로젝트나 제품에 긍정적인 영향을 미치는 것을 체감할 때, 자기효능감을 느낄 수 있습니다. 이러한 경험은 저에게 큰 동기부여가 되며, 더 나아가 성장의 원동력이 됩니다.
제가 바라는 직장은 저에게 성장의 기회를 부여하고 도전할 수 있는 환경을 제공하는 곳입니다. 지속적으로 새로운 기술과 트렌드를 익히고, 더 나은 해결책을 모색하며, 나 자신을 발전시킬 수 있는 곳이 저의 이상적인 직장입니다. 특히, 동료들과 함께 공통된 목표를 향해 협력하고, 도전의식과 목표의식을 공유하며 노력할 수 있는 환경이 중요합니다. 이러한 환경에서 저는 팀의 일원으로서 최선을 다하고, 함께 성과를 이루어 나가고 싶습니다.
저는 스타트업에서 현장실습생으로 근무하며 새로 출시하는 서비스의 프론트엔드 환경 구축을 담당했습니다. 당시 처음으로 React.js를 사용하게 되었고, 도전적인 마음으로 이 기술을 익히고자 했습니다. 먼저 공식 문서를 빠짐없이 읽고 기초적인 부분을 모두 학습했습니다. 디렉토리 구조, 라우팅 관리, 렌더링 등을 중점적으로 익혀 회사의 새로운 프로젝트 환경을 설정하며 회사의 표준 개발 환경을 구축하였습니다.
이러한 과정에서 기술을 학습하고 이를 적용하면서 도전을 통해 개발 환경을 구축할 수 있다는 자신감을 얻게 되었습니다. 이 경험을 통해 끝없이 도전하고 성장할 수 있는 환경에서 필요한 능력을 발휘하여 요구사항을 해결해 낼 수 있는 개발자가 되는 것을 목표로 삼게 되었습니다.
또한, 회사 내에서 제가 추구하고자 하는 또 하나의 중요한 가치는 '신뢰'입니다. 믿고 일을 맡길 수 있는 팀원이자 신입사원의 질문에 자신 있게 대답할 수 있는 사수로서 자리하고 싶습니다.
대학 입학처의 근로장학생으로 3년간 근무한 경험이 있습니다. 입학 업무가 워낙 엄중한 자리이다 보니, 직원들을 보조하는 근로장학생이지만 입학 상담이나 입시고사 보조 등의 업무에서 맡은 일을 완벽히 수행해야 했습니다. 근무 초반에는 모르는 점이 많았지만 3년 차가 되었을 때는 일을 맡길 때 직원들이 가장 먼저 불러주시곤 하였습니다. 근로장학생들이 수행해야 하는 업무 및 입학 안내에 관련된 사항을 매뉴얼화 하여 후배들에게 전달하였고, 체계를 만들어나가기도 하였습니다. 3년간 성실히 근무하며 조직을 위해 노력함을 인정받아 졸업 시 공로상을 수상하기도 했습니다.
근로장학생 활동을 통해 상사에게 신뢰받는 경험을 겪었고, 조직 구성원으로서 내 가치를 인정받는 기쁨을 알게 되었습니다. 이 경험을 통해 이후 회사에 입사해서도 상사가 신뢰할 수 있는 팀원으로서 맡은 바 임무를 수행할 수 있는 사람이 되기 위해 모든 일에 성실히 임하고 있습니다.
대외활동
삼성청년SW아카데미 1학기 프로젝트 최우수상
삼성전자
공공데이터를 활용한 실거래가 조회 지도 서비스의 프론트엔드를 담당하였습니다.
Vue.js의 기반으로 실거래가 데이터 조회, 연동, 네이버맵 지도 서비스를 구현하였습니다.
멋쟁이사자처럼 국민대
국민대학교, 멋쟁이사자처럼
2021년부터 2023년까지 약 3년간 부원 및 운영진으로 활동했습니다.
운영진으로 신입부원 대상 웹 기본(HTML, CSS, JS, Django) 교육 세션 진행
연합 해커톤 및 아이디어톤 참여 · 운영
컴퓨터프로그래밍I 조교
국민대학교
국민대학교 신입생 대상 Python, matplot, numpy 교육 강의 조교로 강의자료 제작 보조 및 수강생 질의응답 수행