[댕누비/React] API 인증 오류, 인코딩 문제 해결

이번에 새로 '반려동물 동반 관광 사이트' 프로젝트를 작업중인데, 하면서 겪었던 오류들을 적어보고자한다. api 연결이 익숙하지도 않지만 진짜 생각치도 못한 원인을 찾은 김에 ㅠㅠ..!!!ㅋㅋㅋㅋㅋ오류 상황: 인증키가 맞는데 계속 인증이 실패하는 문제.env에 VITE_TOUR_API_KEY= (키번호)%2F(키번호) 이렇게 키를 잘 넣었음!!!console.log(import.meta.env.VITE_TOUR_API_KEY) 하면 정상 출력됨그런데 최종 요청 URL을 찍어보니:...ServiceKey=(키번호)%252F(키번호)...=> 알고보니 %2F → %252F 로 이중 인코딩 상태가 발생인코딩에 대한 이해도도 부족한 지라 정말 '이거 왜이래???' 라는 생각만 들던 차에 이중 인코딩의 문제라는 ..

• format_list_bulleted Study/PROJECTS
• · 2025. 4. 26.

[감정일기장/ React] 웹 스토리지 이용과 배포 방법

최근에 만든 React 기반 일기장을 웹 스토리지를 이용해 데이터에 브라우저에 저장하고, Vercel에 배포하기까지의 과정을 공유하려고 해요. (웹 스토리지를 이용하면 서버 없이도 사용자가 작성한 일기를 브라우저에 안전하게 저장하고 불러올 수 있음!) 1. localStorage로 일기 저장하기 서버를 따로 두지 않고 데이터를 저장하려면 웹 스토리지(localStorage) 를 사용하는 게 간단하고 편리해요.localStorage는 브라우저에 key-value 형식으로 데이터를 저장할 수 있는 저장소입니다.localStorage 기본 사용법// 저장하기localStorage.setItem("key", "value");// 불러오기const data = localStorage.getItem("key");..

• format_list_bulleted Study/PROJECTS
• · 2025. 4. 15.

[투두리스트/ React] React Hook을 이용한 렌더링 최적화

기존에 만들었었던 투두리스트에 추가적인 react hook들을 배우며 렌더링 최적화를 겸해 공부할겸 코드를 정리했다. (큰 프로젝트는 아니지만 프로젝트가 커질 수록 중요한 부분이라 연습겸...!!)1. useCallback, useReducer, React.memo 활용  기존 코드 (useState 사용)기존에는 useState를 사용하여 상태를 관리했으며, 상태가 변화할 때마다 컴포넌트가 불필요하게 리렌더링되는 문제가 있었습니다. 특히, 자식 컴포넌트들에 props를 전달할 때마다 함수가 새로 생성되어 렌더링 최적화가 어려운 상황이었습니다.변경된 코드 (useReducer, useCallback, React.memo 사용)이제 useReducer로 상태를 관리하고, 상태에 따라 다른 처리를 switc..

• format_list_bulleted Study/PROJECTS
• · 2025. 3. 25.

[REACT] useMemo와 React.memo의 차이점

리액트 훅을 배우다보면 자연스럽게 알게되는 useMemo와 React.memo는 같은 'memo'라는 단어를 사용하는데다 최적화를 위해 사용하는 것이라, 괜히 헷갈렸던 차에 스스로 정리차 올려보는 글.useMemo와 React.memo는 둘 다 불필요한 연산과 리렌더링을 방지하는 최적화 기법이지만, 적용 대상과 방식이 다르다! 오늘은 두 개를 구분하여 적고 설명해보고자 한다.1. useMemo → 값 (연산 결과)를 캐싱" 이 연산, 다시 계산할 필요 있어? "특정 연산(예: 배열 필터링, 정렬, 무거운 계산)의 결과값을 메모이제이션해서, 불필요한 연산을 방지하는 역할.의존성 배열의 값이 바뀌지 않으면 이전 값을 재사용.useMemo의 종류는 'hook'사용 예시 import { useState, use..

• format_list_bulleted Study/REACT
• · 2025. 3. 25.

[REACT] React Hooks 정리 및 사용법

리액트를 하다보면 리액트 훅은 무조건 알아야 할 필수적인 요건! 가장 기본적이고 기초적인 만큼 여기다가 정리해서 적어보고자 한다. 정리하면서 다시 한 번 복습하기는 덤 ✌👀 React Hook란?React Hook은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 도와주는 기능! 기존에는 클래스형 컴포넌트에서만 상태(state)와 생명주기 메서드(componentDidMount, componentDidUpdate 등)를 사용할 수 있었지만, Hook을 활용하면 함수형 컴포넌트에서도 이를 쉽게 구현할 수 있습니다. (리액트 v16.8부터 새로 도입되었다고 해요)생명주기란?React에서 생명주기란 컴포넌트가 화면에 나타나고, 업데이트되고, 사라지는 과정을 의미합니다.컴포넌트가 처음 나타날 때 ..

• format_list_bulleted Study/REACT
• · 2025. 3. 15.

[투두리스트/ React] 수정 기능 추가

투두리스트를 추가하고 삭제, 검색 기능까지 다 만들어두고 나니 뭔가 아쉬워서 좀 더 추가해봤다. 투두를 적어두고도 맞춤법 하나가 틀렸다든가 내용을 수정해야 할 때마다 지우고 새로 만드는 것보다 UI를 추가하는게 훨씬 편리하니까! 그런데 넣다보니 하나씩 뭐가 부족하고... 뭐가 이상하고... 그래서 차근차근 하나씩 추가했고, 작업 순서대로 글을 작성해봤다. 1. Todo 수정 기능 추가하기수정 버튼을 클릭하면 "수정 모드"로 변경input 필드를 활성화 해서 내용을 수정 가능하도록 변경저장 버튼을 따로 만들지 않고, 같은 버튼을 다시 누르면 저장 & 수정 모드 종료// react// App.jsx -> List.jsx -> TodoItem.jsx 로 전달한다.// 수정중이라면 true, 아니라면 false..

• format_list_bulleted Study/PROJECTS
• · 2025. 3. 2.