프론트엔드 스터디

자바스크립트에서 scope란?

Scope 스코프는 자바스크립트를 포하함 모든 프로그래밍 언어의 기본적인 개념입니다. 스코프란 참조 대사 식별자를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다. 프로그래밍은 변수를 선언하고 값을 할당하며 변수를 참조하는 기본적인 기능을 제공하며 이것으로 프로그램의 상태를 관리할 수 있습니다. 변수는 전역 또는 코드블록이나 함수 내에 선언하며 코드 블록이나 함수는 중첩될 수 있습니다. 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유요한 범위를 갖습니다. 만약 스코프가 없다면 어떻게 될까요? 스코프가 없다면 같은 식별자 이름은 충돌을 일으키므로 전체에서 하나밖에 사용할 수 없습니다. 스코프의 구분 자바스크립트에서 스코프를 구분하면 2가지로 나눌 수 있습니다. 전역 스코프 (G..

Prototype이란?

프로토타입 객체 Java, C++과 같은 클래스 기반 객체지향 프로그래밍 언어와 달리 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 클래스 기반 객체지향 프로그래밍 언어는 객체 생성 이전에 클래스를 정의하고 이를 통해 객체를 생성합니다. 하지만 프로토타입 기반 객체지향 프로그래밍 언어는 클래스 없이도 객체를 생성할 수 있습니다. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다. 이것은 마치 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다. 이러한 부모 객체를 프로토타입 객체 또는 프로토타입이라고 합니다. 프로토타입 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. function..

자바스크립트에서 함수란?

함수(Function) 함수란 어떤 작업을 수행하기 위해 필요한 문들의 집합을 정의한 코드 블록입니다. 함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 내용들을 일괄적으로 실행할 수 있습니다. 동일한 작업을 반복적으로 수행해야 한다면 미리 정의된 함수를 재사용하는 것이 효율적입니다. 이러한 특성은 코드의 재사용이라는 측면에서 매우 유용합니다. 함수의 일반적인 기능은 어떤 작업을 수행하는 문들의 집합을 정의하여 코드의 재사용에 목적이 있습니다. 이러한 기능외에도 객체 생성, 객체의 행위 정의(메서드), 정보 은닉, 클로저, 모듈화 등의 기능을 수행할 수 있습니다. 또한 자바스크립트의 함수는 객체(일급 객체, first class )입니다. 다른 객체와 구분될 수 있는 특징은 호출할 ..

strict mode(엄격모드)란?

strict mode(엄격 모드)란? 프론트엔드를 공부하다 build된 파일을 살펴보다가 "use strict"라고 적힌 구문을 볼 수 있었습니다. 아무런 설명도 없이 덩그러니 혼자 놓여져있으니 이게 뭔지 싶었습니다. 찾아보니 strict 모드는 ES5에서 추가된 키워드라고 합니다. 뭐 말그대로 번역하면 엄격모드인데 자바스크립트를 사용하면서 묵인하고 실행하던 문법검사를 엄격하게 하겠다로 이해하면 될 것 같습니다. function foo() { x = 10; } console.log(x); // ? 위의 예제를 실행했을 때 어떤 결과가 나올까요? foo 함수 내에서 선언하지 않은 변수 x에 10을 할당했습니다. 변수 x를 찾아야 x에 값을 할당할 수 있기 때문에 자바스크립트 엔진은 변수 x가 어디에서 선언..

Javascript에서 this란?

Javascript에서 this란? 자바스크립트를 사용하면서 this에 대해 많이 헷갈렸습니다. 어떨 때는 this가 되고 어떤 함수에서는 this가 안되고 this가 어느 상황에서 어떤 것을 가르키는 것에 대해 잘 이해를 못하고 사용했습니다. 특히 저는 java를 많이 사용했었던 개발자로서 class 내의 this처럼 사용하려고 했습니다. this는 javascript에서 자주 사용되기도 하고 중요한 문법이기에 다시 한번 리마인드하면서 정리를 해보려고 합니다. this란? this는 '자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수'다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 보통의 this 정의를 찾아보면 위와 같..

[TypeScript] 기초 - 타입스크립트를 왜 써야할까?

사실 본인은 프론트엔드 개발자도 아니였는데 입사를 하니 프론트 부서로 배치를 받아서 공부하게되버림. 내가 해본건 vue.js를 잠깐 맛본거 뿐인데... 근데 설상가상으로 자바스크립트도 어려운데 타입스크립트를 쓴다네? 하하하하?? 이게 뭐람?? 그래서 타입스크립트를 공부하기 시작함. 인터넷으로도 하고 지금은 또 책을 사서 책도 읽어보는 중. 결국 근간은 자바스크립트가 중요하지만 타입스크립트도 열심히 공부해서 정리해보겠음. 그래도 자바를 썼어서 타입에 관련된건 익숙해서 이해는 잘됨. 세 종류의 자바스크립트 자바스크립트는 현재 크게 3가지 종류가 있다고 합니다. 웹 브라우저에서 동작하는 표준 자바스크립트인 ES5(ECMAScript 5) 2015년부터 매년 새로운 버전을 발표하는 ESNext 타입기능을 추가한..

웹팩(Webpack)이란?

웹팩이란? 웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는모듈 번들러(Module Bundler)입니다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미합니다. 웹팩 시작하기 빈 폴더에서 아래 명령어로 package.json 파일을 생성 npm init -y 아래 명령어로 해당 폴더에 웹팩 관련 라이브러리와 lodash 라이브러리 설치 npm i webpack webpack-cli -D npm i lodash 폴더에 index.html 파일 생성하고 아래 내용을 추가 프로젝트 루트 레벨에 src폴더를 생성하고 그 안에 index.js파일을 생성 functi..

NPM이란

NPM 이란? NPM(Node Package Manager) 시작하기 npm 을 사용할 폴더에서 npm init 커맨드를 입력한다. npm init //package.json을 기본값으로 바로 생성해줌 npm init -y NPM 사용하는 이유와 장점 라이브러리 &의존성 관리 과거 웹 개발에서는 라이브러리를 script 태그로 관리했기 때문에 버전업이나 협업관련해서 어려움이 있었는데 npm을 사용하면 package.json 파일에서 한눈에 파악할 수 있기 때문에 라이브러리 관리 측면에서 효율적입니다. cdn을 사용했을 때는 공식 문서를 찾아서 태그를 찾아오는 방법이 번거롭다. 필요한 라이브러리를 npm install로 간단하게 설치하고 사용할 수 있습니다. NPM 설치 명령어 지역 설치 명령어 npm i..