분류 전체보기 (33) 썸네일형 리스트형 리액트 - 2. 작업환경 세팅하기 작업 환경 세팅하기 ❗ 설치 과정은 생략 (인터넷 검색하면 나오므로 과감히 생략!) 1. CRA 설치하기 전에 리액트 작업 환경을 직접 세팅하려면 많은 지식과 시간이 필요하지만, CRA는 리액트 작업에 필요한 도구 (Babel, webpack등) 들을 자동으로 설정해주어 바로 리액트 작업 환경을 구축할 수 있다. 설치하기 앞서, 아래의 것들이 설치되어야 한다. 1) NodeJS - CRA 를 설치하려면 우선, NodeJS가 필요하다 - 공식 사이트에서 LTS 버전으로 설치한다. 💡 NodeJS에는 브라우저 밖의 환경에서 자바스크립트를 실행시켜주는 런타임 환경이다. (설치되었는지 확인) node -v 2) NPM, YARN그리고 NPX NPM - npm은 NodeJS의 패키지를 관리해주는 도구이며 Node.. 리액트 - 1. 리액트 시작하기 리액트 강의를 수강하고 정리한 내용입니다. 1. 리액트란 무엇인가? 공식 문서에 보면 상단에 다음과 같이 적혀있다. 리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 즉, 웹에서 앱과 같은 사용자 경험을 만들 수 있도록 도와준다. 리액트를 왜 사용하는 걸까? 이전의 웹 방식은 서버 사이드 랜더링 (CRA) 이라고 해서 사용자가 요청을 할 때마다 리소스를 다시 다운 받아 리랜더링하는 방식이었다. 이러한 방식은 필요없는 부분을 포함하여 비효율적이다. 이러한 것을 해결하기 위해 클라이언트 사이드 랜더링(SPA)이란 방식이 등장하게 되었다. SPA은 SinglePageApplication의 약자로 단일 페이지로 구성되며 로딩될 때 전체 페이지에 필요한 리소스를 최초 한번 다운 받고, 필요한 .. deep JavaScript - 2. 호이스팅 ✔ 호이스팅에 대해 정리합니다. 👍 호이스팅에 대해서 // var 영역 var val = 'global'; function func() { console.log(val); //undefined var val = 'local'; console.log(val); //local } func(); console.log(val); //global ================================================ // let 영역 let userName = 'James'; function func() { console.log(userName); //ReferenceError let userName = 'Mike'; console.log(userName); //Mike } func(); cons.. deep JavaScript - 1. 변수와 스코프 ✔ 변수를 정의할 때 사용하는 키워드인 let, const 그리고 var의 차이점과 변수의 스코프에 대해서 정리합니다. 👍 변수와 스코프 01. ES2015(ES6) 이전의 변수 정의 변수를 선언하는 방법으로 요즘은 let, const 키워드를 주로 사용하며 권장하고 있다. let, const가 등장하기 전에는 변수를 선언할 때 var 키워드를 사용했다. var 키워드를 사용하지는 않는 이유는 단순히 let, const가 편해서라기 보단(물론 편해서 사용하는 것도 어느 정도 맞지만) var 키워드로 선언한 변수 혹은 함수들이 가진 문제점들이 있기 때문이다. var와 let, const는 어떤 차이가 있고 왜 var를 사용하지 않는 게 좋은지 살펴보자! 02. var와 let, const의 차이 01) v.. JavaScript - 10. Event ✔ 자바스크립트의 이벤트에 대해 정리하고, 마지막에 카운터를 만들면서 이벤트에 대해 익혀보자 👍 이벤트(Event) :) 이벤트는 간단하게 "무언가 일어났다는 신호 또는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 메뉴를 클릭했을 때, 페이지가 로딩될 때 또는 마우스 조작(오른쪽 버튼 누름)하는 행위 등을 말한다. 여기서는 어떤 이벤트가 있고, 이벤트를 어떻게 처리해야 하는지에 대해 살펴본다. 1. 이벤트 관련 용어 1) 이벤트 이름(event name) : click, load 등과 같이 이벤트의 이름을 의미 2) 이벤트 속성 (event property) : 특정 요소에 이벤트를 직접 연결할 때 사용하는 속성을 의미 3) 이벤트 리스너/ 핸들러(event listener/handler) :.. HTTP 프로토콜 01. 웹 동작 방식 브라우저 검색창에 www.google.com 을 입력하면 구글 해당 페이지로 이동하게 된다. 어떻게 구글 페이지가 출력되는 것일까? 사용자가 브라우저를 통해 구글에 접속할 때, 다음과 같은 방식으로 동작한다. 1) 사용자가 웹브라우저를 통해 찾고자하는 URL 주소를 입력 (서버에 요청) 2) 사용자가 입력한 URL 주소 중에 도메인 네임 (google.com) 부분을 DNS 서버에서 검색 3) DNS 서버에서 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 4) 웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용하여 HTTP 요청 메시지를 생성 5) 이렇게 도착한 HTTP 요청 메시지는 HTTP 프로토콜을 사용하여 웹 페이지.. JavaScript - 9. DOM (= 문서 객체 모델) ✔ 자바스크립트의 DOM 에 대해 정리합니다. JavaScript 👍 여기서는 DOM 정의, 문서 객체의 생성, 문서 객체 제어, 스타일링 하는 방법을 정리한다. DOM (Document Object Model) :) 웹 페이지에 대한 인터페이스이다. 기본적으로 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 1. DOM 은 정확히 무엇을 말하나? 브라우저의 랜더링 엔진은 텍스트 파일로 생성된 웹 문서를 브라우저 화면에 보이도록 하기 위해서 이 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올리는데 이를 DOM이라 한다. 쉽게 말해서 브라우저의 랜더링 엔진이 브라우저가 이해할 수 있도록 텍스트와 같은 형식의 파일들을 읽고 분석해서 브라우저가 이해할 수.. JavaScript - 8. 객체 ✔ 자바스크립트의 객체에 대해 정리합니다. 객체에 대해서 :) 기본 자료형(숫자, 문자열, 불린)은 값 하나를 담을 수 있지만, 객체는 여러 다양한 자료형을 담을 수 있는 자료형이다. 이러한 자료형을 참조형이라고 한다. 참조형에는 기본 자료형을 제외한 것(함수, 객체, 배열, 정규표현식등)들이 해당된다. 1. 객체란 : 객체는 중괄호({})안에 속성들을 담아서 표현하는 자료형이다. 객체는 데이터를 의미하는 속성(property)과 이 데이터를 참조하고 실행해주는 메서드(method)로 구성된다. 객체를 생성하는 방법은 여러가지 있다. 1) Oject 생성자 함수 : Oject 생성자 함수를 호출하여 객체를 생성할 수 있다. 2) 객체 리터럴 : 중괄호를 사용하여 객체를 생성할 수 있다. 3) 생성자 함수.. 이전 1 2 3 4 5 다음
