HTTP 200 OK

Memento mori & Carpe diem

REACT 10

리액트 훅

리액트 훅 클래스 컴포넌트와 생명주기 메서드를 이용하여 작업을 하던 기존 방식에서 벗어나 함수형 컴포넌트에서도 더 직관적인 함수를 이용하여 작업한다. 기존 방식의 경우 상태 관련 로직이 한 곳에 묶이기 때문에 상태 로직의 재사용이 불가능하였지만 훅을 통해 계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 되었다. 리액트 훅 사용 규칙 최상위 레벨에서만 호출 가능, 다시 말해 반복문, 조건문, 중첩된 함수 내부에서 호출하면 X 오직 리액트 함수 컴포넌트 내에서만 호출 가능 usestate() 상태를 설정할 때 사용하는 훅 API로 클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 하는 API, 초기 상태와 현재 상태를 저장, 컴포넌트가 다시 렌더링 되어..

REACT 2022.05.30

PostCSS

PostCSS란? CRA(create-react-app)에서도 default설정인 postcss에 대해 알아보고자 작성하게 되었다. Sass가 CSS의 전처리기 인것에 비해 postcss는 JS플러그인을 통해 스타일을 변형하는 후처리기로서 동작한다. copy-webpack-plugin은 특정한 디렉터리나 파일을 복사해 번들링 된 폴더 내에 경로로 삽입하는 플러그인이다. html-webpack-plugin autoprefixer : -webkit- 등의 prefix 없이 스타일을 지정할 수 있다. a { display: flex; } 스타일 변환 결과 a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex } ..

REACT 2022.04.10

[webpack] loader & plugin

webpack을 사용하던 중 다양한 로더와 플러그인의 역할과 기능에 대해 학습하고자 작성하게 되었다. ▶loader와 plugin의 차이 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면, 플러그인은 해당 결과물의 형태를 바꾸는 역할(기본적인 동작에 추가적인 기능을 제공하는 속성)이다. ▶로더(loader)란? 로더는 빌드 도구를 통한 빌드 과정에서 각 파일을 import 혹은 load할 때 모듈의 소스코드를 변형시키는 전처리 과정을 수행 webpack은 기본적으로 JS / JSON 파일만 이해할 수 있어서, other type의 파일을 convert 해줘야 한다 ▶자주 사용하는 로더 종류 css-loader : css 파일이 js 코드로 변경, 즉 JS파일 내부에서 css파일을 불러오는 역할(내부적..

REACT 2022.03.30

npx란??

nvm : Node Version Manager npm : Package Manager npx : Package Runner npm과 nvm은 유용하게 사용중이였지만 npx는 사용해본적이 없어 정리를 해보려고 한다. npx는 npm의 5.2.0버전부터 새로 추가된 도구, 기본적으로 추가되어 있다. 현재 npm 버전에 이미 설치되어 있는지 확인 which npx npx는 npm의 5.2.0버전부터 새로 추가된 도구, 기본적으로 추가되어 있다. ▶npm install npm(Node Package Manager)은 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램 ▶프로젝트 npm install에 --save를 붙이는 이유는? --save옵션은 package.json의 depe..

REACT 2022.03.30

State and Lifecycle

엘리먼트 렌더링에서는 UI를 업데이트 하는 한 가지 방법만 학습했으며, 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출했습니다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') );} setInterval(tick, 1000); setInterval을 사용해 Clock컴포넌트가 매초 스스로 업데이트 할 수 있도록 변경할 수 있습니다. 함수에서 클래스로 변환하기 다섯 단계로 Clock과 같은 함수 컴포넌트를 클래스로 변화 할 수 있다. React.Componen..

REACT 2022.03.28

webpack 정리

webpack의 내용을 정확히 학습하기 위해 작성하였습니다. webpack과 babel 기본 설명 -> webpack & babel Webpack을 사용하는 이유 여러개의 파일을 하나로 묶어준다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없습니다. 그리고 다수의 JS파일을 하나의 파일로 번들링하므로 HTML파일에서 script 태그로 다수의 JS파일을 로드해야 하는 번거로움도 사라진다. http 요청이 비효율적이기 때문이다. 웹 페이지는 수많은 파일들을 받아와야 하는데 http/1.1에서는 커넥션 하나를 열어 하나씩 요청을 보내야 한다(요청이 많을수록 비효율적) 때문에 하나의 파일로 합쳐주어 요청 횟수를 줄이고 속도를 향상시킨다.(여러 개로 나누는 것도 가..

REACT 2022.03.17

babel과 webpack

react를 사용하기 위한 기본 라이브러리(react+babel+webpack) 기본 라이브러리 npm init npm i react react-dom react: 리액트 라이브러리 react-dom: 원래는 react에 함께 있었으나 이렇게 따로 떨어져 나왔다. react와 DOM 사이에 연결해주는 역할을 한다. react-scripts: 리액트 프로젝트 초기 셋업을 쉽고 간편하게 해준다. babel-cli: 바벨을 터미널에서 사용하기 위해 필요하다. babel-preset-env: 바벨은 babel-preset-es2017과 같이 여러 버전이 있다. 자동으로 옛날 브라우저들을 지원한다. babel-preset-react: 바벨을 리액트에서 사용하게 해준다.리액트를 쓸거니까 이게 필요하다. 달리 말하면..

REACT 2022.01.19

Components와 Props

개념적으로 컴포넌트는 JS함수와 유사하다. props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JS함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터이다.) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이러한 컴포넌트는 JS함수이기 때문에 "함수 컴포넌트"라고 호칭한다. 또한 ES6 class를 사용하여 컴포넌트를 정의할 수 있다. class Welcome extends React..

REACT 2022.01.15

엘리먼트 렌더링이란??

엘리먼트는 React앱의 가장 작은 단위이다. 화면에 표시할 내용을 기술함 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React엘리먼트는 일반 객체(plain object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. 컴포넌트와 엘리먼트를 혼동하지 말 것! 엘리먼트는 컴포넌트의 구성요소이다 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해 본다면 const element = Hello, world; 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 '루트'DOM 노드라고 부른다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM노드가 존재, ..

REACT 2022.01.15

JSX란 무엇인가?

REACT 공식문서를 토대로 학습한 내용을 정리하기 위해 작성하였다. 빠른 시일내에 공식문서를 익혔으면 좋겠다. JSX(표현식)란 JavaScript에 XML을 추가한 문법이다. 그러므로 JS의 모든 기능이 포함되어 있음. 작성 코드는 브라우저에서 실행되기 전에 번들링 과정에서 바벨을 사용해 일반 JS 형태의 코드로 변환된다. React에서는 본질적으로 렌더링 로직이 UI로직과 연결된다. 컴파일이 끝나면 JSX표현식이 정규 js 함수 호출이 되고 js객체로 인식된다. 즉 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다. JSX 문법규칙 1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. function App..

REACT 2022.01.15