본문 바로가기

FrontEnd/React

 (10)
[React] 테일윈드CSS 리액트 프로젝트 만들기 PostCSS가 탄생한 배경 CSS개발은 역사적으로 브라우저 호환성과 벤더 접두사 같은 문제로 어려움을 많이 겪어왔으며, 이런 어려움을  극복하기 위해 루비 언어로 만든 Sass/SCSS라는 스타일 언어가 생겨나기도 했다.   Sass/SCSS는 for 반복문과 같은 프로그래밍 언어를 일부 지원했고, 벤더 접두사 문제를 해결해 주는 autoprefixer 플러그인도 제공해 지금도 큰 인기를 끌고 있다.  부트스트랩을 비롯해 널리 알려진 CSS 프레임워크는 대부분 Sass/SCSS로 만들어져 있다.  다른 언어들도 계속 발전하듯이 CSS분야에서도 '모듈화된 CSS'라는 가치를 내걸어 PostCSS라는 이름의 새로운 스타일  언어와 이를 동작하게 하는 프로그램이 탄생하였다.  PostCSS는 다양한 플러그인..
[React] 리액트 컴포넌트의 CSS 스타일링 컴포넌트 스타일링 컴포넌트 스타일링이란, React 컴포넌트의 UI(사용자 인터페이스)에 적용할 CSS를 정의하는 방법을 의미한다.React는 컴포넌트 기반 라이브러리이므로, 각 컴포넌트마다 고유한 스타일을 적용할 수 있다.  부트스트랩 사용해 보기  부트스트랩(Bootstrap)은 웹 개발에서 널리 사용되는 프론트엔드 프레임워크이다.  주로 웹 사이트의 디자인과 반응형 웹   (Responsive Web)을 쉽게 구현할 수 있도록 돕는 도구이다.  여러가지 UI 구성 요소(예: 버튼, 네비게이션 바, 가드 등)와 반응형   그리드 시스템을 제공한다. 부트스트랩을 사용해 리액트 컴포넌트를 사용하기 위해 부트스트랩 홈페이지의 CDN links의 CSS경로를 복사한다.  그 후 public 디렉터리의 ind..
[React] 이벤트 속성 이해하기 이벤트란? UI에서 버튼을 누르거나 텍스트를 입력하는 등의 행위가 일어날 때 이벤트(event)가 발생했다고 한다.  Event 타입/** 이름이 click(type 속성 값이 click')인 Event 객체를 생성하는 예 */new Event('click', {bubbles : true })     웹 브라우저의 자바스크립트 엔진은 Event 타입을 제공한다.type : 이벤트 이름으로 대소문자를 구분하지 않는다.isTrusted : 이벤트가 웹 브라우저에서 발생(true) / 프로그래밍에서 발생(false)를 판단한다.target : 이벤트가 처음 발생한 HTML 요소이다.currentTarget : 이벤트 버블링과 관계없이 현재 이벤트가 설정된 요소를 반환한다.bubbles : 이벤트가 DOM을 타..
[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) 도구이다.  즉 패키지들..

티스토리툴바