connecting dots

store 코드 수정기존 코드 수정코드 기존 코드의 경우 특정 속성이 다른 속성을 가지고 와서 쓸 수 없기 때문에 밑 사진처럼 함수 안에서 다른 함수를 호출할 수 없음수정 코드의 경우 선언되는 유효범위 안에 다른 함수도 포함되어있어서 호출하는 것이 가능 Vercel프론트엔드 웹 애플리케이션을 배포하고, 관리하기 쉽게 만들어주는 클라우드 플랫폼 1. Hosting Serverhtml, css, js, img, font --> 정적 파일들을 저장(like 하드디스크), 연산이 되지 않음 2. Computing Server (연산 기능이 필요할 때)- Serverless Functions 서버가 없는 데 동작하는 함수(기능)24시간 서버가 켜져있지 않아도 켜져있는 것 처럼 동작 가능  npm i -D verc..

화살표 함수 코드 축약 Main.tsx 파일에 있던 setTodo(), deleteTodo() 함수 store로 이사 시키기데이터를 불러 오는 getTodos()를 store로 이동시켜주었기 때문에투두 리스트를 새로 수정하는 setTodo(), 투두를 삭제하는 deleteTodo() 역시 store로 이사를 시켜야 한다 !데이터 권한이 이제 Main -> store로 넘어간 상황이니 수정, 삭제하는 부분도 store에서 제어해줘야 한다. 기존 Main.tsx store에서 가지고 올 수 있도록 TodoItem 파일 수정 옮긴 후 똑같이 작동하는 화면 모달에 삭제, 수정기능 추가전체 코드import styles from './TodoItemModal.module.css'import { useNavigate..

모달 CSS .modal { position: fixed --> 화면 전체를 덮어야 할 때(화면을 기준으로) width: 100vw --> 화면의 가로너비 100%, height: 100vh --> 화면의 세로너비 100%}.overlay { position: absolute --> 부모요소인 modal을 기준으로 (position을 갖는 것이 우선순위를 갖는다 !) width: 100% --> 뷰포트 쓰지 않아도 됨. 부모요소에 영향을 어차피 받기 때문에.contens { calc(100vh-40px) --> 전체 뷰포트 height에서 위아래 20px씩 공간 남겨놓겠다 overflow: auto --> 자동으로 넘치면 스크롤} z-index- position이 설정된 element에서만..

콜스택과 이벤트루프 콜스택(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)라는 오류 발생함수 호출이 너무 많이 중첩되어 콜 스택의 용량을 초과할 때 발생 -..

데이터 변경에 따른 화면 갱신 두 가지 방법으로 처리해보기첫 번째 방법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..

엔드포인트네트워크 통신에서 특정 리소스나 서비스를 접근할 수 있는 URL(Uniform Resource Locator)웹 개발에서 엔드포인트는 주로 API(Application Programming Interface)를 통해 서버와 클라이언트가 통신하는 데 사용됨 1. URL:• 엔드포인트는 URL 형태로 표현됩니다. 예: https://api.example.com/users• URL은 프로토콜(https), 도메인(api.example.com), 경로(/users)로 구성됩니다.2. HTTP 메서드:• 엔드포인트는 주로 HTTP 메서드와 함께 사용됩니다.• GET: 리소스를 조회합니다.• POST: 리소스를 생성합니다.• PUT: 리소스를 업데이트합니다.• DELETE: 리소스를 삭제합니다.• 예: G..