Backend/JS & TS5 타입스크립트 - part 1 타입스크립트 Deno라는 런타임 환경에서 돌아감 js로 변환 후 Node.js 런타임에서 실행 → 이 과정을 컴파일이라함 (java와 다름, 단순 컴파일) 설치 sudo npm install -g typescript // version 확인 tsc -v // 실행하기 위해 npm package 설치 -> javascript(node.js) 프로젝트 만들기 npm init // tsc 실행 할 때 컴파일 옵션을 정하기 위해 config 파일 만들기 tsc --init ts.config.json 설정 { "compilerOptions": { "include": ["**/*.ts"], "exclude": ["node_modules"], } } include → 어떤 타입스크립트 파일을 자바스크립트 파일로 변환.. 2023. 3. 23. 자바스크립트 - part 4 동기, 비동기 Web APIs (비동기적으로 해주는 내장 함수) DOM API setTimeout setInterval fetch EventListener Ajax 자바스크립트 동기적 실행 function testA(){ console.log('실행 시작!'); } testA(); console.log('끝났습니다.'); 자바스크립트 비동기적 실행 대표적 비동기 메서드 → setTimeout() 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있는데요. 이럴 때는 자바스크립트의 setTimeout() 함수를 사용할 수 있다. setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연 시간을 밀리초(ms) 단위로 받는다. 콜백 함수 함수.. 2023. 3. 23. 자바스크립트 - part 3 에러 처리 try, catch, finally function readFile(path){ throw new Error('파일 경로를 찾을 수 없음'); return '파일 내용'; // 안나옴 } function processFile(path){ let content; try{ // 오류날 것 같은 구문 content = readFile(path); }catch(err){ // 실패시 console.log(err.name); console.log(err.message); }finally{ console.log('성공 실패 여부와 관계없이 호출'); } 모듈 하나의 html의 연결 js 파일이 여러 개인 경우 사용 app.js와 app2.js가 있으면 app.js에서 전역 변수와 함수, app2.js에서.. 2023. 3. 23. 자바스크립트 - part 2 객체 지향 ES6 클래스 객체를 만들기 위한 템플릿 (붕어빵 툴 == 생성자 함수, 붕어방 == 객체) 프로토타입 기반 생성자 함수를 사용할 수 있지만 에전 방식, 요즘에는 class를 사용한다 클래스에서 객체를 만들 수 있고, 클래스를 통해 객체를 만든 것을 인스턴스라 부른다 용어 생성자 constructor: new 키워드로 객체(인스턴스)를 생성할 때 호출되는 함수 생성자 프로퍼티 위에 필드 프로퍼티 인스턴스의 메소드 class Fruits{ // 필드 const name; const emoji; // 생성자 함수 constructor(name,emoji){ this.name = name; this.emoji = emoji; } // 메서드 display(){ console.log(`${this.n.. 2023. 3. 23. 자바스크립트 - part 1 ⭐️ 알고 가기 /* javascript */ alert('실행창'); js는 인터프리터 언어 컴파일러가 아님 head에 js파일 연결하는데 defer 넣기( defer와 async) (defer는 동기적 async는 비동기적) defer, async 스크립트 console.log → 출력 console.warn → 경고 console.error → 에러 변수 var, let, const var: 지역변수, 전역 변수 개념도 없고 재할당도 가능해서 헷갈림 let: 재할당 가능 let num = 10; num++ const: 재할당 불가 const person = { name: 'kky', age: 25, } 자바 스크립트 타입 원시 타입 number int float string boolean null .. 2023. 3. 23. 이전 1 다음