미리보기
기본 정보
'9 TO 6’를 넘어 스스로 채찍질하며 성장해온, 도전 정신과 긍정적인 태도로 어떤 일이든 끝까지 해내는 프론트엔드 개발자입니다. 5년간 모델 활동을 통해 최종적인 목표를 이룬 경험이 있으며, 현재는 삼성 청년 소프트웨어 아카데미를 수료하고 지속적으로 성장하기 위해 노력하고 있습니다.
교육
삼성 청년 소프트웨어 아카데미
사설 교육 | 웹개발
2023.01. ~ 2023.12. | 졸업
중앙대학교
대학교(학사) | 화학신소재공학부
2013.03. ~ 2021.08. | 졸업
자격증
정보 처리 기사
합격 | 한국 산업 인력 공단
2024.06.
SQLD (SQL 개발자)
합격 | 한국 데이터 산업 진흥원
2024.06.
기술 스택
TypeScript, JavaScript, React, Next.js, HTML/CSS, Figma, GitHub, Redux, REST API, Python, SQL, MariaDB, gitlab, AWS
프로젝트
꿈틀
삼성 청년 소프트웨어 아카데미
2023.08. ~ 2023.10.
“꿈틀”
꿈 해몽과 목표를 향해 달려가는 동기부여 서비스
인간의 무의식이 반영된 자면서 꾼 꿈을 해몽 사이트의 데이터를 기반으로 해석하여 꿈에 대한 해몽과 카테고리를 제공합니다. 꿈을 서로 사고 팔 수 있고 자면서 꾼 꿈을 기반으로 나의 목표(낮의 꿈)을 위해 어떤 챌린지를 하면 좋을지 추천해주고 유저들끼리 동기부여를 하도록 도와주는 서비스입니다.
기간 : 2023.08.28 ~ 2023.10.06
인원 : Frontend 3명 , Backend 3명
기여도 : 프론트엔드 중 40%
👨💻 내가 기여한 부분 - 프론트엔드
챌린지 페이지 개발
챌린지 생성,조회 / 인증 사진,글 등록 / 추천 챌린지 / 타임캡슐 등록, 조회 / 유저 낮 프로필 / 챌린지 검색 페이지 개발
아토믹 디자인 패턴을 기반으로 하여 가장 작은 단위부터 쌓아 올리며 개발
axios 기능 모듈화
유저 인증이 필요한 것과 필요 없는 것 그리고 헤더 타입에 따라 나누어 모듈화
프론트엔드 팀원들이 axios를 사용하기 편하도록 개발
이미지 미리보기 / img 태그 클릭을 통한 이미지 input 기능 개발
useRef를 통해 input 태그 커스텀
파일의 url을 추출하여 이미지 미리보기 구현
Dropdown 컴포넌트 개발
유저들의 입력사항을 제한하고 페이지 분위기를 해치지 않기 위해 dropdown 개발
낮과 밤 테마 변경에 따른 배경 설정
router url 링크의 pathname을 통해 현재 페이지의 테마를 확인하는 방식으로 background 이미지를 설정
배경화면 이미지 로딩이 너무 오래 걸리는 문제 ⇒ png 파일을 jpg파일로 변환 시켜 로딩에 걸리는 시간을 352ms 에서 39ms로 단축 시켜서 불편함이 없도록 함
⌨사용 기술
TypeScript
- Javascript를 사용할 때 의도치 않은 결과값이 나오는 경우를 이전 프로젝트에서 경험했습니다. 그리하여 TypeScript가 필수임을 알게 되어 사용하게 되었습니다.React
Redux
- 현재 현업에서 가장 많이 쓰이고 있는 기술들로 프론트엔드 개발을 팀 프로젝트로 처음 접하는 저희 팀에게 정보 서칭이 수월할 것으로 생각 되어 채택했습니다.Styled-Component
- 태그 자체를 커스텀해서 사용하는 방식으로 DOM 코드 가독성을 좋게 만들 수 있기에 사용했습니다.
💻구현 화면 ( 시연 PNG 이미지 링크 )
TING
삼성 청년 소프트웨어 아카데미
2023.07. ~ 2023.08.
“TING”
어색하지 않은 스피드 화상 소개팅 서비스입니다.
5분 안에 빠르게 끝나고, 10개의 질문 카드의 주제를 통해 대화를 주고 받고 점수를 매기며 진행하는 게임 같은 화상 소개팅입니다.
기간 : 2023.07.10 ~ 2023.08.18, 6주
인원 : Frontend 3명, Backend 3명
기여도 : 프론트엔드 중 40%
👨💻 내가 기여한 부분 - 프론트엔드
영상 소개팅 페이지 개발
OpenVidu 라이브러리를 사용하여 실시간 영상 소통 개발
점수를 선택했을 때 상대방에게 기계음 전달
setTimeout을 통한 타이머 구현
Session의 on 과 signal 함수를 활용하여 영상 소통하면서도 추가적인 데이터 상대방에게 전달
Redux를 통한 상태와 데이터 관리
Redux에서 소개팅에서 전달되는 데이터 관리
유저가 현재 가지고 있는 아이템의 개수, 상태 관리
애니메이션 개발
최종 선택 카드 플립 transform과 rotate를 이용하여 개발
keyframes를 활용한 배경의 물고기 애니메이션 개발
스크럼 회의를 통해 팀원들의 진행 상황 확인
매일 오전 스크럼 회의를 통하여 각자의 진행 상황과 당일의 업무를 확인
매주 스프린트 마감을 하며 부족한 점, 잘한 점, 개선할 점을 도출하여 원활한 소통과 프로젝트 진행
⌨사용 기술
React
Redux
- 현재 현업에서 가장 많이 쓰이고 있는 기술들로 프론트엔드 개발을 팀 프로젝트로 처음 접하는 저희 팀에게 정보 서칭이 수월할 것으로 생각 되어 채택했습니다.JavaScript
- Type에 대한 불편함을 느끼지 못하는데 TypeScript를 사용하는 것 보다 Javascript를 먼저 정확하게 사용해보고자 채택하였습니다.OpenVidu
- 생산성을 위하여 OpenVidu 라이브러리를 활용하여 실시간 영상 소통 개발을 했습니다.
💻구현 화면 ( 시연 이미지 PNG 링크 )
Pops Business Website
팝스 주식회사
2024.04. ~ 진행 중
“Pops Business Website” (~ing)
팝업 이벤트 정보 공유 플랫폼 ‘팝스’ 의 비즈니스 웹사이트
기업들이 가입하여 직접 팝업 스토어 등록과 티켓 등록을 할 수 있도록 하는 웹 사이트입니다.
기간 : 2024.04 ~ 진행중
인원 : Frontend 1명, Backend 1명
기여도 : 프론트엔드 중 100%
👨💻 내가 기여한 부분 - 프론트엔드
로그인/ 회원가입 페이지 개발
정상적인 데이터가 입력되는지 유효성 검증에 집중하여 개발
팝업 스토어 등록 페이지 개발
입력 받는 데이터 값에 따라 선택지가 달라질 수 있도록 드롭다운 컴포넌트 개발
엔터를 통해 입력하는 해시태그 input 컴포넌트 개발
커스텀훅을 통해서 useRef를 사용한 이미지 input 사용하기 편하게 개발
⌨사용 기술
React
- Vue와 React 중에 고민했으나 새로 Vue를 익히기 보다는 제가 익숙한 기술을 쓰는 것이 옳다고 생각했습니다. 또한 후에 개발자가 들어온다하더라도 React 개발자를 채용하기 쉬울 것으로 생각했습니다.Recoil
- Redux의 middeware로 과다한 코드를 줄이면서 상태 관리를 편하게 사용하고, React Query를 사용하기 위해 채택했습니다React Query
- 벡엔드와 소통하는 api들을 따로 나누어 관리하고 훅의 형태로 사용함으로 코드의 유지 보수와 가독성을 향상 시킬 수 있을 것으로 생각되어 채택했습니다.Styled Component
- props 형태로 변수에 의해 바뀌는 형태의 css를 사용하기 위해 사용했습니다.
포트폴리오
자기소개
하고 싶은 일
[ 도전 정신과 성장에 대한 집념으로 ]
프론트엔드 개발자로서 ‘9 TO 6’를 넘어 스스로를 채찍질하며 성장해왔고 어떤 일이든 끝까지 해내는 도전 정신이 있습니다.
삼성 청년 소프트웨어 아카데미에서 숏폼을 기반으로 한 오프라인 영상 소개팅 프로젝트에 프론트엔드 개발자 및 기획자로 참여했습니다. 첫 프로젝트라서 리액트에 대해서도 잘 모르는 상황이었지만 메인기능인 소개팅 기능을 담당하겠다고 도전했던 경험이 있습니다. 할 수 있다는 마음가짐으로 누구보다 오랜 시간을 투자하며 리액트와 오픈비두를 빠르게 학습하여 적용하였고 최종적으로 메인기능을 성공적으로 완성하며 사용자를 받아볼 수 있었습니다. 또한 수백 번의 꼼꼼한 테스트를 통해 서비스를 지속적으로 개선했습니다. 이 경험을 통해 저는 어떤 프로젝트에 투입되더라도 서비스의 품질 향상에 기여할 수 있다는 자신감을 얻게 되었습니다.
이렇듯 저는 담당하게 될 업무가 어떤 어려움이 있더라도 도전하며, 꼼꼼한 개발 능력을 기반으로 사용자가 불편하지 않은 서비스를 이용할 수 있도록 품질 향상에 기여하고 싶습니다. 먼저, 프론트엔드로서 서비스를 지속적으로 제공하기 위해 테스트 도구와 프론트엔드 성능 향상을 위한 방법을 지속적으로 학습해 가겠습니다. 어떤 업데이트 상황에서든 오류가 없이 서비스가 이어질 수 있도록 개발하고 사용자가 로딩으로 불편함 느끼지 않도록 성능 향상에 힘쓰겠습니다.
이에 넘어 가장 중요한 것은 성능을 넘어 고객이 원하는 바를 확실하게 만드는 것입니다. 서비스에 오류가 없다고 하더라도 고객이 원하지 않는 서비스라면 의미가 없다고 생각합니다. 저는 고객들의 기대를 뛰어넘는 서비스를 제공하기 위해 고객들이 필요한 것에 대해 앞서 생각하고, 빠르고 안정성 있게 업데이트를 제공할 수 있는 서비스를 만들어가겠습니다.
직무 강점 및 관련 경험 (교육 이수, 협업 경험, 프로젝트 경험, 인턴십, 대/내외활동 등)
[ 사용자에게 좋은 경험을 제공하는 개발자 ]
고객이 불편함을 느끼지 않는 서비스를 제공하는 것이 고객 유치의 핵심이라고 생각하며, 저는 사용자의 편의성을 향상시키는 프론트엔드 개발자로 성장하고자 노력해 왔습니다. 이를 위해 향상 시킨 중요한 역량은 다양한 프로젝트 경험과 더 나은 코드를 작성하려는 열망입니다. 저는 두 가지 역량을 키우기 위해 삼성 청년 SW 아카데미 교육에 참여했습니다.
삼성 청년 SW 아카데미에서 Javascript, Typescript를 기반으로 한 React로 웹 개발 방법을 습득하며 프론트엔드의 기초 역량을 쌓았습니다. 이를 바탕으로 세 번의 프로젝트를 수행하며 기획 및 설계 역량을 강화하고, 개발자들과 협업하는 능력을 길렀습니다. 프로젝트를 진행하면서 매번 부족한 부분을 회고하고, 다음 프로젝트를 시작할 때마다 더 나은 기술을 접목시키며 코드 퀄리티를 높이기 위해 노력했습니다. 그 결과, 아토믹 디자인 패턴, 스타일드 컴포넌트, React hooks, React query 등을 활용하여 더 나은 코드를 작성할 수 있었습니다.
이러한 경험을 바탕으로, 앞으로도 사용자의 편의성을 최우선으로 고려하며 지속적으로 발전하는 프론트엔드 개발자가 되기 위해 노력할 것입니다.
[ 코드의 동작을 분석하는 개발자 ]
저는 어려운 기능도 반드시 구현하는 능력을 가지고 있습니다. 삼성 청년 SW 아카데미에서 숏폼 기반 소개팅 프로젝트를 개발할 당시, 사용자가 선택한 점수가 실시간으로 서로에게 전달되는 기능이 필요했습니다. 첫 프로젝트에 아직 Javasciprt와 WebRTC에 익숙하지 않아 구현에 어려움을 겪었습니다. 하지만 이를 해결하기 위해 공식문서와 예제 코드를 철저히 분석했습니다. 그 결과, “on” 함수를 통해 실시간 정보를 전달할 수 있다는 것을 알게 되었고, 이를 바탕으로 메인 기능이었던 소개팅 기능 안에 전자음을 포함한 점수 전달 기능을 완성도 있게 구현할 수 있었습니다. 이 과정에서 공식문서와 기존 코드를 이해하는 것이 중요하다는 것을 배울 수 있었습니다.
이러한 경험을 토대 삼아, 앞으로도 공식 문서와 기존에 짜여온 코드를 철저히 분석하여 현재 서비스의 기능들을 명확하게 이해하고, 어떤 개발 업무가 주어지더라도 성공적으로 구현하는 개발자가 되어 최고의 서비스를 제공하기 위해 노력할 것입니다.
[ 팀원들에게 열정과 에너지를 심어주는 사람 ]
저는 모두가 힘든 아침에 파이팅을 먼저 외치며 시작해 왔습니다. 이때까지 프로젝트를 함께 진행해 온 모든 팀원들에게 가장 열심히 하며 긍정적 에너지를 준다는 이야기를 들었습니다. 제가 프로젝트 때 행동 형태를 생각해 보면, 저는 한번 앉으면 그 자리에서 4시간은 기본으로 앉아있었고, 이 열심히 하는 모습은 팀원들에게 자극이 되었는지 모두가 최선을 다하게 되었습니다. 또한 모두가 지쳐가는 프로젝트 5주 차를 넘어가는 상황에 아침마다 ‘아자아자, 할 수 있다’를 외치며 모두의 힘을 끌어올리며 웃음을 주었습니다. 이것은 다 같이 끝까지 최선을 다할 수 있도록 도와주었고, 아직까지도 서로 좋은 동료로 관계를 이어가고 있습니다.
[ 주인의식을 가지고 있는 개발자 ]
‘주인 의식에서 나오는 열정’은 저를 움직이는 원동력입니다. 주인이라는 생각으로 업무에 임하면 최고의 결과물을 도출하기 위해 노력하게 됩니다. 이러한 모습에서 나오는 열정은 제가 온 힘을 다해 달릴 수 있도록 만들어줍니다.
지인의 스타트업 비즈니스 웹사이트 제작을 도와주며 로그인과 회원가입을 담당한 경험이 있습니다. 전반적인 UX는 구성이 되어있었지만 상세한 부분이 부족했었습니다. 유저가 회원 가입 시, 내용 입력 없이 가입 버튼을 눌렀을 때의 에러 화면이 없는 등 허술한 부분이 많아 웹사이트의 기능을 하기가 어려웠습니다. 만약 주인의식이 부족한 사람이었다면 현재 있는 것까지만 구현하고 지나갔었겠지만 저는 그렇지 않았습니다. 저는 위의 내용들을 정리하여 기획자에게 전달하여 추가 작업을 진행하도록 하였습니다. 결과물을 확인한 지인은 저를 믿고 다음 부분을 진행할 수 있어 시간을 아낄 수 있었다는 피드백을 들을 수 있었습니다.
외국어
영어
일상 회화 가능