본문 바로가기

분류 전체보기

(21)
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 과 말..
[JS] 징검다리 건너기 프로그래머스 징검다리 건너기 난이도 LV.2 문제 풀이 프로그래머스 입국 심사와 함께 풀면 좋을 것 같다 :) '인원'을 이분 탐색하여 풀었다. 1. 인원을 이분 탐색한다. - left : 0 - right : 200000000 ( Math.max(...stones) 를 할 수도 있지만 ! 런타임 에러가 난다 😅) 2. 해당 mid 값이 가능한지 검사한다. 검사하는 방법은 간단하다. 해당 mid의 값보다 적은 stone 값을 계산하여, 그 stone들이 연속적으로 k번 반복되는지 확인한다. k번 반복되면, 그 인원으로 건너기 불가능한 것이고 k번이 반복되는 경우가 없으면, 그 인원으로 건너기가 가능한 것이다. const available = (people, stones, max) => { let coun..
[JS] 순위 검색 프로그래머스 순위 검색 난이도 LV.2 문제 풀이 처음에는 그냥 비교 탐색으로 했다. 조건에 맞는 count 면 ++ 하여서 해당 조건에 만족하는 것을 push 시켜주었다. function solution(info, query) { var answer = []; for(let q of query){ let [lan,par,car,last]=q.split("and").map(item=>item.trim()) let [foo,sco]=last.split(" "); let count=0; for(let i of info){ let [a,b,c,d,e]=i.split(" "); if(lan==="-" || lan===a){ if(par==="-" || par===b){ if(car==="-" || car===c..
[JS] 교점에 별 만들기 프로그래머스 교점에 별 만들기 난이도 2 문제 접근 1. 교점을 찾는다. - 교점을 찾는 방법은 문제에 나와 있다. const x=(b*f-e*d)/(a*d-b*c); const y=(e*c-a*f)/(a*d-b*c); x, y 가 정수인 경우에만 판단을 해주면 되는데, Number.isInteger() 을 이용하면 정수인지 아닌지 확인이 가능하다. 2. 최소의 영역을 찾아준다. 모든 별을 포함하는 최소한의 크기를 return 해주어야하기 때문에 그릴 수 있는 영역을 최소한으로 잡아준다. (4, 1), (4, -4), (-4, -4), (-4, 1), (0, 4) 만약에 정수로 된 교점이 위와 같다고 예제를 들어본다. 그렇게 되면 x 최소=-4 , x최대=4, y 최소=-4, y 최대=4 이렇게 되고, ..