맨땅에 헤딩

리액트, 타입스크립트로 프로젝트를 진행하는데, 서버에서 데이터를 받아오면서 이런 에러가 발생했다. 에러를 발생시킨 코드는 아래와 같다. 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이 적용될 수 있다. ✅ 해결 컴포넌트마다 고유한 클래스 이름을 ..

오늘은 팀프로젝트의 기획회의를 하였다. 부트캠프 이후로 팀플젝은 오랜만이라서 더 좋았다. 사실 부트캠프때는 내가 가진 지식이 적어서 동기들로부터 배울것이 많았음에도 내가 흡수할 수 있는 양이 적어서 항상 아쉬웠는데 이번에는 그래도 더 많은양을 배울 수 있을것같아서 많이 기대된다. 일단 커뮤니티 사이트를 만드는 것을 큰 틀로 삼았고, 엄청난 사이트를 만들자..!!라기 보다는 우리가 재밌게 공부하고, 또 상상하는 것을 코드로 만들수 있는 코딩 놀이터라고 하자😄 라는 것을 목표로 하고 있다. 리액트 / 타입스크립트 / Scss 를 사용할 계획이고 초기세팅은 vite / yarn 을 사용하기로 했다. 상태관리나 다른 더 디테일한 것들은 다음에 만나서 또 자세하게 논의해보기로 했다. 이러한 회의의 과정도 실무에서..

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

🔍 onChange 이벤트 input요소의 onChange 이벤트는 입력필드의 값을 변경할때 발생하는 이벤트 이벤트핸들러 함수를 통해 입력된 값에 대한 처리를 한다. onChange 이벤트는 사용자가 입력필드에 값을 입력/삭제할때마다 발생하기 때문에 실시간으로 값을 업데이트하거나 다른 처리를 수행 ➡️ 사용자에게 좀 더 유연한 UI를 제공 🔍 형태 1️⃣ 사용하고 싶은 함수명을 바로 적어줘도 되고, 2️⃣ e 매개변수를 안에서 바로 사용도 가능하다. setUsername(event.target.value)} required /> 🔫 onChange 코드 좀 더 나은 코드로 🔫 여러개의 input이 있으면 각각의 useState와 또 각각의 onChange함수를 만들어줘서 코드가 길어지는 경향이 있었다. ..

매일 일기를 쓰는건 역시 쉬운일이 아니다 ㅋㅋ 요즘 공부도하고 블로그도 쓰고 있지만, 일기를 못썼다 😭 집가면 피곤해서 자기바빠서.. ㅋㅋ 그래도 틈틈이 조금씩 쓸 계획이다. 요즘에는 개인프로젝트를 하면서 에러해결한 것을 위주로 포스팅하고 있는것같다. 지금까지 이 프로젝트를 하면서 만난문제 중, 페이지네이션오류가 가장 해결하기 어려웠는데 map안에 if문을 돌리면 그자리를 비우는게 아니고 undefined가 들어가서 오류가 생긴다는 것을 배웠다. ➡️ map안에는 if문을 돌리면 안됨!! [undefined, 값, ubdefined, 값, undefined] 이런식으로 값이 들어가서 오류가 난거였다. 아래는 오류를 해결한 결과 limit=8로 주어서 이제 8개의 값이 정상적으로 나온다. 영국이랑 캐나다로..

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