WEB (47) 썸네일형 리스트형 [CSS] BEM이 뭘까 BEM BEM은 CSS 방법론이다. 말이 어렵지만 풀어 말하면 'CSS 클래스네임을 어떻게 지으면 좋을지' 개발자들이 머릴 맞대고 고민한 결과이다. html 요소들을 각각 Block, Element, Modifier이렇게 세 가지로 분류해 작명한다. Block 독립적으로 존재하고 재사용 가능한 요소를 block으로 명명 태그 값, id 사용 X 클래스로 정의 position, margin 등의 위치값을 지정하지 않음 (어디든지 재사용하기 위해!) 색상이나 크기 등을 묘사하는 이름 X 구조적으로 의미 있는 이름으로 짓기 ex) .btn{} Element 블록 내부에 종속되어 실제 기능을 담당하는 것 종속의 의미를 "block-name__element-name"로 나타낸다. 독립적으로 존재x 블록 내부에서 .. [JS] this란 무엇일까 1. 단독으로 this를 호출하였을때 let x = this; console.log(x); // Window 전역 실행 문맥(global execution context) 에서는 묻지도 따지지도 않고 전역 객체를 반환한다. 즉, Window 객체를 반환한다. 2. 함수에서 this를 호출하였을때 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은? window객체이다! function myFunction() { return this; } console.log(myFunction()); //Window var num = 0; function addNum() { this.num = 100; num++; console.log(num); // 101 console.log(window.num); /.. [JS] 클로저가 무엇일까? 클로저 란? 어떤 함수를 렉시컬 스코프 밖에서 호출해도, 원래 선언되었던 렉시컬 스코프를 기억하고 접근할 수 있도록 하는 특성을 클로저라고 한다. function outer(){ let name = 'michelle'; function inner(){ console.log(`hello! ${name}`); } inner(); return inner; } let greeting = outer(); greeting(); outer함수 내부에서 inner 함수를 호출했을 때, 렉시컬 스코프에 따라서 inner함수의 상위 스코프는 outer함수 이다. 따라서 outer함수에 있는 name 변수에 접근할 수 있고 "hello! michelle"을 찍을 수 있다. greeting 변수에는 outer함수의 리턴값인 .. [JS] 함수 스코프(Scope)에 대해 좀 더 알아보자 스코프(Scope, 유효범위)란? 자바스크립트에서 스코프를 번역할때 보통 유효범위라고 번역한다. 어떤 변수들이 어느 시점까지 유효한지를 정의한다.스코프엔 두 가지 종류가 있다. 전역 스코프 자바스크립트 프로그램을 시작 후, 어떤 함수도 호출하지 않았을 때, 실행 흐름은 전역 스코프에 있다. 중괄호 {}의 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 것들을 전역 변수라고 한다. 전역 변수를 많이 이용한다면 부작용이 발생한다. const name = 'Kwon' const age = 21; function displayName() { console.log(`My name is ${name}`); } function displayAge() { console.log(`I was born in ${new .. [JS] 함수 호이스팅(Hoisting) 함수 호이스팅(hoisting) 자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다. 그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다. 이러한 자바스크립트의 특징을 함수 호이스팅(hoisting)이라고 한다. 즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다. var globalNum = 10; // globalNum을 전역 변수로 선언함. function printNum() { document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다. "); var globalNum = 20; // globalNum을 .. [JS ES6+] var, let, const 차이점과 용도 JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 위 결과를 볼 때 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아진다면 어디에서 어떻게 사용될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. let name = 'bathingape' console.log(name) // bathingape let name = 'javascr.. JSON이 뭔지 알아보자 JSON ? JSON(JavaScript Object Notation)은 자바스크립트 문법을 빌린 데이터 교환 형식이다. { "title": "기록좀하자 인마", "description": "기록좀하자 인마의 Blog", "owner": "Kwon Hyeok Jin", "createdAt": "2020-03-00", "keyword": ["javascript", "Java", "MySQL", "WEB"], } JSON 함수 -JSON.parse() JSON형태의 String을 객체형 object로 변경하는 메소드이다. 데이터통신시 쿼리스트링 등 교환을 위해서는 문자형으로 변환이 필요하고, 이 주고받은 걸 다루기 위해서 다시 객체형으로 바꾸어 쓸 때 사용한다. const json = '{"result":t.. [JS] DOM(Document Object Model)에 대해서 알아보자 문서 객체 모델(DOM)이란? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보자. DOM은 어떻게 생성될까 (그리고 어떻게 보여질까)? DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다. DOM의 개체 구조는 “노드 트리”로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇.. 이전 1 2 3 4 5 6 다음
