본문 바로가기

분류 전체보기

[패스트캠퍼스 챌린지 11일차] ECMAScript(ES6) - Polyfill, Transpile 패스트캠퍼스 작심 30일 챌린지 11일차. 오늘의 학습 내용은 Polyfill과 Transpile. 먼저 polyfill은 자바스크립트 표준 라이브러리에는 등록되어 있지만 아직 브라우저나 Nodejs에서 지원하지 않는 기능을 미리 써보기 위해 만들어진 객체다. 기존에는 javascript에서 특정 문자를 바꾸기 위해서는 replace 함수를 사용하였다. 그러나 replace 함수는 일치하는 문자 하나만 변경한다. 만약 script 안에 일치하는 문자가 많다면? 아마 replaceAll을 많이 떠올릴 것이다. 아직 ES5 문법으로 개발하여 replace와 정규식을 이용해 문자를 변경하고 있지만, 이미 자바스크립트 라이브러리에는 replaceAll 기능이 정의되어 있다. replaceAll 뿐만 아니라 이전.. 더보기
[패스트캠퍼스 챌린지 10일차] ECMAScript(ES6) - Promise 패스트캠퍼스 작심 30일 챌린지 10일차. 오늘 배운 ECMAScript의 개념은 바로 Promise! Script를 통해 개발을 하다보면 setTimeout과 같은 비동기 함수를 많이 사용하게 된다. setTimeout과 같은 비동기 함수를 실행한 후 함수의 실행 성공 여부에 따라 원하는 코드를 실행하거나 에러를 처리하고 싶은데 어떻게 해야할까? 이럴때 사용하는 것이 바로 Promise! Javascript에서 Promise는 '비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값'을 나타낸다고 MDN Web Docs에서 알려준다. 즉, 비동기 작업을 처리한 후 성공하면 내가 내가 원하는 코드를 실행하고, 실패하면 에러에 대한 처리를 할 수 있다는 것. 그럼 Promise는 어떻게 사용하는걸까? .. 더보기
[패스트캠퍼스 챌린지 9일차] ECMAScript(ES6) - Function Approach 패스트캠퍼스 작심 30일 챌린지 9일차. 오늘 학습 내용은 Function을 활용한 데이터 처리. 이전 Javascript에서는 for문과 if문을 중첩하여 원하는 데이터를 처리했어야 하지만, ES6에서는 다양한 function을 제공하기 때문에 복잡한 데이터를 처리하는데 많은 코드를 작성할 필요가 없다. const data = [{ "city" : "Seoul", "pet" : ["dog", "cat"] "age" : 40, "name" : "Tom" }, { "city" : "Pusan", "pet" : "dog" "age" : 20, "name" : "Jane" }, { "city" : "Seoul", "pet" : "cat" "age" : 30, "name" : "Bob" }] > 데이터 처리 실.. 더보기
[패스트캠퍼스 챌린지 8일차] ECMAScript(ES6) - Spread syntax 패스트캠퍼스 작심 30일 챌린지 8일차. 요즘 많이 사용하고 있는 ECMAScript인 ES6 문법 강의. 패스트캠퍼스에서 ES2015(ES6)와 TC39가 무엇인지 간략히 설명해주면서 ECMAScript가 어떻게 발전했는지 알려주었다. 중요한 내용이긴 하지만 관련 Github 사이트는 나중에 보고!! Spread syntax를 배우기 전에 let과 const에 대해 먼저 강의를 들었다. 기존 ES5 스크립트를 작성할 때 var를 통하여 변수를 선언하였다. (물론 나도 실무에서 엄청 많이 사용하고 있다.) var 변수는 여러번 중복으로 작성해도 상관없고, 원할 때 값을 바꿔도 상관없다. 그만큼 데이터를 유연하게(?) 사용할 수 있다는 장점이 있지만, 작성하다 보면 변수가 숫자를 담고 있는건지 문자를 담고.. 더보기
[패스트캠퍼스 챌린지 7일차] Javascript 기초이론(3) 패스트캠퍼스 작심 30일 챌린지 7일차. Javascript 기초이론 마지막! 오늘은 Prototype에 대해 학습하였다. Prototype은 Javascript에서 상속을 구현하기 위해 사용된다. 객체지향 프로그래밍을 하는 개발자들은 상속의 편리함과 필요성을 알 것이다. 예를들어 RedCar와 BlueCar라는 서로 다른 객체가 있고, 둘 다 바퀴가 있고, 굴러간다는 공통점이 있다. 만약 상속 기능이 없다면 각 객체마다 바퀴라는 속성과 굴러간다는 기능을 작성해줘야 한다. 하지만 Car라는 객체에 바퀴라는 속성과 굴러간다는 기능을 작성한 후 RedCar, BlueCar 객체가 상속을 받으면 각자 필요한 속성과 기능을 작성할 필요가 없어진다. 이를 Javascript에서는 Prototype을 통해 구현할 .. 더보기
[패스트캠퍼스 챌린지 6일차] Javascript 기초이론(2) 패스트캠퍼스 작심 30일 챌린지 6일차. 오늘도 자바스크립트의 중요한 개념을 배운 날. Javascript의 Hoisting과 Scope, 그리고 Closure의 개념에 대해 강의를 들었다. 먼저 Hoisting은 함수와 변수 선언을 스코프의 맨 위로 끌어 올려준다는 개념으로 var 변수를 선언하거나 Function을 작성하게 되면 발생한다. 다만, var 변수의 선언만 Hoisting이 되고 값 세팅은 Hoisting이 되지 않으니, 이 점에 유의해야겠다. ex> console.log(value); var value = 10; // Hoisting 후 val value; console.log(value) value = 10; Scope는 변수를 어디까지 접근할 수 있는지에 대한 범위를 의미하며, Jav.. 더보기
[패스트캠퍼스 챌린지 5일차] Javascript 기초이론(1) 패스트캠퍼스 작심 30일 챌린지 5일차. Node.js를 배우기 전에 기본적으로 알아야 할 Javascript의 개념에 대한 강의가 구성되어 있다. 오늘은 그 중 Event 처리에 대한 강의를 수강하였다. 먼저 JS 실행 모델에 대한 개념! Call Stack이란? - 호출된 함수들을 담는 자료구조 - LIFO(Last In First Out) - 가장 마지막에 호출된 콜백부터 Pop Callback Queue란? - Message Queue라고도 함 - FIFO(First In First Out) - 앞으로 실행할 Callback을 쌓아두는 자료구조 - Event 발생 시 Main Thread에게 알려주기 위해 사용 Run to completion - Event Loop가 다음 Callback을 처리하.. 더보기
[패스트캠퍼스 챌린지 4일차] TypeScript Config 패스트캠퍼스 작심 30일 챌린지 4일차. 오늘 강의는 Ch.2의 마지막 과정인 Node.js를 위한 TypeScript Config 구성. 요즈음 TypeScript를 많이 배우던데, 이 과정을 계기로 TypeScript에 대해 조금 자세히 공부해봐야곘다. 실제 현업에서 javascript로만 개발하다 보면 변수에 어떤 타입이 지정되어 있는지 항상 console을 찍어봐야했다. 미리 Type을 강제할 수만 있다면 console을 통해 확인하지 않아도 타입을 알 수 있으니 생산성이 향상될 것 같다. 먼저 Typescript Package를 설치한 후 JS 파일 맨 위에 '//@ts-check' 구문을 작성하면 Typescript를 사용할 수 있다. String Type에 숫자를 넣거나, Numeric Ty.. 더보기

티스토리툴바