2024.10.11 (Day 24) - TypeScript
·
BootCamp Review
TypeScript 란• 타입스크립트 (TypeScript)는 MS에서 만든 대규모 어플리케이션 개발을 위한 소프트웨어 언어• ES6 + 정적 타입• ES6 는 Supset, Typescript 는 ES6 의 Super set • 타입스크립트는 ES6 의 모든 기능을 지원한다.• 정적 타입을 지원함으로 코드의 오류를 줄이고 쉽게 디버깅이 된다.개발환경• 타입스크립트를 브라우저의 JS Engine 이 해석하지 못한다.• 타입스크립트 코드를 브라우저에서 해석 가능한 자바스크립트 코드로 변형시켜야 한다.• 컴파일러(트랜스파일러)– tsc >npm install typescript>npx tsc main.ts • tsconfig.json 활용>npm init>npm install -D typescript>npx..
2024.10.10 (Day 23) - File / Web APIs
·
BootCamp Review
File 핸들링 제약• 브라우저에서 실행되는 프론트 웹 애플리케이션에서 사용자 컴퓨터에 저장되있는 파일을 핸들링하는 것은 일차적으로 금지되어 있다.유저가 브라우저에서 선택한 파일에 한해서만 자바스크립트로 읽어 들일 수 있고 서버에 업로드가 가능하다.사용자가 선택한 파일이란 이후에 살펴볼 을 통해 유저가 선택한 파일이거나아니면유저가 드래그&드랍으로 웹 페이지에 추가시킨 파일을 의미한다. • 사용자가 애플리케이션에 파일을 추가하기 위한 가장 기본적인 방법은 태그를 이용하는 방법이다. ▼ multiple 속성 • multiple 속성이 추가되면 사용자가 파일 선택 다이얼로그에서 여러 파일을 선택할 수 있다. ▼ accept 속성 • accept 속성을 이용해 사용자가 선택할 파일의 타입을 지정할 수 있다.  ..
2024.10.08 (Day 22) - WebSocket / Web APIs
·
BootCamp Review
WebSocket▼ HTTP 프로토콜의 한계 • HTTP 프로토콜의 특징을 이야기 할 때 항상 화자되는 중요 특징이 Connection Oriented 와 Stateless 이며Connection Oriented 라는 특징은 네트워킹을 통해 데이터를 주고 받고자 하는 두 애플리케이션이 상호 연결된 상태에서 데이터 송신/수신이 이루어 진다.HTTP 프로토콜은 Connection Oriented 하다고 주로 말하는데,우리가 관심을 가지고 있는 웹 애플리케이션으로 이야기 하자면 브라우저와 웹 서버가 네트웍에서 연결된상태에서 상호 데이터를 주고 받으면서 브라우저에 백앤드 데이터가 출력되는 것이다. • HTTP 프로토콜이 가지는 또 하나의 중요 특징이 Stateless 이다.Stateless 는 웹 애플리케이션을..
2024.10.07 (Day 21) - Storage / Web APIs
·
BootCamp Review
Storage• 데이터를 영속적으로 저장하거나 아니면 영속적으로 저장된 데이터를 가져와 애플리케이션에서 이용하는것은 애플리케이션에서 가장 기초적면서 가장 빈번하게 작성되는 것 중 하나이다. 백앤드 애플리케이션에서는 영속적인 데이터 저장을 위해 대부분 데이터베이스를 이용하며오라클, SQL Server, MySQL, MariaDB 부터 클라우드에서 제공하는 데이터베이스까지 많은 데이터베이스들이 있으며 이를 이용해 데이터를 영속적으로 저장해 사용한다.브라우저에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하고 프런트 자바스크립트에서 WebAPI 를 이용해 프로그램을 작성해 데이터를 영속화 시켜야 한다. 프런트 웹 애플리케이션에서 데이터 영속적 저장을 위해 사용되는 Web API 는 크게 스토리지와In..
2024.10.04 (Day 20) - Ajax, Axios / Web APIs
·
BootCamp Review
Ajax• Ajax 는 서버 연동을 위한 자바스크립트 프로그램이다.Asynchronous Javascript XML 의 약어이며 비동기 서버 연동을 위해 제공되는 기술이며브라우저에서 서버에 네트워크 통신을 할 때 Ajax 를 제외한 모든 통신은 동기 통신이다.화면에 링크가 있고 그 링크를 사용자가 클릭해서 서버와 통신하는 경우, 화면에 버튼이 있고 그 버튼을 클릭해 서버와 통신하는 경우 등 대부분의 통신은 동기적 통신이며동기 통신이란 브라우저에서 서버에 요청(request)을 보내면 서버에서 응답(response) 할 때까지 브라우저는 대기상태가 된다는 의미이다.• 서버에 요청을 보내게 되면 브라우저는 이 요청을 동기적으로 처리하게 됨으로 응답이 올때까지 대기하게되며 이로 인해 사용자는 브라우저를 이용할..
2024.10.02-04 (Day 19,20) - JavaScript 비동기/ Web APIs
·
BootCamp Review
Web APIs  • API(Application Programming Interface) 를 한마디로 정리하면프로그래밍 언어로 만들어진 데이터와 기능의 모음이며어떤 기능을 구현할 때 “유튜브 API 를 이용해서” 혹은 “카카오 API 를 이용해서” 구현했다는 용어를 본적이 있을 것이다.이 의미는 유튜브 혹은 카카오와 애플리케이션에서 연동할 때 연동방법을 추상화 시켜서제공하는 API 를사용한다는 의미이다. API 는 변수, 함수 혹은 클래스로 제공된다.Browser APIs : 브라우저에 내장되어 있는 API ( https://developer.mozilla.org/en-US/docs/Web/API)Third-Party APIs : 다른 벤더 혹은 플랫폼에서 제공하는 API setTimeout(), se..
2024.10.01 (Day 18) - JavaScript OOP / 클로저(Closure)
·
BootCamp Review
클로저란? 함수와 함수가 선언되었을 때의 렉시컬 환경(Lexical environment) 의 조합을 의미한다.클로저는 자바스크립트에서 중요 개념이며 자바스크립트 뿐만 아니라함수를 객체로 사용하는 대부분의 소프트웨어 언어에서 제공되는 개념이다. 클로저는 자바스크립트에서 함수를 이용하기 위해서 자동으로 제공되는 개념이며클로저를 위해 개발자가 어떤 코드적인 프로그램을 작성해야 하는 것은 아니고클로저 개념을 접하면 실행 컨텍스트(Execution Context) 개념과 렉시컬 환경을 이해가 선행되어야 한다. ▼ 실행 컨텍스트 • 실행 컨텍스트란 함수의 실행 환경이며 함수가 실행되기 위한 정보를 가지는 객체이다.함수가 호출되어 실행되려면 함수에 전달된 매개변수 값, 함수내에 선언된 로컬 변수, 로컬 함수등을 이..
2024.10.01 (Day 18) - JavaScript OOP / 클래스(class)
·
BootCamp Review
선언 및 생성• 객체의 모형을 선언하고 그 모형을 이용해 객체를 만드는 방법은 우리가 이미 살펴본 생성자 함수를 이용하는 방법이 있고 클래스를 이용하는 방법이 있다.생성자 함수를 이용하는 방법은 자바스크립트 초기부터 제공하던 전통적인 방법이며 클래스를 이용하는 방법은 ECMA2015부터 추가된 방법이며 ECMA2015에서 대부분의 소프트웨어 언어에서 객체지향을 위해 제공하는 클래스 방식을 지원하기 시작한 것이다. • 동일한 멤버로 구성되는 객체를 여러 개 만들기 위해서는우선 객체의 모형을 선언해야 하는데 이러한 모형이 클래스 이다.• 클래스는 class 라는 예약어로 선언되며 이 클래스내에 객체의 멤버인 프로퍼티와 함수를 선언하고클래스를 바탕으로 객체를 생성하기 위해서는 new 연산자를 이용한다.//클래..
2024.09.26-30 (Day 15,16,17) - JavaScript OOP / 다양한 OOP 기법
·
BootCamp Review
typeof, instanceof• typeof 연산자는 타입을 확인하기 위한 연산자이다. • instanceof 는 객체의 타입이 특정 타입인지를 판단하기 위한 연산자이며instanceof 왼쪽에 객체를, 오른쪽에 타입을 명시해서 왼쪽 객체의 타입이오른쪽에 명시한 타입인지를 판단하는 연산자이고 연산의 최종 결과는 true/false 이다.instanceof 는 생성자를 가지고 판단하는 연산자이기도 한다. ▶ 다른 함수의 프로토타입을 그대로 자신의 프로토타입으로 지정하는 경우의 instanceof  ▶ 상위 객체를 생성해서 하위 프로토타입으로 지정하는 경우의 instanceof "use strict"function User(){}let user1 = new User()//typeofconsole.log(..
2024.09.25-26 (Day 14,15) - JavaScript OOP / 프로토 타입
·
BootCamp Review
프로토타입? • 실제 면접에서 자바스크립트에 대해 물어보는 대표적인 질문인 “프로토타입”이라는 단어는일반적인 의미로 보면 어떤 제품을 만들기 전의 시제품이라는 의미가 있는데 자바스크립트 객체의 시제품 정도로 이해하면 된다.자바스크립트에서 함수를 선언하면 자동으로 그 함수를 위한 프로토타입 객체가 만들어 지는데여기서 중요한 점은 함수를 이용해 객체를 생성해야 만들어지는 것이 아니라 함수를 선언하는 것만으로자동으로 프로토타입 객체가 만들어 지는 것이다.• 프로토타입 객체에 자동으로 constructor 라는 생성자가 추가되어 있다.자바스크립트에서 함수를 이용해 객체를 생성한다는 의미는 사실 내부적으로 프로토타입의 생성자를 이용하는 것이며 User 라는 이름의 함수가 있고 이 함수를 이용해 new User()..