분류 전체보기

"컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.const element = Hello, world!;"위에 희한한 태그 문법은 문자열도, HTML도 아닙니다." React는 라이브러리지만, 프레임워크와 유사하게 다양한 기능을 제공한다. 그 중에서도 JSX 문법, 단방향 데이터 바인딩, Virtual DOM(VDOM), 렌더 사이클이 React의 주요 특징이다. JSX 문법JSX는 JavaScript XML 또는 JavaScript Syntax Extension으로 불린다. JSX는 JavaScript와 XML(또는 HTML)요소를 결합한 문법으로, React에서 컴포넌트를 정의하는 방법이다. 일반적으로 JavaScript 코드 내에서 HTML 요소를 작성하는 방식이기 때문에 마크업과..

웹 프론트엔드 자바스크립트 프레임워크, React자바스크립트의 복잡한 생태계 자바스크립트 그 자체로는 프레임워크가 아닌 언어에 불과하다. 웹 개발의 목적에 따라 수많은 라이브러리와 프레임워크가 등장하게 되었고, 서로 최고라고 주장하는 다양한 기술들이 매번 새롭게 출현하고있다.React.js도 이러한 배경에서 등장한 웹 프론트엔드 라이브러리이다. 특히, React는 프론트엔드 개발에서 매우 중요한 위치를 차지하며, 사실상 Java처럼 프론트엔드 개발에 표준처럼 사용되고 있다. 웹 어플리케이션 구조시작에 앞서 이전에 포스팅한 글을 참고하자. (예전 작성 글이라 가독성이 별로 안좋아서 이 글에서 다시 정리)https://1000sang-dev.tistory.com/13 프론트 웹 개발의 필수 개념: 자바스크립..

"하나의 이벤트가 다수의 DOM 변경" 웹 프론트엔드 개발에서 Rerendering웹 페이지의 렌더링은 사용자가 보는 화면을 바꾸는 작업이다. 사용자가 버튼을 누르거나 페이지를 이동할 때, 웹 페이지의 화면이 어떻게 변경될까 ? 1. Javascript를 통한 HTML(DOM) 직접 조작자바스크립트를 사용하면 HTML의 DOM을 직접 조작하여 페이지의 다양한 요소를 제어할 수 있다.이를 통해 화면에 다양한 변화를 줄 수 있다.자바스크립트는 DOM을 조작하여 화면을 동적으로 변경한다. 화면의 특정 이벤트를 감지하고, 이벤트에 반응하여 페이지의 요소들을 직접 조작할 수 있다. 하지만 Javascript를 통해 직접 DOM을 변경하면 여러 단점들이 있다.HTML(DOM) 요소 하나하나씩 직접 조작을 가해야한다..

JavaScript 비동기 처리자바스크립트 비동기 처리자바스크립트는 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 처리 방식을 통해 병렬 작업이 가능해 보이게 만들 수 있다. 주로 I/O 작업(네트워크 요청, 파일 읽기 등)이나 타이머와 같은 시간이 오래 걸리는 작업에서 사용된다.  동기적(Synchronous) 처리 : 하나의 작업이 완료될 때까지 다음 작업을 시작하지 않는 방식. 즉 작업이 순차적으로 진행된다. console.log("Start");for (let i = 0; i 위 코드는 `for`루프가 끝날 때 까지 다른 작업이 실행되지 않고 기다린다. 즉, "End"가 출력되기 전까지 모든 작업이 멈춘 상태로 대기하게 된다. CPU를 독점하기 때문에, 긴 작..

필드 + 메서드객체 = 필드 + 메서드 (프로퍼티 집합)자바스크립트에서 객체는 필드(데이터)와 메서드(동작)를 포함한 프로퍼티들의 집합으로 정의된다.HTML (DOM) 객체: 요소(Element = 객체) = 속성(Attribute = 프로퍼티) + Content요소: ``속성: ``메서드 표현법: Default & Shorten자바스크립트에서 객체의 메서드는 두 가지 방식으로 정의할 수 있다. 1.  Default(기본) 표현법var person = { name: "CheonSang", sayName: function() } console.log(this.name); }};`sayName` 메서드는 `function` 키워드를 사용하여 정의된다.2. Shorten(간략) 표현법 (ES..

면접 단골 질문"this"면접 단골 질문 중 하나인 "함수 내 `this`와 메서드 내 `this`의 차이"에 대해 설명하면서 JS에서 `this` 바인딩 방식에 대해 조금 더 깊이 살펴보겠다. 자바스크립트 함수는 크게 일반 함수와 화살표 함수로 나눌 수 있으며, 이 둘은 `this` 바인딩 방식에서 큰 차이가 있다.일반 함수는 함수로도 사용될 수 있고, 메서드로도 사용될 수 있다.일반 함수 표현식 내 `this`: 동적 바인딩 (Dynamic  Scope)일반 함수의 `this`는 함수가 호출될 때의 컨텍스트에 따라 결정된다.즉, 동적 바인딩이 이루어지며 함수가 호출된 객체에 따라 `this`가 달라진다. 함수: 전역에서 호출된 함수 내 `this` → 무지성 window(global)function ..

function func() { }const func =  () => { };자바스크립트 함수 작성 방법함수 작성하는 방법을 총 3가지로 분류했다. 1. 함수 선언문 (Function Declaration)2. 함수 표현식 (Function Expression)3. 화살표 함수 (Arrow Function) 그 밖에 추가적인 내용은 포스팅에 담도록 할 예정이다. 함수 선언문(Function Declaration)가장 기본적인 함수 작성 방법으로, `function 함수명() { }`을 사용하며 함수 선언문을 통해 함수를 정의하고 어디서든 호출 가능하다.함수 호이스팅이 일어난다. →함수 선언 전에 호출 가능.example() // 함수 호이스팅 function example() { console.log('..

Execution Context자바스크립트 엔진은 코드가 작성된 자바스크립트 파일을 그대로 실행하는 것이아니라, 사실상 함수의 실행 방식과 비슷한 원리로 작동한다. 자바스크립트 엔진은 스크립트 파일을 구동할 때 기본적으로 두 가지 주요 단계를 거친다.Creation (Pre-parsing) Phase: 실행하기 전에 변수와 함수가 어떤 것인지 분석하고 필요한 메모리 공간을 예약한다.Execution Phase: 변수에 값을 할당하고 함수가 실제로 실행된다.자바스크립트 엔진 구성: Stack + Heap자바스크립트 엔진은 Stack + Heap 두개만 기억하면 된다. 자바스크립트 함수 동작원리도 마찬가지로 두개만 기억하자.Stack(스택): 함수 호출 순서대로 함수가 저장되고 실행되는 공간 = 실행 컨텍스..