vitamin3000 님의 블로그

아래의 명령어를 실행하여 vite기반 typescript를 다운 받는다 npm create vite@latest .npm i 다음 husky, EsLint, commitLint등의 설정은 이전에 작성한 포스트를 참고했다.https://vitamin3000.tistory.com/124 프로젝트에 CommitLint, EsLint, PrettierLint 설치하기1. CommitLint 우선, husky를 이용하여  발생할 때 자동으로 실행되는 스크립트로 커밋을 만들기 전에 특정 작업을 수행하거나 푸시하기 전에 작업을 할 수 있도록 한다. CLI 환경에서 아래의 명령어vitamin3000.tistory.com 다음 포스트에서는 디자인 토큰을 적용해보겠다.  +) 추가적으로 UI와 관련된 부분은https://..

Hook은 class를 작성하지 않고도 state와 다른 React 기능을 사용하게 해준다.이것은 기존의  React는 Component가 상태를 가지려면 Class Component만이 instance로 상태를 가질 수 있었다. 즉, Function Component는 함수이기 때문에 호출될 때마다 모든 값이 초기 상태로 리셋되므로 상태를 유지할 수 없없다. hook은 두 가지의 규칙을 반드시 따라야 한다.(안 지키면 에러 뿅뿅) 1. 최상위에서만 Hook을 호출해야 한다.반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출할 수 없다.왜냐하면 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 hook이 호출되는 것이 보장하여야 즉 렌더링 순서가 일정해야React가 이를 추적할 수 있기에 그렇다면 어떻..

우리가 만든 미니 react에서 virtual DOM 역할을 수행하는 코드는 createElement내에 존재하는 return { tag, props, children} 위 코드이다.(input data의 역할) 이 객체의 특징은 트리 구조를 갖는다는 것이다. React내에서 UI가 업데이트 될 때 render 메소드가 실행될 것이export function render(vdom, container) { container.appendChild(createDom(vdom));}이것이 React 입장에서는 이미 기존의 DOM과 DOM으로 만들게된 Virtual DOM 객체를 갖고 있고,새롭게 업데이트될 DOM도 입력으로 받고 있다 이를 통해 Real DOM의 변경사항과 실제 변경 사항의 차이점을 추적할..

이번 포스트에서는 클래스 컴포넌트를 만들어보고자 한다. 이전 포스트에서 작성했던 Title을 클래스 컴포넌트로 변환한다면 다음과 같이 작성할 수 있다.class Title extends Component { render() { return {props.children} }} 이때 문법으로 Component를 extends 해주어야하고, 반환값을 render로 감싸야함에 주의하라 그렇다면 Component도 작성해야 하겠죠?export class Component { constructor(props){ this.props = props; }} 다음은 이전 포스트에서 작섬한 createElement이다.export function createElement(typ..

이번 시간에는 함수 컴포넌트에 대해 배워보고자 한다. 이전에 작성했던 vdom의 일부이다. const vdom = React 만들기 여기서 React 만들기 을 어떠한 이유로 함수로 변환하려 한다. 그러면 다음과 같이 작성할 수 있을 것이다.function Title() { return 제목} 그렇다면 이것을 실제 호출할 때는 ? const vdom = Title(); 뭔가 어색하고, 한눈에 알아보기 힘들다.자바스크립트는 JSX 문법을 지원하기에, JSX 문법으로 작성해보자const vdom = ; 이 코드를 실행하면 컴파일은 되지만, 오류가 발생한다.  그 이유는 function Title은 JSX문법으로 작성되어 있고, 실제 JSX가 return 되는 것이 아니라 이전 ..

이번 포스트에서는 바로 이전 포스트에서 작성한 createElement의 개선점을 찾고자 한다. 우선 지난번 작성한 vdom이다.const vdom = createElement('p',{}, createElement('h1',{}, "React 만들기"), createElement('ul',{}, "", createElement('li',{style: 'color: red'}, "첫번째 아이템"), createElement('li',{style: 'color: blue'}, "두번째 아이템"), createElement('li',{style: 'color: green'}, "세번째 아이템") ))const vdom2 = createElement('p..

이번 포스트에서는 지난번에 작성한 vdom를 분리하고 한눈에 알아보기 편하게 하도록 수정하려고 한다 (1) 기존에 작성한 vdom const vdom = { tag: 'p', props: {}, children: [ { tag: 'h1', props: { style: 'color: red' }, children: ["React 만들기"], }, { tag: 'ul', props: { //... 위 코드를 살펴보면, 하나의 아이템에 tag, props, children을 element로 갖고 있음을 확인할 수 있고,children에서는 ..

이번 포스트에서는 저번에 작성한 코드를 webPack과 babel를 사용하여 번들링해보려 한다. [참고 webpack 관련 게시글]https://vitamin3000.tistory.com/tag/webpack 우선,(1) CLI환경에서 아래의 명령어를 실행하여 webPack과 babel을 설치한다. npm install webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev  (2) 루트 디렉토리에 webPack.config.js 파일을 만들어 아래의 코드를 작성한다. const HtmlWebpackPlugin = require('html-webpack-plu..

이번시간에는 React에서 제공하는 hook중의 하나인 Reft에 대해 알아보고자한다.  컴포넌트가 일부 정보를 "기억"하고 싶지만, 해당 정보가 렌더링을 유발하지 않도록 하려면 ref를 사용하세요 일반적으로 컴포넌트가 React를 "외부"와 외부 API--컴포넌트의 형태에 영향을 미치지 않는 브라우저 API와 통신해야할 때 ref를 사용한다.즉, 컴포넌트가 일부 값을 저장해야 하지만 렌더링 로직에 영향을 주지 않는 경우 refs를 선택한다. 학습내용컴포넌트 ref를 어떻게 추가하는가ref의 값이 어떻게 업데이트 되는가ref가 state와 어떻게 다른가ref를 어떻게 안전하게 사용할까  기본 선언import { useRef } from 'react; 컴포넌트 내에서 useRef Hook을 호출하고 참조할..