Frontend 썸네일형 리스트형 Rollup 번들러로 enum과 const enum 트랜스파일링해보기 바로 이전에 enum은 어떻게 써야 하는지에 대한 글을 쓴 적이 있었다. https://gugu76.tistory.com/130 enum과 const enum을 비교하는 내용이 있었는데, 해당 글을 작성하다 보니 직접 트랜스파일링해서 결과를 보고 싶다는 생각이 들었다. 그래서 Rollup 번들러를 사용해서 간단하게나마 enum을 트랜스파일링해보고 결과를 확인해 보았다. Rollup Rollup도 Webpack 같은 자바스크립트 번들러 중 한 종류이다. Rollup은 빌드 결과물을 ES6 모듈 형태로 만들 수 있다. 이는, 사용자가 라이브러리의 코드 일부만 사용하게 되면 해당 부분만 번들 결과물에 포함시킬 수 있게 되는 것이다. 그래서, 사용하지 않는 코드를 빌드 단에서 제거하는 트리 쉐이킹 기법을 활용해.. 더보기 enum은 어떻게 써야하는가? 이번에 프로젝트를 진행하면서 상수 값을 저장할 때 계속해서 enum 타입을 사용해 왔다. 그런데, 타입스크립트를 계속 공부하다 보니 enum 타입에 대한 논란이 있는 것을 알게 되었다. 그 논란에 대해서 좀 자세히 알아보고 앞으로 어떻게 enum을 사용할지 생각해 보면 좋을 거 같아서 글을 쓰게 되었다. 일단, 나는 아래 글을 보고 나서 해당 문제에 대해서 알아보게 되었다. https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking 위 글은 라인 기술 블로그 글인데, 한 줄 요약하자면 enum 타입을 쓰면 tree-shaking이 되지 않으니 const enum이나 union 타입을 쓰라는 것이었다. 이렇게만 말하면 무슨 뜻인지 모르겠으니.. 더보기 msw와 vitest에 대해서 알아보자 저번에 올린 TDD 관련 글에서 msw와 vitest를 이용해서 테스트 코드를 작성해본다고 했다. 이때, 많고 많은 라이브러리들 중 왜 msw와 vitest를 사용하는지에 대해서 먼저 알아보도록 하자. vitest 먼저 vitest부터 알아보자. 이름부터 vite와 되게 비슷하게 생겼는데, vitest는 vite 환경으로 테스트를 진행할 수 있도록 도와주는 프레임워크라고 한다. 이전에 vite 관련 글을 올린 적이 있었는데, 이제는 CRA보다 vite를 사용해서 리액트 프로젝트를 만드는 것이 대세인 것 같다. 나도 Next.js를 쓰지 않는다면 한동안은 vite를 활용해서 프로젝트 세팅을 할 예정이라 vitest를 테스트 프레임워크로 정하게 되었다. msw 이제 msw에 대해서 알아보자. msw는 moc.. 더보기 프론트엔드도 TDD? TDD TDD는 Test Driven Development로, 테스트 주도 개발이다. 작은 단위의 테스트 케이스를 작성하고 테스트를 통과하는 코드를 점점 추가시키면서 코드를 짜는 것이다. 테스트 코드 이제 그러면 테스트 코드가 뭔지 궁금할 수 있다. 테스트 코드는 말 그대로 작성한 코드를 실행하고 예상된 결과가 나오는지 확인하는 데 사용하는 코드이다. 테스트 코드에는 여러 종류가 있다. (정적 테스트, )유닛 테스트, 통합 테스트, e2e 테스트가 있는데, 왜 이렇게 구분 지어 놓았을지 궁금할 수 있다. 이 테스트들은 다 테스트 대상의 범위가 다 다르다. 먼저 가장 낮은 단계의 정적 테스트부터 알아보자. 프론트엔드 개발자라면 다 아는 테스트일 것이다. 테스트 도구는 typescript와 eslint인데,.. 더보기 [이펙티브 타입스크립트] 타입스크립트의 고급 기능을 잘 활용해보자 타입의 중복 제거 태그된 유니온에서 다음과 같은 타입의 중복이 발생할 수 있다. interface SaveAction { type: 'save'; // ... } interface LoadAction { type: 'load'; // ... } type Action = SaveAction | LoadAction; type ActionType = 'save' | 'load' // 타입 중복 그런 경우 아래와 같이 변경해 주면 좋다. type ActionType = Action['type']; // 타입은 'save' | 'load' 이렇게 타입을 지정해주면 Action 유니온에 타입을 더 추가한 경우 ActionType은 자동으로 해당 타입까지 포함하게 된다. 또한, 제네릭 타입을 사용하면 타입의 중복을 .. 더보기 [이펙티브 타입스크립트] 타입을 명확하고 일관성 있게 써보자 이전에 이펙티브 타입스크립트를 한 번 읽어본 적이 있었다. 하지만, 그때는 타입스크립트는 그냥 타입만 지정하는 정도로만 알고 있었기 때문에 하나도 이해를 못 했었다. 요즘 TIFY 프로젝트를 진행하며 타입을 명확하고 안전성 있게 써보는 것에 관심이 많아졌고, 이제는 이 책을 다시 읽어볼 수 있는 단계가 된 것 같아 다시 읽어보게 되었다. 이전보다 훨씬 더 넓은 시야로 타입스크립트를 이해할 수 있는 시간이었다. 책에 있는 설명들과 내가 이해한 개념을 합쳐 글을 써보았다. 구조적 타이핑자바스크립트는 덕 타이핑(구조적 타이핑) 기반으로 동작한다. 타입스크립트 또한 이 방식을 모델링해서 동작하는데, 필요한 매개 변수 값이 요구 사항을 만족한다면 신경 쓰지 않고 실행시킨다. 아래 예시를 한 번 살펴보자.inter.. 더보기 Next.js를 배워보자-4 NextJS 앱 최적화하기 각 페이지에 메타데이터와 ); }; export async function getStaticProps(context) { const featuredEvents = await getFeaturedEvents(); return { props: { events: featuredEvents, }, }; } export default HomePage; 모든 페이지들에 공통적으로 위 데이터를 넣고 싶다면 _app.js 파일에서 처리해주면 된다. 만약 _app.js와 특정 페이지에 둘 다 설정해주었다면 Next.js는 알아서 둘을 병합해서 나타낸다. _app.js 파일 말고도 pages > _document.js 파일에 다음과 같이 작성해볼 수도 있다. import Document, { H.. 더보기 Next.js를 배워보자-3 페이지 사전 렌더링 & 데이터 페칭 표준 React라면 빈 HTML 파일과 모든 js 코드가 표시될 것이다. 그리고 js 코드가 실행되면 내용이 표시될 것이다. 이때 서버로부터 데이터를 불러오는 경우 시간이 소요될 수도 있다. 이는 React는 사전 렌더링된 페이지를 반환하지 않기 때문이다. 사용자가 페이지를 방문하면 Next.js는 사전 렌더링된 페이지를 반환한다. 사전에 HTML 페이지를 완성해놓고 완전히 채워진 HTML 파일을 클라이언트에게 전송하게 된다. 그래서 SEO 관점에서 좋다는 것이다. 또한, Next.js는 포함된 js 코드를 모두 재전송하는데 이를 hydrate라고 한다. 이 코드들은 나중에 사전 렌더링된 페이지를 대체하고 React는 그에 알맞은 작업을 한다. 사전 렌더링은 오직 최초.. 더보기 이전 1 2 3 4 5 다음
