React

# 주요 내용 1. netlify: command not found 해결방법 2. Client-Side 에서 API Key를 노출하지 않고, TMDB API와 통신하기 위한 redirect server 만들기(netlify를 통해 서버리스 만들기) 기업 과제 중 TMDB의 Open API를 통해서 영화 목록 리스트를 구현하고 있었고, API Key를 숨겨야하는 것이 구현 과제였다. TMDB의 API는 key를 파라미터로 전달해주어야한다. https://api.themoviedb.org/3/movie/76341?api_key= # 문제 (feat: .env 통해서 API Key 숨기는거 의미없다..) 나는 여태 .env 파일을 통해 API Key를 숨겼는데, 이건 진짜 숨겨지는 것이 아니였다. .env는 ..

# 1. 내가 겪은 문제 아래 영상에서 처럼 아래 방향키를 한 번 눌렀을 때 뇌암-> 뇌경색 순서대로가 아닌, 뇌암 -> 뇌출혈로 이동되는 현상이다. 마치 2번 누른 것 처럼 중복된 이벤트가 발생되는 것 같다. 구글링 엄청 했는데 보통 한글 입력이 2번 발생하는 현상이라는 글이 많았다. 나는 한글입력은 올바르게 동작되고 있었기에 이 문제와 다른 문제라고 생각했다. # 2. 문제 파악 사용한 코드는 아래와 같다. 상황 파악을 위해 콘솔을 찍어보는 방법밖에 없었다.. // SearchBox.jsx import React, { useEffect, useState } from "react"; import searchApi from "../api/seachAPI"; import ResultList from "./..

로컬 캐시 스토리지를 구현하려는데 생각보다 쉽지 않았다. 로컬 스토리지는 localStorage.setItem 등으로 쉽게 구현했는데, 캐시 스토리지 사용법은 잘 정리된 블로그를 찾기가 어려웠다. 따라서 크롬 블로그를 통해서 최대한 구현해보려고 했다! https://web.dev/i18n/ko/cache-api-quick-guide/ 나처럼 어려움을 겪는 사람들을 위해 캐시 스토리지를 구현하면서 발생한 에러와 설정하는 방법 디바운싱을 사용한 검색기능까지 공유해보려고 한다! [내가 구현하고 싶은 것] 1. 검색창 입력으로부터 API 응답 결과를 로컬 캐시 스토리지에 저장한다. 2. 검색창에 똑같은 입력이라면 API를 호출하지 않고 캐시된 데이터를 불러온다. => '뇌'를 입력하면 이미 캐싱된 데이터를 불러..