TIL

TIL - 20220709

오늘은 모던 JavaScript 튜토리얼에서 구조 분해 할당(https://ko.javascript.info/destructuring-assignment)에 대하여 공부했다. 구조 분해 할당은 실제 많이 사용하는 개념이기 때문에 친숙하게 집중하며 공부할 수 있었던 것 같다. 작성한 질문은 다음과 같다. 구조 분해 할당을 사용하는 경우는 객체나 배열에서 데이터를 가져오면서 전체 데이터가 아닌 데이터 일부만 필요할 때, 객체나 배열을 변수로 분해할 수 있게 해주는 구조 분해 할당 문법을 사용한다. 함수도 매개 변수가 많을 때, 구조 분해 할당을 사용하면 좋다. 배열에서 나머지 값들을 한데 모아서 저장하고 싶을 때, '...'를 사용하면 나머지 값들이 한 배열 안에 모두 저장된다. 단, '...'는 마지막에 ..

TIL - 20220708

오늘은 모던 JavaScript 튜토리얼에서 Object.keys, values, entries(https://ko.javascript.info/keys-values-entries)에 대해 공부했다. 제목만 봤을 때는 keys, values, entries에 대한 공부는 이미 하지 않았나?라는 생각을 했는데 내가 지금까지 공부한 내용은 map, set, array에서 keys, values, entries에 대한 내용이었고 이 장에서는 객체에서 key, values, entries를 사용하는 법에 대한 내용이었던 것이다. 차이점은 천천히 살펴보고 내가 작성한 질문은 다음과 같다. 차이점은 다음과 같다. map, set, array 객체 호출 문법 map.keys() Object.keys(obj) (여기서..

TIL - 20220707

오늘은 모던 JavaScript 튜토리얼에서 위크맵과 위크셋(https://ko.javascript.info/weakmap-weakset)에 대하여 공부했다. 작성한 질문은 다음과 같다. 맵과 위크맵의 차이는 다음과 같다. 맵은 키로 모든 자료형이 가능하지만, 위크맵은 키로 오직 객체만 가능하다. 위크맵은 반복 작업과 keys(), values(), entries() 메소드를 사용할 수 없다. 따라서, 키나 값을 전체로 받을 수 없다. 왜냐하면, 가비지 컬렉션의 동작 방식 때문이다. 맵에서 키가 객체인 데이터 혹은 셋에서 값의 자료형이 객체인 경우, 참조값을 지워도 지워지지 않은 채로 계속 참조할 수 있기 때문에 이러한 문제를 해결하고자 나온 것이 위크맵과 위크셋이고 가비지 컬렉션의 동작 시점은 자바스크..

TIL - 20220706

오늘은 모던 JavaScript 튜토리얼에서 맵과 셋(https://ko.javascript.info/map-set)에 대하여 공부했다. 코딩 테스트를 준비하면서 중복을 제거하는 법 중 하나인 셋을 이 당시에 처음 알게 되어 오늘 이 셋과 맵에 대하여 자세하게 공부할 수 있었다. 맵과 셋을 읽으며 작성한 질문은 다음과 같다. 맵과 객체의 공통점은 키가 있는 데이터를 저장한다는 점이고, 차이점은 객체는 키로 문자형만 이용할 수 있지만, 맵은 키로 모든 자료형이 가능하다. 심지어 객체까지도! 셋은 중복 없는 값이 저장되며 키가 존재하지 않는다. 지금까지 주로 사용한 객체는 객체와 배열이 전부였다. 맵을 잘 모를 때, entries와 fromEntries 메소드를 강의에서 사용하는 걸 보아도 이게 맵이어서 사..

TIL - 20220705

프로젝트를 진행하던 중에 다음과 같은 에러를 만났다. 과거, 코드숨 리액트 과정 때 처음부터 과제 따라 하기를 진행할 때도 다음과 같은 에러를 만난 적이 있었다. 그때를 지금 돌이켜보면 어떻게 해결했지?라는 생각이 들며 아 에러를 해결하며 제대로 공부하지 않았기 때문에 이 에러를 또 만났구나. 이번에는 제대로 공부해서 다시는 반복치 말아야겠다는 생각을 하게 됐다. 에러 핸들링에 대한 담백한 해결법은 https://jaeyooniverse.tistory.com/123에 정리했다. 이곳은 TIL이니 느낀 점과 배운 점을 더 보태보자면 다시 에러를 만나게 됐을 때 해결책을 쉽게 떠올리지 못한 이유는 이 에러가 왜 일어났는지 제대로 찾아보지 않아서였다고 생각한다. 에러가 있네? 이건 어떻게 해결해야 하지? 검색..

TIL - 20220704

오늘은 모던 JavaScript 튜토리얼에서 iterable 객체(https://ko.javascript.info/iterable)에 대해서 공부했다. JavaScript로 코드를 작성할 때, ~ is not iterable이라는 에러를 종종 만나게 되는데 이 iterable이 아니라는 뜻이 무슨 이유인지 공부해볼 수 있어서 좋았다. iterable은 반복 가능한이라는 뜻을 갖고 있기 때문에 for.. of 반복문을 사용할 수 있다. 반대로, iterable 객체가 아니면 for.. of를 사용할 수 없지만 직접 iterable 객체를 만들면 for..of를 사용할 수 있다! iterable이 아닌 객체에 Symbol.iterator라는 메서드를 추가하면 된다. for..of 반복문이 시작되면 for....

TIL - 20220703

오늘은 모던 JavaScript 튜토리얼에서 배열과 메서드(https://ko.javascript.info/array-methods)에 대해 공부했다. 이번 장은 JavaScript에 존재하는 모든 배열 메서드를 다루기 때문에 문제를 만들기보다 배열의 메서드들을 내 언어로 다시 작성하는 시간을 가졌다. JavaScript를 사용하면서 거의 map만 썼던 것 같은데, 생각보다 더 많은 메서드가 있구나라고 느낀 순간이었다. 배열의 요소를 추가하는 메서드, 삭제하는 메서드, 교체하는 메서드 모두 존재하지만, 이 기능을 splice 하나로 모두 다 할 수 있다. 배열과 객체를 typeof로 확인하면 다음과 같은 결과가 나온다. alert(typeof {}); // object alert(typeof []); /..

TIL - 20220702

오늘은 모던 JavaScript 튜토리얼에서 배열(https://ko.javascript.info/array)에 대해 공부했다. 배열을 공부하며 다음과 같은 질문들을 작성했다. 객체와 배열의 가장 큰 차이점은 객체에는 순서가 없고, 배열에는 순서가 있다는 점이다. 그래서, 어떠한 정보들을 저장할 때, 순서를 고려해야 한다면 배열, 상관없다면 객체를 사용하면 된다. 배열을 사용해 만들 수 있는 대표적인 자료구조는 큐가 있으며 스택 또한 만들 수 있다. 큐는 선입선출(FIFO), 스택은 후입 선출(LIFO)인데, 배열 가장 마지막 순서에 요소를 넣어줄 때, push. 빼줄 때, pop으로 스택 자료구조를 만들 수 있고, 첫 번째 순서에 요소를 넣어주는 unshift, 빼주는 shift를 통해 큐를 구현할 수..