2024.10.11 (Day 24) - TypeScript

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..

• format_list_bulleted BootCamp Review
• · 2024. 10. 11.
• textsms

2024.10.10 (Day 23) - File / Web APIs

File 핸들링 제약• 브라우저에서 실행되는 프론트 웹 애플리케이션에서 사용자 컴퓨터에 저장되있는 파일을 핸들링하는 것은 일차적으로 금지되어 있다.유저가 브라우저에서 선택한 파일에 한해서만 자바스크립트로 읽어 들일 수 있고 서버에 업로드가 가능하다.사용자가 선택한 파일이란 이후에 살펴볼 을 통해 유저가 선택한 파일이거나아니면유저가 드래그&드랍으로 웹 페이지에 추가시킨 파일을 의미한다. • 사용자가 애플리케이션에 파일을 추가하기 위한 가장 기본적인 방법은 태그를 이용하는 방법이다. ▼ multiple 속성 • multiple 속성이 추가되면 사용자가 파일 선택 다이얼로그에서 여러 파일을 선택할 수 있다. ▼ accept 속성 • accept 속성을 이용해 사용자가 선택할 파일의 타입을 지정할 수 있다.  ..

• format_list_bulleted BootCamp Review
• · 2024. 10. 10.
• textsms

2024.10.08 (Day 22) - WebSocket / Web APIs

WebSocket▼ HTTP 프로토콜의 한계 • HTTP 프로토콜의 특징을 이야기 할 때 항상 화자되는 중요 특징이 Connection Oriented 와 Stateless 이며Connection Oriented 라는 특징은 네트워킹을 통해 데이터를 주고 받고자 하는 두 애플리케이션이 상호 연결된 상태에서 데이터 송신/수신이 이루어 진다.HTTP 프로토콜은 Connection Oriented 하다고 주로 말하는데,우리가 관심을 가지고 있는 웹 애플리케이션으로 이야기 하자면 브라우저와 웹 서버가 네트웍에서 연결된상태에서 상호 데이터를 주고 받으면서 브라우저에 백앤드 데이터가 출력되는 것이다. • HTTP 프로토콜이 가지는 또 하나의 중요 특징이 Stateless 이다.Stateless 는 웹 애플리케이션을..

• format_list_bulleted BootCamp Review
• · 2024. 10. 8.
• textsms

2024.10.07 (Day 21) - Storage / Web APIs

Storage• 데이터를 영속적으로 저장하거나 아니면 영속적으로 저장된 데이터를 가져와 애플리케이션에서 이용하는것은 애플리케이션에서 가장 기초적면서 가장 빈번하게 작성되는 것 중 하나이다. 백앤드 애플리케이션에서는 영속적인 데이터 저장을 위해 대부분 데이터베이스를 이용하며오라클, SQL Server, MySQL, MariaDB 부터 클라우드에서 제공하는 데이터베이스까지 많은 데이터베이스들이 있으며 이를 이용해 데이터를 영속적으로 저장해 사용한다.브라우저에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하고 프런트 자바스크립트에서 WebAPI 를 이용해 프로그램을 작성해 데이터를 영속화 시켜야 한다. 프런트 웹 애플리케이션에서 데이터 영속적 저장을 위해 사용되는 Web API 는 크게 스토리지와In..

• format_list_bulleted BootCamp Review
• · 2024. 10. 7.
• textsms

2024.10.04 (Day 20) - Ajax, Axios / Web APIs

Ajax• Ajax 는 서버 연동을 위한 자바스크립트 프로그램이다.Asynchronous Javascript XML 의 약어이며 비동기 서버 연동을 위해 제공되는 기술이며브라우저에서 서버에 네트워크 통신을 할 때 Ajax 를 제외한 모든 통신은 동기 통신이다.화면에 링크가 있고 그 링크를 사용자가 클릭해서 서버와 통신하는 경우, 화면에 버튼이 있고 그 버튼을 클릭해 서버와 통신하는 경우 등 대부분의 통신은 동기적 통신이며동기 통신이란 브라우저에서 서버에 요청(request)을 보내면 서버에서 응답(response) 할 때까지 브라우저는 대기상태가 된다는 의미이다.• 서버에 요청을 보내게 되면 브라우저는 이 요청을 동기적으로 처리하게 됨으로 응답이 올때까지 대기하게되며 이로 인해 사용자는 브라우저를 이용할..

• format_list_bulleted BootCamp Review
• · 2024. 10. 7.
• textsms

2024.10.02-04 (Day 19,20) - JavaScript 비동기/ Web APIs

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..

• format_list_bulleted BootCamp Review
• · 2024. 10. 4.
• textsms