본문 바로가기

분류 전체보기233

변수 호이스팅 호이스팅이란? - 호이스팅은 코드가 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. - 호이스팅은 코드가 실행하기 전 변수선언/함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. - 자바스크립튼 엔진은 코드를 실행하기 전 실행 가능한 코드를 형상화하고 구분하는 과정을 거친다. - 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. - 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. - 실행 컨텍스트는 실행 가능한 코드가 실행되기 위해 필요한 환경을 의미하고 실행되기전 이러한.. 2023. 3. 13.
let, const 자바스크립트 에서 var 키워드로 선언된 변수의 특징 var 키워드로 선언한 변수의 문제점 1. 변수 중복 선언 허용 var x = 1; var z = 1; // var 키워드 선언된 변수는 같은 스코프 내에서 중복 선언을 허용함 // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작함 var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var z; console.log(x); // 100 console.log(y); // 1 2. 함수 레벨 스코프 var x = 1; if (true) { // x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다. // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다. var .. 2023. 3. 13.
스코프 스코프(scope)란? 자바스크크립트를 포함한 모든 프로그래밍 언어의 기본이며 중요한 개념이다. 스코프의 이해가 부족하면 다른 개념을 이해하기 어렵다. 자바스크립트의 스코프는 다른 언어의 스코프와 구별되는 특징이 있다. var 키워드로 선언한 변수와 let 또는 const키워드로 선언한 변수의 스코프도 다르게 동작한다. 스코프는 변수 그리고 함수와 깊은 관련이 있다. function add(x, y){ // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범휘)는 함수 몸체 내부다. console.log(x, y); return x + y; } add(2, 5) //매개변수는 함수 몸체 내부에서만 참조 할 수 있다. console.log(x, y); //Reference.. 2023. 3. 13.
콜백 함수 콜백 함수(callback function)란? 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수Higher-Order Function, HOF //고차 함수 function repeat(n, f){ for(var i = 0 ; i 고차 함수는 콜백 함수를 자신의 일 부분으로 합성한다. -> 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한.. 2023. 3. 12.
타입 변환과 단축 평가 타입 변환이란? 명시적 타입 변환(explicit coercion) - 개발자가 의도적으로 값의 타입을 변환하는 것 - 타입 캐스팅(type casting)이라 한다. var x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x): // number 10 암묵적 타입 변환(implicit coercion) - 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. - 타입 강제 변환(type coercion)이라 한다.. 2023. 3. 10.
객체 객체란? 자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입(object/reference type)은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure이다. 원시 타입의 값 - 변경 불가능한 값(immutable value) 객체 타입의 값 - 변경 가능한 값(mutable value) 객체는 프로퍼티의 집합 객체이 프로퍼티와 메서드 } 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(be.. 2023. 3. 10.
DOM DOM(Document Object Model)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작 할 수 있게끔 연결시켜주는 역할을 담당한다. DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다. 트리 자료구조는 노드들의 계층 구조.. 2023. 3. 8.
JSX JSX란? const element = Hello, world!; - 위에 태그 문법은 문자열도, HTML도 아니다. - JSX라 하며 JavaScript를 확장한 문법이다. - JavaScript의 모든 기능이 포함되어 있다. - JSX는 React "엘리먼트(element)"를 생성한다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식)과 연결된다는 사실을 받아들입니다. JSX에 표현식 포함하기 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper',.. 2023. 3. 7.
State and LifeCycle(생명주기) element 렌더링을 이용한 째깍거리는 시계 예시 const root = ReactDOM.createRoot(document.getElementById('root')); function tick(){ const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); Clock 컴포넌트를 만들어서 완전히 재사용 하고 캡슐화 하는 방법 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props){ return( Hello, world! It is {prop.. 2023. 3. 7.
컴포넌트(Components) 함수 컴포넌트 - 컴포넌트를 정의하는 가장 간다한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props){ return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트 이다. JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다. 클래스 컴포넌트(ES6 class 사용) class Welcome extends React.Component{ render() { return Hello, {this.props.name}; } } 컴포넌트 렌더링 function Welcome(props) { .. 2023. 3. 4.
element(엘리먼트) element(엘리먼트) - 엘리먼트는 React 앱의 가장 작은 단위 이다. - 엘리먼트는 화면에 표시할 내용을 기술 한다. const element = Hello, world; - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다. - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링 하기 - HTML 파일 어딘가에 가 있다고 가정 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. - React를 기존 앱에 통합하려는 경우 원하는 만.. 2023. 3. 4.
라우터 라우터란? - 라우터는 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를 지정하며 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 장치 이다. 이때 최적의 경로는 일반적으로는 가장 빠르게 통신이 가능한 경로이므로, 이것이 최단 거리 일수도 있지만, 돌아가는 경로라도 고속의 전송로를 통하여 전달이 되는 경로가 될 수 있다. 즉 라우터(Router)는 이름 그대로 네트워크와 네트워크 간의 경로 (Route)를 설정하고 가장 빠른 길로 트래픽을 이끌어주는 네트워크 장비이다. 라우터의 기능 - 네트워크와 네트워크를 연결함 - NAT(Network Address Translation) - 방화벽 - VPN(Virtual Private Network) - QoS(Quality of Service) 2023. 3. 4.

티스토리툴바