connecting dots

const loginForm = document.querySelector("#login-form"); document에서 id가 login-form인 요소를 찾아 loginForm이라는 변수에 할당 const loginButton = document.querySelector('.login-form');const loginButton = loginForm.querySelector("button"); 위 두 코드는 같은 의미를 지니는데1) document에서 class가 login-form인 요소를 찾아 lodginButton이라는 변수에 할당2) loginForm에서 button을 찾아 loginButton이라는 변수에 할당 --> html을 보면 안에 이 있는 구조를 가지고 있음 💡 _______.qu..

콜스택과 이벤트루프 콜스택(LIFO: Last In, First Out)콜 스택은 함수 호출이 쌓이는 곳JavaScript는 단일 스레드 언어로, 한 번에 하나의 작업만 수행할 수 있는데, 콜 스택은 이러한 작업들을 순서대로 처리한다  이벤트 루프(FIFO:First In, First Out)이벤트 루프는 JavaScript 런타임 환경에서 비동기 작업을 처리하는 메커니즘콜 스택이 비어 있는지 확인하고, 비어 있으면 큐(Queue)에 대기 중인 콜백 함수를 콜 스택으로 이동시킨다 예제 --> 실행 순서 1. console.log('Start')가 호출되어 콜 스택에 추가되고 실행됩니다. 2. setTimeout 함수가 호출되어 콜 스택에 추가됩니다. setTimeout 함수는 Web API를 통해 타이머..

양방향 데이터 바인딩과 단방향 데이터 바인딩 예제로 이해하기Q. 강사님! title={title}와 같은 반응형 데이터는 부모에서 자식 컴포넌트로 속성을 전달할 때 쓰는 단방향 데이터 전달이고 저희가 방금 배운 value={title}처럼 쓰는 건 폼 요소에서 요소의 상태를 제어할 때 사용하는 양방향 데이터 전달이라고 이해했는데 맞을까요?A.   Todo 항목 추가 기능 구현하기App.tsx// App.tsx// todo목록 새로 가지고 오는 함수 내려줌import TodoCreator from './components/TodoCreator' todoCreator.tsx    body에 꼭 들어가야 하는 것이 있는지 API 명세서 확인--> title 필수 ! 보낸 데이터와 응답받은 데이터 확인해보기  ..

디바운스(Debounce)와 쓰로틀(Throttle)Throttle: 반복 실행에 부하(저항)을 주기 (10번 실행 --> 5-6번 실행)Debounce: 마지막에 한 번만 실행하기  import "./style.css";document.querySelector("#app")!.innerHTML = /* html */ `Hello World `;window.addEventListener("scroll", (event) => { console.log(event);}); 호출이 stack됨(=하나씩 쌓임)콜스택: 호출하는 함수를 쌓아놓고 하나씩 처리하는 것--> 콜스택이 초과되면 스택 오버플로우(stack overflow)라는 오류 발생함수 호출이 너무 많이 중첩되어 콜 스택의 용량을 초과할 때 발생 -..

Postcss란 ?CSS를 변환하기 위한 도구로, 플러그인을 통해 CSS를 처리하고 변환함CSS 후처리기라고도 불림Postcss 안의 플러그인을 사용 --> Autoprefixer 등 많은 플러그인 사용 가능 1. 코드 가독성 향상can I use 사이트의 값을 사용해서 css 규칙에 공급업체(provider) 접두사(prefixes)를 추가함Autoprefixer는 현재 브라우저 인기도 및 속성 지원을 기반으로 데이터를 사용해서 접두사를 적용함 2. 최신 css 사용PostCSS Preset Env를 사용하면 최신 css의 대부분의 브라우저가 이해할 수 있는 것으로 변환하고 cssdb를 사용하여대상 브라우저 또는 런타임 환경에 따라 필요한 폴리필을 결정할 수 있음 3. css 모듈 사용css 모듈은 기..

프로젝트 시작 명령npm i vite// Vite라는 프론트엔드 빌드 도구를 설치npm i axios react-router-dom// HTTP 요청을 위한 Axios와 React 애플리케이션의 라우팅을 처리하기 위한 React Router DOM을 설치npm i -D autoprefixer postcss tailwindcss// 스타일링을 위한 Autoprefixer, PostCSS 및 Tailwind CSS를 개발 의존성으로 설치npm install// package.json 파일에 나열된 모든 의존성을 설치합니다. 앞서 실행한 명령어로 추가된 새로운 의존성을 포함하여 모든 의존성이 올바르게 설치되었는지 확인// 또한, 의존성 간의 충돌을 해결하고 node_modules 디렉토리를 업데이트 vite ..

if (!res.ok) { throw new Error(`HTTP error! status: ${res.status}`);}  그런데 ! 객체가 만들어질 때 마다 메모리에 저장됨 --> 더 효율적인 방법은 없을까 ? 자바스크립트의 Class this 예제 일반함수를 호출할 때와 화살표 함수를 호출할때의 차이점--> 일반함수는 '호출 위치' 화살표 함수는 '선언된 함수 범위'가 중요함 ! heropy.normal(); // Heropy// 여기에서 normal 함수가 호출됨. 이 위치에서 앞에있는 객체데이터가 heropy이므로 this는 heropy를 가리킴// 따라서 this.name은 heropy.name과 같음heropy.arrow(); // undefined// 선언된 범위 외부에 함수가 없으므..

데이터 변경에 따른 화면 갱신 두 가지 방법으로 처리해보기첫 번째 방법1) 수정할 데이터를 서버로 전송 (성공)--> 수정한 데이터의 결과를 응답해주는데2-1) 응답 받은 결과로 화면을 갱신 (수정된 부분만 갈아끼우는 것 !) updateTodo() --> 서버로 업데이트 전송 async function updateTodo() { console.log('서버로 전송', title) const res = await fetch( `https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/${todo.id}`, { method: 'PUT', headers: { 'content-type..