[미션] Fetch by choisohyun · Pull Request #155 · code-squad/javascript-amazon

choisohyun · 2020-02-26T04:38:27Z

Git page

https://choisohyun.github.io/javascript-amazon-anim/

구현 사항

지난 미션에서 달아주신 코멘트 반영 내용도 포함되어 있습니다.

client

default 값을 세팅하던 setting.js 파일을 main.js로 합치고, 객체 이름을 config로 변경했습니다.
Object.assign을 활용하여 초기값 세팅했습니다.
매직 넘버를 없애기 위해 최대한 상수로 담으려고 했습니다.
DOM API 적용한 html fommating 코드를 template literal 방식으로 변경하였습니다.
main.js => fetch된 데이터 templating 완료 이후에 애니메이션이 적용되야 하기
때문에 클래스 생성도 fetch then을 사용하여 하도록 했습니다.
navigationBar.js & carousel.js => carousel.js로 클래스 역할을 합쳤습니다.
=> navigation 부분과 arrow button 부분으로 나누려고 했지만 사용하는 변수가 일치하는 경우가 많고, slide의 index도 공유해야 하는데, 이에 대한 처리를 하면서 중복 코드가 계속 발생했습니다. 그래서 단일 클래스로 작동하고, 중복 코드를 메소드나 util에 따로 뺄 수 있도록 했습니다.
isMoveFinished를 추가해 연속해서 arrow button 클릭하고 애니메이션이 끝나지 않았을 때까지의 클릭 이벤트가 동작하지 않도록 설정했습니다.
localStorage에 json을 보내는 서버가 연결되어 있을 동안 캐시되도록 main.js에서 설정해 두었습니다.

server

서버를 띄우기 위해 express와 live server 를 사용했습니다.
서버와 클라이언트 부분을 나누고, 두 개의 서버가 띄워져 독립적으로 작동하도록 만들었습니다.
8080번 포트(express): mockData.json 파일을 http://localhost:8080/users 주소로 fetch 요청이 들어올 때 보내주는 역할을 하는 서버
5500번 포트(live server): 클라이언트 단에서 html 파일을 실행하는 용도의 서버

- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함

- 슬라이드의 양 옆 화살표 버튼 클릭 시 다음 화면이 나오는 기능을 구현함 - 상단의 네비게이션 클릭 시 이동은 아직 구현하지 못함 - 마지막 슬라이드에서 다음 버튼을 누르면 첫 번째 슬라이드가 나옴 - 처음 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드가 나옴

- js 코드를 ES6 Classes로 표현하기 위해 변경함 - 기능 추가는 없음

- 각각의 navigation 버튼을 클릭하면 해당 버튼의 index를 얻어와 이동함 - 슬라이드 애니메이션 기능은 아직 추가하지 않음

data.js - mock data를 임의로 배열로 저장함 mockData.js - mock data를 html 파일로 순서대로 추가될 수 있도록 함

- addDummySlide(function) 부드럽게 넘어가는 무한 슬라이드를 구현하기 위해 생성함 slide의 first, last child를 각각 마지막과 처음에 넣어 줌 추후 파일명, 변수명 등 리팩토링 예정임

- index.js -> main.js, navigationBar.js, carousel.js로 클래스 나눔 - slideSetting.js -> 슬라이드 구현에 필요한 요소를 객체로 따로 저장함 - sprinkleData.js -> mockData.js에 배열로 있는 데이터를 뿌려주는 역할을 함 - navigationBar.js와 carousel.js는 다른 클래스이지만 중복되는 코드가 존재함 => 추후 리팩토링 필요

화살표 버튼의 위치가 어색해 width를 100% -> 800px로 변경함

- server와 client를 나눔 - server에는 app.js와 routes가 있음 => 라우터 : express로 index.html과 mockData.json 파일을 띄우고 보내는 역할을 하는 index.js, users.js가 있음 - 애니메이션에 버그가 있음 => 추후 해결 예정

변경 사항 1. server 단에 있던 html 코드 => client로 이동 2. 독립적인 두 서버를 연결해 json file fetch받을 수 있도록 처리 3. fetchData.js에 있던 코드 => main.js로 이동 - fetch된 데이터 templating 완료 이후에 애니메이션이 적용되야 하기 때문에 main으로 이동함 4. navigationBar.js & carousel.js => carouselMovement.js, eventHandler.js로 클래스 역할 변경 - navigationBar와 carousel 클래스 간에 중복되는 동작 메소드가 많아서 이를 줄이기 위해 carousel을 움직이는 메소드가 있는 클래스인 carouselMovement와 버튼 클릭 시 이벤트를 추가해 주는 eventHandler로 변경함 5. css 변경 중복 코드를 util.js로 묶어서 새로 만듦 6. 버그 미해결 부분 있음 - 클래스를 두 개로 나눴을 때 currentIndex가 동기화되지 않아서 다른 영역을 번갈아 클릭했을 때 이벤트가 제대로 동작하지 않음 7. templateData.js => template literal 방법 적용 필요

- git 로그 관리 중 머지를 진행했는데, 이전 작업 파일이 생겨 이를 삭제함

- carouselMovement & eventHandler => carousel로 클래스 합침 - 동기화되지 않던 슬라이드 인덱스로 인한 버그 사라짐

- html을 mock Data로 그려줄 때 template literal 방식 사용함 - 자연스러운 애니메이션을 위한 dummySlide 추가 부분은 DOM API 사용함

- localStorage에 서버가 연결되어 있을 동안 캐시되도록 설정함

- cssTransition과 cssTransform => setTransition, setTransform - css라는 이름이 적절하지 않은 것 같아 변경함

- util에서 변경한 이름 동일하게 변경함

crongro · 2020-02-26T08:38:52Z

일단 애니메이션이 자연스럽게 이동하지 않고, 이동될때 위에 메뉴가 변경이 안됩니다.(버그버그)

choisohyun · 2020-02-26T08:41:09Z

일단 애니메이션이 자연스럽게 이동하지 않고, 이동될때 위에 메뉴가 변경이 안됩니다.(버그버그)

지금 데모페이지가 올린 코드랑 달라서 수정중입니다 !

crongro

네 좋습니다.
수고하셨어요. 기능버그는 차차 해결해보시죠!
머지할게요.
리뷰는 참고하시고 질문은 답변 부탁드려요!

crongro · 2020-02-26T08:40:25Z

client/js/carousel.js

@@ -0,0 +1,77 @@
+import { setTransform, setTransition } from "./util.js";


es modules 브라우저의 지원범위에 대해서 조사해보세요.
호환성에 대해서 인지하고 개발하면 좋죠.

ES modules 지원 범위

MDN과 caniuse로 봤는데, IE뿐만 아니라 조금 마이너한 브라우저도 안되는데가 꽤 있는 것을 확인했습니다.

Nodejs에서도 8.5 이하 버전에서는 지원이 되지 않습니다.

추가적으로 블로그를 찾아봤는데, 지원범위 때문에 webpack같은 모듈 번들러를 사용한다는 것을 알게 되었습니다.

crongro · 2020-02-26T08:42:15Z

client/js/carousel.js

+    this.width = config.MAX_PANEL_SIZE;
+    this.currentIndex = config.START_CAROUSEL_INDEX;
+    this.isMoveFinished = config.isMoveFinished;
+    this.nav = document.querySelectorAll(".slide-navigation > li");


네이밍 짓는게 쉽지 않죠. nav는 리스트라서 nav보다는 navList 정도도 괜찮을 듯.

crongro · 2020-02-26T08:44:46Z

client/js/carousel.js

+    setTransition(this.slideAll, option);
+  }
+
+  clickEvent(index) {


clickEventHandler 나 Listener 라고 이름 짓곤해요.

crongro · 2020-02-26T08:44:57Z

client/js/carousel.js

+    const buttons = this.config.buttons;
+    setTransform(this.slideAll, this.currentIndex, this.width);
+
+    buttons.forEach((element, index) => {


델리게이션 고고

crongro · 2020-02-26T08:45:40Z

client/js/main.js

+
+const config = Object.assign(carousel, arrowButtons, width, currentIndex, maxIndex);
+
+const run = () => {


run은 여기서만 호출되는 코드라면, 이름없이 익명즉시실행함수라는 걸 써도 되겠군요.

crongro · 2020-02-26T08:47:46Z

client/js/main.js

+const arrowButtons = { buttons: document.querySelectorAll(".slide-btn > button") };
+const width = { MAX_PANEL_SIZE: 760 };
+let currentIndex = { START_CAROUSEL_INDEX: 1 };
+let maxIndex = { MAX_CAROUSEL_SIZE: 5 };


여기까지 선언된 default 값은 누구의 것일까요?
제 생각에는 Carousel 의 것인거 같습니다.
그래서 그 안으로 옮겨야 하는거 아닌가 싶네요.

코멘트 보고 이해가 잘 안 갔었는데 오늘 강의 보고 이해했습니다. 제가 원했던 구조가 model, cardMenu와 casouselSlide였었어서 참고해서 적용해 다음 pr에 보내도록 하겠습니다!

crongro · 2020-02-26T08:49:37Z

client/js/templateData.js

@@ -0,0 +1,81 @@
+class TemplateData {


TemplateData가 클래스 형태이여야 하는 이유는 뭘까요?
클래스로 얻는 장점에 대해서 이야기해보세요.

TemplateData 클래스 안의 메소드를 함수로 하나씩 쓰게 되면 함수를 하나씩 여러번 실행하거나 선언한 함수들을 객체로 따로 저장해 실행하는 방식을 취해야 합니다.
클래스를 사용하게 되면 data를 template한다는 의미를 가진 객체에 각각의 메소드가 생기는 것이므로 의미가 명확해 진다고 생각합니다.
또, Carousel 객체와의 형식이 동일하기 때문에 일관성을 가지고 있습니다.

crongro · 2020-02-26T08:50:10Z

server/app.js

+
+app.set("views", __dirname + "/views");
+app.set("view engine", "ejs");
+app.engine("html", require("ejs").renderFile);


ejs 까지 !! 서버사이드렌더링을 경험하신 겁니다.

choisohyun and others added 22 commits February 11, 2020 16:44

Initial commit

10008c8

feat. html, css UI 틀 추가

cbe9654

- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함

feat. html, css UI 틀 추가

b481dd1

- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함

refactor. function -> class로 변경

6ba14ed

- js 코드를 ES6 Classes로 표현하기 위해 변경함 - 기능 추가는 없음

feat. navigation 버튼 클릭 시 슬라이드 이동 기능 추가

9c1d78d

- 각각의 navigation 버튼을 클릭하면 해당 버튼의 index를 얻어와 이동함 - 슬라이드 애니메이션 기능은 아직 추가하지 않음

Merge remote-tracking branch 'javascript-amazon-anim/master' into cardui

4a2b895

docs. Delete image files, duplicate files

6046298

feat. Add Mock Data & html 자동생성파일 완성

166cd89

data.js - mock data를 임의로 배열로 저장함 mockData.js - mock data를 html 파일로 순서대로 추가될 수 있도록 함

feat. Add dummy element for infinite slides

b82e169

- addDummySlide(function) 부드럽게 넘어가는 무한 슬라이드를 구현하기 위해 생성함 slide의 first, last child를 각각 마지막과 처음에 넣어 줌 추후 파일명, 변수명 등 리팩토링 예정임

style. Edit arrow button position

590f8ae

화살표 버튼의 위치가 어색해 width를 100% -> 800px로 변경함

Merge branch 'choisohyun' into animation

b708cf6

Merge branch 'fetch' into tmp

69f14af

chore. Delete old work files added during merge

e82d1ab

- git 로그 관리 중 머지를 진행했는데, 이전 작업 파일이 생겨 이를 삭제함

fix & refactor. Change class structure

3083758

- carouselMovement & eventHandler => carousel로 클래스 합침 - 동기화되지 않던 슬라이드 인덱스로 인한 버그 사라짐

refactor. Use template literal when forming html

e452111

- html을 mock Data로 그려줄 때 template literal 방식 사용함 - 자연스러운 애니메이션을 위한 dummySlide 추가 부분은 DOM API 사용함

feat. Add Cache json file in localStorage

ccc1745

- localStorage에 서버가 연결되어 있을 동안 캐시되도록 설정함

refactor. Rename function css => set

276d08c

- cssTransition과 cssTransform => setTransition, setTransform - css라는 이름이 적절하지 않은 것 같아 변경함

fix. Rename function css => set

6698e3a

- util에서 변경한 이름 동일하게 변경함

crongro approved these changes Feb 26, 2020

View reviewed changes

crongro merged commit 020721d into code-squad:choisohyun Feb 26, 2020

		@@ -0,0 +1,77 @@
		import { setTransform, setTransition } from "./util.js";


		const config = Object.assign(carousel, arrowButtons, width, currentIndex, maxIndex);

		const run = () => {

Conversation

choisohyun commented Feb 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Git page

구현 사항

client

server

Uh oh!

crongro commented Feb 26, 2020

Uh oh!

choisohyun commented Feb 26, 2020

Uh oh!

crongro left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

ES modules 지원 범위

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

choisohyun commented Feb 26, 2020 •

edited

Loading