분류 전체보기 (76) 썸네일형 리스트형 [React] key와 children 속성 이해하기 Key 속성 설정하기 모든 리액트 컴포넌트는 key와 ref라는 속성을 포함하고 있다. 그리고 children이라는 속성을 선택적으로 포함한다. 리액트 프레임워크는 와 같은 리액트 컴포넌트뿐만 아니라 사용자 컴포넌트에도 key 속성을 제공한다. Key 속성은 같은 이름의 컴포넌트가 여러 개일 때 이들을 구분하려고 리액트 프레임워크가 만든 속성이다.export default function App() { const texts = [hello, world] return {texts}} 해당 경고 메시지는 각각의 요소 2개에 중복되지 않는 키 값을 설정해주면 해결할 수 있다. export default function App() { const texts = [hello, world] retu.. [React] 컴포넌트 이해하기 컴포넌트란? 컴포넌트는 스몰토크(Smalltalk)에서 유래한 매우 오래된 용어이며 화면 UI를 처리하는 클래스를 의미한다. 리액트는 컴포넌트(component) 기반의 구조를 띄는 특징을 갖고있다. 모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다. 16.8버전 이후 리액트 훅(react hooks)이라는 새로운 매커니즘을 고안해 객체지향 언어에서 의미하는 클래스가 아닌 단순한 함수 형태로도 컴포넌트를 구현할 수 있게 되었다. (함수 컴포넌트, 리액트 훅의 사용을 권장한다) 리액트 컴포넌트와 사용자 컴포넌트 리액트 컴포넌트라는 용어는 리액트가 제공하는 리액트 컴포넌트와 사용자가 구현하는 사용자 컴포넌트라는 2가지 의미를 포함한다.. [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개로만 동작을 .. [MSA] 12 Factors + 3 12 Factors : 12 Factors는 클라우드 서비스 중 플랫폼 에저 서비스(파스라라는 형태의 서비스)를 제공하는 Heroku라는 개발 회사에서 제시한 12가지 항목으로 클라우드 네이티브 어플리케이션을 개발/운영 시 고려해야 될 항목을 정리한 것이다.BASE CODE (코드 베이스): 자체 레퍼지토리에 저장된 각 마이크로 서비스에 대한 단일 코드베이스를 뜻하며 버전을 제어하기 위한 목적을 갖는다. 즉 형상관리/배포(개발서버, 스테이징, 운영서버) 등을 위해 소스의 통일적인 관리가 필요하기 때문이다. DEPENDENCY ISOLATION (종속성): 각 마이크로 서비스는 자체 종속성을 가지고 패키지 되어 있어 전체 시스템에 영향을 주지 않는 상태에서 변경되고 내용을 수정할 수 있어야 한다는 뜻.. 이전 1 2 3 4 5 6 7 ··· 10 다음 목록 더보기
