TECH (10) 썸네일형 리스트형 [모던리액트] 리액트의 파이버 (Fiber) 리액트의 파이버를 보기 전에 가상 Dom 이란 무엇인지 보고 오시면 더 좋을 것 같아요 ! 리액트의 파이버란?가상 DOM 의 변경 사항을 실제 DOM 에 적용하는 과정을 최적화할 수 있게 해주는 아키텍처 이렇게 정의내리고 싶습니다. 리액트 파이버는 가상 DOM 과 연관이 굉장히 깊은 아키텍처에요.리액트 16 부터 가상 DOM 을 그릴 때 파이버 노드를 이용해서 그리게 되거든요 .. ! 일단, 리액트 파이버에서는 Current Tree / Work In Progress Tree 가 있습니다.(모던 리액트에서는 아마 가장 뒤에 나오겠지만 ... ) - current tree : 실제 Dom과 동일한 형상의 트리, Fiber 노드로 이루어져 있음- work in progress tree : 변경되는 사항.. Next.js 환경에 MSW 도입해보기 오랜만에 블로그 글을 쓰게 되었습니다 ✍️자주 쓰겠다고 마음 먹었는데 좀처럼 쉽지 않네요 ..! 최근(이라기엔 시간이 지났지만)에 Next.js 환경에서 MSW를 도입해보게 되었습니다.SSR과 CSR을 함께 쓰고 있었기 때문에 각 환경에서 어떻게 API Mocking을 해야할지 많이 헤맸는대요...😅어떻게 세팅해서 사용하고 있는지 작성해보겠습니다. 개발 환경은 Page router 기반의 Next.js, MSW, Typescript입니다.(App router 기반은 다른 라이브러리와 합이 안맞을 수 있어서 세팅이 다를 수 있습니다.. 🥹 ) 1. MSW란?(as-is) api를 요청 시, server로 요청(to-be) api 요청 시, service worker가 그 요청을 가로챔 그래서 프론트엔드.. Storybook로 커스텀 Document 만들기 지난번에 Storybook 7.0 사용기 (+ Next.js, Typescript, Styled-component) 관련해서 글을 작성한 적이 있었는데, 이번에는 Storybook으로 커스텀 독스 만드는 방법을 가져왔다.. ✌️ 스토리북 공식 문서는 친절한듯 .. 친절하지 않았다.. 스토리북 Doc blocks 스토리북에서는 Document의 다양한 블럭들을 제공해주고 있다. 예를 들면 Storybook - Typeset 라던가, Storybook-ColorPalette 라던가 등등 .. 이것들을 이용해서 스토리북 상에서 디자인 토큰들을 Document 상에서 잘 보여줄 수 있다. 하지만 해당 템플릿을 커스텀하게 다룰 수 없다는게 굉장히 ! 아쉬운 부분으로 남는다. 나도 위와 같은 스토리북 Documen.. Storybook 7.0 사용기 (+ Next.js, Typescript, Styled-component) 마지막으로 스토리북 6.5 버전을 사용했었는데 7.0으로 바뀌고 나서 Type 관련해서 많이 변경된 것 같다. 6.5 > 7.0으로 업데이트를 잘못하면 타입 지옥에 빠질 수도 있을 것 같다. 그러나 Storybook을 처음 적용하는 프로젝트 였기 때문에 7.0으로 설치하고, 변화된 부분을 살펴보았다. Storybook 설치 스토리북 설치 npx storybook@latest init 스토리북 실행 npm run storybook config 관련 수정 추가적으로 건들인 부분이었는데 stories에 모든 stories.ts 파일이 묶이는게 아니고, 컴포넌트 내에 stories.ts 파일이 있있으면 했다. 그 이유는 컴포넌트의 Props 수정이 일어날 수 있는데 Stories/해당 컴포넌트.stories.t.. Next.js의 렌더링 방식들 ! Next.js Rendering에서 참고해서 작성합니다 ! 영어만 보면 미주신경이 울렁거리기 때문에 틀린 부분이 있다면 말씀해주세요 🙂 Next.js의 렌더링 Client side 에서 자바스크립트가 모든 것을 수행하는(CSR) 방식 대신, Next.js 의 모든 페이지는 SEO 향상을 위해 pre-rendering 이라는 것을 한다. pre-rendering 은 사전에 HTML을 만드는 것을 의미하는데, 이것은 Server Side Rendering (SSR) 혹은 Static Generation (SSG,ISR) 두 가지 방식으로 이루어져있다. 두 개의 차이는 언제 HTML 파일을 생성하느냐다. - Server Side Rendering : 요청시에 서버에서 HTML 파일을 생성한다. - Static.. 말줄임 + hover시 툴팁 표시 컴포넌트 만들기 이런 리스트에서 2줄이 되면서, 툴팁을 표시하는 컴포넌트를 만들 일이 생겼는데 생각보다 이렇게 복잡한 로직이었나? 되돌아보게 되어 정리해보았습니다. ( typescript, Next.js , styled-components를 이용했습니다.) 1. 2줄 말줄임 CSS 먼저, 2줄 말줄임에 대한 CSS 를 정의해주고 적용시켜줄 수 있습니다. text-overflow:ellipsis; overflow:hidden; word-break:break-word ; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; - webkit-line-clamp : 원하는 줄의 단위를 선택할 수 있습니다. 2. 말줄임 확인 말줄임이 된 Item 과 말.. React-Table을 이용하여 자유자재 Custom 컴포넌트 만들기 사실 자유자재는 아니고.. 리액트 테이블로 여러가지는 만들어야하는 상황이 생겼었다 ! 짜여진 리액트 테이블에 커스텀을 더한 테이블 컴포넌트로 분리하고자 하니까 꽤 많은 시간이 걸렸고, 공식 문서를 많이 찾아봐야했다 .. ! ⏤ React-table v7을 이용했습니다 ⏤ 공식 독스에는 문제를 해결할 수 있는 제안이 나와있지 않아서 여기 저기 코드를 붙여보며, 해결했습니다 ! 먼저, 여러 페이지에서 사용되는 테이블을 [테이블 인터랙션/테이블] 2 개의 컴포넌트로 분리하고자 했습니다. ( 동일한 템플릿의 인터랙션을 사용한다면 인터랙션+테이블 1개의 컴포넌트로 분리해도 되지만, 동일한 테이블 디자인과 기능에 interaction 의 기능과 ui가 달라지는 경우가 있어서 2개의 컴포넌트 분리 후, 더 큰 단위(.. 프로젝트에 Cypress 도입해보기 ⏤ CRA, 타입스크립트 vanillaJavascript를 이용해서 이메일와 비밀번호를 검증할 일이 있었는데, 매번 테스트케이스들을 치고 시도해보는 일이 귀찮게 느껴졌다. 그래서 해왔던 프로젝트에 Cypress를 도입해보고 싶어서 공부한다. (사실 예제에서 적용시키는 프로젝트는 개인 레주메라 cypress가 필요없지만 연습용으로 써봤다.) 🥹 다른 것보다 Cypress 공식문서를 보는 것이 좋았다. 리액트에 도입할 것이기 때문에 Cypress quickStart- React를 보고 설치해주었다. / 적용한 프로젝의 개발 환경 - CRA - Typescript Cypress 설치 및 초기 설정 yarn add cypress -D - cypress open 하는 명령어 npx cypress open 이렇게 매번 치는 것이 귀찮아서 .. 이전 1 2 다음
