오늘도 디벨롭✨ 오늘도 디벨롭✨

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 더 보기 버튼은 기존 페이지에 새로운 페이지를 '추가'하는 방식이다. 실습을 위해 사용한 API는 데이터 요청 시 한 번에 10개씩 반환해 준다. 이때 API에서 page라는 key값을 제공해 주기 때문에 이를 활용하여 더 보기 버튼 기능 구현이 가능하다. 더 보기 버튼 클릭 시 서버에 키워드를 요청하는 통신 로직을 가지고 있는 searchMovies 함수에 동적으로 원하는 page의 value값을 전달해줘야 한다. this.el.addEventListener("click", async () => { // 버튼 클릭시 API 통신하는 store 함수 활용 await searchMovies(mov..

프런트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 ✍️ 이전 포스팅 https://dev-thinking.tistory.com/39 [JS/class] 클래스로 컴포넌트 구현하기 1 - 컴포넌트 생성 프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, dev-thinking.tistory.com 1. 자식 컴포넌트 생성 현재 요소 태그로 렌더링 되고 있는 ${fruit.name} 부분을 컴포넌트화 시켜보자. 1-1. FruitItem 컴포넌트 추가 import { Component } from "../core..

프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, 결국은.. SPA로 만드는 것이 답이었다는 것을..🥲 일단 강좌 보면서 어떤 식으로 구성이 되는지 파악하고, 다시 내 프로젝트에 적용시켜 보기로 하였다. 1. class 구조 class User { constructor(매개변수1, 매개변수2..) { // 함수 역할 // 로직 } 메서드명() { return 로직; } } 2. 컴포넌트 생성(SPA 방식) 1. index.html의 안에 모든 내용이 그려진다. 2. id가 root인 div 요소 안에 생성자 함수로 사용할 수 있는 클래스 개념 추가 3. 공통으로 사용..