분류 전체보기 122

객체 복사, 병합과 Object.assign

참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다. 원시값(문자열, 숫자, 불린 값)은 ‘값 그대로’ 저장·할당되고 복사되는 반면에 말이죠. 예시: let message = "Hello!"; let phrase = message; 예시를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello!"가 저장됩니다. 그런데 객체의 동작방식은 이와 다릅니다. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장됩니다. 그림을 통해 변수 user에 객체를 할당할 때 무슨 일이 일어나는지 알아봅시다. let user = { name: "John" }; 객체는 메..

JS 2021.10.01

섹션 HA-1

코드스테이츠 수업을 들어가면서 각오를 하고 있었다 생각한 것 이상으로 이해속도가 많이 부족했고 이걸 이겨낼려고 꾸준히 복습위주로 같다 그런데도 주어진 시간안에 이해하고 나가야할 진도를 계속 끝내지 못하고 점차점차 시간이 지나면서 뒤쳐지기 시작했다 결국 후반부에 들어서서 원하는 만큼의 지식를 쌓지 못했고, 불안과 동시에 HA에 들어갔다 결국 결과는 누락이었다 다시 공부를 처음부터 복습 그리고 스스로 문제 풀이를 만들어가면서 의심을 많이 해야될 것같다 페어프로그래밍을 진행하면서 점점 페어와 격차를 느꼈고, 페어진행에 따라가기만 하고 있었다 스스로 자괴감에 빠지기도 했다 근데 이겨내야될 것 같다. 좀 더 열심히 집중하고 계속 앞으로 나아가야겠다 이런것들 이 현재 나에게 필요한 일인 것 같다 공부 다시 하면서 ..

Dom 순회

DOM 구조에서도 회사의 조직도와 유사한 모습을 발견할 수 있습니다. body가 가장 상위에 있고, 아래에 여러 구성요소가 부모-자식 관계를 가지고 있습니다. 이 관계를 그려보면 아래와 비슷한 구조가 만들어집니다. [그림] DOM의 관계도 이런 자료 구조를 컴퓨터 공학에서는 트리 구조라고 합니다. 트리 구조의 가장 큰 특징은 부모가 자식을 여러 개 가지고, 부모가 하나인 구조가 반복되는 점입니다. 즉, 부모가 가진 하나 또는 여러 개의 자식 엘리먼트를 조회하는 코드를 작성한다면, 여러 번 반복해서 실행하는 코드가 필요합니다. function consoleLogAllElement(element){ // nav의 class 이름을 console.log 합니다. // nav의 자식 엘리먼트가 있는지 검색합니다..

Dom 2021.09.23

부모 엘리먼트 찾기

d의 이름이 news-contents 인 div 엘리먼트의 부모 엘리먼트는 무엇인가요? [그림] id가 news-contents 인 div 엘리먼트와 body 엘리먼트의 관계 id가 news-contents 인 div 엘리먼트는 body 엘리먼트의 자식 엘리먼트입니다. 반대로 body 엘리먼트는 id가 news-contents div 엘리먼트의 부모 엘리먼트입니다. 이 관계를 자바스크립트에서 확인합니다. id가 news-contents 인 엘리먼트를 조회하려면, document.body.children 의 첫 번째 엘리먼트를 조회합니다. [그림] id가 news-contents인 div 엘리먼트 document.body 의 children을 조회할 때마다, 매번 document.body 로부터 찾아가는 ..

Dom 2021.09.23

자식 엘리먼트 찾기

body 엘리먼트의 자식 엘리먼트(element)는 총 몇 개인가요? body 엘리먼트의 자식 엘리먼트는 총 3개입니다. id가 nav, news-contents, footer 인 3가지 엘리먼트입니다. [그림] body 요소의 자식 요소는 3개입니다. 그림으로 표현하면, 쉽게 이해할 수 있습니다. 그러나 컴퓨터에게는 이 사실을 어떻게 전달할까요? 자바스크립트에서 DOM은 document 객체에 구현되어 있습니다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있습니다. 한번, body를 찾아보겠습니다. [그림] 크롬 개발자도구에서 document.body를 조회합니다. DOM 구조를 조회할 때에는 console.dir 이 유용합니다. console.dir 은..

Dom 2021.09.23

Dom 이란

[그림] HTML과 DOM의 구조 이번 유닛에서는 HTML을 바라보는 또 다른 관점, DOM(Document Object Model)을 학습합니다. DOM은 프로그래머 관점에서 바라 본 HTML 입니다. DOM을 이해하고 조작할 수 있으면, HTML을 단순한 문서에서 웹 앱으로 업그레이드할 수 있습니다. DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다. HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있습니다. 이번 유닛을 통해 DOM을 이해하고, HTML과 자바스크립트를 연결하는 방법을 알아봅니다. 처음으로 DOM을 학습할 때에는 코드로 DOM을 조작하는 일이 낯설 수밖에 없습니다. 이번 유닛의 콘텐츠를 따라 학습하면, 코..

Dom 2021.09.23

구조 분해 (Destructing)

구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말합니다. 분해 후 새 변수에 할당 배열 const [a, b, ...rest] = [10, 20, 30, 40, 50]; // 질문: a, b, rest는 각각 어떤 값인가요? 객체 const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} // 질문: a, b, rest는 각각 어떤 값인가요? 객체에서 구조 분해 할당을 사용하는 경우, 선언(const, let, var)과 함께 사용하지 않으면 에러가 발생할 수 있습니다. 선언없이 할당하는 경우, 이 콘텐츠의 하단있는 공식문서 링크를 통해 내용을 확인할 수 있습니다. 유용한 예제: 함수에서 객체 분해 functio..

JS 2021.09.22

Spread/Rest 문법

Spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용합니다. function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) // 질문: 어떤 값을 리턴하나요? Rest 문법 파라미터를 배열의 형태로 받아서 사용할 수 있습니다. 파라미터 개수가 가변적일 때 유용합니다. function sum(...theArgs) { return theArgs.reduce((previous, current) => { return previous + current; }); } sum(1,2,3) // 질문: 어떤 값을 리턴하나요? sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요..

JS 2021.09.22

참조 자료형

자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형입니다. 배열([])과 객체({}), 함수(function(){})가 대표적입니다. 이런 자료형을 자바스크립트에서는 참조 자료형(reference data type; 참조 타입)이라고도 부릅니다. 그 이유에 대해서 자세히 설명 드리고자 합니다. 이전에 말씀 드렸지만 컴퓨터가 처음 사용되던 시절에는 배열, 즉 리스트라는 개념을 구현하기가 어려웠습니다. 그래서 띄어쓰기, 탭, 쉼표 등으로 데이터를 구분하여 배열과 비슷한 형태로 자료 구조를 구현하기 시작했습니다. 이 흔적은 csv에서도 찾아볼 수 있습니다. 쉼표로 구분된 데이터(comma-separated values)라는 의미죠. 10,20,30,40,50,60 이렇게 하나의 스트링을 split 하던..

JS 2021.09.22

원시 자료형

자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 6 가지의 타입 string, number,bigint, boolean, undefined, symbol, (null) 을 말합니다. 이 중에서 자주 사용하는 4 (+1)가지 원시 자료형 string, number, boolean, undefined, (null) 을 살펴보겠습니다. 이 데이터를 유심히 볼까요? 모두 어떤 종류의 데이터인가요? 왜 원시 자료형이라고 부르나요? 'string', 42, true, false, undefined // 데이터가 "하나"의 정보를 담고 있습니다. 원시 자료형은 모두 "하나"의 정보, 즉, 데이터를 담고 있습니다. 옛날에 어떻게 코드..

JS 2021.09.22