My Boundary As Much As I Experienced

Next.js 12 Page Router의 커스텀 페이지 레이아웃(getLayout)을 사용하는 것을 보며JSX에 {...props} 식으로 모두 뿌려주는게 대강 모든 Props를 다시 주는것이겠거니하고 넘어갔다.그러나 현재 제대로 한 번 정리할 필요가 있겠다고 생각했다. 1. 하위 컴포넌트에게 객체 속성 전파아래 props라는 객체를 MyCompoent에 props로 넣는 예제이다.const props = { name: 'John', age: 30, location: 'New York'}; 위 코드는 아래 코드와 결과적으로 같다. 그래서 아래처럼 상위 컴포넌트에서 받은 props를 바로 자식 컴포넌트에 내려주는 방식으로 사용 가눙하다.interface MyProps { id: 101, clas..

ReactComponent를 찾을 수 없다는 에러 해결법예전 사이드 프로젝트 진행 도중 UX디자이너 분이 네비게이션 바를 바꾸셨다.react-icons에 있는 기성 아이콘이 아닌 커스텀 svg아이콘을 쓰게 되어 svgr을 쓰게 됐다.그런데 아래 에러가 뜨는 것이다. Module '"*.svg"' has no exported member 'ReactComponent'.Did you mean to use 'import ReactComponent from "*.svg"' instead?  챗지피티에게 물어본 결과, 헛소리밖에 듣지 못했다.아무래도 SVGR의 최신버전을 쓰면서 뭔가 다른 문법으로 바뀐 것으로 의심되었다.찾아보니 SVGR을 4버전 이상으로 이용할 때 svg를 import하는 방식이 달라졌다. 아래..

🧞‍♂️ 혹여 틀린 부분이 있다면 댓글로 알려주시면 감사드리겠습니다. 퀴즈. 부모가 재렌더되면 자식들은 재렌더될까 안 될까?기본적으로 재렌더 된다. 재렌더를 막기 위해 'useCallback' 혹은 'React.memo'를 쓰게 되는 것이다.부모가 자식한테 prop을 아무것도 안 내려주고 있고 자식은 그저 부모에게 마운트만 되어있다고 치자.부모의 state들은 사실 자식에게 하등 상관없지만 부모의 state가 바뀌어 재렌더되면 자식도 재렌더된다. 컴포넌트 재렌더를 막기위한 대표수단 React.memo이걸 막기 위해 쓰는 것이 React.memo이다. 리액트 컴포넌트를 메모이제이션해놓는 방법 중 하나이다.쉽게 말해 캐싱해두고 변하지 않게 하는 방법이다.아래 예시는 이전에 설명한 것처럼 아무런 prop도 ..

클래스 컴포넌트란?클래스 컴포넌트는 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를 설정