리액트 강의를 완강하고, 지금까지 배운 내용을 토대로 연습삼아 이것 저것 만들어보던 중에, react router 사용법이 계속 헷갈려서 기록하게 되었다.원래 기존에 강의에서 배운 방법과 react dom 공식 사이트에서 알려주는 방법이 달라서 그 2가지 모두 작성해보

리액트를 공부하던중, “공공데이터포털”의 오픈 API를 사용하여 나라별 정보를 불러와서 여행일기장을 만들어보고 싶단 생각이 들었다.HTTP에 요청할 수 있는 도구는 axios와 fetch가 있는데, 우선 fetch로 작업을 해보았다.오픈 API 이름 : 외교부\_국가별

16장 프로퍼티 어트리뷰트 16.1 내부 슬롯과 내부 메서드 ECMAScript 사양에서 이중 대괄호([[...]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 외부로 공개된 객체의 프로퍼티가 아니기 때문에, 직접적으로 접근하거나 호출할 수

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.일반적으로 기능을 기준으로 파일 단위로 분리하고, 모듈이 성립하려면 모듈은 자신만의 파일 스코프를 가질 수 있어야 한다.다만, 애플리케이션과 완전히 불리되어 개별적으로 존재하는 모듈은 재

에러가 발생하지 않는 코드를 작성하는 것은 불가능하다.발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다.try ... catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드를 실행시킬 수 있다.try ...

코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수다.제너레이터와 일반 함수의 차이제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.제네레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다.제너레이터 함수를 호출

비동기 함수를 호출하면 함수 내부의 비동기로 동작하는 코드가 완료되지 않았다 해도 기다리지 않고 즉시 종료된다. 즉, 비동기 함수 내부의 비동기로 동작하는 코드는 비동기 함수가 종료된 이후에 완료된다. 따라서 비동기 함수 내부의 비동기로 동작하는 코드에서 처리 결과를

REST는 HTTP를 기반으로 클라이어트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다.REST API는 자원, 행위, 표현의 3가지 요소로 구성된다.자원 : 자원 / URI행위 : 자원

Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.Aj

함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 콜스택(실행 컨텍스트)에 푸시되고 함수 코드가 실행 되고, 함수 코드의 실행이 종료 되면 팝되어 제거 된다.함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다.자바스

호출 스케줄링 : 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것.setTimeout과 setInterval 함수는 ECMAScript 사양에 정의된 빌트인 객체가 아닌, 호스트 객체다.자바스크립트 엔진은 싱글 스레드로 동작하

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킨다.애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.이벤트가 발생했을 때 호출될

DOM : HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다.HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다.HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소

브라우저는 다음과 같은 과정을 거처 렌더링을 수행한다.1\. 브라우저는 HTML, CSS, JS, IMAGE, FONT 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다2\. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과

Set 객체는 중복되지 않는 유일한 값들의 집합이다.Set은동일한 값을 중복하여 포함할 수 없다요소 순서에 의미가 없다인덱스로 요소에 접근할 수 없다Set 객체는 Set 생성자 함수로 생성한다.Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이

디스트럭처링 할당 : 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당 하는 것배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출

ES6에서 도입된 스프레드 문법 ... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다.스프레드 문법을 사용할 수 있는 대상은 Array, String, Map, Set, DOM컬렉션, arguments 와 같이 for...of 문으로

ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.ES6 이전에는 순회가능한 데이터 컬렉션(배열, 문자열, 유사배열객체, DOM 컬렉션 등)은 for문, for...in문

심벌 : ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값이다.주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용한다.심벌 값은 Symbol 함수를 호출하여 생성한다.다른 데이터 타입과 다르게 리터럴 표기법으로 생성할 수 없다.이

String 객체는 생성자 함수 객체다.String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 \[StringData] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다.String 생성자 함수를 new 연산자와 함께 호출 하면