TIL #210203
📚 TIL
코드숨 3주차 DAY 17, 자바스크립트 코딩의 기술
🎈 2주차 2번 과제 공부하기
3주차이지만 이제 2주차 과제를 공부하네요 히히
어찌저찌 네이버에 검색해서 열심히 적어봤어요..
Todo App 만들기 과제입니다!
placeholder에 코드를 적고, 추가 버튼을 만든 것까지 했어요
추가까지 되고 완료 버튼이랑 리스트 숫자는 못해요 ㅠ
더이상 진행은 못하고 풀이를 확인했습니다
만들어야하는 앱은 아래 모양대로!
코드 작성까지 해보았습니다
🎈 자바스크립트 코딩의 기술 3장 공부하기
3장 : 특수한 컬렉션을 이용해 코드 명료성을 극대화하라
TIP 10 객체를 이용해 정적인 키-값을 탐색하라
- 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우에 유용, 정적인 정보
- 객체 리터럴(object literal) : 중괄호에 키-값을 작성하는 것
TIP 11 Object.assign()으로 조작 없이 객체를 생성하라
- Object.assign() 메서드는 일련의 객체를 전달받고 가장 먼저 인수로 받은 객체를 뒤이어 인수로 넘긴 객체의 키-값을 이용해서 갱신, 갱신된 첫 번째 객체를 반환
- 첫 번째 객체에 빈 객체를 사용하면 원본 객체를 조작하지 않음
- 깊은 복사, 깊은 병합 : 중첩된 객체가 있는 객체를 복사하는 것
- 중첩된 객체로 인한 문제를 피하는 방법 : 중첩된 객체를 두지 않는 것, Object.assign()을 이용해서 중첩된 객체를 복사, 로대시 라이브러리의 경우 cloneDeep() 메서드 이용, 헬퍼 함수로 분리해서 추상화, 객체 펼침 연산자 이용
TIP 12 객체 펼침 연산자로 정보를 갱신하라
- 객체 펼침 연산자는 키-값 쌍을 목록에 있는 것처럼 반환
- 동일한 키에 서로 다른 값을 추가하면 어떤 값이든 가장 마지막에 선언된 값을 사용
TIP 13 맵으로 명확하게 키-값 데이터를 갱신하라
- 키-값 쌍이 자주 추가되거나 삭제되는 경우, 키가 문자열이 아닌 경우 객체보다 맵을 컬렉션으로 선택
- 맵 인스턴스에 항상 메서드를 사용
- delete() 메서드를 사용할 수 있기 때문에 인스턴스를 생성한 후에는 언어 수준의 연산자를 섞지 않음
- clear() 메서드를 사용할 수 있기 때문에 새로운 인스턴스를 생성할 필요가 없음
TIP 14 맵과 펼침 연산자로 키-값 데이터를 순회하라
- entries() 메서드는 맵에 있는 키-값을 쌍으로 묶은 맵이터레이터 반환
- 맵을 순회할 때 키-값 쌍을 받아서 해체 할당 문법으로 즉시 변수로 할당할 수 있음
TIP 15 맵 생성 시 부수 효과를 피하라
- 키-값 쌍이 담긴 배열로 맵의 사본을 생성하여 부수 효과를 피한다
- 새로운 키로 맵을 생성하면 어떤 값이든 해당 키에 마지막으로 선언한 값을 사용
TIP 16 세트를 이용해 고윳값을 관리하라
- 세트 : 한 가지 기능만을 매우 잘 수행하는 단순한 컬렉션
- 각 고유 항목을 하나씩만 갖는 특화된 배열
- 세트의 새로운 인스턴스는 중첩하지 않은 배열을 인수로 받는다
🎈 자바스크립트 코딩의 기술 스터디 2회
- 주제 : 2장 배열로 데이터 컬렉션을 관리하라, 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라
- 시간 : 저녁 9시 10분
문제와 답
Q1 : 펼침연산자는 배열에서 어떻게 사용하나요? 또한 사용해서 얻는 이점은 무엇인가요?
A1 : 배열에 포함된 항목을 목록으로 바꿔줍니다. 새로운 배열을 생성할 때 사용하여 원본의 조작을 피할 수 있습니다
Q2 : 조작(mutation)과 부수 효과(side-effect)로 생기는 문제점을 한가지 말해주세요
A2 : 배열을 정렬한다고 가정했을 때 정렬 기준을 변경할 때 마다 결과값이 달라질 수 있다
Q3 : 객체보다 맵을 사용하면 좋은 상황은 언제인가요? 1개만 알려주세요~!
A3 : 키-값 쌍이 자주 추가되거나 삭제되는 경우 객체보다 맵을 사용하는 것이 더 좋다
Q4 : 객체에 키를 string이 아닌 number로 했을 떄 발생할 수 있는 불상사가 무엇일까요?
A4 : 정수를 키로 하는 경우 점 표기법으로 접근할 수 없고 배열 표기법을 사용하면 탐색에 앞서 정수가 문자열로 변경됩니다
Q5 : 중첩된 객체를 새로운 객체에 Copy 하려면 어떻게 해야될까요? (아래 예시를 통해 설명해주세요)
const defaultMovie = {
title: ' ',
director: {
name : {
first: ' ',
last: ' ',
},
nation: ' ',
},
}
A5 : 펼침 연산자로 깊은 복사 처리를 한다
const copyMovie = {
...defaultMovie,
director: {
...defaultMovie.director,
name: {
...defaultMovie.director.name,
},
},
}
Q6 : 새로운 객체에 중첩된 객체를 Copy 할 때, 해당 키에, 깊은 복사(deep copy)를 따로 처리해줘야 되는 이유가 무엇인가요?
A6 : 중첩된 객체를 깊은 복사 처리를 하지 않으면 참조값이 복사된다
Q7 : 컬렉션 Set은 언제 사용하는게 좋을까요?
A7 : 배열에서 값을 수집할 때 중복값을 제거하고 고윳값만 분리해내야 하는 경우에 사용
Q8 : Map과 Set의 차이점은 무엇인가요?
A8 : 맵은 키-값 쌍 배열을 받지만 세트의 새로운 인스턴스는 중첩하지 않은 배열을 인수로 받는다
Q9 : 배열의 내장된 method 'includes()'를 언제 사용하는게 좋을까요?
A9 : 배열에서 특정 문자열이 존재하는지 확인할 때 사용
Q10 : 배열 정렬 시 spread syntax를 활용하는게 무슨 이점이 있을까요?
A10 : 전개 구문을 활용하면 배열 정렬 시 원본 배열을 조작하지 않는다
Q11 : 펼침 연산자를 이용해 조작을 피하는 방법은 어떤것일까요?
A11 : 펼침 연산자를 이용해 새로운 배열을 생성하여 기존 배열의 조작을 피할 수 있다
Q12 : 아래 예시 코드를 참고해주세요 trendyFramework에 무슨 language들로 구성이 되어 있는 지 확인 하고 싶습니다.
- expected output [ javascript, java, ruby ] 해당 getUnique 함수를 사용하기 전에 trendyFramework에 어떤 작업이 선행 되야 할까요? 좀 더 효율적인 방법은 없을까요!
function getUnique(attributes) {
return [...new Set(attributes)];
}
const trendyFramework = [
{
name: 'angular',
language : 'javascript',
},
{
name: 'vue',
language : 'javascript',
},
{
name: 'svelte',
language : 'javascript',
},
{
name: 'Spring',
language : 'java',
},
{
name: 'Rails',
language : 'ruby',
},
]
A12 : 위 코드를 사용하면 배열을 한 차례 순회한 뒤 배열을 조작해서 고윳값만 분류한다
(실제로 실행해보니 배열이 반환되어 선행 작업이 필요하다. 뭘까?)
더 효율적인 방법으로는 Set와 for...of 문을 사용하면 고유한 정보를 한 번에 가져올 수 있다
Q13 : 다른 객체를 새로운 객체에 카피 하는 방법들은 뭐가 있을까요?
A13 : Object.assign() 메서드나 객체 펼침 연산자로 객체를 복사한다.
Q14 : 배열에서 항목을 제거하는 방법을 설명해주세요
A14 : 펼침 연산자를 slice() 메서드와 함께 사용하여 항목을 제거한다
스터디 전
| 기분 | 이유 | 기대하는 것 |
| 10 | 스터디는 재밌다 | 다양한 컬렉션을 확실히 공부한다 |
스터디 후
| 기분 | 얻은 것 | 할 것 |
| 10 | 중첩 객체의 복사를 확실히 알게 되었다 | 공부한 것을 정리한다 |
필기노트
1회 참여 인원은 8명이었는데 2회는 4명이었어요!
그래서 필기보다 문제를 많이 풀었나봐요 ㅋㅋ 필기 뭐야
😁 오늘 한 일
📕 공부하기
- Todo App 구현하기 ㅎㅎ 그래도 이번엔 나름 버튼 구현까지 했어요 ㅋㅋ
- 진도 빨리 따라가야지 ㅠㅠ
👩🏫 스터디하기
- 사람이랑 만나는 유일한 시간 스터디 ㅎㅎ
- 모던 자바스크립트 튜토리얼에서 펼침 연산자를 공부했었는데요
- 자바스크립트 코딩의 기술로 다시 공부하니까 복습하는 것 같고 더 잘 이해돼요!
- 반복과 이해와 암기!!
🌼 주저리주저리
집에 과자 한 박스가 왔어요! 산건 아니고 크라운제과에서 받았어요
왜 받았냐면요 제가 공부하면서 화이트하임을 하나 먹을라는데
화이트하임 안에 까만게 있는거예요 그래서 안먹고 친구들한테 보여줬는데
그거 고객의 소리에 올려보라고해서 올렸더니 전화로 연락이 오더라고요
공정 과정에서 안에 들어갔는데 정상 제품으로 판단된 것 같다고!
제품 회수하고 보상으로 과자를 보내주셨어요 ㅠㅠ 엄청 많다 일년 내내 먹겠어요
저보다 아빠가 더 좋아해요 아빠가 좋아하는 과자가 많아요 ㅋㅋㅋ
