FRONTEND

FRONTEND/Javascript

[JS] 생성자 함수

객체 리터럴 let user = { name: 'Stella', age: 29, } 생성자 함수 (Intermediate Class) 비슷한 객체를 여러개 만들어야 하는 상황이 올 때 쓸 수 있는게 생성자 함수이다. 생성자 함수는 붕어빵 틀이나 와플팬이라고 생각하면 된다. 필요한 재료들을 넣어주고 찍어준다. 아래 코드에서 필요한 재료는 이름과 나이, 생성되는 객체는 와플이다. function User(name, age){ this.name = name; this.age = age; } let user1 = new User('Stella', 20); let user2 = new User('Kate', 25); let user3 = new User('Andy', 32); *생성자 함수는 첫글자를 대문자로 하..

FRONTEND/Javascript

[JS] 변수와 호이스팅

변수 (Variable) 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙이 이름을 말한다. 변수 선언 변수는 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었다. var와 let은 둘을 바꿔서 사용해도 크게 문제 되지 않는다. var 와 let의 차이점 var는 한번 선언된 변수를 다시 선언할 수 있다. var name = "Stella"; console.log(name); // Stella var name = "Kate"; console.log(name); // Kate 동일하게 let으로 선언할경우 에러가 발생한다. let name = "Stella"; console.log(name); // Stella ..

FRONTEND/React

[React] JSX란?

JSX란? const el = Hello, JSX; 위의 태그 문법은 문자열도, HTML도 아닌 JSX(Javascript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다. JSX는 React element를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다. React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메세지를 표시할 수 있게 해준다. JSX 사용 JSX는 공식적인 JS문법이 아니기 때문에 브라우저가 이해할 수 있는 평범한 JS로 변환시킬 방법이 필요하다. * 어떤 프레임워크를 사용해 웹앱을 만들때 가장 중..

FRONTEND/Javascript

[JS] == 와 ===의 차이점 (동등연산자와 일치연산자)

동등연산자 (==) : Equal Operator 일치연산자 (===) : Strict Equal Operator a 와 b의 값이 같은지를 비교할때 a == b는 값만 같으면 true를 반환하고, a === b는 값과 값의 종류 (data type)이 모두 같을때 true를 반환한다. CASE 1 const a = 1; const b = "1"; console.log(a == b); // true console.log(a === b) // false CASE 2 console.log(null == undifined); // true console.log(null === undifined); // false null 과 undifined는 값이 없음을 뜻하지만, 값의 종류가 다르다. CASE3 conso..

숭코기
'FRONTEND' 카테고리의 글 목록 (8 Page)