FrontEnd (16) 썸네일형 리스트형 [React] JSX 구문 이해하기 React.createElement 호출의 복잡성 문제 React.createElement는 가상 DOM 객체를 만들어 주는 함수이지만 HTML요소가 부모/자식 관계로 구성되면 코드가 지나치게 복잡해지는 문제가 있다. go to google 이 코드를 React.createElement 호출로 구현해보자. 하지만 CE가 연속적으로 호출되면 해당 소스가 직관적으로 와닿지 않는다는 걸 알 수 있다.import React from 'react'import ReactDOM from 'react-dom/client'const CE = React.createElementconst rootVirtualDOM = CE('ul', null, [ CE('li', nul.. [React] 리액트 동작 원리 가상 DOM 이해하기 리액트 프레임워크의 기본 3요소는 가상DOM(Virtual DOM), JSX(JavaScript XML)구문, 컴포넌트(Component)이다. react와 react-dom 패키지 react패키지는 컴포넌트, JXS, 리액트 훅 등 랜더러에 무관한 기능을 공통으로 사용하는 기능들을 제공하는 패키지이다. 반면 react-dom/client, react-dom/server, react-native 등의 랜더러(renderer) 패키지는 앱이 동작하는 환경(플랫폼)에 종속적인 기능을 제공하는 데 특화된 패키지이다. CSR(client-side rendering) : react, react-dom/client 패키지조합SSR(server-side rendering) : react, re.. [React] 첫 번째 리액트 프로젝트 만들기 NPM, NPX이란? npm은 node package manager의 줄임말이다. 즉 노드 패키지 관리자라는 뜻이며 노드 프로젝트를 진행함에 있어 오픈소스 라이브러리를 쉽게 설치해 사용할 수 있게 도와준다. Node.js 패키지 중에는 라이브러리가 아닌 CRA(Create React Application)처럼 독립적으로 실행 가능한 프로그램도 존재한다. 프로그램 형태로 동작하는 패키지는 npm i -g(global) 형태로 설치해야 하지만 패키지들은 지속적으로 업데이트 되므로 최신 버전관리에 까다로움이 존재한다. npx는 이런 불편함을 극복하기 위해 만들어 졌으며 npm 패키지를 좀 더 쉽게 설치하고 관리할 수 있도록 도와주는 CLI(Command-line interface) 도구이다. 즉 패키지들.. [React] 리액트 개발환경 만들기 (etc. VSCode 개발환경 설정) scoop 설치하기 macOS나 Linux는 웹 개발에 필요한 도구들을 brew나 apt라는 프로그램으로 쉽게 설치할 수 있다. 윈도우는 이러한 프로그램을 제공하지 않아 필요한 도구를 일일이 받아야 하는 번거로움이 존재한다. 해당 번거로움을 덜기 위해 scoop를 설치한다.scoop란 brew나 apt와 같은 방식으로 명령 줄에서 프로그램을 쉽게 설치할 수 있다. 우선 설치 전 PowerShell을 통해 환경변수 설정 및 윈도우 실행규칙을 변경하는 명령을 수행해 줘야한다. // scoop로 설치할 프로그램의 위치를 지정PS C:\Users\home> $env:SCOOP='C:\Scoop'PS C:\Users\home> [Environment]::SetEnvironmentVariable('Scoop'.. [React] 리액트 프레임워크 이해하기 리액트란? 2013년에 페이스북에서 발표한 오픈소스 자바스크립트 프론트 프레임워크이다. 프론트 개발영역에 속하며 가상 DOM(document object model), JSX(Javascript XML)라는 새로운 방식으로 동작한다. 2022년도에는 vue가 일시적으로 점유율이 높은 것으로 파악 되었으나, 이는 코로나 사태의 빠른 비대면 서비스를 만들기 위해선 vue를 도입할 수 밖에 없었던 상황으로 이해된다.SPA(single page application)란? 싱글 페이지 애플리케이션은 하나의 페이지를 사용하는 애플리케이션이다. 즉 SPA는 웹 서버로부터 새로운 페이지를 매번 불러오지 않고 하나의 페이지만을 사용한다. 리액트로 구성된 웹 애플리케이션은 index.html 파일 1개로만 동작을 .. [노드교과서] 타입스크립트 타입스크립트는 자바 스크립트에 명시적으로 타입이 추가된 언어이다. 타입으로 인하여 자유도를 포기하지만 미리 안정성을 챙기는 언어이다. 디노(deno)라는 타입스크립트를 실행할 수 있는 런타임이 있긴 하지만 아직은 대중적이지 않다. 그러므로 타입 스크립트 코드는 tsc라는 컴파일러를 통해 자바스크립트로 변환해 노드와 함께 사용하고 있다. $ npm i typescript // tsc를 설치(타입스크립트 컴파일러) // 현재 프로젝트를 typescript project로 변경 // tsconfig.json 생성 $ npx tsc --init tsc는 type검사와 javascript변환을 담당하나 typescript에서 type오류가 발생 했더라도 javascript변환을 막진 않는다. type의 경우 ja.. javascript 프로토타입(prototype) 에 대해 이해하기 1. 프로토타입 객체 자바스크립트는 클래스 기반의 객체지향이 아닌 프로토타입 기반 객체지향 프로그래밍 언어이다. 그러므로 프로토타입이 무엇인지 잘 이해하고 넘어가야 한다. 클래스 기반 객체지향 언어의 경우 객체를 생성하기 전에 클래스를 정의 후 객체를 생성하지만 프로토타입 기반은 클래스가 없어도(ES6 클래스 추가) 객체를 생성할 수 있다. 자바스크립트에서는 객체를 생성할 때 프로토타입이 결정되나 다른 임의이 객체로 변경이 가능하다. 1) 자바스크립트 객체 생성방법 let human = { eats : true}; let studuent = { study : true }; studuent.__proto__ = human; studuent.eats; - [[Prototype]]의 값은 Prototype(프.. javascript filter 사용방법 Javascript를 사용하다 보면 Array에서 필요한 요소만 추출하고 싶을 때가 있다. 그때 사용할 수 있는 것이 filter함수이다. 해당 함수의 사용법은 MDN Web Docs에서 쉽게 찾아볼 수 있다. Array.prototype.filter() Array 인스턴스의 filter() 메서드는 주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 합니다. const words = ['spray', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter((word) => word.length > 6); console.log(result); // .. 이전 1 2 다음
