본문 바로가기

자바스크립트19

[형을 위한 리액트] 2. JSX 형을 위해서 썼지만 정작 형은 안 보는 형을 위한 리액트1. JSX의 원리JavaScriptXML로 자바스크립트를 HTML 처럼 작성할 수 있게 해주는 문법임. 자바스크립트의 확장 문법.Bebel과 같은 트랜스파일러가 리액트가 실행될 때 JSX문법을 React.createElement() 함수를 실행시켜 변환시켜줌.코드 예를 보면,아래와 같이 하나의 컴포넌트가 jsx를 반환하는 코드를 작성하면,return ( Hello, world! This is a paragraph. );바벨이 아래와 같이 코드를 변환시켜줌. createElement를 실행하면 가상돔을 구성하는 구성요소.import { jsx as _jsx } from 'react/jsx-runtime';_jsx( 'div', {.. 2024. 10. 15.
[형을 위한 리액트] 1. 리액트를 왜 쓰는지 리액트는 자바스크립트로 동적인 ui를 쉽게 제작할 수 있도록 해주는 라이브러리가장 흔한 특징은 버츄얼돔으로 최적화 업데이트, spa(으)로 새로고침없이 동적인 ui를 보여줌 컴포넌트 기반 아키텍처, 단방향 데이터 흐름, jsx 활용문법등 이런걸 알아보기전 간단한 사용법으로 편리함을 보고감1. 기존의 작성 방법의 변화일단 이런 투두리스트에서 투두를 하나씩 추가할 때 자바스크립트를 사용함. 바닐라 자바스크립트 공통 html To-Do List Add Task  자바스크립트로 작성하는 방법에는 두 가지 방식이 있음.하나는 돔을 만들어서 돔을 추가하는 방식.//돔 기반 버전document.addEventListener('DOMContentLoade.. 2024. 10. 7.
클로저(Closures) 클로저란? 함수와 그 함수의 렉시컬 환경과의 조합이다. 렉시컬 환경이란 뭘까요? 이전에 살펴보았듯이 함수는 실행되기전 실행 컨텍스트를 생성합니다. 실행 컨텍스트는 렉시컬 환경에다가 해당 함수의 변수, 함수 식별자들을 정의하고 값을 저장하며, 외부 렉시컬환경에 참조할수 있도록 외부 렉시컬 환경도 저장해 둡니다. 이로써 함수는 자신의 필요한 변수나, 함수, 클래스 들을 찾을 수 있었죠. 그럼 왜 클로저랑 관련이 있을까요? 한번 예시를 봐봅시다. 아래 코드는 어떤 값을 출력할까요? const x = 999999; function outerFun() { const x = 1; function innerFun() { console.log(x); } return innerFun; } const innerFun = .. 2024. 2. 21.
실행 컨텍스트(렉시컬 스코프, 렉시컬 환경, 스코프 체인, 호이스팅) 이 글로 끝내버리기 이 글은 실행 컨텍스트와 렉시컬 스코프, 렉시컬 환경, 호이스팅, 스코프 체인을 이야기 진행 방식으로 작성하였으니 천천히 커피 한잔 마시면서 이야기를 들어주시면 감사하겠습니다. 실행 컨텍스트 실행 컨텍스트는 식별자를 등록하고 관리하는 스코프와 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 흠.. 말은 어렵지만 한번 풀어보면 코드를 실행하는데 재료를 준비해 주고 실행 순서를 관리해 주는 것 같네요. 이 실행 컨텍스트를 이해하면 호이스팅, 렉시컬 환경, 스코프 체인을 알게 됩니다. 자바스크립트에는 전역, 함수, eval, 모듈로 4개의 소스 코드 타입이 있습니다. 저는 여기서 전역, 함수 소스 코드로 이야기를 풀어 볼 건데, 일단 전역 소스 코드와 함수 소.. 2023. 5. 13.

티스토리툴바