react-router-dom이란? 리액트에서 라우팅할 때 사용하는 라이브러리로, URL 주소를 감지하여 다른 페이지를 보여주는 역할을 한다. 리액트는 Single Page Application인데 SPA에서는 다른 페이지를 가져오고자 할 때 새로 불러오는 것이 아니라 하나의 페이지 안에서 데이터를 가져온다. 설치 npm install react-router-dom 사용 이동할 각 페이지 및 컴포넌트를 만든 후 App.js에 BrowserRouter, Routes, Route를 이용해 라우팅해준다. *6 버전으로 업그레이드하면서 Switch가 Routes로 변경되고, exact옵션이 삭제 되는 등 문법이 바뀌었으므로 버전에 주의하여 사용한다. import { BrowserRouter, Route, Rou..

브라우저란 World Wide Web(WWW)에서 콘텐츠 검색 및 탐색을 할 수 있는 응용프로그램을 말한다. 종류로는 크롬, 익스플로러, 사파리 등이 있다. 브라우저 구성 사용자 인터페이스 이전/다음 버튼, 새로고침/정지 버튼, 홈 버튼, 주소 표시줄, 북마크 메뉴 등 브라우저 엔진 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어한다. 즉, 사용자가 액션을 취하면(uri 입력, 새로고침 클릭 등) 렌더링 엔진에게 전달하는 역할을 한다. 또한 Data Storage를 참조하여 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 한다. 렌더링 엔진 웹 서버로부터 응답받은 자원(HTML, XML, 이미지 등)을 웹 브라우저 상에 나타낸다. 이 때, HTML과 CSS는 렌더링 엔진의 HTML parser, C..

State란 리액트의 중요한 개념 중 하나로, 컴포넌트 내에서 관리되는 변수를 말한다. state는 값을 변화시킬 수 있다. 따라서 동적인 데이터(자주 바뀌는 중요한 데이터)를 사용할때 state를 사용한다. 리액트는 state가 바뀌게 되면 자동으로 render를 다시 해준다. (단순히 변수에 다른 값을 할당할 때는 render가 되지 않는다) state를 변경할 때는 setState함수를 이용하여 변경할 수 있다. 솔직히 처음 공부했을 때는 뭔말인지 이해가 가지 않았다. 리액트를 여러번 사용해보면서 내가 익힌 것을 토대로 설명해보자면 state값이 바뀔 때 자동으로 render해준다는 것이 가장 중요한 개념인것 같다. SPA의 장점은 새로고침 없이 자연스럽게 데이터를 다르게 보여주는 것인데, 이러한 ..

http란? HyperText Transfer Protocol의 약자로 웹에서 데이터를 주고 받을 수 있는 프로토콜을 말한다. 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 하다. 프로토콜이란 데이터를 주고 받을 때 주고 받는 방법에 대한 규칙 및 약속을 말한다. 클라이언트(사용자 브라우저)가 서버에 메세지를 보내면 서버가 그 메세지에 맞는 결과를 보내주는데 이러한 동작을 요청(request), 응답(response)이라고 칭한다. Request Method 데이터를 요청할 때는 요청의 종류를 서버에게 알려줘야 하는데 이러한 요청방법(Request Method)은 다음과 같다. GET: 데이터를 요청하기위해 사용 POST: 데이터를 생성하기위해 사용 PUT: 데이터를 수정..

자바스크립트에서의 this는 상황에 따라 다르게 동작한다. 1. 전역에서의 this는 window를 바인딩한다. 💡 바인딩이란? : 식별자와 값을 연결하는 과정 💡 식별자란? : 변수 이름, 함수 이름 등 어떤 대상을 구별할 수 있는 이름 즉, this 바인딩이란 this가 어떤 객체와 연결되는지를 의미한다. console.log( this ); //Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …} this === window; //true 2. 함수에서는 호출하는 위치에 따라 다르게 바인딩한다. 일반 함수에서의 this는 window를 바인딩한다. function f1()..