Enjoy Programming

그동안 코드 스플릿 스플릿 듣기만 했다. 그리고 react에 lazy loading 있다는 것도 알았다. 몇번 써본거 같긴하다. 하지만 제대로 알지 못하고 썼었다. 그러다보니 의미도 없었다... 오늘 이사님과 이야기하던중 오랜만에 접속시 chunk에러가 나는 것을 확인했다고 하신다. 오늘 할 일을 대부분 마치고 chunk에 관해 알아보았다. 우선 간단히 chunk는 react 파일이 빌드 배포될때 모든 코드가 하나의 번들로 묶이게 된다. 번들링은 가져온 파일을 하나의 파일 즉 번뜰로 병합하는 프로세스이다. 이 번들js는 웹페이지에 포함되어 한번에 전체 앱을 로드 할 수 있다. 근데 이게 앱이 커짐에 따라 번들도 커지게 되는데 로드가 오래 걸릴 수 있다. 그래서 code split을 하게 되는데 여러 방법..

nextjs를 사용하면서 img 태그를 사용하면 waning이 뜬다 next/image를 사용해달라고 nextjs는 기본적으로 이미지 최적화의 기능을 제공한다. 그 중 기본적으로 들어가는 lazy loading 기능이 있는데 참 유용하다 예를 들어 페이지를 로드하면 해당 페이지의 이미지를 전부 로딩 하는것이 아닌 viewport상에 나타는 이미지만 로드한다 그리고 로드하기전 alt를 제공해서 blur처리된 blob 이미지를 먼저 보여줌으로써 느려보이지 않게 해주고 사이트 최적화를 진행해준다. 간단히보면 next js showcase 페이지를 보자 먼저 로드된 이미지들이 있고 network를 비워줬다. 그리고 slow 3g로 변경 후 스크롤을 내려보면 그다음 보여줄 이미지를 다운로드 하기 시작하고 로드되기..

어제 하루 미치는 줄 알았다.. grahpql을 사용하고 있기에 apollo codegen은 어마어마한 유용함과 편리함을 제공한다. 어제 마이페이지 리뉴얼및 리팩토링 작업을 하며 backend schema가 변경 되어야할 상황이 생겨서 이것저것 요청하고 변경한다음 codegen을 실행했떠니!!! 하.. 이게 뭐고... 브랜치 삭제후 시도도 해보고 별짓을 다해봤다... 우선 작업은 진행되어야 하기에 손으로 다 작성하다가.. 그냥 동료분께 codegen실행해서 pr날려달라고 했다.. 그거 받아서 머지... 그렇게 몇번을 작업하고 해결하기위해 어제 밤 .. 오늘 아침 지금까지 이러고 있다가 해결했다.. 우선 여기저기 뒤적이면 거의 이런게 나온다 https://github.com/yarnpkg/yarn/issu..

자바스크립트는 아니지만 Web APi인 URL.createObjectURL()은 객체를 가리키는 URL을 DOM string 으로 반환한다. 객체 URL을 해제하려면 revokeObjectURL 을 사용하면된다. 예를 들어 input에 파일을 업로드하고서 해당 이미지의 blob형태의 url을 바로 변환하여 표기를 해주는 상황 같을떄 쓸 수있는 정적 method이다. 잘 기억해 두자~!~! https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL URL.createObjectURL() - Web API | MDN URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다. develope..

최근 회사 작업중 프런트에서 데이터 핸들링 할일이 많아졌다. 주로 시계열 차트에 뿌릴 데이터인데 이게 오로지 db에서 뽑혀서 별도의 스키마 작업이나 가공이 없이 string json 형태로 오다보니 뿌려줄려면 작업들을 해줘야 했다. 뭐 보탕 Object.keys(), Object.values(), filter, map .. 등등으로 대부분 해결이지만 Object를 다루다보니 key를 변환하는 작업이라던지 두개의 데이터를 merging하는 작업도 필요하다 그래서 간단히 코드를 남긴다. 우선 오는 데이터의 형태는 parsing후 이렇다. 동일한 key를 가진!! 다만 Mr과 vlcc가 함께 뿌려져야 한다. 이렇게!! 뭐 문제는 한 apexchart에 뿌려줘야 하고 내가 만들어놓은 시계열 차트 공통 컴포넌트를..

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html Documentation - Generics Types which take parameters www.typescriptlang.org generic이란 데이터의 타입을 일반화하는 것이다. 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해준다. 선언 시점이 아니라 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 방법이다. 한번의 선언으로 다양한 타입에 재사용이 가능하다. 어떤 함수 예를들어 const numberFn = (arg: number): number => { return arg; } const stringFn = (arg: string): ..