전체 글
-
[JS] 페이징 - 더보기 버튼조각조각/JavaScript 2024. 4. 8. 21:22
프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 더 보기 버튼은 기존 페이지에 새로운 페이지를 '추가'하는 방식이다. 실습을 위해 사용한 API는 데이터 요청 시 한 번에 10개씩 반환해 준다. 이때 API에서 page라는 key값을 제공해 주기 때문에 이를 활용하여 더 보기 버튼 기능 구현이 가능하다. 더 보기 버튼 클릭 시 서버에 키워드를 요청하는 통신 로직을 가지고 있는 searchMovies 함수에 동적으로 원하는 page의 value값을 전달해줘야 한다. this.el.addEventListener("click", async () => { // 버튼 클릭시 API 통신하는 store 함수 활용 await searchMovies(mov..
-
[JS/class] 클래스로 컴포넌트 구현하기 2 - 자식 컴포넌트에 데이터 전달하기조각조각/JavaScript 2024. 4. 4. 22:27
프런트엔드 웹 개발의 모든 것 초격차 패키지 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..
-
[JS/class] 클래스로 컴포넌트 구현하기 1 - 컴포넌트 생성조각조각/JavaScript 2024. 4. 3. 14:35
프론트엔드 웹 개발의 모든 것 초격차 패키지 Online. 강좌를 보며 새롭게 알게 된 사실들을 기록합니다.🙌 💬 포트폴리오 사이트를 자바스크립트로 작업하면서 라우팅에 막혀 엄청 헤맸는데, 결국은.. SPA로 만드는 것이 답이었다는 것을..🥲 일단 강좌 보면서 어떤 식으로 구성이 되는지 파악하고, 다시 내 프로젝트에 적용시켜 보기로 하였다. 1. class 구조 class User { constructor(매개변수1, 매개변수2..) { // 함수 역할 // 로직 } 메서드명() { return 로직; } } 2. 컴포넌트 생성(SPA 방식) 1. index.html의 안에 모든 내용이 그려진다. 2. id가 root인 div 요소 안에 생성자 함수로 사용할 수 있는 클래스 개념 추가 3. 공통으로 사용..
-
[월간회고/2024년 03월] 생각 줄이기성장하기/회고 2024. 3. 31. 19:55
매일 취업 공고를 보다. 신입을 뽑는 취업 공고가 많이 없지만 그래도 취업 공고를 통해 인사이트를 많이 얻을 수 있을거란 생각에 매일 취업 공고를 하나씩 수집했다. 모든 회사가 나에겐 레벨 5로 느껴질 만큼 준비할 게 여전히 산더미 같이 느껴졌지만, 정말 다양한 도메인이 있다는 것을 알게 되서 즐거웠다. 여러 공고를 취합해보면 분명히 내게 부족한게 무엇인지 내가 적용할 수 있는 건 무엇인지 점점 더 빠르게 캐치할 수 있게 될 터. 공고를 볼 때 이런 점들을 항상 생각하고 고민하면서 봐야겠다고 다짐한 한 달이었다. 또비인후과 실화냐 2월에 지속되던 어지럼증을 참지 못하고 다녀왔던 이비인후과를 3월 초에 또 가게 되었다. 이번에는 귀 뒤에 볼록하게 혹같은게 튀어나와서 였는데 심지어 아프기까지했다. 의사..