TECH (8) 썸네일형 리스트형 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 이렇게 매번 치는 것이 귀찮아서 .. 2023년 자바스크립트의 최신 문법 알아보기 👀 React, Vue, Svelt 와 같은 프레임워크를 이용하여 보다 더 편리한 프론트엔드 개발이 가능해졌지만, 그 기반에는 항상 자바스크립트가 있다. 자바스크립트는 초기 비개발자를 위한 언어를 모토로 생성되었기 때문에 쉽게 사용할 수 있지만, 그로 인해 생기는 불편한 점이 있었다. ⏤ 예를 들면 var 를 이용하여 중복 선언과 호이스팅을 통해 선언 전에 사용이 가능했지만, ( 오류를 저하시켜야 비 개발자들이 잘 사용할 수 있을 것이란 믿음에 ) 실제로 개발하다 보니 디버깅이 어려워서 let, const 를 해결책으로 발전 ⏤ 그래서 자바스크립트를 꾸준히 발전시키는 사람들이 있다. TC39 문서를 통해서 자바스크립트가 변화하는 동향들을 확인할 수 있다. (Proposal 칸을 확인해야 최종적으로 자바스크립.. 리액트의 VirtualDom 이 어떻게 실제 DOM 에 반영할까 1 - Diffing 알고리즘 리액트를 사용하시는 이유 중 하나가 가상돔 때문이라고 생각이 드는데, 리액트의 가상DOM 이 실제 DOM과 어떻게 비교를 해서 실제 DOM에 반영을 하는지 궁금해서 찾아보게 된 내용입니다. 이 글을 통해서 왜 리액트에서 Key 를 유니크한 값으로 설정해야하는지에 대해 알게되실 수 있을 것 같습니다 🙏 Heuristic 알고리즘 VirtualDom과 실제 Dom 을 비교할 때 따지고 보면 전체 Dom을 순회하는 것인데 오히려 성능 저하가 일어나지 않을까라는 생각이 듭니다 🤔 이런 고민에 대해 리액트는 휴리스틱 알고리즘으로 해결했습니다. 해결법이 정확히 해결되는가에 대한 문제를 배제하고, 경험과 직관을 통해, 일반적으로 좋은 해결법이나, 보다 간단한 해결법을 찾고자 하는 방법이다. 휴리스틱에 대한 정의가 와.. 이전 1 다음
