190225 TIL AMAZON step4 캐로샐 && 웹서버
step4 캐로셀
드디어 PR을 보냈다.
주말동안 수정하고 싶은 부분은
1) clearTimeout
2) transitionend
3) classList 추가
4) constructor 줄이기
5) 함수 쪼개기
6) carousel templating 태그도 넘기기
였는데 일단 1차 PR 보내고 수정하는 것이 덜 지칠 것 같아서 2,3,4,5만 구현했다.
주말내내 하나 수정하면 또 다른 버그가 나오고… 그래서 지쳤는데 오늘 오전 중에 반이 함께 디버깅 해줘서 오류를 잡을 수 있었다.
가장 크게 문제가 됐던 부분은
startAutoCarousel() {
this.container.addEventListener("transitionend", this.moveCarouselAuto(this.carouselDuration)) ;
this.checkAutoCarousel(this.timeGapToRestartCarousel, this.carouselCheckingDuration);
}
addEvent() {
this.container.addEventListener("transitionend", () => this.transitioning = false)}
startAutoCarousel()에서 transitionend가 될 때마다 moveCarouselAuto를 실행했기 때문에 귀신 돌아가듯이 돌아가고, 아래 transitionend도 안 먹힌 것이었다.
첫번째 transitionend를 단 이유는 clone 한 이후엔 container에 총 6개 item이 들어있는데, 4-1-2-3-4-1 순으로 들어있기 때문에 첫번째 이미지가 4가 나온다. 그래서 오른쪽으로 itemWidth(180)만큼 이동시키고 opacity 1을 주는 데, 이 transition이 끝나고 moveCarouselAuto()를 실행하고 싶었다.
근데 생각해보니 사실 함수 순서만 바꿔주면 굳이 transitionend를 달 필요가 없었다는 것을 아주 오랜 디버깅 후에야 깨달았다… 바보..
getData() {
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", () => {
const obj = JSON.parse(oReq.responseText);
this.pushData(obj.src);
this.showImage();
this.startAutoCarousel();
}); // showImage() 끝나면 startAutoCarousel() 시작하도록
oReq.open("GET", "./carouselData.json");
oReq.send();
}
startAutoCarousel() {
this.moveCarouselAuto(this.carouselDuration);
this.checkAutoCarousel(this.timeGapToRestartCarousel, this.carouselCheckingDuration);
}
또, 처음으로 constructor를 객체로 넘겨주는 것을 해봤다!
import PlansUI from './layer.js';
import Carousel from './carousel.js';
const carouselSetting = {
carouselSelector: {
carousel: ".carousel",
container: ".carousel-container"
},
btnSelector: {
prevBtn: ".prev-btn",
nextBtn: ".next-btn"
},
options: {
itemWidth: 180,
carouselDuration: 2000,
carouselCheckingDuration: 500,
timeGapToRestartCarousel: 5000,
}
}
window.addEventListener('DOMContentLoaded', () => {
const plansUI = new PlansUI();
const carousel = new Carousel(carouselSetting);
plansUI.init();
carousel.init();
});
오늘 알게된 사실
- 파일명에 언더바(_)가 있으면 깃헙 데모페이지 돌릴때 오류난닷!!!
- 깃헙 데모페이지 만들땐 gh-pages 브랜치따고 푸쉬한 다음 Settings에서 Source를 gh-pages branch로 바꿔준다!(꼭 그런건 아니지만 브랜치명을 gh-pages로 많이 한다고…)
웹서버
오늘(도) 웹서버 강의를 들었다..
오늘은 실제 실습 위주로 진행함.
강의 내용 : 클라이언트-서버 웹개발이해
리뷰
-
Routing이란? (Route = 루트!!)
서버에서 라우팅을 한다 = URL이 요청하는 고유한 정보에 따라 분석한다.
클라이언트에서도 라우팅 함 (클라이언트에서 그 URL을 분석/해석해서 정보를 처리하기도 함… Single Page Application에서 서버로 안가고 클라이언트에서 하기도 함 - 클라이언트에서 렌더링 할때 라우팅 과정이 필요할수도 있음)
-
HTTP 메소드의 GET 요청
GET 요청은 URL은 key:value로 서버에 넘어가므로 중요한 정보를 넣으면 안된다.
URL 인코딩, 아스키문자, UTF문자가 무엇인지 알아두세욤
GET 요청이 서버에 들어가면 어떤 일이 일어나는지 과정 복기
- 사이트는 최대한 빨리 로딩하는 것이 최우선 목표 (caching 같은 게 나온 이유)
-
세션에 대해 설명해보시오
세션 누가 훔쳐갈 수 있단다~ 보안적으로 위험하다는 것 알아두세요 (XSS 공격)
그 자체로는 사실 문자열임
-
NPM install은 무엇인가여
+) Google - service worker(Cache API) 오프라인모드로 캐시로 저장한 내용을 보여줌. 느린 인터넷 환경에서도 로컬에서 할 수 있게 환경 만들어줌 (서버 가기전에 로컬 뒤져서 나오면 서버 안감) local storage…
실습
로그인 구현
form -> fetch() - post (id만) -> /login 라우팅 -> id 출력
- form 태그로 정보 받기 (기존 submit 이용하면 페이지 렌더링 다시 되니까 preventDefault써서 막아주던가 아예 작동 안하게 해야함. 우리같은 경우엔 아예 submit 속성 안쓰고, click에 이벤트 걸었음)
- fetch로 post request 보내기
- json으로 데이터 보내주기
- 받은 데이터 .JSON() 한 다음에
- 템플레이팅 해주기
- 이렇게 되면 클라이언트에서 렌더링 해주는 것! (페이지 전체 렌더링 안하고 일부분만 렌더링)
form vs Ajax(fetch)
form은 submit 메서드가 내장 - 단점 유효성 검사 어려움(이메일에 이름쓰는 등…)
fetch로 극복 가능
- fetch는 기본적으로 쿠키를 안보냄(credential) - 인증이 안감
- 인증을 true로 보내줘야 쿠키가 날라감….
+)
사진이나 문서 보낼 수 있음. 파일 형태 = form data 활용하면 파일 쉽게 보낼 수 있음. multi…?
소셜 로그인 = passport library 사용함
로그아웃은 세션에 있는 인증 정보를 지워주는 것