Destructuring 비구조화 할당 위의 객체에서 , , 를 각각 분리해서 사용하고자 할 때 을 사용한다. JavaScript에서의 Destructuring TypeScript에서의 Destructuring 잘못된 방법 단순히 생각해서 이런 식으로 타입을 지정해주면 되지 않을까 싶었음 이렇게 할 경우 name, age, gender를 각각 string,number,string으로 명명하라는 코드가 됨. 쉬운 방법 로 감싸진 전체에 대해서 타입을 지정해야 됨 권장하는 방법 interface로 미리 타입을 정의하고 해당 interface를 타입으로 지정하는 방식이 있다. JavaScript에서의 Destructuring TypeScript에서의 Destructuring 잘못된 방법 쉬운 방법 권장하는 방법

webpack-dev-server 사용하기 프론트에서 js모듈화를 진행하기 위해 과 을 적용하였다. ES6 문법을 브라우저에서도 사용하기 위해서 babel을 적용하고, 그걸 하나로 모듈화를 해주기 위해 webpack을 적용하였다. 그 결과는 html View에서 webpack으로 뭉쳐진 bundle.js하나만 로드해주면 모든 것이 한방에 해결되는 편리함을 맛 볼수 있었다! 에 대한 공부를 대충한 탓이 여태까지 그저 파일간의 의존성같은 부분을 해결해주는 정도로만 생각했지만 아주 많은 기능들이 있었다. 그중 하나가 바로 이다. 이걸 알기 전 까지 webpack을 돌린 후에 html파일을 따로 vscode extention liveserver로 따로 html을 서버에 띄워 테스트를 하였다. webpack-dev-server란? webpack-dev-server는 빠른 실시간 리로드 기능을 갖춘 개발 서버이다 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 속도가 빨라진다. …

3) 출력문 자바스크립트는 HTML 문서를 통해 웹브라우저에서 출력되므로 따로 출력문이 존재한다기 보다는 HTML 문서의 구성요소에 동적으로 출력하거나 웹브라우저의 경고창을 이용해 출력하는 형태가 출력문으로 볼 수 있다. HTML 문서에 출력 HTML 문서에 출력하는 형태로 페이지가 모두 로딩된 다음에 실행하면 원래 있던 HTML 화면내용은 지워지게 된다. 밑에 코드는 연산결과를 웹브라우저에 출력하는 코드이다. HTML 문서의 특정부분에 출력 HTML 문서의 특정요소를 찾아 해당 콘텐츠를 대체해 출력한다. 자바스크립트에서 가장 보편적으로 HTML 문서를 동적으로 핸들링하는 방법이다. 다음 예제는 앞의 예제와 비슷하지만 기존 HTML 소스를 유지하고 부분적으로 변경 된다. Alert 창을 이용한 출력 웹브라우저에서 오픈되는 조그만 경고창(alert)를 이용한 출력이다. 보통 프로그램에서 에러, 경고, 사용자 입력을 위해 많이 사용한다. 브라우저 콘솔창을 이용한 출력 자바스크립트 코드…

1)자료형 내부적으로는 Primitive(기본형)과 Object(객체형)이 있으며 각각 다음과 같다. Primitive Reference 타입 클래스 뿐만 아니라, 배열과 함수, 사용자 정의 클래스도 모두 Object. JSON(Java Script Object Notation)의 기본 구조. 2)변수 선언 변수이름은 대소문자를 구별한다. 여러 변수를 한번에 선언할 수 있음. 지역변수와 전역변수가 있음. 기본적으로 소문자로 시작되는 Camel Case 를 사용. var, let, const ES6 이전에는 만 존재했으며 function-scoped 로 인해 다른 언들과 다른 문제가 있었음. 는 지역변수 개념으로 함수 범위에서 유효함. 를 선언하지 않으면 자동으로 전역변수가 됨. 과 는 ES6 에서 등장한 block-sceoped 변수 선언. 은 값의 재할당이 가능하고 는 불가능(immutable). 로 선언된 배열이나 객체의 경우 새로운 객체로 재할당하는 것은 안되고, 배열값의…

소스코드 위치 자바스크립트는 기본적으로 HTML 문서의 사이에 위치 한다. 그러나 그 외 위치에 둘수도 있고 외부파일이나 다른 서버를 통해 참조하는 방식으로도 사용할 수 있다. 자바스크립트의 소스가 위치하는 몇몇 유형에 대해 살펴 보자. 1) 내부 자바스크립트 HTML 문서 내부에 자바스크립트 소스코드를 두는 유형 입니다. 혹은 에 둘 수 있으며 양쪽에 모두 있어도 상관 없다. 현재 HTMl 파일의 문서구조(DOM)에 쉽게 접근이 가능. 현재 화면에 동적인 요소를 부여하는 자바스크립트가 같은 소스파일에 위치하기 때문에 코드 관리와 이해가 쉬움. 자바스크립트 소스가 복잡해지는 경우 관리가 어려움. 공통된 기능을 만들기 어렵고 코드의 재활용이 어려움. 2) 외부 자바스크립트 HTML 문서 외부에 별도의 파일을 생성하고 HTML 에서 불러와 사용하는 방식이다. 이때 자바스크립트의 파일의 위치는 HTML과 동일한 서버 혹은 외부 서버일수도 있다. 웹의 HTML코드로부터 웹의 동작을 …