My Boundary As Much As I Experienced

클래스 컴포넌트란?클래스 컴포넌트는 React에서 사용되는 컴포넌트의 한 종류이다.이전에는 주로 클래스 컴포넌트가 주류였지만, 최근에는 함수형 컴포넌트와 훅을 이용한 상태 관리가 더욱 표준적으로 쓰인다. 클래스 컴포넌트는 render() 메서드를 포함하여 여러 생명주기 메서드를 사용할 수 있다는 특징이 있다.(임의로 메서드를 추가하는 것도 가능하다.) 함수형 컴포넌트에서는 hook로 이런 주기를 조작할 수 있으나 그 자유도는 클래스형보다 낮다. 클래스 컴포넌트의 특징- React.Component 클래스를 상속받아서(extends하여) 정의된다.- render() 메소드로 view로직을 처리함- 생명주기 메서드를 사용할 수 있음 라이프 사이클 메서드의 분류라이프사이클 메서드의 종류는 총 9가지이지만 크게..

MSW란?Mock Service Worker의 준말이다.이때 Service Worker는 앱의 백그라운드에서 실행되는 브라우저가 제공하는 기능이다.브라우저와 앱의 중간에서 이벤트를 listening하고 있는 존재라고 보면 된다.(PWA나 Firebase Cloud Message같은 기능들을 구현해보려고 했던 개발자들은 사용해본 경험이 있을 것이다.) Mock이란 단어에서 알 수 있듯이, MSW는 브라우저의 백그라운드에서 비동기 api통신 호출을 가로채서 가짜 응답을 해주는 Proxy의 역할을 한다. 왜 필요한가? 백엔드에서 API를 아직 주지 않았을 때, api 명세서대로 객체를 생성하여일단 호출 받았다 치고 화면 구현해본 경험이 다들 있을 것이다.그러나 이런 방식으로 모사하는건 마크업을 확인하는 용도로..

오늘 만든 resize 이벤트가 끝나면 0.5초 이후 true값을 반환하는 useCatchResizeEnd 훅. import { useEffect, useState } from 'react'; export const useCatchResizeEnded = () => { const [isEnded, setIsEnded] = useState(false); useEffect(() => { let resizeTimeout: NodeJS.Timeout; setIsEnded(false); const handleResize = () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { console.log('timeout이 멈췄습니다.'); set..

테스트 라이브러리 구성 React Testing Library 시뮬레이션된 DOM을 제공(Provides Simulated DOM for TEST) 그러나 테스트 러너 없이는 사용할 수 없다(JEST, VITEST) Jest vs Vitest Vitest가 Jest보다 빠르다. Jest는 Vite에서 깔기 힘들다. 테스트의 방식 expect 글로벌 단언 matcher: 어떤 단언인지 jest-dom에 의거함 expect(element.textContent).toBe(”hello”); expect(elementsArray).toHaveLength(7); Jest-DOM 테스트 전에 import되어야 함 matcher를 쓸 수 있게 해줌 toBeVisible, toBeChecked 전역 함수로 test함수가..

프로젝트를 시작하며 (기획, 디자인) 이번 프로젝트는 숙박 예약을 위한 서비스의 전과정을 구현하는 프로젝트였다. 2주라는 짧은 기간동안 전과정을 구현하는 것은 매우 도전적인 과제였고, 멘토님께서 언급한 '기술적으로 단단한 서비스'를 만드는 것을 목표로 진행하였다. 어김없이 내가 초반 이틀 정도는 피그마 디자인을 만들어 제공했는데, 자연스럽게 모바일 - 태블릿 사이즈를 모두 지원하는 느낌보단, 전체적으로 모바일 사이즈를 무리하게 늘려놓은듯한, 요소 하나하나가 비대한 디자인이 되었다는 점은 조금 아쉽다. 내가 개발했던(그리고 지속적으로 관찰했던) 메인페이지 파트의 요소들만 웹 기준으로 적합한 느낌이 든다😅 전 프로젝트(8lack)에선 나름 시간이 남아서 그래픽적인 부분까지 필요하면 신경을 좀 썼더니 팀원들의..

요새 유행하는 번들러 환경 Vite에, 가장 유명한 테스팅 라이브러리 Jest를 엮어쓰려고 했으나 Jest는 웹팩 기반 라이브러리라 Vite환경에서 쓰려면 매우 복잡한 설정들을 거쳐야 한다. 아래 글에서 더욱 자세히 알려준다. vite 에서는 import.meta.env.VITE_XXX 와 같이 환경 변수를 사용하는데 WEBPACK 환경에서 위와 같은 환경 변수를 사용하기 위해서는 별도의 babel 관련 설정이 추가되어야 합니다. https://velog.io/@saeeng/VITE-VITEST-migrate-from-Jest VITE + VITEST (migrate from Jest) Vite > Vite의 사전 번들링 기능은 Esbuild를 사용하고 있습니다. Go로 작성된 Esbuild는 Webpa..

https://dev.to/hannahadora/jest-testing-with-vite-and-react-typescript-4bap Installing Jest for Testing in Your Vite-React TypeScript Project. A Step-by-Step Guide. Introduction Application testing is an important aspect of web development. It helps... dev.to 2. in tsconfig esModuleInterop: true 3. cypress 제외 in tsconfig exclude: []에 추가 4. scss나 styled-component를 사용할 시 우회 proxy를 설정

테스트에는 유닛테스트와 인터그레이션 테스트, e2e테스트가 있다. 유닛테스트는 jest, 인터그레이션 테스트는 react testing library로 많이 한다. (jest로 인터그레이션 테스트도 가능하긴 함.) CRA를 하면 react testing library와 zest를 기본적으로 깔아줌. 파일 이름 컨벤션은 App.test.js 식으로 많이 짠다. in App.test.js import { render, screen } from "@testing-library/react"; import App from "./App"; // learn More라는 텍스트가 있는지 확인하는 테스트 // 이걸 테스트할 필요가 있나? test("renders learn More link", () => { // 맨처음..

useContext란? 프롭스 드릴링(프롭스가 하위 컴포넌트로 파고파고파고파고 또 파고 들어가는 현상)을 피하고 싶을 때 쓰는 문법. props 체이닝이 없이도 값을 전달하고 싶을 때 사용한다 context 설정법 api라던가, store, context같은 폴더에 파일을 만들어서 따로 관리한다. React 라이브러리를 import하고, createContext 메소드에서 관리하고 싶은 상태값을 입력(구독)한다. import React from "react"; const AuthContext = React.createContext({ isLoggedIn: false, }); export default AuthContext; 그런 다음에, App.js 같은 전역적으로 뿌릴 수 있는 곳에서 를 이용해 제공한..

useReducer란? useReducer는 상태를 관리하는 또 다른 방식이다. useState의 경쟁자?라고 보면 된다. 그렇다면 useReducer와 useState는 무엇이 다른가? 흔히 쓰는 useState는 '필요한 state만큼 생성해서 개별 관리'하였다. 그러나 useReducer는 여러 state가 존재해도 하나의 로직으로 다 관리한다. '중앙화된 state묶음'이라고 보면 된다. 이렇듯 기능적으로는 이점이 두드러지기보단 관리 방식의 차이가 발생한다. 중앙 관리해서 좋은 점은? 1. state가 너무 늘어나서 헷갈리는걸 방지한다. state가 열 몇 개씩 쌓이면 이게 어떤 state인지 헷갈리기 시작하는데 이를 방지할 수 있다. 2. 다른 state의 이전 값을 참조해서 최신 값을 만드는 ..