twingkle

spread문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers) //6 1.배열 합치기 let parts = ['shoulders', 'knees']; let lyrics = ['head', ...parts, 'and', 'toes']; //['head', 'shoulders', 'knees', 'and', 'toes'] let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1 = [...arr1, ...arr2]; // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immut..

함수와 함수가 선언된 어휘적환경의 조합. 함수를 리턴하는 함수 const makeCounter = () => { let value = 0; return { increase: () => { value = value + 1 }, decrease: () => { value = value - 1 }, getValue: () => value } } const counter1 = makeCounter(); counter1.increase(); //1 counter1.increase(); //2 counter1.decrease(); //1 counter1.decrease(); //0 counter1.increase(); //1 counter1.getValue(); //1

전역 스코프(Global Scope): 가장 바깥쪽의 스코프 지역 스코프(local Scope): 전역이 아닌 다른 스코프 ※우선순위: 지역 변수 > 전역 변수 스코프의 종류 1.블록 스코프 -중괄호를 기준으로 범위가 구분됨. ※ 화살표 스코프도 블록 스코프로 취급. -블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나는 즉시 접근 불가. -> 블록범위를 벗어나는 console.log()는 ReferenceError 2.함수 스코프 function 키워드가 등장하는 함수 선언식 및 함수표현식으로 만들어짐. let vs var vs const let const var 유효 범위 블로스코프/함수 스코프 블록 스코프/함수 스코프 함수 스코프 값 재할당 가능 불가능 가능 재선언 불가능 불가능 가능 let : ..

원시 자료형 string, number, bigint, boolean, undefined, symbol, (null) "하나"의 의미를 가지는 데이터 보관함의 크기를 고정시키는게 합당하다. 변수에 값(value)자체가 담김. 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수 는 있다. 참조 자료형 배열([ ]), 객체({ }), 함수(function( ){ }) 처음 시작은 배열과 비슷한 형태로 자료 구조를 구현.(쉼표로 구분된 데이터 ex)csv) 변수에는 특별한 데이터 보관함을 찾아갈 수 있는 주소가 담겨있다. 특별한 데이터 보관함(heap): 자기 마음대로 사이즈를 늘렸다 줄였다 함.(동적으로 변함) console.log('codestates' === 'cod..

배열 배열의 길이: arr.length let number = [1,2,3] console.log(number.length) //3 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다. 배열의 각 요소에 대하여, 반복하는 코드 let number = [1,2,3] for(let i = 0; i number[0] //2 ==> number[1] //3 ==> number[2] } for(i of number){ console.log(number[i]) //2 //3 //undefined } 배열에서 사용되는 다양한 메서드 immutable methods vs mutable..

prompt(프롬프트) : CLI의 명령줄 대기모드 명령어 [커맨드] pwd(print working directory) : 현재 위치를 확인할 수 있는 명령어 mkdir 폴더이름 : 새로운 폴더 생성 ls : 특정 폴더에 포함된 파일이나 하위 폴더의 리스트 출력 ls -a : 숨어있는 폴더나 파일을 포함한 모든 항목을 출력 ls -l : 폴더나 파일의 포맷을 전부 표현하라. **ls-l 을 함께 사용한 경우 drwxr-xr-x # 생략 -rw-r--r-- # 생략 d : 폴더/ - : 파일 (폴더는 cd로 진입 가능 // 파일은 진입불가능) open . : 현재 위치를 GUI로 실행하는 명령어 open cd : change directory의 약자. 폴더를 다른 폴더로 변경. touch : 파일 생성...

계산기 목업 만들기 우선 페어와 함께 와이어 프레임을 사용했다. 제일 먼저 Figma로 와이어프레임을 만들었다. 내가 네비게이터, 페어분이 드라이버를 맡으셔서 내가 제안하는대로 페어분이 그려주셨다. 상단의 이미지는 페어분이 조금더 보완해서 정성껏 만들어와주신 프레임. HTML 이후, HTML로 구조를 짰다. 계산기 레퍼런스를 찾아봤을때, 다른분들이 ul로 짜시는분, button으로 짜시는 분 등 다양해서 어떤 식으로 해야할 지 고민을 많이 했다. 계산기는 button을 눌러서 하는 것이기 때문에, button이 맞다고 생각해서 button으로 구현. 밑에 버튼들은 button wrap으로 감쌀지 아니면 한번에 할지 여러 시도를 해보다가 wrap으로 감싸는 것이 가장 깔끔하게 코드가 짜여져서 감싸서 마무리..

기본 셀렉터 전체 셀렉터 전체 셀렉터는 문서의 모든 요소를 선택합니다. * { margin: 0px;} 태그 셀렉터 태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다. h1 { } div { } section, h1 { } ID 셀렉터 ID 셀렉터는 #id로 입력하여 선택합니다. #only { } class 셀렉터 class 셀렉터는 .class로 입력하여 선택합니다. 같은 class를 가진 모든 요소를 선택합니다. .widget { } .center { } attribute 셀렉터 attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다. a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { }..

텍스트의 정렬 가로정렬 .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; } //양쪽 정렬 내용이 든 종결 블록 요소에만 적용된다.() 인라인 요소에 적용되지않으며, 구조블록 요소에는 제대로 적용되지 않는다. 구조 블록 요소에 text-align 속성을 지정하면 그 속성값은 자식 요소로 상속된다. 세로정렬 vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다. 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 ..

HTML5 시멘틱 요소들 의미있는 요소들.브라우저와 개발자 모두에게 그 의미를 명확하게 전달한다. : 하나의 문서에 여러 요소를 포함 할 수 있다. : 탐색 링크(navigation links)의 집합을 정의한다. : 일반적으로 제목이 있는 주제를 갖는 내용들의 그룹으로 정의한다. : 독립적인 자체적으로 만족되는 내용을 지정한다. : 주요 내용을 제외한 내용의 정의하며 사이드 바 등에 배치된다. : 그림, 도표, 사진, 코드 샘플 등과 같이 자족적인(self-contained) 내용을 지정한다. : 요소에 대한 캡션을 정의한다. 태그의 첫번째나 마지막에 배치. : 문서나 구역의 바닥 글을 지정한다. This is HTML html 요소는 p 이고, attribute name은 class , attribu..