Routing 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 합니다. BrowserRouter 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해줍니다. 또한 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다. Routes, Route 경로를 매칭해주는 역할을 하는 컴포넌트입니다. 컴포넌트는 여러 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다. 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다...

SPA (Single Page Application) 전통적 웹사이트 : 웹사이트 페이지 전체를 로딩한다. SPA : Menu,Footer 등 중복되는 컴포넌트에 대해서는 새로 불러오지 않는다. SPA의 등장 배경 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스간의 더욱 많은 상호작용이 일어나게 되었다. 이 때 마다 중복되는 요소를 새로 불러오게 되면서 서버와의 불필요한 트래픽을 발생시켰다. 사용자 또한 증가하는 불필요한 트래픽 때문에 느린 반응성을 겪었고, 이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었다. SPA의 장점 전체페이지가 아니라 부분적인 데이터만 받아서 서버에 요청하기 때문에 처리속도가 빠르다. 서버입장에서도 전체적인 데이터를 넘겨주지 않아도 ..

ES6 부터 자바스크립트의 표준 내장 객체로 추가 되었습니다. ES6 를 지원하는 브라우저나 Node.js 에서 전역에 있는 promise를 확인 할 수 있다. 프로미스의 3가지 상태(states) 프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)입니다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미합니다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 Pending(대기) 먼저 아래와 같이 ne..

프로토타입이란? 프로토타입은 원형이라는 뜻을 가진다. 이해를 돕기위해 유전자 라고 이해하겠다. 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가진다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 이처럼 모든 자바스크립트 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이떄 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. 프로토란? __proto__를 활용하여 상속 관계를 확인할 수 있습니다. 지금 객체가 누구를 상속하고있는지, 이객체의 프로토타입(유전자를 물려준 객체) 가 뭔지 알려준다. const car = { wheels : 4, drive() { console.log("drive...") } } const bmw = { color: "red", navi..

절차지향과 객체지향의 차이 Encapsulation (캡슐화) 캡슐화는 외부에서 앞서 말했던 데이터(속성)와 기능(메서드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것입니다. 데이터(속성)와 기능(메서드)들이 느슨하게 결합되는 것이죠. 느슨한 결합은 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미합니다. 마우스 구동을 위한 코드 작성을 예로 들겠습니다. 스위치가 눌리고, 전기 신호가 생겨서, 전선을 타고 흐르고.. 와 같은 전 과정을 이곳저곳에 나누어 작성하는 것이 아니라, 마우스의 상태를 속성(property)으로 정하고 클릭, 이동을 메서드(method)로 정해서 코드만 보고도 인스턴스 객체의 기능을 ..

일급객체 비행기에는 퍼스트 클래스(first-class)가 있습니다. 이코노미 클래스와는 탑승수속부터 기내식, 수하물이 나오는 순서까지 항공사와 관련된 모든 부분에서 혜택이 다릅니다. 퍼스트 클래스 좌석을 구매한 사람은 비싼 가격을 치르고, 항공사로부터 특별한 대우를 받습니다. JavaScript에도 특별한 대우를 받는 일급 객체(first-class citizen)가 있습니다. 대표적인 일급 객체 중 하나가 함수입니다. JavaScript에서 함수는 아래와 같이 특별하게 취급됩니다. 변수에 할당(assignment) 할 수 있다. // let result = functionA(); 다른 함수의 전달인자(argument)로 전달될 수 있다. // functionA(functionB); 다른 함수의 결과로..