본문 바로가기

react

ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기) # ESLint & Prettier: Format Document (JavaScript, React styles 통일시키기)Airbnb Style Guide 가 유명해서 이 가이드대로 .js, .jsx 파일들이 포멧화되도록 설정을 해보려고 함.## PH2024-09-27 : First posting.## TOC## ESLint, Prettier 패키지 설치ESLint (EcmaScript Lint) 는 JavaScript에 한정된 Code Formatter (문법이 제대로 맞는지 주로 판단) 라면, Prettier 는 전체 코드 스타일을 다루는 Code Formatter (코드 스타일을 통일시켜주는 일을 주로 함) 이다.```[.scrollable]npm install --save-dev --save-.. 더보기
React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css) # React Router 에서 CSS 충돌을 막고 좀 더 개발 친화적으로 CSS 를 다룰 수 있게 해주는 CSS module 을 배워봅시다. (Learning module.css)## PH2024-09-12 : First posting.## TOC## React Router### Install (npm install react-router-dom)```npm install react-router-dom```/과 같은 명령어로 우선 package 를 깔자.### 사용방법```import { BrowserRouter, Route, Routes } from 'react-router-dom';import ReactDOM from 'react-dom/client';import './root.css';import.. 더보기
React 를 배워보자. (Learning React) with TypeScript and esbuild bundling # React 를 배워보자. (Learning React) with TypeScript and esbuild bundling## PH2024-08-28 : First posting.## TOC## Initiate React AppBundler 로는 Tree shaking 과 multi threading 을 지원해서 가장 빠르고 좋다는 esbuild 를 사용합시다. ```mkdir hello_reactcd hello_reactnpm init react-app .npm run startnpm install --save-exact --save-dev esbuildnpm audit fix --force// audit 뜻 : 1.감사 2.단속 3.청강 4.세무조사npm install --save-dev @babe.. 더보기
week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명) # week5 위클리 페이퍼 (useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명, 리액트 생명주기 (life cycle) 에 대해 설명, React 에서 배열을 렌더링할 때 key 를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명)## PH2024-09-02 : First posting.## TOC## useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명useMemo 와 useCallback 는 React 에서 성능 최적화를 위해 사용되는 훅입니다. 각각의 역할과 사용법, 그리고 남용 시 발생할 수 있는 문제점을 설명드릴게요.### useM.. 더보기
React 사용 설정하기 (esbuild) with TypeScript # React 사용 설정하기 (esbuild) with TypeScript우선 node.js 를 깔자. 그리고 프로젝트 폴더로 들어가서 (Terminal / Cmd) 에서 다음과 같은 명령어를 친다. (Bundler 로는 가장 빠르다고 알려진 esbuild 를 깔자.)```[.linenums]npm init -ynpm install --save-exact --save-dev esbuildnpm install react react-dom jquery immer use-immernpm install typescript typescript@next @types/react @types/react-dom @types/jquery ts-loader @babel/preset-typescript --save-dev.. 더보기
week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명) # week4 위클리 페이퍼 (리액트가 렌더링 하는 방식을 설명, 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명, React 에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명)## PH2024-08-20 : First posting.## TOC## 리액트가 렌더링 하는 방식을 설명리액트의 렌더링 방식은 컴포넌트 기반의 UI 를 효율적으로 업데이트하고 관리하는 데 중점을 둡니다. 주요 단계는 다음과 같습니다:렌더링 단계: 초기 렌더링: 리액트는 컴포넌트 트리의 루트에서 시작하여 모든 자식 컴포넌트를 순차적으로 렌더링합니다. 이 과정에서 JSX 문법으로 작성된 코드를 React.createElement() 호출로 변환하여 React 엘리먼트를 .. 더보기

티스토리툴바