맨땅에 헤딩

리액트로 프로젝트를 만들고 있는데, 이미지를 받아오는 과정에서 문제가 발생했다. 아래와 같이 이미지가 화면에서 렌더링되지가 않았다. 네트워크탭을 통해 확인해보니, url도 잘들어가있었고, get요청도 잘갔지만 상태코드가 304 Not Modified라고 되어있었다. 304 not modified에 대해서 mdn사이트에서 찾아보니 HTTP 304 Not Modified클라이언트 리디렉션 응답 코드는 요청된 리소스를 다시 전송할 필요가 없음을 나타냅니다. 캐시된 리소스에 대한 암시적 리디렉션입니다. 이라고 설명이 적혀있었다. 말그대로, 이미 캐시되어있는 값이 변화되지 않았기때문에 새로 캐시할 것이 없다. 그래서 not modified = 더이상 수정할것이 없다는 이야기! 🤔 시도해본 방법 1 도구창에 들어가..

리액트 프로젝트를 하는데 콘솔창에 자꾸 저런 에러가 발생했다. 콘솔창에만 뜨는 에러로 아예 실행이 안되거나 하지는 않아서 진행하는데는 문제가 없었지만 계속 이유가 뭔지 궁금했던 에러! 🔍 원인 manifest.json 파일을 지워서. 원인을 한마디로 말하면 manifest 파일을 지워서이다. manifest에 대한 태그는 index.html에 남겨져있는데 json파일만 삭제했기때문에 위와 같은 에러가 발생한다. index.html 파일에 들어가서 보면 이런 코드가 있는것을 발견할 수 있다. 만약 manifest.json을 지우려면 index.html안에 있는 저 태그도 지워야한다. manifest를 쓸거면 둘다 지우지 않으면 된다. ✅ 해결 ➡️ index.html안에 있는 manifest태그를 지운다 ..

리액트, 타입스크립트로 프로젝트를 진행하는데, 서버에서 데이터를 받아오면서 이런 에러가 발생했다. 에러를 발생시킨 코드는 아래와 같다. const [serverData, setServerData] = useState([]); useState를 통해서 state의 변경을 관리하는 코드이고 받아올 데이터가 배열이기 때문에 초기값으로 빈배열 [] 을 넣어주었다. 🔍 원인 타입지정을 하지 않고, 배열을 초기값으로 저장하여서. 에러메시지인 Argument of type 'ServerDataType[]' is not assignable to parameter of type 'SetStateAction'. 를 한국말로 직독하면 ➡️ ServerDataType[]' 타입의 값이 'SetStateAction' 타입의 매..

1. 글등록 버튼을 누르면 발생하는 CORS My-diary를 만들어서 서버에 API를 요청하는 과정에서 cors 에러가 발생했다. 개발자도구의 Network를 보면 CORS error라고 적혀있는 것을 확인할 수 있다. 🔍 원인 사실 CORS는 서로 다른 도메인간 리소스를 공유하게 해주는 도우미! 이게 어떤 의미인지를 이해하려면 일단, CORS란 무엇인지를 이해하는것이 우선이다. 🔫 CORS (Cross-Origin Resource Sharing)란? CORS는 교차출처리소스공유라는 뜻으로, 브라우저에서만 가지고 있는 체제이다. 원래 브라우저의 기본 정책은 보안을 위해서 SOP(Same-Origin-Policy)가 기본이다. SOP은 동일출처정책의 줄임말로 , '동일한 Origin을 가지고 있어야 리소..

css가 정상적으로 작동하지 않아서, 개발자도구를 켜보니 내가 주지 않은 css가 적용되고 있었다. 나는 img에 이런 css를 주지 않았는데 왜 이런 값이 적용되고 있는걸까? 자세히 보니 img옆에 user agent stylesheet이라고 적혀있는 것이 보여서 찾아보았다. 🔍 원인 내가 아무런 값을 지정해주지 않았을때, user agent stylesheet가 적용될 수 있다. 이를 이해하기 위해서 user agent stylesheet이 무엇인지, 자세하게 공부하였다. 🔫 user agent stylesheet이란? (= 사용자 에이전트 스타일시트) 사용자 에이전트 / 브라우저에서 기본스타일을 제공하는 기본 스타일시트. 모든 문서에는 이러한 user agent stylesheet가 있다. ✔️ 작..

onKeyPress를 사용해서 사용자가 키보드의 키를 눌렀을때, handleKeyPress라는 함수가 호출되도록 하였다. 동작은 인식이 잘되어서 사이트에서 값도 잘나오고 문제는 없는데, 이상하게 vscode에서 아래와 같이 코드가 쫙 그어져있는 문제가 발생하였다. 🔍 원인 마우스를 가져다대니, onKeyPress는 사용되지 않습니다. 라는 멘션이 나오고 있다. 그리고 @deprecated라고 적혀있다. 영어사전에서 deprecated를 찾아보면 아래와 같이 중요도가 떨어져 더 이상 사용하지 않고 사라지게 될 것. 이라는 의미이다. ❌ 문제점 위의 내용과 같이 현재는 잘 돌아가고 있지만, 앞으로 사라지게 될 것이기 때문에 사용을 지양해야한다. ✅ 해결 ➡️ onKeyPress대신에 onKeyUp / onK..

❌ 오류: 내가 import하지 않은 css가 적용됨 리액트로 모달창 만들기를 하다가 뭔가 디자인이 마음대로 안되는 오류가 발생했다. 에러메시지가 뜬다거나 하는것은 아니지만 값을 바꿔줘도 계속 적용이 안되어서 이유를 찾다가 개발자도구를 보고 이유를 알게 되었다. 개발자도구를 보니 전혀 다른 컴포넌트의 css가 적용되고 있었다..!! 바로 각자 다른 컴포넌트안인데도, className이 겹치면 의도치 않게 내가 import하지 않은 다른 컴포넌트의 css가 적용되는 상황이 발생했다. 🔍 원인 css의 클래스 선택자는 전역으로 적용된다 전역으로 적용되기 때문에, 리액트에서는 다른이름의 컴포넌트를 import하지 않아도 css의 className이 적용될 수 있다. ✅ 해결 컴포넌트마다 고유한 클래스 이름을 ..

모달창을 만들었는데, 닫기버튼을 누르면 이러한 에러메시지가 발생하였다. 직역을 하면, 경고: onClick 리스너는 함수가 되어야 하는데, 객체 형식의 값이 전달되었습니다. 라는 의미이다. 🔍 원인 말그대로 onClick에 함수가 전달되어야하는데 객체가 전달이 되어서 (= prop으로 전달된 함수가 구조분해되지 않아서) ➡️ 내가 전달하려고 한 함수가 아니라 객체자체가 전달됨!! ✅ 해결 이 에러를 이해하려면 구조분해할당부터 이해해야한다. 🔫 구조분해할당(비구조화, destructing) 객체에서 원하는 속성만 추출하여 변수로 선언할 수 있다. 이를 객체 구조분해문법(비구조화 문법)이라고 한다. 리액트 컴포넌트에서는 중괄호를 {} 사용하여 구조분해할당을 할 수 있다. 간단한 예를 들면 아래와 같다. //..

map함수를 사용하면 자주 만나는 에러..!! 이번에도 프로젝트를 만들면서 만났다 해결방법은 간단한데, 왜 이런것이 발생했는지 원인이 궁금해서 공부하다보니 시간이 좀 오래 걸렸다. 이유는 렌더링과 관련이 있었다! 🔍 원인 map은 배열에만 사용할수 있다. 위의 에러에 적힌것처럼 undefined.map은 사용X 🤔 그러면 왜 undefined가 들어오는 걸까? 리액트는 컴포넌트의 상태(state)나 속성(props)의 값이 변경될때마다 자동으로 렌더링을 수행한다. 하지만 데이터를 비동기적으로 받아올때는, 데이터가 들어오지 않았음에도 렌더링이 실행될 수가 있다. 데이터가 아직 도착하지 않았지만 리액트는 array.map()을 실행한다. 이때 array는 아직 정의되지 않은 undefined 상태이므로 오류..

google books API를 통해서 받아온 데이터를 페이지네이션 기능을 넣으려고 했는데, 생각지 못한 오류가 발생했다. 에러는 아니어서 에러메시지가 뜨지는 않았지만 내가 생각한대로 나오지 않고, 페이지마다 나오는 목록의 개수가 제멋대로였다 😓 첫페이지의 목록의 개수가 3개인데, 다음은 5개, 다음은 0개 이런식... 그래서 limit의 값을 고정값으로 5, 10이렇게 바꿔도 최대값이 그 값이 되긴 하지만 고정적인 개수로는 나오지 않았다. 🔍 원인 원인은 return앞에 적어준 if문 때문이었다. 🔫 나의의도: 받아오는 데이터중 빈데이터가 있는 것은 건너뛰고, 데이터에 값이 모두 담긴 것만 받아오고 싶다. 🔫 의도와는 다른 결과값: 데이터가 없는 곳은 빈값을 넣는다 ➡️ 목록에서 한자리를 차지함 이러한..