엘리스 SW 엔지니어 트랙
[TIL] 엘리스 SW 엔지니어 트랙 Day 023
[TIL] 엘리스 SW 엔지니어 트랙 Day 023
2021.11.25📖 오늘 배운 내용 - 2021.11.24 타입스크립트 장점 클린 코드 타입스크립트 기본 Type Utility types TS로 함수 사용하기 TS로 클래스 사용하기 상속 추상 클래스 접근 제어자 Getter & Setter / readonly / static 📝 타입스크립트 기본 Type JS코드에 변수나 함수 등 Type을 정의할 수 있다. Type을 나타내기 위해서 타입 표기(Type Annotation)를 사용한다. TS의 Type 기본 자료형(primitive type) 참조 자료형(reference type) 추가 제공 자료형 📕 기본 자료형 object와 reference 형태가 아닌 실제 값을 저장하는 자료형 primitive type 내장 함수를 사용 가능한 것은 자바스크립트 처리 방식..
[TIL] 엘리스 SW 엔지니어 트랙 Day 022
[TIL] 엘리스 SW 엔지니어 트랙 Day 022
2021.11.24📖 오늘 배운 내용 - 2021.11.23 TypeScript 기본 타입 타입 별칭(alias) Utility types TypeScript 상속 TypeScript 추상 클래스 📝 TypeScript TypeScript는 JavaScript의 슈퍼셋이다. 이외에 추가적인 기능 제공 타입을 제공 → 명시적인 데이터에 대한 유형 설명 안정성 있는 코드 작성 가능 예상치 못한 오류 발생을 줄일 수 있다. 컴파일 언어 객체 지향 프로그래밍 언어 📝 TypeScript 12개 타입 [TypeScript] 타입스크립트 12개 타입 🎯 타입스크립트 12개 타입 타입스크립트의 기본 타입에는 크게 다음 12가지가 있다. :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라..
[TIL] 엘리스 SW 엔지니어 트랙 Day 021
[TIL] 엘리스 SW 엔지니어 트랙 Day 021
2021.11.22📖 오늘 배운 내용 - 2021.11.20 Axios HTTP 행멘 게임 만들기 프로젝트 📝 Axios [Axios] Axios 사용법 🎯 Axios 사용법 웹 브라우저와 Node.js를 위한 HTTP 비동기(작성된 순서대로 실행되지 않는 처리) 통신 라이브러리이다. 백엔드와 프론트엔드 간 통신을 쉽게 하기 위해 사용되는 것으로 Ajax처럼 사 lakelouise.tistory.com 📝 HTTP HTTP는 Hypertext Transfer Protocol의 약자이다. Hypertext: 컴퓨터 화면이나 전자 기기에서 볼 수 있는 데이터이며, 다른 데이터와 연결될 수 있는 주소를 참조하고 있다. Transfer: 사람들이 브라우저를 통해 확인하는 웹상의 데이터는 HTTP에 의해 전달된다. Protocol..
[TIL] 엘리스 SW 엔지니어 트랙 Day 020
[TIL] 엘리스 SW 엔지니어 트랙 Day 020
2021.11.19📖 오늘 배운 내용 - 2021.11.19 async / await HTTP REST API Fetch API 📝 async / await [JavaScript] 자바스크립트 async / await 🎯 async / await 함수 앞에 async를 사용하면 Promise 객체를 반환 await을 사용하면 Promise를 결괏값이 바로 들어간다. 쉽게 생각하면 then() 기능이다. Promise를 활용한 비동기 코드를 간결하게 작성하는 lakelouise.tistory.com [TIL] 엘리스 SW 엔지니어 트랙 Day 019 📖 오늘 배운 내용 - 2021.11.18 fetch async / awiat JSON.parse JSON.stringify() 📝 fetch 통신해서 받으면 promise로 ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 019
[TIL] 엘리스 SW 엔지니어 트랙 Day 019
2021.11.18📖 오늘 배운 내용 - 2021.11.18 fetch async / awiat JSON.parse JSON.stringify() 📝 fetch 통신해서 받으면 promise로 반환해준다. 그래서 then/catch을 사용해줘야 된다. 데이터를 가져올 때는 get 데이터를 추가할 때는 post [자바스크립트] 날씨 정보 가져오기, Geolocation API 날씨 추가하기, geolocation API geolocation API는 사용자의 현재 위치 정보를 가져올 때 사용하는 자바스크립트 API이다. 사용자의 위치를 지도에 표시하거나, 사용자 근처의 상점을 찾아주는 등의 위치 lakelouise.tistory.com Using Fetch - Web API | MDN Fetch API를 이용하면 Reque..
[TIL] 엘리스 SW 엔지니어 트랙 Day 018
[TIL] 엘리스 SW 엔지니어 트랙 Day 018
2021.11.17📖 오늘 배운 내용 - 2021.11.17 동기 / 비동기 이벤트 루프 Promise 📝 자바스크립트 제어 흐름 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다. 📕 자바스크립트 엔진 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 메인 스레드는 코드를 읽어 한 줄씩 실행한다. 📕 동기적 제어 흐름 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다. 분기문, 반복문, 함수 호출 등이 동기적으로 실행된다. 코드의 흐름과 실제 제어 흐름이 동일하다. 싱글 스레드 환경에서 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다. 📕 비동기적 제어 흐름 비동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전에 다..
[TIL] 엘리스 SW 엔지니어 트랙 Day 017
[TIL] 엘리스 SW 엔지니어 트랙 Day 017
2021.11.16📖 오늘 배운 내용 - 2021.11.16 SPA(Single Page Application) history api 동기/ 비동기 콜백 함수(Callback Function) Promise 📝 history api SPA를 만들 때 브라우저 세션 기록을 위해 history api를 사용한다. [JavaScript] 자바스크립트 History API 🎯 History API history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가지고 있다. 📝 history.pushState() history.pushState({data: 'pushpus.. lakelouise.tistory.com History.pushState() - Web APIs..
TIL] 엘리스 SW 엔지니어 트랙 Day 016
TIL] 엘리스 SW 엔지니어 트랙 Day 016
2021.11.16📖 오늘 배운 내용 - 2021.11.13 자바스크립트 변수 정의 과정 호이스팅 자바스크립트 내장 객체 📝 자바스크립트 변수 정의 과정 variable object와 Scope chain은 렉시컬 환경에 속한다 📕 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트 코드를 읽어 실행하는 프로그램이다. 작성된 코드는 엔진을 통해 파싱 되고 실행된다. 크롬은 V8엔진 사용 node.js는 브라우저 외의 환경에서 JS코드를 실행하도록 하는 프로그램이다. V8사용 브라우저 환경과 node.js 환경은 같은 JS코드를 작성해도 다르게 동작할 수 있다. 📕 자바스크립트 코드 실행 JS엔진은 코드 실행 전 실행 컨텍스트를 생성한다. 실행 컨텍스트는 두 단계를 통해 생성된다. 생성 단계에서 JS엔진은 변수 선언을 읽는다..
[TIL] 엘리스 SW 엔지니어 트랙 Day 015
[TIL] 엘리스 SW 엔지니어 트랙 Day 015
2021.11.13📖 오늘 배운 내용 - 2021.11.12 자바스크립트 동작 원리 스코프 : 코드가 현재 실행되는 환경, 맥락 실행 컨텍스트 : 스코프 체인, this 포인터, variable objects 화살표 함수와 일반 함수의 this 차이점 클로저 나머지 매개변수, Rest Operator 전개 연산자, Spread Oprator 📝 자바스크립트 함수가 실행되는 과정 [JavaScript] 자바스크립트 함수가 실행되는 과정 🎯 자바스크립트 함수가 실행되는 과정 스코프 : 코드가 현재 실행되는 환경, 맥락 실행 컨텍스트 : 스코프 체인, this 포인터, variable objects 📝 자바스크립트 코드의 실행 1 자바스크립트 엔진은 lakelouise.tistory.com 📝 실행 컨텍스트 [JavaScrip..
[TIL] 엘리스 SW 엔지니어 트랙 Day 014
[TIL] 엘리스 SW 엔지니어 트랙 Day 014
2021.11.11📖 오늘 배운 내용 - 2021.11.11 실행 컨텍스트 스코프(Scope) 호이스팅 자바스크립트 내장 객체 전개 연산자 toLocaleString toFixed 📝 [스코프] 지역 / 전역 변수 변수가 작동하는 유효 범위, 변수에 접근할 수 있는 범위 JS에는 2가지 스코프 타입이 있다. = Global / Local 전역(Global ) 스코프는 어느 곳에서든지 해당 변수에 접근할 수 있다. 지역(Local) 스코프는 해당 지역에서만 접근할 수 있다. var a = "global"; // Global Scope function localFunction() { var a = "local"; console.log(a); } localFunction(); // local console.log(a); // ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 013
[TIL] 엘리스 SW 엔지니어 트랙 Day 013
2021.11.10📖 오늘 배운 내용 - 2021.11.10 DOM HTML 요소의 선택 HTML 요소의 생성 Node 객체 이벤트 내비게이션 기능 구현 이미지 슬라이드(animate()) 탭 버튼 기능 구현 📝 DOM DOM : 객체 지향 모델로써 구조화된 문서를 표현하는 형식으로, 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 하는 인터페이스 DOM은 프로그래밍 언어와 독립적이다. 어떠한 언어에서도 가능하다. 📝 요소 선택하기 [자바스크립트] Document 객체 Document 객체 Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다. 브라우저가 불러온 웹 페이지를 나타내 lakelouis..
[TIL] 엘리스 SW 엔지니어 트랙 Day 012
[TIL] 엘리스 SW 엔지니어 트랙 Day 012
2021.11.09📖 오늘 배운 내용 - 2021.11.09 DOM 📝 DOM(Document Object Model) [JavaScript] 자바스크립트 DOM 트리 🎯 DOM 트리 HTML을 지탱하는 것은 태그(tag)이다. 📝 DOM 예제 사슴에 관하여 사슴에 관한 진실. 트리에 있는 노드는 모두 객체이다. 태그는 요소 노드(element node) (혹은 그냥 요소)이고,. lakelouise.tistory.com [JavaScript] 자바스크립트 DOM 탐색하기 🎯 DOM 탐색하기 DOM에 수행하는 모든 연산은 document 객체에서 시작한다. 📝 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document 가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. = lakelo..