미리보기
기본 정보
1분이라도 더 앉아 있을 수 있는 개발자가 유리하다, 엉덩이가 무거운 프론트엔드 개발자 조정현입니다.
자기소개
함께 성장하는 것의 가치
멋쟁이사자처럼 프론트엔드스쿨을 수강하기 이전에 공부하던 것을 바탕으로, 수업 시간 중 동기들의 질문이 올라오면 성심성의껏 설명해주곤 했습니다. 질문들이 ‘진도에 방해된다’, ‘너무 기초적인 질문이다’라는 의견도 있었지만, 그렇다고해서 나 혼자만 이해하고, 잘하니까 넘기기보단 다른 사람의 성장을 돕고 그로 인해 나의 성장도 이루는 과정이 중요하다고 생각했습니다. 그러다 보니 자연스레 2번의 프로젝트 조장과 1번의 회고조 조장을 맡게 되었고, 고충이 있으면 함께 나누고, 어려운 것이 있으면 함께 풀어나가면서 함께 성장하는 것의 가치를 더욱 깨닫게 되었습니다.
그래서 왜?
왜?라는 물음을 항상 달고 삽니다. 그래서 이게 왜? 실행되는 거지, 이게 왜? 안 되는 거지 하며, 그 근원을 찾아가는 것을 즐깁니다. 그 왜?를 이해했을 때 아~!! 하고 깨닫는 순간을 좋아합니다. 이렇게 알게 된 개발 지식은 노션에 정리하여 나중에 다시 찾아볼 수 있는 저만의 오답 노트를 만들어둡니다. 이런 특성은 비단 개발뿐만 아니라 삶의 전반적인 상황에도 적용되는데, 특히나 좋아하는 분야는 마구 파고드는 오타쿠 기질을 가지고 있습니다. 덕분에 어떤 일이라도 기존에 쌓여있던 지식 덕에 적응이 빠르고, 모르는 분야더라도 지식과 연관시켜 관련 정보를 찾아내는 것에 능합니다.
웹디자인 경험으로 높은 업무 이해도
워드프레스를 사용해 홈페이지를 구축하는 업체에서 웹디자인 업무를 경험한 이력이 있습니다. 당시 작은 규모의 회사여서 웹디자인과 사이트 구축을 함께해야 했는데, 이 과정에서 워드프레스 대시보드에선 편집할 수 없는 기능들을 구현하기 위해 직접 코드를 수정하곤 했습니다. 이때부터 프론트엔드 개발에 대해 관심을 가지게 됐습니다. 이후 리메인의 웹프로페셔널 강의를 수강하면서 감으로만 하는 디자인이 아닌 웹디자인에 대한 전반적인 시스템에 대해 알게 되었고, 이러한 경험으로 협업 때에 보다 원활한 소통을 이룰 수 있습니다.
사용자의 입장에서 생각하는 개발자
리메인의 웹프로페셔널 과정 수강 당시 처음 접한 유저 페르소나는 서비스를 구축할 때 고객의 입장에서 생각할 수 있게 해주는 좋은 수단이었습니다. 앞선 웹디자인 업무 경험과 교육 경험으로 개발할 때도 항상 사용자의 입장에서 생각하려고 노력합니다. 사용자는 웹사이트에 접속 후 단 59초만에 서비스에 체류할지 떠날지 평가한다고 합니다. 웹사이트라는 고객과의 비대면 창구를 구축하는 개발자로서, 사용자에게 좋은 경험을 남길 수 있는 서비스를 만들어가고 싶습니다.
기술 스택
TypeScript, Next.js, React, TailwindCSS, styled-components, HTML/CSS, Figma, Firebase, JavaScript
프로젝트
조지주(PickYourPotion)
4인 팀프로젝트(디자인 50%, 개발 25%)
2024.07. ~ 2024.08.
調(고를 조), 持(가질 지), 酒(술 주). 간단한 문답을 통해 나에게 맞는 전통주를 추천받고 이를 구매할 수 있는 이커머스 웹사이트입니다.
배포 주소
https://www.pickyourpotion.store/
GitHub
https://github.com/FRONTENDSCHOOLPLUS2/PickYourPotion
개발일지(노션)
구현 내용
피그마 UI 디자인 시안 제작
나에게 맞는 전통주 찾기
최근 유행하는 문답 테스트 방식을 간단하게 구현하여 사용자의 상황에 맞는 술을 추천해주는 랜딩페이지 제작.
각 선택값에 어울리는 전통주 id를 배열로 관리하고, fetch하여 결과창에 불러옴.
주량, 당도, 상황 등에 맞는 svg 일러스트 제작 후 이를 컴포넌트화. 각각의 path에 커스텀 애니메이션을 적용.
메인페이지
Swiper.js 라이브러리를 커스텀하여 적용
상품 카드 공통 컴포넌트 생성
결제 관련
포트원의 본인인증 API를 이용한 성인인증 구현.
상품 구매시 stateless modal을 이용하여 최초 1회 성인인증을 요구하는 모달창 생성.
본인인증이 완료되면 포트원 서버에 사용자 정보 요청 후 받아온 생년월일을 계산하여 성인 여부를 판단.
성인인증이 완료된 유저는 유저 데이터에
isAdult값을true로 저장해 추가 인증이 필요하지 않게 함.
포트폴리오 사이트
개인
2023.11. ~ 2023.12.
배포 주소
https://zual-portfolio.netlify.app/
GitHub
https://github.com/hardy-is-cat/portfolio
개발일지(노션)
구현내용
와이어 프레임 작성, 피그마 시안 작업
개발자로서의 나와 일반인으로서의 나를 다크모드, 라이트모드로 나누어 전환할 수 있게 함
Recoil로 다크모드, 라이트모드, 모달의 전역 상태를 만들어 관리
Intersection Observer를 이용한 커스텀훅을 만들어 애니메이션을 주고싶은 요소에 간단하게 설정
Styled-Components의 DefaultTheme에 미디어쿼리 변수를 설정해 breakpoint를 일괄적으로 관리
moviedog
2인 팀프로젝트(디자인 100%, 개발 65%)
2023.09. ~ 2023.11.
TMDB 영화정보 API를 이용한 영화정보 조회 및 리뷰 공유 반응형 웹사이트입니다.
배포 주소
https://main.drpe221ejddia.amplifyapp.com/
GitHub
https://github.com/movie-dog/movie-dog
개발일지(노션)
구현 내용
와이어 프레임 작성, 피그마 시안 작업
메인페이지
Swiper.js 커스터마이징
Swiper.js로 제작한 메인 비주얼과 카드 스와이퍼에 TMBD API에서 불러온 정보와 파이어베이스에 저장한 리뷰 정보를 출력
장르별 영화 카테고리 페이지
장르별로 나뉘어진 영화를 볼 수 있도록 카테고리 형식으로 나눔
페이지네이션 컴포넌트 제작
영화정보 상세페이지
영화의 고유 id를 전달받아 해당 영화의 정보를 랜더링
로그인 여부에 따라 한 줄 평, 찜 기능을 사용할 수 있게 나눔. 로그아웃 상태라면 로그인 알림
한 줄 평 작성시 영화 고유 id를 함께 저장하여, 하단 스와이퍼에 해당 영화의 한 줄 평만 출력
별점을 선택한 후, 한 줄 평을 작성하면 파이어베이스에 저장, 이후 한 줄 평 재작성시 이전 리뷰정보를 불러와 수정 가능
TMDB에서 자체 제공하는 비슷한 영화 스와이퍼 출력
영화 찜하기, 찜삭제 기능 구현
검색 페이지
영화의 제목으로 검색 가능한 기능 구현
CarZip
4인 팀프로젝트(팀리더, 개발 20%)
2023.03. ~ 2023.03.
리액트로 제작한 공공데이터와 카카오맵API를 이용한 공영주차장 정보 공유 웹사이트입니다.
GitHub
https://github.com/LikeLion-FE-Final-Project03/car-zip
팀 내 역할
팀의 조장을 맡아 역할 분배
와이어 프레임 작성, 피그마를 이용한 UI 디자인
주차장 정보 상세보기 페이지
이전 페이지에서 주차장의 고유 ID를 props로 받아와 파이어 베이스에 저장된 주차장 데이터 로드 후 랜더링
즐겨찾기 데이터 베이스를 생성해 주차장 고유 ID와 즐겨찾기 여부, 사용자 UID 저장
Clipboard API 를 이용하여 해당 주차장의 주소 복사
유저의 디바이스 정보를 확인하여 pc와 모바일의 전화 동작을 구분
주차비 사전 계산 페이지
주차장 가격 정보를 받아와 사용자가 시간을 입력하면 예상 주차비를 계산
주차비 정보가 없을 경우 계산 불가 텍스트를 조건부 랜더링
TAING
4인 팀프로젝트(팀리더, 개발 25%)
2023.01. ~ 2023.02.
국내 OTT 서비스인 티빙의 UI를 참고하여 바닐라JS로 제작한 반응형 웹사이트 팀프로젝트입니다.
GitHub
https://github.com/likelion-fe4-js3/taing
팀내 역할
팀의 조장을 맡아 조원들에게 역할 분배, 기술 담당으로 코드 리뷰
프로젝트 초기설정(prettier, eslint, 코드 컨벤션, 커밋컨벤션 설정 등) 및 깃허브 협업 방법 검색 및 공유
swiper.js를 사용해 메인 페이지 슬라이더 구현, Tab키로 각 슬라이드에 접근 가능하게 설정
data.json 파일을 생성해 슬라이더 내부 컨텐츠를 비동기 통신을 통하여 랜더링
슬라이더의 각 컨텐츠에 aria-label 속성을 추가하여 접근성 향상
교육
멋쟁이사자처럼 프론트엔드스쿨 플러스 2기
사설 교육
2024.06. ~ 2024.08.
멋쟁이사자처럼 프론트엔드스쿨 4기
사설 교육
2022.11. ~ 2023.03.
경력
시크릿
비개발
2018.03. ~ 2020.04. (2년 2개월)
생활용품 쇼핑몰 상세페이지 디자인 작업
쇼핑몰 플랫폼 별 CS
스토어 관리
주식회사 스마트사인
비개발
2016.12. ~ 2017.07. (8개월)
워드프레스 기반 홈페이지의 디자인, 구축
고객사 웹페이지 이벤트 배너 디자인
