woo.oing

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY URL 구성https://www.test.com:3000/blog/123?sort=data&search=123#javascripthttps://www.test.com:3000 /blog/123?sort=data&search=123#javascript프로토콜도메인명포트번호리소스경로매개변수프래그먼트 식별자 요구사항 및 기능 정리API 주소: https://trip-wiki-api.vercel.app/?start=0 메인페이지url: localhost:3000/Asia?sort=food&search=korea - 목록 조회- 지역분류- 필터..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY SPA에 라우팅을 적용했을때 루트 외의 경로에서는 새로고침시 에러가 발생했습니다서버에서 해당 파일을 찾지 못하기 때문에 발생하는 에러를 막기 위해 서버에서는 모든 요청에 대해 index.html 파일을 보내주도록node와 express를 사용해서 구현해 보겠습니다 1. node.js 설치2. 프로젝트 터미널에서 node -v 명령어로 설치 확인3. npm init -y 명령어로 package.json 파일 생성4. npm install express 명령어로 express 설치 및 node_modules 폴더 생성5. /server/se..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY SPA vs MPA페이지 구조의 차이SPA(Single Page Application)하나의 페이지로 처리MPA(Multi Page Application)다중의 페이지로 처리 CSR vs SSR렌더링 방식의 차이CSR(Client Side Rendering)클라이언트에서 페이지를 그리는 방식SSR(Server Side Rendering)서버에서 완성된 페이지를 전달받는 방식 History API 예제history.pushState({ page: page }, `Title ${page}`, `/${page}`);window.addEve..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY 상태관리의 기본 틀은 아래와 같습니다this.state = {};this.setState = (nextState) => {this.state = nextState;this.render();};this.render = () => {}; 상태(State): 값이 변하는 데이터중간 프로젝트에 상태 관리를 적용하여 개선해보겠습니다 index.html index.jsimport App from "/src/App.js";const $app = document.getElementById("app");new App($app); App.jsimp..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY 컴포넌트 vs 모듈컴포넌트: 사용자 인터페이스를 구성하는 독립적이고 재사용 가능한 부분 (예: TabBar.js)모듈: 재사용 가능한 코드의 집합, 특정 기능을 수행하는 코드를 하나의 단위로 묶어 관리 (예: api.js) 이전에 작성한 동물앨범의 문제점은 다음과 같습니다1. 탭을 눌러 페이지 이동시마다 새 페이지 로딩으로 지연시간 발생2. 다수의 페이지에서 비슷한 코드의 중복 작성 모듈 시스템 script 태그에 type="module" 을 추가하여 모듈 스크립트로 사용합니다모듈 스크립트는 구분을 위하여 .mjs 확장자를 사용할 수..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY 중간 프로젝트로 간단한 동물앨범을 만들어 보면서 복습해보겠습니다 html 구조** CSS 설명은 생략합니다[전체.펭귄.코알라.판다] 탭으로 나누어 콘텐츠를 분류하겠습니다 전체 펭귄 코알라 판다 콘텐츠 데이터 호출 및 사용프로젝트에 사용할 데이터는 https://animal-api-two.vercel.app/ 에서 가져와 사용하고,template 배열에 img 태그들을 저장하여 $content에 추가해줍니다const API_URL = "https://animal-api-two.vercel.app/";con..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY JS에서의 this → 자신이 속한 객체함수의 경우 함수가 호출되는 방법에 따라 this에 바인딩 되는 값이 달라집니다 1. 전역공간 호출 예제console.log(this); 출력: [object Window] 2. 일반함수 호출 예제const test = () => { console.log(this);};test(); 출력: [object Window] 3. 메서드 호출 예제const cafe = { brand: "이디야", menu: "아메리카노", print: function () { console.log(thi..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY select•option 예제과일 선택: 사과 바나나 파인애플 input 예제> 로그인이름: 비밀번호: 로그인const $userName = document.getElementById("userName");const $password = document.getElementById("password");const $login = document.getElementById("login");$login.addEventListener("click", () => { $userName.value = "홍길동2"; console.log(..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지 - 효빈] https://inf.run/WfRmY 사용 할 기본 html 구조는 아래와 같습니다 강아지 갈색 2살 createElement 예제let $type = document.createElement("div");$type.className = "info-item";$type.id = "type";$type.textContent = "말티즈";let $animalInfo = document.querySelector("div.animal-info");$animalInfo.appendChild($type);let $animalInfo = document.querySelector..