creamymood의 개발 공부 발자취 💭

자바스크립트로 백엔드 쪽을 구현해볼 수 있는데, 그중 간단히 찍먹해본 주제. [서버 만들기] ✨간단한 서버를 만든 뒤, 만든 todo앱을 통해, 상호 데이터를 주고 받는 과정에 대해 공부해본다.초보자인 내..가 get, post, delete 모든 기능을 다 한꺼번에 공부하기엔 지루하기도 하고, 헷갈리기도 하니까.. 우선 get으로 상호 주고 받는 과정을 빠삭히 먼저 익혀 볼 것 ! server.js에서는 서버를 만든다.index.html + todo.js로써 바닐라 자바스크립트를 사용해서 한번 구현해본다👩🏻‍💻 목표 기능→ 서버는 http 모듈로 만들고, /todos로 GET 요청이 들어오면 배열을 JSON으로 응답→ 배열은 더미 데이터 2개 포함→ 클라이언트는 index.html 하나의 파일..

HTTP 요청 메서드(GET, POST, PUT, PATCH, DELETE 등)는 클라이언트가 서버에 보내는 요청 방식을 의미한다.즉, 클라이언트(브라우저, 앱 등)가 서버에 어떤 작업을 하라고 요청할 때 사용하는 메서드.→클라이언트가 서버에 요청(request) 보낼 때 이 메서드들을 씁니다.→ 서버는 이 요청을 받아서 그에 맞는 작업(데이터 조회, 생성, 수정, 삭제 등)을 수행하고, 결과를 클라이언트에 응답(response) 해줍니다. 그래서 표에 적힌 메서드 의미와 주로 하는 일은 서버가 요청을 해석해서 수행하는 역할을 기준으로 설명한 것.즉, **“서버 입장에서 이 메서드를 받으면 어떤 작업을 해야 하는지”**를 나타낸 거죠.총 요약 미리 보기 🐰🐇더보기핵심 ! 총 요약 ! 메서드동작 기..

1. 번들링(Bundling)이란?번들링은 여러 개의 자바스크립트 파일, CSS 파일 등을 하나로 묶는 작업. 리액트 앱을 만들면 App.js, Header.js, Footer.js, style.css 등등 파일이 많은데, 브라우저가 다 따로따로 읽으면 느리고 비효율적이다.그래서 개발 도구(Webpack, Vite 등)가 이걸 한 덩어리로 묶어준다. 이걸 **번들(bundle)**이라고 함.📦 예: main.bundle.js ← 이 안에 모든 JS 코드가 들어가 있음.왜 필요할까?✓ http 요청 수 줄여서, 속도를 ↑↑✓ 코드 압축 → 파일크기 ↓↓✓ 사용 되지 않는 코드 제거해 → 최적화 2. 코드 스플리팅(Code Splitting)이란? 필요할 때만 특정 코드를 불러오도록, 코드를 여러 덩어리..

Nav-bar 검색 기능 구현하기 (API 사용) 구현 단계:Nav-bar에 검색 입력 필드 추가:Nav-bar에 검색 입력 필드를 추가하고, 입력된 검색어를 상태로 관리합니다.useDebounce Hook 구현 및 사용:useDebounce 커스텀 훅을 생성하여, 검색어 입력 후 일정 시간이 지난 후에 debounce 값을 업데이트하고, 그 값을 반환합니다.API 호출 함수 작성:TMdb API를 호출하여 검색 결과를 가져오는 함수를 작성합니다.검색 결과 표시:NavBar에서 디바운스된 값이 업데이트될 때마다 searchParams로 전달합니다.메인페이지에서 searchParams를 통해 검색어를 받아옵니다.해당 검색어를 기반으로 API를 호출한 후, 응답 데이터를 MovieCard에 전달하여 렌더링합..