일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- storybook styled-components
- msw
- 리액트 파이버
- 이펙티브 타입스크립트
- fsd
- ssg
- react-table
- next.js msw
- storybook
- TC39
- Next.js
- supabase
- 자바스크립트 동향
- ISR
- react cypress
- 카카오엔터프라이즈 인턴
- 프론트엔드 아키텍처
- 2023 자바스크립트
- js
- storybook 커스텀
- 테오의스프린트
- 자바스크립트로 코딩테스트
- 스토리북
- 테스트코드 자동화
- createPortal
- MinHeap
- 알고리즘
- ₩1
- 알고리즘JS
- 말줄임 툴팁 만들기
- Today
- Total
목록분류 전체보기 (28)
MEI

2023년도의 연간 회고는 전혀 생각 안하고 있었는데 해리의 독촉에 의해 쓰게 되었습니다.... 이번 회고를 작성하면서 작년 회고글 ⏤ 2022년 회고 ⏤ 글을 다시보게 되었는데 감회가 새롭습니다. 작년에도 야근을 하며 보냈었는데 올해 연말에도 야근하며 보내기 :) KEP 인턴 종료 퇴사라고 해서 웅장해지는 것 같은데 인턴 기간이 종료 되었다 ! 다이어리를 쓰는 편이 아니어서 그 때의 감정이 어땠는지 딱히 기억이 안난다. 기억이 남는건 '이런 나 제법 개발자에요' 였다. 진짜 많은 부분들을 배울 수 있었고, 심지어 하는 일이 재밌기도 했다. 처음 해보는 Jira 처리나, PR 머지 방식이라던가 Issue 등록 방법이라던가 (.. ) 장어와 함께 mlops 파트 안녕..... 퇴사 다음 날 세이지가 졸업(..
마지막으로 스토리북 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 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..

이런 리스트에서 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 과 말..
프로그래머스 징검다리 건너기 난이도 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..
프로그래머스 순위 검색 난이도 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..
프로그래머스 교점에 별 만들기 난이도 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 이렇게 되고, ..

사실 자유자재는 아니고.. 리액트 테이블로 여러가지는 만들어야하는 상황이 생겼었다 ! 짜여진 리액트 테이블에 커스텀을 더한 테이블 컴포넌트로 분리하고자 하니까 꽤 많은 시간이 걸렸고, 공식 문서를 많이 찾아봐야했다 .. ! ⏤ React-table v7을 이용했습니다 ⏤ 공식 독스에는 문제를 해결할 수 있는 제안이 나와있지 않아서 여기 저기 코드를 붙여보며, 해결했습니다 ! 먼저, 여러 페이지에서 사용되는 테이블을 [테이블 인터랙션/테이블] 2 개의 컴포넌트로 분리하고자 했습니다. ( 동일한 템플릿의 인터랙션을 사용한다면 인터랙션+테이블 1개의 컴포넌트로 분리해도 되지만, 동일한 테이블 디자인과 기능에 interaction 의 기능과 ui가 달라지는 경우가 있어서 2개의 컴포넌트 분리 후, 더 큰 단위(..