기록/TIL (16) 썸네일형 리스트형 [오류기록] Cannot read properties of undefined ✔️ 원인 구글링 해보니 state는 비동기적이며 처음 렌더링(마운트)하기도 전에 동작한다고 한다. 이 때 state 가 정의되지 않았기 때문에 생긴 오류였다. ✔️ 해결 처음에 localstorage에서 이미지 url을 바로 불러와서 붙이려고 했었는데, 그렇게 하지 않고 state로 관리하여 useEffect를 이용해 렌더링 했더니 정상적으로 이미지가 붙었다. 그러나! 이미지 렌더링이 다른 데이터 렌더링과 함께 되지 않고 새로고침이 한 번 더 이루어져야 렌더링이 되었다. artist가 업데이트 될 때 이미지도 같이 렌더링 될 수 있게 deps 에 artist를 넣었더니 정상적으로 렌더링 되었다 ! 전보다 useEffect의 렌더링 사이클에 대해 더 이해가 된 것 같다. 2022/03/20 TIL 📝 for ... in 문과 for ... of 문의 차이점 오늘 알고리즘 공부를 하다가 for in 을 쓴 값과 for of을 쓴 값이 각 각 다르게 출력되는 것을 보았다. 그리고 알게되었다. 내가 이 둘의 차이를 정확하게 모르고 있었다는 것을 ..! 1. for ... in - 객체를 순환할 때 사용한다. - 객체의 key 값에 접근은 가능하지만 value 에 직접 접근하는 것은 불가능하다. - 모든 객체에 적용 가능하다. for in 문에서 주의할 점 - 순서가 보장되지 않음 - length 사용 불가 - value 값이 string 이라 연산이 불가능 2. for ... of - 배열의 반복에서 사용한다. - 객체를 순환하려고 할 경우 type error 가 발생한다. -length 사용 불가 3.. 2022/03/17 TIL 📝 mySQL JOIN 1. INNER JOIN SELECT 테이블명.조회할 칼럼 FROM 기준테이블 별칭 INNER JOIN 조인테이블 별칭 ON 기준테이블별칭.기준키 = 조인테이블별칭.기준키 SELECT categories.name, products.korean_name, products.english_name FROM products JOIN categories ON categories.in = products.category_id products 테이블의 category_id 와 categories 테이블의 id 와 일치하는 값을 JOIN 하여 조회한다. ++ 심화 WHERE 조건 주기 SELECT categories.name, products.korean_name, products.english.. 2022/03/14 TIL 💡wecode Foundation 3주차 과정을 참고/인용하여 작성하였습니다. 📝 Node.js 1. UI 란? => User Interface란 유저가 소프트웨어랑 만나는 경계면을 말한다. 즉, 유저가 소프트웨어에 접근하고 명령을 내릴수 있는 부분이다. 쉽게 설명하자면 스크린화면, 키보드, 마우스나 브라우저 등이 UI 에 해당한다. 2. API 란? => Appication Programming Interface는 어플리케이션과 어플리케이션이 의사소통하고 데이터를 교환할 수 있도록 매개체가 되어 주는 대상을 말한다. 인스타 DM을 보내거나, 스마트폰에서 날씨를 확인하는 것과 같은 동작들을 할 때 API가 필요하다. 스마트폰에서 날씨를 확인하는 것으로 예를 들어보자면, 날씨어플은 인터넷을 연결하고, 서버.. 2022/03/11 TIL 📝 비동기 블로깅 1. 동기와 비동기 동기는 요청을 보낸 후 응답을 받으면 다음으로 넘어갈 수 있는 실행방식이고 비동기는 요청을 보낸 후에 응답과 관계없이 다음 동작을 실행한다. 즉, 비동기는 프로그램의 다른부분(기능 또는 함수)들이 서로 방해(blocking)하지 않고 동시에 일어날 수 있다. 집청소로 예를 들어보자. 동기적으로 집 청소를 한다면, 빨래를 돌린다 -> 완료될 때 까지 기다린다 -> 빨래를 넌다 -> 설거지를 한다 -> 설거지를 마치고 청소기를 돌린다. -> 화장실 청소를 한다. 비동기적으로 집 청소를 한다면, 빨래를 돌린다 -> 설거지를 한다 -> 청소기를 돌린다 -> 빨래가 완료되어 넌다 -> 화장실 청소를 한다. 2. Callback 콜백함수란 파라미터로 함수를 전달받아서 함수 내부.. 2022/03/09 TIL 📝 React 오류 기록 1. 좋아요 하트 구현 중 에러 발생 좋아요 하트를 누르면 빨간색으로 변화 -> 다시 누르면 취소 되는 로직을 구현 하는 미션에서 좋아요 취소 부분 로직이 실행이 안됐다. className을 useState 주어서 상태값을 변경하고 싶었는데, 삼항연산자를 잘못 사용한 것 같은 느낌은 왔지만 어떻게 고쳐야 할지는 생각이 안났다. 그래서 살포시 송이님께 물어봤는데 송이님께서 잘못 작성한 문법을 집어내주셨다 ! ! 😭 2. 💡 해결 삼항연산자에서 조건값을 잘 못 주었던 것이었다 ! 다시 새로고침해서 확인해보니까 정상 작동했다 >_< ! 언제쯤 .. . .. 나의 사고력이 상승할까 . . 2022/03/08 TIL 📝 React 오류 기록 1. useState 를 이용하여 버튼 색 바꾸는 로직 구현 중 에러발생 2. 문제해결 handleIdInput과 handlePwInput 함수의 리턴값을 가지고 삼항연산자를 만들려고 했었는데, 이렇게 하면 handleIdInput과 handlePwInput 안에 있던 event.target을 불러오지 못하는 애러가 생긴다. 해결방법을 못찾던 도중에 useEffect 세션을 듣고 두 함수가 아닌 벨류값 자체을 가지고 삼항연산자 로직을 짜야했던건가..? 싶었다. 세션을 듣고나서 useEffect를 이용하여 버튼 색과 활성화를 구현했지만 확인하고 싶어서 새로 폴더를 만들어서 작성해보았다. 정상적으로 구현되었다 ! 이제야 useState , useEffect 조오오금 감을 잡은것 같다.. 2022/03/07 TIL 📝 React 오류 기록 1. 타입에러 ID input 창과 PW input 창에 입력되는 value 받아오는 것을 구현하는 과정에서 다음과 같은 타입에러가 발생했다. --> 내가 작성한 코드 --> target을 받아오지 못하는(?) 에러가 떠서 곰곰히 생각해보니, onchange에서 event를 받아오지 않고 선언만 해두었던 것을 알게 됐다. 2. 해결 다음과 같이, event를 받아오는 콜백함수로 만들어둔 뒤, 확인을 위하여 콘솔에 찍어보았다. 정상적으로 ID input 에 입력한 값들이 출력 되었다. 😭 이전 1 2 다음
