전체 글 (24) 썸네일형 리스트형 Github Action workflow 작성 이모저모.. 이번에 Github Action workflow 를 작성할 일이 있었는데 아무것도 모르는 상태에서 시작하게 되면서 여러가지 배웠다.. (1NN 번 돌려보면서야매로~) chatGPT의 도움도 많이 받았는데 ... 챗지피티가 모든 것을 커버할 순 없더라구요. 그래서 내 기록 차원에서 작성하는 Github Action 워크플로우에 대한 이모저모.....정리해서 작성 안했음... ( 예제 github repository ) https://github.com/mei-zy/github_action_testmain 브랜치에 merge 되는 파일들을 체크한다.(job1) 변경된 파일 갯수만큼 job2 를 실행시켜준다.라는 플로우를 가진 예제 레포지토리다. 쉬워보였는데 흑흑 ..Event Trigger내가 필요했던 경.. [모던리액트] 리액트의 파이버 (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.. 2023 연간 회고 2023년도의 연간 회고는 전혀 생각 안하고 있었는데 해리의 독촉에 의해 쓰게 되었습니다.... 이번 회고를 작성하면서 작년 회고글 ⏤ 2022년 회고 ⏤ 글을 다시보게 되었는데 감회가 새롭습니다. 작년에도 야근을 하며 보냈었는데 올해 연말에도 야근하며 보내기 :) KEP 인턴 종료 퇴사라고 해서 웅장해지는 것 같은데 인턴 기간이 종료 되었다 ! 다이어리를 쓰는 편이 아니어서 그 때의 감정이 어땠는지 딱히 기억이 안난다. 기억이 남는건 '이런 나 제법 개발자에요' 였다. 진짜 많은 부분들을 배울 수 있었고, 심지어 하는 일이 재밌기도 했다. 처음 해보는 Jira 처리나, PR 머지 방식이라던가 Issue 등록 방법이라던가 (.. ) 장어와 함께 mlops 파트 안녕..... 퇴사 다음 날 세이지가 졸업(.. 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 과 말.. 이전 1 2 3 다음
