0. Defining a Function ⭐ 함수도 객체이고 타입이 Function임 ➡️ 함수를 변수에 할당하거나, 다른 함수에 인수로 전달할 수 있음을 의미하는 것이다. // 단축 구문(하나의 표현식만 포함하는 함수의 경우) String sayHello(String name) => "Hello $name nice to meet you."; // 아래 코드와 같다. String sayHello(String name) { return "Hello $name nice to meet you."; } 1. Named Parameters 💡 Positional Paramater paratmeter의 위치를 기억하고, parameter의 순서를 그대로 따라서 argument를 입력해야 함 💡 Named Param..
0. Basic Data Types Dart는 객체 지향 언어 - 대부분의 타입들이 객체로 이루어져 있다. (함수도 객체!) void main() { String name = 'gaeun'; int age = 10; bool isPlay = true; double money = 50.23; num x = 12; num y = 12.11; } 1. Lists list 선언하기 void main() { int case1 = [1, 2, 3, 4, 5]; List case2 = [1, 2, 3, 4, 5]; } ➕ collection if : list 생성할 때 조건에 따라 element 추가 ➡️ 존재할 수도, 안할 수도 있는 요소를 가지고 올 수 있다! void main() { var giveMeSix =..
0. Why Dart? 1) just-in-time 컴파일 제공 ; 코드의 결과를 화면으로 바로 확인 가능 + ahead-of-time 컴파일도 제공 ; 다른 CPU 아키텍처에 맞춰서 컴파일된 바이너리를 빠르게 만들 수 있음 2) flutter와 dart 팀 간의 협력 관계 ; 프레임워크(flutter)가 필요하다면 언어(dart)가 최적화 해줌 1. The Var Keyword 변수 선언 방법 1) var 사용 (권장) 함수나 메소드 내부에서 지역변수 선언할 때 - 컴파일러가 변수 타입 추론 해줌 2) 명시적 타입 지정 class에서 변수나 property 선언할 때 ➕ 변수 update 가능 (동일한 타입의 값 한정) 2. Dynamic Type 💡 dynamic type이란, 여러 타입을 가질 수 ..
💡 DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. 01. 노드 1. HTML 요소와 노드 객체 HTML 요소(element)는 HTML 문서를 구성하는 개별적인 요소이며 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 Node 객체로 변환된다. HTML 문서는 HTML 요소들의 집합으로 이뤄지며, 요소와의 중첩 관계에 의해 계층적인 parent-child(부자) 관계가 형성된다. HTML 요소 간의 관계를 반영하여 HTML 요소를 개체화한 모든 노드 객체들을 트리 자료구조로 구성한다. 💡 노드 객체들로 구성된 트리 자료구조를 DOM 또는 DOM Tree 라고 한다. 2. ..
💡 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처이다. 💡 REST API는 REST를 기반으로 서비스 API를 구현한 것이다. 01. REST API의 구성 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 02. REST API 설계 원칙 1. URI는 리소스를 표현해야 한다. 🔹 URI는 리소스를 표현하는 데 중점을 두어야 하고, 식별할 수 있는 이름은 동사보다 명사를 사용한다. # bad GET /getTodos/1 GET /todos/show/1 # good GET /todos/1 2. 리소스에 대한 행위는 HTTP 요청 메서드로 표현한다. 🔹 HTTP ..
01. Ajax란? 🔹 Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 🔹 Ajax는 브라우저에서 제공하는 Web API는 XMLHttpRequest 객체를 기반으로 동작한다. 💡 전동방식 vs. Ajax 1. 전통방식 🔹 화면이 전환되면 서버로부터 새로운 HTML 페이지를 전송받아 웹페이지 전체를 처음부터 다시 렌더링한다. ➡️ 단점 : 불필요한 데이터 통신이 발생하고, 변경이 필요없는 부분까지 다시 렌더링하므로 화면 전환 시 화면 깜빡임 현상이 발생한다. 또한, 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지..
01. 동기 처리와 비동기 처리 🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 🔹 즉, 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다. ➡️ 처리에 시간이 걸리는 태스크를 실행하는 경우, 블로킹(작업 중단)이 발생한다. 💡 동기 처리 : 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식 ➡️ 장점 : 실행 순서가 보장된다. ➡️ 단점 : 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹된다. 💡 비동기 처리 : 실행 중인 태스크가 종료되지 않은 상태여도 다음 태스크를 곧바로 실행하는 방식 ➡️ 장점 : 블로킹이 발생하지 않는다. ➡️ 단점 : 실행 순서가 보장되지 않는다. 🔹 타이머 함수인 setTimeout, setInterval,..
01. 호출 스케줄링 💡 호출 스케줄링 : 함수를 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것이다. 🔹 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가져, 싱글 스레드로 동작하기 때문에, 타이머 함수는 비공기 처리방식으로 동작한다. (42장. 비동기 프로그래밍) 02. 타이머 함수 1) setTimeout / clearTimeout 🔹 setTimeoue 함수의 콜백함수는 두 번째 인수로 전달받은 시간 이후, 단 한 번 실행되도록 호출 스케줄링 된다 const timeoutID = setTimeout(func|code[, delay, param1, param2, ...]); 매개변수 설명 func 타이머가 만료된 뒤 호출될 콜백 함수 delay 타이머..
🔹 자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드다. 🔹 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 💡 이 때, 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 파싱(해석)하고, 브라우저에 렌더링하는 과정을 거치게 된다. 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음 2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성함 3. 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AT(..