🗂 WIL/📁 JavaScript

💡 axios await/async vs then

📅 본 글은 2022년 5월 13일 개인 github 에 작성된 글입니다. 🚀 axios await / async vs then 프로젝트 배포 당일 밤을 꼬박 새우고 아침에 급하게 기능을 추가해야하는 일이 생겼다. 프론트에서는 내가 맡아서 하게 되었는데, 간단한 기능이여서 빨리 끝낼 수 있다는 내 예상과 달리,백 연결에서 문제가 생겼다. axios 를 이용해서 get 요청을 했는데, data를 가져오지 못했다..😵‍💫 처음에는 axios 문제인지 모르고 다른 부분에 문제인건가 하는 생각이 들어 이리저리 고쳐보다, 왜 이럴까...한참 고민하다 그냥 then 을 이용하니 data 를 가져올 수 있었다...거의 1시간 동안의 삽질이였다... 문제의 코드..🥲 const [commentList, setComme..

💡 평소대로 e.target.value를 이용했는데, 요소값을 가져오지 못한다..? - 팀 프로젝트

📅 본 글은 2022년 5월 12일 개인github 에 작성된 글입니다. 🚀 currentTarget vs target 2차 팀프로젝트에서 발생한 문제점이다...!! 평소처럼 e.target.value 를 이용해서 클릭한 요소를 가져올려고 했으나, undefined 이 출력되었다. 다행히 구글링을 통해서 알아낸 e.currentTarget.value 를 사용하니 문제는 해결되었다. 그럼 event target 와 currentTarget 차이점은 무엇일까..? ✅ event.target vs event.currentTarget 블로그에 기재되었는 코드를 먼저 실행해보자. (출처 아래에 기재) 위의 코드를 실행하고, yellow을 클릭하였때 결과는 아래와 같이 나온다. green 이라는 className ..

✏️ 비구조화 할당

📅 본 글은 2022년 5월 1일 개인github 에 작성된 글입니다. 🚀 비구조화 할당 비구조화 할당 사용법에 대해 잘 모르고 있다는 생각이 들었다. 제대로 알아보자! ⚠️ mdn, 블로그에 정리된 내용들을 직접 실행해보며 익혀나가는 방식으로 공부하였습니다. 출처는 글 하단에 기재하였습니다. 비구조화 할당이란? 비구조화 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식! ✅ 배열 let [a, b, c, ...f] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); //2 console.log(c); // 3 console.log(f); // [4,5] 스프레드 연산자를 이용하여 나머지 배열 값 할당..

💡 얕은 복사, 깊은 복사

📅 본 글은 2022년 4월 8일 개인github 에 작성된 글입니다. 🚀 얕은 복사, 깊은 복사 팀 프로젝트때 사용했던 노션을 정리하다가 발견한 물음표 가득한 제목의 글.. 아쉽게도 제목만 적혀져있다. 당시 상황이 잘 기억은 나지 않지만, 최신순 정렬 기능을 구현하기 위해 공부하던 중에... 배열이 정렬이 제대로 되지 않아, 찾아보니 원인이 얕은 복사때문! 이라는 것 까지 기억이 난다. 과거의 내가 미뤄둔 글을 오늘의 내가 정리하면 좋을 것 같아서, 주제는 얕은 복사, 깊은 복사 로 정했다. ✅ 복사에 대해 살펴보기 전에 원시 값과 참조 값에 대해 알고 있어야 한다. 원시값 객체가 아니면서 메서드도 가지지 않는 데이터를 뜻한다. 기본형 데이터는 값을 그대로 할당한다. String, Number, Big..