프론트엔드17 호이스팅이란? 구형 자바스크립트 호이스팅은 구형 자바스크립트에서 발생하는 것이며, 현재 이런 코드가 있다면 개선해야 합니다. 호이스팅의 사전적 의미는 다음과 같다. hoisting 명사 1.끌어 올리기; 들어올려 나르기. 자바스크립트에서 발생하는 호이스팅은 변수를 끌어올린다 라고 생각하고 아래 내용을 보시면 도움이 되겠다. 변수 선언 호이스팅이라는 개념을 알기 전 변수 선언에 대한 개념이 필요하다. ECMA6에 들어오면서 JavaScript에는 'let'과 'const'라는 변수선언 예약어가 추가되었다. 이는 var가 가지고 있는 문제를 해결하기 위해서 만들어진 것이라고 한다. var 변수선언의 가장 큰 특징은, 블록 스코프가 없다는 것이다. 블록 스코프가 없다는 것은, 변수의 영향범위를 산정하기 어렵다는 의미이다. .. 2021. 1. 11. this this : 메서드 내부에서 객체에 접근할 수 있는 지시자? 예약어? let company = { name: "nhn", where: "pangyo", companyName() { alert(this.name); // this 는 현재 메소드의 객체인 company를 나타낸다. } }; company.companyName(); 동일한 코드는 다음과 같이 작성할 수 있다. let company = { name: "nhn", where: "pangyo", companyName() { alert(company.name); return company.name; // this. 대신 user 사용 } }; company.companyName(); 다만 후자의 경우, 원하지 않는 형태의 동작을 할 수도 있다. 예를.. 2020. 12. 31. Web Pack이란 무엇인가 단순 정의 WebPack이란 모듈을 번들링하는 도구다. WebPack 공식 홈페이지의 메인화면에서 돌아가는 이미지를 보면 보다 쉽게 이해가 될 것이다. 대충봐도 복잡한 의존성 모듈들을 묶어서 정적 요소로 합쳐주는 것이다. 다음은 공식 홈체이지에 잇는 예제이다. src/index.js import bar from './bar'; bar(); src/bar.js export default function bar() { // } webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle... 2020. 11. 6. 타입스크립트 정리하기 6. 함수 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 6. 함수 6-1. 기본 파라미터와 옵션 파라미터 옵션 파라미터 타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다. 단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다. function buildName(firstName:string, lastName?:string){ //.... } function buildNameInvalid(firstName?.. 2020. 4. 19. 타입스크립트 정리하기 5. Enum 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 5. Enum 5-1. 특정한 값을 가진 Enum enum의 기본값은 각 요소가 풀어질 때 숫자 값이 할당된다. enum MimeType { JPEG, PNG, PDF } MimeType의 PDF를 사용하게 되면, 값은 2가 된다. 이 때, 각 요소에 값을 할당할 수 있다. enum MimeType { JPEG = 'image/jpeg', PNG = 'image/png', PDF = 'application/pdf' } 이제 MimeType의 PDF를 사용하게 되면, 값은 'ap.. 2020. 4. 19. 타입스크립트 정리하기 3. 타입스크립트의 주요타입 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 3. 타입스크립트의 주요 타입 3-1. String Literal Types String Literal Types는 문자열이 가질 수 있는 특정 값을 한정할 수 있다. let myFavoritePet: "dog"; myFavoritePet = "dog"; // OK myFavoriyePet = "rock"; // Error: Type '"rock"' is not assignable to type '"dog"'. 타입의 이름을 주어 enum과 같은 역할을 할 수 있다. type .. 2020. 4. 13. Type Script 정리 - 2. 타입스크립트를 언제 또 왜 사용해야 하는가? 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 2-1. 안전성 타입스크립트는 정적 분석을 통해 타입에러를 잡아낸다. function double(x: number) : number { return 2*x; } double('2'); // ~~~ Argument of type '"2"' is not assignable to parameter of type 'number'. 2-2 가독성 타입스크립트는 에디터에서 상황에 맞는 문서를 제시한다. 2-3. 자동완성 타입스크립트는 에디터가 자동으로 소스코드를 지정한 형태로 포맷을 자.. 2020. 4. 13. Type Script 정리 - 1. 타입스크립트 시작하기 본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다. 본 글으 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다. 1. 타입스크립트 시작하기 1-1. 설치 및 설정 배경 타입스크립트는 자바스크립트 코드로 바로 컴파일하여 사용하기위한 자바스크립트의 형식화된 스크립트 코드이다. 타입스크립트는 .ts 확장자를 사용한다. 많은 IDE가 특별한 설치 없이 타입스크립트를 지원하지만, command line 에서도 Node.JS의 Typescript 패키지를 활용하여 컴파일 할 수 있다. TypeScript를 지원하는 IDE Visual Studio Visual Studio Code WebStorm I.. 2020. 4. 5. 이전 1 2 다음 반응형
