분류 전체보기
-
[Design Patten] 관심사의 분리카테고리 없음 2023. 12. 11. 11:58
개요 주요 개념 관심사 분리의 장점 주의사항 및 요점 주요 개념 직교성) A와 B가 직교하는 경우 A를 변경해도 B는 변경되지 않아야하며 반대상황도 마찬가지다. ex) 라디오의 볼륨 조절과 채널 조절은 서로에게 영향을 주면 안된다. 이렇듯 좋은 React 애플리케이션 디자은은 다음과 같은 관심사가 직교한다. UI 요소 (presentaion component) 레이아웃 (layout) 데이터 페치 컴포넌트 (stateful) 데이터 렌더링 컴포넌트 (stateless) 서스펜스 / 에러바운더리 (statefull) 데이터 가져오기(fetch 라이브러리, REST or GraphQL) 글로벌 상태관리 (Redux, Recoil, ContextAPI) 영속성 로직 (localstorage, cookie.....
-
[Typescript] why Typescript?프로그래밍 언어/TypeScript 2023. 12. 8. 16:21
개요 자바스크립트와 타입스크립트란? 타입스크립트를 선택한 이유 착각하기 쉬운 타입스크립트 기본개념 Javascript) 동적 웹페이지를 만들기 위한 프로그래밍 언어로써 웹페이지를 조작하고, 서버와 클라이언트 간 상호작용에 관한 일을 한다. 등장배경 : 정적인 초기웹사이트에서 동적으로 변함에 따라 등장하게 되었다 인터프리터 언어이지만 컴파일러가 내장되어 있어 실행 속도가 매우 빠르다. 객체기반의 스크립트 언어이지만 함수형과 객체 지향형 프로그밍을 모두 구현할 수 있다, Typescript) Javascript를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 : 동적인 Javascript는 런타임에서 오류를 발견할 수 있는 것에 반해 Typescript는 코드의 작성 단계에..
-
[React] react-hook-form (Basic)프로그래밍/React 2023. 12. 8. 11:17
개요 react-hook-form을 도입하계 된 계기 react-hook-form 마무리 제어 컴포넌트에서 벗어나 비제어 컴포넌트 방식으로 form을 관리한다? react-hook-form 도입 라이브러리 없이 제어 컴포넌트로 form을 다루자) React에서 제어컴포넌트란 React를 통해서 제어하게 되는 컴포넌트이다. 간단하게 이름과 아이디, 비밀번호, 전화번호, 이메일을 받는 form을 만들 때 state를 통해서 값을 관리할 것이다. 제어컴포넌트로 form을 다룰 시에 나올 수 있는 모습이다 더보기 import React, { useState } from "react"; import InputText from "../component/InputText"; import { Label, Row } f..
-
[Next.js] Jest + Typescript + Next.js프로그래밍/Next.js 2023. 12. 7. 11:37
개요 설치 및 적용 Get Started install) pnpm create next-app add dependencies) pnpm add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest script) // package.json "scripts": { ... "test": "jest", "test:watch": "jest --watchAll" }, jset config) // jest.config.js const nextJest = require('next/jest') const createJestConfig = nextJest({ dir: ..