오늘의 CODE

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들때 사용한다. (기존 배열은 변하지 않음) map 함수는 모든 배열의 값에 function을 실행하는 메서드이다. 기존 배열의 값들을 특정값으로 변경하기 위해 map()이 많이 쓰인다.( 단순하게 반복을 위해 사용하기도함) array.map(callbackFunction(currentValue[, index[, array]])[, thisArg]); filter, forEach와 같은 구문임. currentValue: 배열 내 현재 값 index: 배열 내 현재값의 인덱스 array: 현재 배열 thisArg: callbackFunction 내에서 this로 사용될 값 const nums = [1,2,3]; const ..

forEach문은 오직 Array 객체에서만 사용이 가능하다.(ES6부터 Map, Set 지원) 배열의 요소들을 반복하여 작업을 수행할 수 있다. forEach 구문의 인자로 callback함수를 등록할 수 있고, 배열의 각 요소들이 반복될때 이 callback함수가 호출됨. callback 함수에서 배열요소의 인덱스와 값에 접근할 수 있음. 배열의 첫번째부터 마지막까지 반복하면서 item을 꺼낼 수 있다. var arr = ['가', '나', '다', '라']; arr.forEach(function(item, index, arr2) { console.log(item, index, arr2[index+1]); }) // 첫번째 인수는 배열 각각의 item // 두번째 인수는 배열의 index // 세번째..

자바스크립트의 배열[]의 경우, length를 통하여 길이를 간단하고 손쉽게 가져올 수 있다. 하지만 obj의 경우에는 length를 지정하게 되면 undefiend가 나타남 obj의 length의 길이를 구하기 위해서는 Object.kdys를 이용한다. var objs = {name: 'test', age: '24', city: 'seoul'}; console.log(objs.length); console.log(Object.key(objs).length); 속성 나열 var myObj = Object.create({}, { getFoo: { value: function () { return this.foo; } } }); myObj.foo = 1; myObj.foo2 = 2; myObj.foo3 = ..

키워드 키워드는 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰인다. 이런 기능들이 정의되어있기 때문에 식별자나 프로퍼티의 이름으로 사용할 수 없다. break case catch continue debugger default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with 예약어 예약어는 아직 특별한 쓰임새는 없지만 미래에 키워드로 쓸 가능성이 있어서 예약해둔 것이다. abstract boolean byte char class const debugger double enum export extends final float goto implements..

생성자 함수란? 생성자 함수는 여러 프로그래밍 언어에서는 '클래스'와 동의어이다. 어떤 경우 사람들은 참조타임, 클래스, 데이터 타입, 아니면 간단하게 생성자라고 부른다. 메서드란? 메서드는 자바스크립트에서 객체를 만들기 위한 템플릿으로 생성자 함수 안에서 속성에 함수를 할당하면서 정의되며 생성자 함수와 함께 class를 사용한다. hi 속성은 할당된 함수이다. Person 객체가 호출될때 this 키워드는 새로 생성된 Person 객체에 응답할 것이다. ** 메서드 사이엔 쉽표가 없음!! class Person(name) { this.name = name; this.hi = function() { console.log(`Hi, My name is ${this.name}`) } } const kim = ..

button { &:first-child { &:nth-last-child(1) { width: 100%; border-radius: 5px; } } } *nth-last-child() 형제 그룹에서 제일 마지막 요소부터 순서를 매기는 패턴으로 nth-child와 쓰임은 유사함. 프로젝트를 진행하다보면 하나의 요소 안에 한개의 자식 컨텐츠가 들어갈 때도, 두개의 컨텐츠가 들어갈 때도 있다. 한개 한개를 다 잡아주는 것도 맞는 방법이지만, 뭔가 최대한 깔끔한 코드를 만들어보려고 발악중 scss의 조건문보다는 위처럼 적용하는게 훨씬 간결해질것같아서 사용해봤다~ 아직 저 상태로 사용 시 생길 버그에 대해서는 검증 전이므로 확인 후 사용할 것

vue 프로젝트 진행 시 다양한 프레임워크나 컴포넌트를 사양하게 됩니다. 자식 컴포넌트에 원하는 css 를 적용하고 싶은데 그게 안될때 딥셀렉터를 사용합니다. !! 자식 컴포넌트의 css에 쉽게 접근되지 않는 이유 웹컴포넌트의 스타일 캡슐화 때문!! 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 적용되지 않도록 하기 위한 특성때문이라고 생각하면 됨. scoped를 유지하면서 자식 컴포넌트에 css 적용하기 위의 세가지 방법으로 적용하면 모두 동일하게 아래와 같이 컴파일 되면서 자식 컴포넌트까지 접근이 가능하게 됨. .a[data-v-f3f3eg9] .b {/*...*/} 단, 첫번째와 두번째 방법은 css에서는 문제가 없으나 scss, sass, less 같은 ..

* 함수의 매개변수 - 함수의 바디 안에서 사용할 이름을 정해줌 * 함수의 리턴 - 함수의 결과를 얻어줌(실행 시 결과값) 선언적 함수 생성 function 함수이름(매개변수) { 로직 } 함수도 객체의 한 종류임(표준 내장 객체) function Hello1() { console.log("hello"); } console.log(hello1, typeof hello1); // [Function: hello1] function function Hello2(name) { console.log("hello2", name); } hello2("Mark"); // hello2 Mark function hello3(name) { return `hello3 ${name}`; } console.log(hello3("..

flex containr 안에 두개의 flex-item 이 존재할 때, 1번 아이템에 내부 컨텐츠(텍스트)가 길어질 경우, 2번은 줄어들지 않고 1번에서만 '...' 표기되게 하려고 한다. 무슨 이유에선지 다른데에서 아무문제 없이 사용되던 코드가 flex-container의 넓이가 충분함에도 불구하고 첫번째 아이템이 ... 처리되었다. 적용한 css는 아래와 같다. .flex-container { display: flex; } .flex-item1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flex-item2 { flex-shrik: 0; } 크롬에서는 원하는 대로 적용이되는데 유독 safari에서는 위의 첨부한 이미지처럼 ..

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);