FE

동기직렬 방식으로 작업을 처리하는 것하나의 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 비로소 다른 작업을 처리할 수 있음그동안 다른 모든 작업은 대기함 싱글 스레드 자바스크립트자바스크립트는 싱글 스레드로 작동하기 때문에 기본적으로 한 번에 하나의 작업만 동기 방식으로 처리할 수 있음자바스크립트는 초기에 HTML을 그리는데 보조하는 역할로 탄생했기 때문에 멀티 스레드 복잡한 내부 처리와 동시성 문제가 발생할 수 있는 멀티 스레드가 아닌 싱글 스레드로 설계됨자바스크립트에서 하나의 코드가 실행하는 데 오래 걸리면 뒤이은 코드가 실행되지 않는 특징을 갖음 = "Run-to-completion"  비동기동시에 일어나지 않는 것병렬 방식으로 작업을 처리할 수 있음동기식과 다르게 요청한 즉시 결과가 주어지지..

클로저란함수와 함수가 선언된 렉시컬 환경의 조합선언된 렉시컬 환경 : 변수가 코드 내부에서 어디서 선언됐는지를 의미 스코프전역 스코프전역 스코프에서 선언된 변수는 어디서든 호출 가능함window, global함수 스코프자바스크립트는 기본적으로 함수 레벨 스코프를 따름 ( {} 블록이 스코프 범위를 결정하지 않음) 클로저의 활용자바스크립트는 함수 레벨 스코프를 가지고 있고, 스코프는 동적으로 결정됨클로저를 활용하면 한 변수나 상태 값을 별도로 관리하는 클로저 내부에서만 접근 가능함function Counter() { var cnt = 0 return { increase : function () { return cnt++ }, decrease : f..

클래스란자바스크립트의 클래스란 특정한 객체를 만들기 위한 일종의 템플릿클래스를 활용하면 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있음class Car { // 생성자 constructor(name) { this.name = name; } // 메서드 hook() { console.log('경적을 울립니다'); } // 정적 메서드 static hello() { console.log('안녕, 자동차야!'); } // setter set age(value) { this.carAge = value } //getter get age()..

함수란작업을 수행하거나 값을 계산하는 등의 과정을 표현하고 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것리액트에서 컴포넌트를 만드는 함수도 자바스크립트 함수의 기초적인 형태를 따름자바스크립트에서 함수는 다른 함수의 매개변수가 될 수 있고, 반환값이 될 수 있으며, 할당도 가능하므로 일급 객체임   함수를 정의하는 방법함수 선언문가장 일반적으로 사용하는 방식표현식이 아닌 일반 문으로 분류됨function add(a,b) { return a + b;}함수 표현식함수를 변수에 할당해 표현하는 방식할당하려는 함수의 이름을 생략하는 것이 일방적const sum = function (a,b) { return a + b;}sum(10, 24) 함수 선언문함수 표현식호이스팅으로 인해 함수 선언문은 먼저 메모..

자바스크립트의 데이터 타입원시 타입 booleannullundefinednumberstringsymbolbigint객체 타입object  undefined선언한 후 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값'선언됐지만 할당되지 않은 값' null아직 값이 없거나 비어 있는 값을 표현할 때 사용'명시적으로 비어 있음을 나타내는 값' string문자열은 원시 타입이며 변경 불가능함 Symbol중복되지 않는 어떠한 고유한 값을 나타내기 위해 사용Symbol() 함수를 이용해서만 만들 수 있음  객체 타입원시 타입 이외의 모든 것의 타입배열, 함수, 정규식, 클래스 등 포함참조를 전달한다고 해서 참조 타입이라고도 함  값을 저장하는 방식의 차이원시 타입불변 형태의 값으로 저장..

Babel최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)시켜주는 트랜스파일러 Webpack의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없음또한 여러 개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움이 사라짐    끝이다!

모듈애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈은 기능을 기준으로 파일 단위로 분리함모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 캡슐화되어 다른 모듈에서 접근할 수 없음하지만 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있기 때문에 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능함 => export 라고 함공개된 모듈 자산은 다른 모듈에서 재사용할 수 있음모듈 사용자 : 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능함 => import 라고 함모듈을 사용하면 코드의 단위를 명..

에러 처리의 필요성발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료됨try - catch 문을 사용해 발생한 에러를 적절하게 대응하면 프로그램은 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있음예외적인 상황에 적절하게 대처하지 않으면 에러로 이어질 가능성이 큼에러나 예외적인 상황은 너무나 다양하기 때문에 아무런 조치 없이 프로그램이 강제 종료된다면 원인을 파악하여 대응하기 어려움  try - catch - finally 문try { // 실행할 코드 (에러가 발생할 가능성이 있는 코드)} catch (err) { // try 코드 블록에서 에러가 발생하면 이 블록의 코드가 실행됨 // err 에는 try 코드 블록에서 발생한 Error 객체가 전달됨} finally { // 에러 발생과..