가수면

설치 및 구성Next의 경우npm init playwright# oryarn create playwright# orpnpm create playwright기타https://playwright.dev/docs/intro#installation Installation | PlaywrightIntroductionplaywright.dev테스트 실행테스트를 실행하는 방법에는 여러가지가 있다.1. Playwright Test for VSCode 확장 프로그램 설치설치하면 좌측에 탭 목록에 '테스트' 탭이 생긴다. 해당 탭에서 테스트 실행.2. 명령어 입력// 헤드리스 모드에서 실행되며, 테스트 결과와 테스트 로그가 터미널에 표시npx playwright test// 테..

기본 환경 설정 도커 설치 도커 설치 방법은 아래 글 참조 https://jhchoi1182.tistory.com/282 EC2로 Docker를 이용해 배포하기 (feat. Mysql) 개발 환경 설정 문서는 다음 과정을 따른다. Dockerfile을 생성해 도커 내부로 파일을 옮긴 뒤 도커 이미지를 생성하고, Docker Compose로 컨테이너를 실행한다. (도커 컴포즈를 사용하지 않고 각각 실 jhchoi1182.tistory.com 노드 설치 https://nodejs.org/en/download/package-manager // Node Version Manager 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install...

Profiler 리액트 팀에서 제공하는 성능 측정 툴로 크롬 확장 프로그램과 Profiler API가 존재한다. 주로 배포 환경에서 성능을 측정하게 될 텐데, 배포 환경에서는 profiler가 제외되어 빌드되어 사용할 수 없으므로 아래 명령어를 통해 빌드 시 profiler를 포함시킬 수 있다. npm run build -- --profile 1. 크롬 확장 프로그램 https://chromewebstore.google.com/detail/fmkadmapgofadopljbjfkapdkoienihi 먼저 확장 프로그램의 경우, 설치한 뒤 개발자 도구를 살펴보면 아래 탭들이 추가된 걸 볼 수 있다. 이 중 Components의 경우 리렌더링이 발생하는 컴포넌트를 확인하는데 유용하다. 'Highlight up..

https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#callbacks-on-usequery-and-queryobserver-have-been-removed Migrating to TanStack Query v5 | TanStack Query Docs useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to maintain, type wise, it also required a runtime check to see which type the fir..

클라이언트 파트만 다룸 패키지 설치 npm install socket.io-client 1. 소켓 인스턴스를 참조할 ref를 생성한다. const socketRef = useRef(null); 2. 소켓 인스턴스 생성 / 연결 종료 인스턴스 생성 후 useEffect 클린업을 사용해 컴포넌트가 언마운트되면 연결 종료되도록 설정한다. useEffect(() => { socketRef.current = io("서버 주소"); return () => { if (socketRef.current) { socketRef.current.disconnect(); } }; }, []); 3. 이벤트 리스너 등록 서버에서 "서버와 맞춘 이벤트 이름" 이벤트를 받았을 때 호출될 콜백 함수를 등록한다. 아래 예시 코드는 채팅..

렌더링 성능 렌더링 성능 런타임 성능 유지보수 및 기능 스타일드 컴포넌트 장점 컴포넌트를 렌더링 할 때 마다 동적으로 스타일을 생성하고 삽입하기 때문에 매우 유연한 스타일링이 가능하다. 단점 많은 수의 컴포넌트가 빠르게 변경되는 경우 성능에 악영향을 줄 수 있다. 단점 다양한 기능을 제공하기 때문에 비교적 큰 번들 크기를 가지고 있다. 기존 자바스크립트 실행 단계에서 스타일 계산 및 적용이라는 추가 작업이 발생한다. ( 태그로 DOM에 삽입) 단점 런타임에 스타일을 계산하고 삽입한다. 장점 요소의 목적을 분명히 할 수 있으며, 가독성과 유지보수 측면에서 좋다. theme을 통해 테마링을 쉽게 할 수 있다. 테일윈드 CSS 장점 정적인 스타일 시트를 사용하기 때문에, 스타일 시트가 초기에 한 번만 로드되므..

라우팅 방식 12버전 앱 폴더와는 별도로 pages 폴더 안에 페이지들 생성 13 버전 app안에 폴더를 만들고 page 파일 생성 page 외에 에러나 레이아웃, 로딩 등을 만들어 해당 경로와 하위 경로에 적용시킬 수 있다. 기존의 방식에선 중첩 레이아웃을 구현하는 것에 한계점이 있었으나 경로 별 명시적인 라우팅 방식을 통해 개발자가 원하는 대로 라우팅을 구성해 프로젝트의 복잡성을 낮추고 유지 보수가 용이하도록 바뀌었다. 렌더링 방식 페이지 별로 렌더링 방식을 결정하던 것에서 페이지를 더 작은 구성 요소로 분할해 컴포넌트 별로 결정할 수 있도록 바뀌었다. 또, 13버전은 컴포넌트의 기본값을 서버 컴포넌트로 설정하고 페이지 캐싱 기능을 제공해 SSR의 장점에 +@를 가져가는 한편, '스트리밍'이라는 개념..

npm install zustand 사용법 저장소 만들기 import { create } from "zustand"; interface CookieState { cookie: number; increase: (by: number) => void; } const useCookieStore = create()((set) => ({ cookie: 0, increase: (by) => set((state) => ({ cookie: state.cookie + by })), }));

Children.only() .only 함수는 주어진 children이 하나의 React 요소만 포함하고 있을 때 해당 요소를 반환한다. 그렇지 않으면 오류를 발생시킴. children을 하나만 받을 경우에 사용하면 안정성을 높일 수 있으며, 다른 개발자들에게 컴포넌트 사용에 대한 명확한 의도를 전달할 수 있다. 예시) interface InputProps extends HTMLAttributes { label?: ReactNode; children: ReactElement; bottomText?: string; } export function Input({ label, children, bottomText, ...props }: InputProps) { const child = Children.only..

Classic, Inline, Balloon 등 공식 문서에서 제공하는 기본 빌더들이 있다. 해당 패키지를 설치한다. 예) npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 필요하다면 import를 이용해 에디터에 한국어 설정을 적용한다. 이후 간단하게 입력한 값을 확인해보는 로직 import React from "react"; import { CKEditor } from "@ckeditor/ckeditor5-react"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import "@ckeditor/ckeditor5-build-classic/bui..

프로젝트에 적용할 에디터를 선별하는 과정에서 네이버 스마트 에디터를 구현한 것을 정리한다. 초기 로딩이 더 길어지는 것을 방지하기 위해 index.html에 스크립트를 추가해 구현하는 방법 대신 useEffect를 통해 특정 컴포넌트가 마운트될 때만 스크립트를 추가하고 언마운트 시 스크립트를 다시 제거하는 방법으로 구현하였다. import React, { useEffect, useRef } from "react";declare global { interface Window { nhn: any; }}const NaverEditor = () => { const TextRef = useRef(null); const oEditors = useRef({}); useEffect(() => { /..

Next 설치 1. npm install next@latest react@latest react-dom@latest 2. package.json에 추가 { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } } 3. Next.js 방식의 경로 디렉토리 생성 후 파일 옮기기 4. app/layout.tsx 생성 export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } 5. Router, index, App 파일 삭제 Tailwind CSS가 적용되지..

메모이제이션 자체가 연산이 들어가기 때문에 불필요한 메모이제이션은 오히려 프로젝트 성능을 악화시킨다는 것은 모두 알고 있을 것이다. 그렇다면 대체 언제, 어느 시점에, 몇 번의 리렌더링이 일어날 때, 시간 복잡도가 얼마일 때 메모이제이션을 써야 되는 걸까하는 궁금증이 있었는데,그 기준을 실험한 흥미로운 글이 있어서 가져왔다. https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/should-you-really-use-usememo.md?utm_source=substack&utm_medium=email  위 글은 복잡한 시간복잡도를 가진 컴포넌트를 메모이제이션 적용한 것과 적용하지 않은 것 각각 10,000번 렌더링, 리렌더링시켜 해당 컴포넌트의 시간복..

https://mswjs.io/docs/ Introduction What is Mock Service Worker? mswjs.io 실제 요청을 가로채는 API 목킹 라이브러리 npm install msw --save-dev 기본 세팅 handlers 설정 요청할 api들을 모아 놓은 곳. 원하는 결과를 설정해 넣으면 테스트 시 설정한 대로 요청이 간다. // src\mocks\handlers.ts import { rest } from "msw"; export const handlers = [ rest.get("http://localhost:3030/scoops", (req, res, ctx) => { return res( ctx.json([ { name: "Chocolate", imagePath: "/..

https://www.sanity.io/docs/connect-your-content-to-next-js https://www.sanity.io/docs/js-client#multiple-mutations-in-a-transaction JavaScript Our JavaScript API client library www.sanity.io 그냥 진행하는 방식과 라이브러리 설치해 사용하는 방법이 있는데, 이번 글에선 라이브러리를 이용한 방법을 적는다. npm install @sanity/client 기본 설정 각 키는 아래에서 확인 가능함 (토큰은 생성할 때 확인 가능함) https://www.sanity.io/manage https://www.sanity.io/manage www.sanity.io exp..

Warning: An update to Options inside a test was not wrapped in act .... Warning: Can't perform a React state update on an unmounted component. 위 두 가지 오류의 대부분의 경우는 테스트가 끝난 뒤에 컴포넌트가 바뀌기 때문에 발생하는 오류이다. 예를 들어 초기 화면에 0이 잘 렌더링 되는지를 테스트하는 함수를 작성했다고 해보자. 테스트 함수는 잘 작성되었고 성공적으로 통과되어 언마운트까지 한 상황이다. 그러나 만약 해당 컴포넌트 안에 fetch 등의 비동기 로직이 있는 경우 문제가 발생할 수 있다. 테스트가 종료되어 이미 언마운트가 일어났음에도 불구하고 비동기 작업이 반환되어 컴포넌트를 렌더링 ..

waitFor 비동기에 대한 요청이 전부 처리될 때까지 기다리도록 하는 메소드 function waitFor( callback: () => T | Promise, options?: { container?: HTMLElement timeout?: number interval?: number onTimeout?: (error: Error) => Error mutationObserverOptions?: MutationObserverInit }, ): Promise 예시) 2개의 요청 결과를 기다려야 함 test("스쿱 및 토핑 라우트를 핸들링", async () => { server.resetHandlers( rest.get("http://localhost:3030/scoops", (req, res, ctx)..

fireEvent도 좋지만 공식 문서에서는 user-event를 더 추천. npm install @testing-library/user-event@^14 fireEvent vs user-event fireEvent DOM 이벤트를 디스패치 (컴퓨터 이벤트) user-event 모든 상호작용을 시뮬레이션 (사용자 상호 작용 이벤트) 기본 형태 import 시 구조 분해하지 않고, async / await를 사용해야 한다. import userEvent from '@testing-library/user-event' // inlining test('trigger some awesome feature when clicking the button', async () => { const user = userEven..

screen 쿼리 목록 https://testing-library.com/docs/queries/about/#priority About Queries | Testing Library Overview testing-library.com getByRole의 역할 목록 https://www.w3.org/TR/wai-aria/#role_definitions Accessible Rich Internet Applications (WAI-ARIA) 1.2 A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational lan..

@testing-library/jest-dom을 설치하고 @testing-library/react를 버전 업하길 추천 (이건 필수) npm test 리액트 테스팅 라이브러리과 Jest RTL 테스트를 위한 가상 DOM을 제공 가상 DOM이 원하는 대로 작동하는지 확인할 수 있는 도구를 제공 Jest 테스트 러너. RTL로 작성된 테스트 파일을 찾고 실행하여 테스트를 수행 cra에 포함되어 기본으로 제공 setupTests.js 파일을 사용해 각 테스트 전에 jest-dom을 가져옴 (모든 테스트에서 jest-dom 매처를 사용할 수 있음) Watch mode - 마지막 커밋 이후 변경된 파일과 연관된 테스트만 실행 (모든 테스트 실행도 가능) 실패 조건 - 테스트 함수 실행 시 에러 발생할 때, 단언의 ..