본문 바로가기

전체 글

 (908)
[프론트엔드 아키텍처] 모노레포 1분만에 이해하기 + 터보레포 실무에서 모노레포(monorepo) + 터보레포(turborepo)를 사용하며 배운 점을 공유합니다. 모노레포는 무엇인가? 보통 프로젝트 별로 레포지토리를 따로 파는 관행이 있습니다. 이 경우의 문제는 코드 공유가 어렵다는 것입니다. 또한 독립성과 코드 공유를 공존하게끔 하기 위한 복잡성이 추가됩니다. package/shared의 버그가 apps/web과 apps/docs 모두에서 심각한 문제를 일으킨다고 가정해 보겠습니다. 다음을 수행해야 합니다. package/shared의 오류 수정을 커밋합니다. package/shared을 publish 합니다. apps/web에서 package/shared의 오류를 수정하기 위한 범핑 커밋을 만듭니다. apps/docs에서 package/shared의 오류를 수..
Vue3 리렌더링 최적화 with ComputedEager Vue3의 즉시 평가를 이용하여 렌더링을 최적화 하는 방법을 알아봅시다. Vue3의 리렌더링 최적화? Vue3은 리액트에 비해 최적화가 굉장히 잘 되어 있는 편이라, 렌더링 최적화에 대한 관싱이 별로 없는 것 같습니다. React는 뷰모델을 새로 만들기 위해 자식 컴포넌트 전체를 리렌더링 하기 때문에 성능 손실이 있는 편이지만, Vue3의 경우 뷰모델을 참조 형태로 저장하고 있기에 불필요한 자식 컴포넌트의 리렌더링이 불필요하기 때문이죠. 그렇다면 Vue3에서 리렌더링이 성능 이슈가 될 경우는 언제일까요? 바로 배치 처리의 이점을 활용하기 위해 리렌더링을 하는 것보다, 값 변경 연산 비용이 저렴할 때입니다. @VueUse의 computedeager 예제를 봅시다. 해당 컴포넌트에선 다음과 같은 일이 일어납..
npm의 checksum과 integrity checksum(EINTEGRITY) 오류 해결 방법 TLDR : 서버 패치 or 캐시 and package-lock.json 초기화 사내 nexus repository에 npm 패키지를 배포하고 다운받아 install 하는데 계속 checksum 오류가 발생하였습니다. (turborepo + pnpm 환경) 따라서 아래 링크와 같은 방법으로 해결했는데, 문제의 근본 원인과 checksum에 대한 궁금증이 생겨 리서치를 진행해 보았습니다. https://github.com/pnpm/pnpm/issues/1230 integrity checksum failed when using sha1 · Issue #1230 · pnpm/pnpm pnpm version: 2.2.1 Code to reproduce the issue: Don't have a shareable..
Tailwind CSS 간단하게 배워보기 Vue mastery의 utility-first-css-with-tailwind 강의 내용을 정리한 글입니다. 유틸리티 퍼스트 CSS란? 유틸리티 클래스란 예측 가능한 이름을 지닌 저수준 디자인 토큰 유틸리티 CSS를 우선적으로 조합하여 CSS를 만드는 것 디자인 토큰을 CSS 규칙에 우선 반영하는 것 원자 클래스 라고도 합니다. 유틸리티 CSS 토큰의 조합형 사용을 지향합니다. CSS보다는 HTML 자체를 변경하는 것을 권장합니다. CSS를 수정하여 변경하는 경우 변경 사항이 의도하지 않은 영향을 미치지 않도록 각별히 주의해야 합니다. 그러나 HTML만 수정하여 변경하는 경우 변경 사항이 수정하는 바로 그 HTML에만 영향을 미친다는 것을 확실히 알 수 있습니다. Tailwind CSS를 사용하는 이유..
[프론트엔드 커리어] 프론트엔드 엔지니어의 가성비 곡선 요새 블로그 일간 방문자 수가 안정적으로 1000명이 넘고 있어서, 기념으로 커리어 관련 게시물을 올려봅니다. 저는 현재 회사(소위 3대 SI 대기업)를 만 4년 안되게 다니고 있으며, 해당 회사에 입사하기 전까지 자바, 자바스크립트를 써본 적도 없던 비전공자 입니다. 소위 알파고 키드지요 이쪽 커리어를 선택한 이유도 벌거 없습니다. 원래 유사공대를 다니고 있었는데, 컴퓨터 관련 학점이 잘나와서 개발자를 지망한 것 뿐입니다. 즉 개발자로 커리어를 스타트 한 시점은 네카라쿠배 개발자 붐으로 컴공이 떡상하기 이전입니다. 물론 노마드 라이프, 이민에 대한 꿈은 있긴 했습니다. 왜 프론트엔드를 하게 되었나? 처음에 고객사로 손해보험사를 담당하게 되었고, 해당 고객사의 웹 화면이 angular.js로 되어 있어 ..
[Vue3] defineProps를 컴포저블에서 사용할 수 없는 이유 사용 시 props, emit 정의를 대체하는 defineProps와 defineEmits은 왜 컴포저블을 이용해 컴포넌트 밖에서 선언할 수 없을까요? 공식 문서의 내용과 같이 defineProps는 타입스크립트 제네릭 사용과 같이 제약 사항이 많습니다. 그 이유는 무엇일까요? defineProps의 정체 vue3 core의 packages/runtime-core/src/apiSetupHelpers.ts 파일을 열어보면 다음과 같은 내용이 있습니다. 말 그대로 아무 역할도 안하는 친구입니다. export function defineProps() { if (__DEV__) { warnRuntimeUsage(`defineProps`) } return null as any } 단지 우리가 이 함수를 impor..
[Vue3] Vue3로 접근성 고려한 Form(양식) 개발하기 Vue3로 접근성을 고려한 Form(양식)을 개발하는 방법의 기초를 학습해 봅시다. 전체 소스 코드 보기 https://github.com/Code-Pop/Vue-3-Forms/tree/l9-end GitHub - Code-Pop/Vue-3-Forms Contribute to Code-Pop/Vue-3-Forms development by creating an account on GitHub. github.com 양식(form)의 기초 1. HTML에서 양식의 기본 동작은 브라우저 탐색(navigation) 이벤트를 트리거하여 지정된 URL로 많은 데이터를 보내는 것입니다. Axios와 같은 라이브러리를 사용하지 않으면 HTML 양식 제출시 브라우저가 완전히 새로운 페이지를 로드하게 합니다다 페이지를 지..
[번역] layout 성능 정확하게 측정하기 해당 글을 의역한 글입니다. https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web/ Accurately measuring layout on the web Update (August 2019): the technique described below, in particular how to schedule an event to fire after style/layout calculations are complete, is now captured in a web API proposal called reques… nolanlawson.com 2019년에 WebKit은 Chrome 및 Firefox에 맞게 requestAnimationF..

티스토리툴바