[HTML, CSS, JS] 아마존 - 네비게이션UI 미션 제출합니다.#122
Merged
crongro merged 8 commits intocode-squad:choisohyunfrom Feb 13, 2020
Merged
Conversation
- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함
- 아마존 슬라이드 화면을 클론코딩한 파일 업로드 - 슬라이드 클릭 시 화면 이동은 아직 구현하지 않음 - 이미지, 콘텐츠는 dummy 파일 이용함
- 슬라이드의 양 옆 화살표 버튼 클릭 시 다음 화면이 나오는 기능을 구현함 - 상단의 네비게이션 클릭 시 이동은 아직 구현하지 못함 - 마지막 슬라이드에서 다음 버튼을 누르면 첫 번째 슬라이드가 나옴 - 처음 슬라이드에서 이전 버튼을 누르면 마지막 슬라이드가 나옴
- js 코드를 ES6 Classes로 표현하기 위해 변경함 - 기능 추가는 없음
- 각각의 navigation 버튼을 클릭하면 해당 버튼의 index를 얻어와 이동함 - 슬라이드 애니메이션 기능은 아직 추가하지 않음
crongro
approved these changes
Feb 13, 2020
Contributor
crongro
left a comment
There was a problem hiding this comment.
수고하셨네요.
리뷰참고해서 다음번에 반영하세요~
| content: ""; | ||
| } | ||
|
|
||
| .br { |
Contributor
There was a problem hiding this comment.
br이건 태그명과 같아서 잘 안쓰는 이름같네요.
| } | ||
|
|
||
| .slider { | ||
| width: calc(100% * 4); |
Contributor
There was a problem hiding this comment.
calc이런함수 사용좋네요.
브라우저 호환성도 가끔 검색하면서 사용해보세요.
| moveSlides() { | ||
| let translate = "translateX(" + -100 * this.currentIndex + "%)"; | ||
| this.slides.forEach(element => { | ||
| console.log(element); |
Contributor
There was a problem hiding this comment.
디버깅은 debugger; 입력도 있을테고, 그것보다 개발자도구의 breakpoint를 찍어서 하는게 더 편리할거에요.
| let translate = "translateX(" + -100 * this.currentIndex + "%)"; | ||
| this.slides.forEach(element => { | ||
| console.log(element); | ||
| element.style.transform = translate; |
Contributor
There was a problem hiding this comment.
transform이 다른 속성대비 장점이 뭔지 오늘 수업때 언급했는데요.
그 이유를 잘 이해해보세요.
| nav: buttonNav | ||
| }); | ||
|
|
||
| startMove.onClickHandler(); |
Contributor
There was a problem hiding this comment.
네 이렇게 별도 메서드를 불러서 핸들러 등록을 할 수도 있긴해요
하지만 객체 생성시 늘 호출되야 하는것이라면 생성자 안에서 실행되도록 해도 될 거 같아요.
constructor() {
startMove.onClickHandler();
}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Git-Page
https://choisohyun.github.io/javascript-amazon-anim/
구현 사항
feat. html, css UI 틀 추가까지 Lia와 페어로 진행 후 슬라이드 이동 기능은 각자 구현했습니다.
HTML 트리구조
AmazonCarousel클래스에 navigation, arrow button이 클릭됐을 때 동작할 수 있는 함수를 생성했습니다.버튼을 클릭했을 때의
Index값을 바탕으로 translateX로 값을 부여했습니다.애니메이션은 navigation을 hover할 때 확대축소하는 부분만 구현되어 있습니다. (슬라이드 이동 시 애니메이션 구현 X)
어려웠던 점
onclick과addEventListener에 혼선이 와서 잘못 사용했다가 수정했습니다. html에는 class 이름만 부여하고 그것을 처리하는 것은 css와 js가 하는 것이 좋다는 것을 알았습니다.addEventListener가 여러 개에 한꺼번에 적용하는 것이 안된다는 것을 알았습니다. 이를 해결하기 위해 foreach를 사용했습니다.알게 된 점 정리
https://www.notion.so/fc6d0a52691a4996a867f480752ec2ab?v=7b9866d6e9794ab48496ccdff7c2c129
앞으로 할 것
transition, transform으로 애니메이션 구현하기requestAnimationFrame로 애니메이션 구현하기