지금 로켓펀치에 무료 가입하고 더 많은 정보를 접해보세요! 무료가입

김지수

5
Front-end Developer @숨고
react-native, 프론트엔드, Front-end에 관심
주요 경력 : 숨고 
프론트엔드 기술은 지속적으로 발전하고 있습니다. 저는 인터넷 서비스를 구축하는데 있어 다른 누구보다 먼저 좋은 답을 제시하고 싶었습니다. ‘이 아이디어 어떻게 냈어요?’에 대해 누가 물어도 먼저 답을 제시할 수 있도록 준비하는 것이 요즘 제 일상입니다.
김지수님이 새로운 경력을 추가하였습니다.
Front-end Developer @숨고
김지수님이 참여한 프로젝트를 공유하였습니다.
Front-end Developer @숨고
천언더 관리자페이지
천언더

2018년 3월 - 2018년 3월

리뉴얼된 웹서비스의 관리자페이지를 개발중에 있습니다.

1. 매물관리
- 매물 상태값 변경, 매물 수정 및 삭제
- 검색
- 매물 상태별 이미지 필터링 조건부 렌더링

2. 게시물관리
- 공지사항, FAQ, 배너, 이벤트, 광고, 모아보기 추가 / 수정 및 삭제

3. 회원관리
- 회원목록
- 회원 탈퇴 및 블랙 처리
- 회원
더 보기 리뉴얼된 웹서비스의 관리자페이지를 개발중에 있습니다.

1. 매물관리
- 매물 상태값 변경, 매물 수정 및 삭제
- 검색
- 매물 상태별 이미지 필터링 조건부 렌더링

2. 게시물관리
- 공지사항, FAQ, 배너, 이벤트, 광고, 모아보기 추가 / 수정 및 삭제

3. 회원관리
- 회원목록
- 회원 탈퇴 및 블랙 처리
- 회원정보 수정

참여자

김지수
Front-end Developer @숨고
이승연
백엔드 개발자 @에이치앤비라이프
김지수님이 참여한 프로젝트를 공유하였습니다.
Front-end Developer @숨고
천언더 웹서비스
천언더

2017년 12월 - 2018년 2월

현재 상용화 되어있는 천언더 앱을 웹서비스로 이전 및 고도화 작업을 진행중에 있습니다.
HTML5, css3(scss), javascript, Vue.js 를 활용하였고,
반응형 레이아웃을 적용하여 모바일에서도 최적화 하였습니다.

역할 : 프론트엔드 개발자

1차 개발 및 상용화 완료
UI 수정 및 추가 기능 작업 예정

-----메
더 보기 현재 상용화 되어있는 천언더 앱을 웹서비스로 이전 및 고도화 작업을 진행중에 있습니다.
HTML5, css3(scss), javascript, Vue.js 를 활용하였고,
반응형 레이아웃을 적용하여 모바일에서도 최적화 하였습니다.

역할 : 프론트엔드 개발자

1차 개발 및 상용화 완료
UI 수정 및 추가 기능 작업 예정

-----메인페이지-----

- 로그인 후 브라우저 종료하고 재 접속 시 로그인 유지 기능 추가

- 라이브, 테스트 백엔드 요청 URL 동적 변경

- 페이스북 로그인, 구글 로그인 연동

- 일반회원가입 시 휴대폰 인증 연동

- 헤더 영역
1. 로고 클릭 시 ‘/‘ 라우팅으로 이동 및 매물데이터 초기화
2. 검색영역 클릭 시 검색창 드롭다운
1. 검색영역에서 해시태그 클릭 시 선택된 태그로 추가
2. 선택된 태그에서 태그 클릭 시 선택된 태그에서 삭제
3. 로컬 스토리지를 사용하여 최근 검색어 저장 (최대 5개)
- 메인 메뉴(로그인 전)
1. 로그인버튼 클릭 시 로그인 팝업 노출
1. 팝업 이외의 영역 클릭 시 로그인 팝업 닫힘
2. 이메일주소 + 비밀번호를 파라미터로 백엔드에 POST 통신
3. 로그인 성공 시 백엔드에서 토근을 받아와 세션 스토리지에 저장
4. 새로고침 시 로그인 유지되어야함 -> "vuex-persist": "^1.1.0" 사용
2. 회원가입은 페이스북 + 일반 회원가입으로 구분
1. 페이스북 회원가입 : Facebook Login API를 사용하여 연동
- 외부 API 연동이 처음이라 많이 헷갈렸지만, API 문서 및 구글링을 통해 해결
2. 일반 회원가입 : 이름, 전화번호, 이메일, 비밀번호, 비밀번호 확인 검증 (정규표현식)
3. 일반 회원가입 시 휴대폰 번호 인증 시스템 구현
1. 휴대폰번호 입력 후 ‘휴대폰인증’ 버튼 클릭 시 입력한 휴대폰번호를 파라미터로 백엔드에 POST 요청
2. 문자로 받은 인증번호 입력 후 ‘인증’ 버튼 클릭 시 입력한 휴대폰번호 + 인증번호를 파라미터로 백엔드에 POST 요청
- 메인 메뉴(로그인 후)
1. 기존 로그인 버튼이 사용자의 프로필 사진 아이콘으로 변경 Background: url(이미지경로)
2. 등록된 프로필사진 없을 시 기본 프로필 아이콘으로 노출 (Ionicicon 사용)
3. 프로필 아이콘 클릭 시 마이페이지 메뉴 드롭다운
- 메인 캐러셀
1. 모바일 가능해야함 -> 터치를 지원해야한다.
2. "vue-carousel": "^0.6.5" 사용 -> 인디케이터 및 네비게이터 CSS 커스터마이징
- 매물 데이터 무한 스크롤
1. 초기 데이터 27개 로딩
2. 이후 스크롤 위치를 감지해서 최 하단으로 스크롤 시 1초 뒤에 추가로 27개 씩 get 요청
3. "vue-infinite-loading": "^2.2.2" 사용 -> 스피너 CSS 커스터마이징
- 불러온 매물 데이터에 광고영역 랜덤 삽입
1. 광고 (이벤트, 모아보기) 를 매물 데이터에 랜덤으로 삽입
2. 광고는 랜덤으로 나오되 불러오는 매물에 무조건 삽입되어 노출이 되어야 함
3. 한번 노출된 광고를 따로 배열(사용된 광고)에 담아두어 기존에 등록된 광고가 모두 노출되면, 사용된 광고 배열에서 다시 한 번 랜덤으로 삽입
- 탑버튼
1. 클릭 시 페이지 최 상단으로 이동
2. 유저가 어느정도 스크롤을 하였을 때 노출
- 좋아요(매물찜하기) 비동기 처리
1. 좋아요 : 각 매물의 우측 상단 하트모양 버튼 클릭 시 해당 매물의 id 값을 파라미터로 백엔드에 POST 요청 -> CSS 하트 스타일링
2. 좋아요 취소 : 각 매물의 우측 상단 하트모양 버튼 클릭 시 해당 매물의 id 값을 파라미터로 백엔드에 POST 요청 -> CSS 하트 스타일링
3. 이슈
- 서버쪽 좋아요는 정상적으로 처리되지만, 클라이언트단에서 좋아요 처리가 되지 않음 -> 기존에 받아왔던 데이터 에서는 좋아요 처리가 되어있지 않기 때문
- POST 요청 후 데이터를 다시 받아와서 기존의 데이터와 대체 하려고 했으나, 우선 보류
- 각 매물의 is_like 라는 데이터를 false 값으로 초기화 해둠
- 좋아요 / 좋아요 취소 시 각 매물에 is_like 라는 데이터를 바인딩 해준 후, 좋아요 / 좋아요 취소 시 해당 DOM 객체의 클래스를 동적으로 바인딩하여, CSS 하트 스타일링함
(:class=“{‘active’: is_like}”)
- 또한, 초기에 데이터 로딩 시 해당 매물이 내가 좋아요를 클릭 한 매물이라면 is_like를 true로 할당.
- 그러나 리스트 페이지에서 좋아요 클릭 후 해당 매물의 상세페이지로 이동 하면 상세페이지 좋아요는 비동기로 처리되어있지 않음…
- 유저가 좋아요 / 좋아요 취소를 해당 매물의 id 값을 하나의 favorite_list, unfavorite_list 배열에 저장해 둠.
- 메인페이지 상세페이지 둘 다 created 시점에서 favorite_list, unfavorite_list 요소를 순환하면서 현재 불러오는 데이터의 id 값이 favorite_list, unfavorite_list 의 요소의 값과 일치하면 해당 매물의 is_like 를 true로 할당하게 함.
- 나중에 알게된건데 이러한 방식을 인스타그램에서도 사용하고 있어서 놀랬음. 물론 코드의 퀄리티는 많이 다르겠지만…ㅎ…
- 좋아요 클릭 시 POST 요청으로 받아오는 response 데이터가 따로 있다면 response 데이터를 좋아요 클릭 한 데이터로 대체 해 버리면 훨씬 수월하지 않을까 생각함

- 이슈
1. 메인페이지에서 상세페이지 이동 후 뒤로가기 버튼 클릭 시 스크롤이 항상 최 상단으로 이동하여 기존에 불러왔던 데이터가 초기화 되는 현상이 발생함
2. 상세페이지 이동하기 전 메인페이지에서의 스크롤 위치를 기억 해 두는것이 필요하다 판단
3. "vue-scroll-behavior" 를 사용하여 메인페이지의 스크롤을 기억 해 두는것으로 해결
4. "vue-scroll-behavior" 는 옵션으로 ignore 값을 추가 할 수 있는데 ignore에 정규표현식을 이용한 문자열의 배열로 페이지가 항상 최 상단에 위치해야하는
페이지의 라우팅 주소를 적어놓으면 해당 페이지는 스크롤을 기억하지 않고 페이지 접근 시 항상 최 상단으로 스크롤이 이동하게 된다.

-----상세페이지-----

- 이미지 캐러셀 영역
1. "vue-carousel" 사용
2. 인디케이터를 커스터마이싱 하여 등록된 전체 이미지를 각각 하나의 인디케이터의 backgounr image 로 설정함
- 사고이력 있을때, 없을때 렌더링 처리
- 원부조회 가능, 불가능 렌더링 처리
- 저당유무 있음, 없음 렌더링 처리
- 소요권 이전 없음, 횟수 렌더링 처리
- 옵션 유무 렌더링 처리
- google-maps API 연동하여 차량 위치 google-map에 표시
- 월납입금 자동계산 후 렌더링 처리
- 비슷한 매물 렌더링 (최대 9개) : "vue-carousel" 사용
- 예약신청 영역
1. 예약신청 영역 페이지 스크롤 시 따라다니게 처리 (like airbnb…..)
2. 페이지의 스크롤 위치와 상단 이미지 캐러셀 영역의 높이값으로 현재 유저가 보고있는 페이지의 위치를 계산한 후 position: fixed 속성을 줌.
3. 예약가능한 날짜 없을 때, 있을 때 렌더링 처리
- 수정 / 삭제 버튼
1. 해당 매물을 등록한 유저의 id 값과, 현재 로그인처리 되어있는 user의 id 값을 비교하여 같을 경우 수정 / 삭제 버튼 렌더링

-----차량등록 페이지-----

- created 훅에서 제조사, 옵션, 태그, 색상, 변속기 get 요청 후 렌더링
- 제조사 선택 시 해당 제조사의 id 값으로 모델 POST 요청 후 렌더링
- 모델 선택 시 해당 모델의 id 값으로 세부모델 POST 요청 후 렌더링
- 세부모델 선택 시 해당 세부모델의 id 값으로 등급 POST 요청 후 렌더링
- 등급 선택 시 해당 등급의 id 값으로 세부등급, 배기량, 연료, 해당 등급의 옵션 POST 요청 후 렌더링
- 해당 긍급의 옵션을 받아온 후, 전체 옵션리스트와 비교하여 해당 옵션이 있을 때 has-options 처리하여 렌더링
- 주행거리 입력시 autoComma 함수를 사용하여 자동으로 , 처리하여 렌더링
- 판매가격 입력시 autoComma 함수를 사용하여 자동으로 , 처리하여 렌더링
- 사진등록
1. 사진등록 시 7개는 필수값이고, + 버튼 클릭 시 사진을 추가적으로 등록 할 수 있는 영역 생성됨
2. 등록된 사진을 삭제하고 싶을때는 우측 상단의 X 버튼 클릭
- 차량위치
1. created 훅에서 google-maps 를 활용하여 현재 사용자의 위치 받아온 후 렌더링
2. google-maps Autocomplete 활용하여 사용자가 위치를 검색 후 선택했을 때 해당되는 lat,lon 받아서 google-map에 렌더링
- 판매자 정보
1. 현재 로그인한 유저의 이름과 연락처를 기본값으로 렌더링
2. 우측 상단 직접입력 버튼 클릭 시 이름, 연락처 기본값 빈문자열로 초기화
- 예약가능 날짜 선택
1. "vue-datepicker-local" 사용
2. 사용자가 날짜 선택 시, 우측 선택한 날짜 영역에 추가
3. 선택한 날짜 영역에서 X 버튼 클릭 시 해당 날짜 삭제
- 해시태그
1. 해시 태그 토글 기능

-----고객센터 페이지-----

- created 시점에 공지사항과 자주묻는 질문을 백엔드에 get 요청해서 받아옴
- 받아온 공지사항과 자주묻는 질문중 위에서부터 5개를 짤라내서 고객센터 메인페이지에 노출
- 고객센터 메인페이지에 공지사항 -> 더보기, 자주 묻는 질문 -> 더보기 버튼 클릭 시 공지사항 또는 자주묻는 질문 페이지로 이동
- 공지사항 자주묻는질문의 제목 클릭 시 아코디언 형태로 답변 노출

-----내 정보 페이지-----

- 프로필 사진 등록 및 수정 / 삭제, 이름 수정, 휴대폰번호 수정
- 프로필 사진 등록 및 수정 시 input[type=“file”] 태그에 @change 이벤트를 바인딩하여, 사용자가 파일을 등록 할 때 해당 파일을 프로필 사진 영역의 backgroud image 로 처리 해야한다.
1. 사용자가 이미지 등록 시 File 이라는 object로 생성되기 때문에 이대로 background image 로 설정을 하게되면 안됨
convertPhoto (photo) {
let reader = new FileReader();
reader.readAsDataURL(photo);
reader.onload = () => {
let target = window.document.querySelector('.profile-photo-div');
this.photo_url = reader.result;
target.setAttribute('style', `background-image: url(${this.photo_url})`);
}
}
2. 그리고 수정이 완료되었을 때, 헤더영역의 프로필 이미지 또한 함께 변경되어야함.
3. 수정 완료 시, 헤더 영역의 프로필 아이콘 태그의 backgroud image 변경된 이미지로 변경해 줌.
4. 그런데 헤더영역과 내정보 수정 영역은 컴포넌트가 달라서 헤더영역이 내정보가 수정되었는지 알 수가 없음. 새로고침 또는, 라우트가 변경되면 기존의 이미지로 계속 노출됨.
5. 헤더영역에서 감시자 속성 watch 를 사용하여 vuex의 getMyProfile.photo 라는 데이터를 감시하게 함.
6. 만약 getMyProfile.photo 가 변경 되었다면 setUserPhoto 함수를 실행하여 헤더영역에 불러오는 데이터의 photo 값을 변경된 값으로 대체.

- 기존의 이름, 휴대폰번호를 그대로 렌더링하고, 수정 버튼 클릭 시 input 영역의 value 값을 기존의 이름, 휴대폰 번호로 할당.
- 수정 버튼 클릭 후 취소 버튼 클릭 시 input 영역의 value 값을 기존의 이름, 휴대폰 번호로 할당.
- 하단의 수정하기 버튼 클릭 시 프로필사진, 이름, 휴대폰번호를 파라미터로 PATCH 요청
- 완료 후 response 데이터를 기존의 데이터로 대체
- 이슈
1. 등록된 프로필 사진이 없을 때 null 값 받아옴
2. 등록된 프로필 사진이 있을 때 url을 문자열로 받아옴
3. 프로필 사진 등록 및 수정하면 해당 데이터의 값은 File 이라는 object임
4. 파일을 전송해야 하는터라 formdata 형태로 통신을 해야하는데, formdata 에서 파라미터의 값이 null 일 경우 통신 불가
5. 프로필사진의 값이 null 일 때 빈 문자열로 초기화 하고,
6. 프로필사진의 값의 데이터 유형이 object 또는 빈 문자열 일때만 formdata 에 append 하게 함.

-----차량검색 페이지-----

- 제조사, 모델, 세부모델, 등급, 차종, 연료, 가격대, 연식, 주행거리, 변속기, 색상, 옵션, 지역, 태그, 차량번호로 차량을 조회함
- 아무것도 선택 하지 않고 검색하기 눌렀을 시 필터링 되지 않은 데이터 get 요청
- 페이지 접근 시 created 훅에서 제조사, 차종, 연료, 변속기, 색상, 옵션, 태그를 get요청으로 받아옴
- 제조사 선택 시 해당 제조사의 id 값을 파라미터로 백엔드에 해당 제조사에 해당되는 모델 POST 요청
- 모델 선택 시 해당 모델의 id 값을 파라미터로 백엔드에 해당 모델에 해당되는 세부모델 POST 요청
- 세부모델 선택 시 해당 세부모델의 id 값을 파라니터로 백엔드에 해당 세부모델에 해당되는 등급 POST 요청
- 가격 / 연식 / 주행거리는 모바일 호환가능한 슬라이더 필요 -> "vue-slider-component": "^2.5.0" 사용 -> 스타일링 커스터마이징
- 검색하기 버튼 클릭 시 유저가 선택한 검색 조건을 기준으로 파라미터 재정의 후 재정의된 파라미터를 따로 데이터에 할당함
- 데이터에 할당된 파라미터로 백엔드에 데이터 get 요청 (초기 데이터 27개 로딩)
- 이후 스크롤 위치를 감지해서 최 하단으로 스크롤 시 1초 뒤에 데이터에 할당된 파라미터로 백엔드에 추가로 27개 씩 데이터 get 요청
- “vue-infinite-loading": "^2.2.2" 사용 -> 스피너 CSS 커스터마이징
- 더이상 검색되는 데이터가 없을 시 스크롤 이벤트 삭제 (window.removeEventListener)
- 탑버튼
1. 클릭 시 페이지 최 상단으로 이동
2. 유저가 어느정도 스크롤을 하였을 때 노출
- 검색 초기화 클릭 시 검색된 매물 리스트 초기화 및 데이터에 할당된 파라미터 빈 문자열로 초기화
- 이슈
1. “vue-infinite-loading" 사용 시 페이지를 모바일 크기로 줄였을 때 슬라이더가 비정상적으로 작동..
2. 모바일 크기로 줄이고 나서 새로고침을 한 번 해주면 정상적으로 작동..
3. 모바일로 페이지가 전환될 때 “vue-infinite-loading" 컴포넌트를 강제로 다시 렌더링 하게 설정(vm.$forceUpdate) -> 실패
4. 슬라이더의 초기값이 PC와 모바일일 때 동일하게 설정해 두었으나, 내부적으로 무언가 버그가 있는듯함..
5. created 될 때 슬라이더의 초기값을 다시 한 번 설정 해 줌. -> 정상작동…

참여자

김지수
Front-end Developer @숨고
이승연
백엔드 개발자 @에이치앤비라이프
김지수님이 새로운 경력을 추가하였습니다.
Front-end Developer @숨고
더 보기