main: 배포 코드를 관리하는 브랜치입니다.dev: 테스트 및 개별 기능 구현이 완료된 코드를 관리하는 브랜치입니다.feature/xxx: xxx기능을 위한 코드를 관리하는 브랜치입니다.feature/init: 초기 프로젝트 설정 및 eslint를 설정하였습니다.feature/search: 상단 검색 버튼을 개발하였습니다.feature/LNB: 좌측 네비게이션을 개발하였습니다.feature/billboard: 상단 이미지 슬라이더를 개발하였습니다.feature/global-banner: 우측 하단 아이콘을 개발하였습니다.feature/data: API에 사용되는 이미지, response JS function 및 json을 개발하였습니다.
| Method | URL | Response |
|---|---|---|
| GET | https://flamboyant-lewin-e99fd4.netlify.app/.netlify/functions/main | JSON |
| GET | https://flamboyant-lewin-e99fd4.netlify.app/.netlify/functions/search | String |
예제 진행을 위해 검색 요청은 약 2초 뒤에 응답됩니다!
| Parameter | Type | URL | Required | Description |
|---|---|---|---|---|
| apiKey | String | - | Y | 인증 키 |
| requestName | String | main | Y | 요청할 데이터 이름 |
| searchText | String | search | Y | 검색어 |
| Name | Description |
|---|---|
| navDrawers | 네비게이션 메뉴 목록 |
| rankings | 실시간 쇼핑 검색어 목록 (1~20위) |
| billboards | 빌보드 슬라이드(Swiper) 제품 목록 (12개) |
| directs | 바로가기 메뉴 목록 (쇼킹딜~사업자전용몰) |
| banner | 전역 우하단 고정 배너 내용 |
| hotFocus | 시선집중 할인 제품 목록 (6개) |
- Parcel 번들러를 통해 Vue.js 프로젝트를 구성할 수 있습니다.
- CSS 공급 업체 접두사를 자동으로 생성할 수 있습니다.(Autoprefixer)
- SCSS(CSS Preprocessor)로 더 쉽고 빠르게 스타일을 작성하고 관리할 수 있습니다.
- Vue SFC(싱글 파일 컴포넌트) 스타일을 정의해, 협업을 위한 코드 품질을 향상시킬 수 있습니다.(ESLint)
- Vue.js 플러그인을 생성하고 적용할 수 있습니다.
- 11번가 커스텀 API를 요청하고, 실제 쇼핑 데이터를 응답받아 처리할 수 있습니다.(Axios.js)
- Global Navigation을 구성하고 디테일한 동작을 제어할 수 있습니다.
- 중앙 집중식 데이터를 처리하고 네임스페이스를 관리할 수 있습니다.(Vuex)
- 다양한 종류의 슬라이드 효과를 개발할 수 있습니다.(Swiper.js)
- 간단한 수준의 날짜 정보를 처리할 수 있습니다.(Day.js)
- Image Sprite 방식을 이용하여 이미지 요청 횟수를 줄일 수 있습니다.
- 페이지의 각 섹션(Section)의 내용을 Lazy Loading할 수 있습니다.(Intersection Observer)
- Vue.js
- Vuex(Store)
- 11st API(Custom)
- Parcel Bundler(HMR)
- SCSS
- Babel
- ESLint
- PostCSS
- Autoprefixer
- Axios
- Dayjs
- Lodash
- Swiper
| Require | Description |
|---|---|
| Git | We follow the GitHub Flow |
| Node.js | 10.10 LTS or above |
| Npm | Recommend stable version |
Install project
$ npm install
Build project
$ npm run build
Start project
$ npm run dev