전체 글203 패키지 개발 시 CSS 번들링 적용 방법: vite와 exports field를 곁들인 들어가면서 React 기반 컴포넌트를 개발하고, Vite를 이용한 번들링하는 환경에서 별도의 패키지를 만들었다. 이 글에서는 TodoList 컴포넌트 패키지를 예시로 들어 설명한다. 하나의 패키지에서 개발된 컴포넌트처럼 해당 패키지가 다음과 같이 사용할 수 있도록 구성하는 것이 목표였다.import { Todolist } from "@test/todolist" 그러나 기대했던 바와 달리, 해당 컴포넌트를 import한 부분에서 CSS가 제대로 적용되지 않았다. dist 폴더를 확인해보았을 때, index.css가 정상적으로 빌드되어 있었고패키지를 별도로 실행했을 때, 네트워크 탭에서 index.css가 로드되고 제대로 CSS가 적용되는 것도 확인할 수 있었다. 이를 해결하기 위한 실험해 본 여러가지 .. 2025. 3. 11. [Typescript] 상황별 tsconfig.json 설정하기 들어가면서Typescript를 사용하는 프로젝트에서 가장 중요한 부분 중 하나는 tsconfig.json 설정이다. 새로운 프로젝트를 0부터 시작하거나, 기존 템플릿(Scaffolded Project)에서 시작하는 경우에 tsconfig.json을 세세히 다루지 않는 경우가 많다. 하지만 프로젝트가 커질수록, 프로젝트 성격에 맞게 tsconfig.json을 구성하는 것이 중요하다. 이번 글에서는 각 패키지나 프로젝트의 특성에 맞게 tsconfig.json을 작성한 예시와 경험에 따라 설정을 정리해보고자 한다.1. 상황별 tsconfig.json 구분하기먼저, 상황별 tsconfig.json부터 살펴보자. Typescript 프로젝트를 설정할 때, 어떤 환경에서 실행될 것인지에 따라 tsconfig.js.. 2025. 3. 2. [기록결산] 대범하게 살았는가 '대범하게'라는 워딩 자체에서부터 어느 정도 어그로를 끌만한 제목인 것 같아 민망하지만이 글은 전혀 거창할 것 없는 미루고 미룬 기록의 편린이다. 연말이 다가오면서 스스로 올해 ‘대범하게’ 살았는가에 대해 반추해보았을 때 계속 그렇지 않다라는 결론을 내렸다. 살면서 기억남을 대범한 일을 몇 번이나 하겠냐만. 깊이 애정하는 친구들과 마지막 24년 모임에서 각자 편지를 써주는 시간을 가지고, 편지를 주고 받았다. 한 친구의 편지 안에는 인간 cdb과 대범이를 분리할 필요가 있다는 말이 담겨있었다. 이리저리 힘들어하던 나를 위로해주는 깊은 뜻이 담긴걸 나는 안다. 그런데 이 문장으로 위로도 되었지만 조금 명쾌해졌다. 자의타의로 '대범'으로 살았던 2024년은 온전히 ‘나’로써 살았으니 ‘대범하게’ 살았다고 볼.. 2025. 1. 31. 오픈소스에 기여하며 얻은 보람과 사람 - OSSCA Yorkie 목차0. 오픈소스에 기여하게 된 계기1. 이런 걸로도 오픈소스에 기여할 수 있다고?2. 기여는 개발자의 불편한 부분에서부터 시작된다.3. 유저로서 고쳐지길 원하는 부분을 기여하다. 4. 기여를 통해 제대로 알게 된 개념들5. 기여를 하여 얻은 것은 바로 보람과 사람 0. 오픈소스에 기여하게 된 계기필자의 첫 오픈소스 기여에 대해 회고하는 마음으로 작성해본다. 개발자라면 한 번쯤은 오픈소스에 기여해보고 싶은 마음이 있을 것이다. 오픈소스를 통해 개발 생태계 자체가 건강하게 발전한 점에서 ‘나도 기여해보고 싶다!’라는 생각을 가지고 있었고 마침 오픈소스 컨트리뷰션 아카데미(OSSCA)가 진행된다는 얘기를 들었다. OSSCA 참여 프로젝트는 Apache Zeppelin, ArgoCD, Node.js 등등이 있.. 2024. 12. 22. [Vite] Vite는 어떤 역할을 하고 있는가 [Vite] Vite는 어떤 역할을 하고 있는가Vite를 사용하면서 잘 알지 못하고 사용하는 것 같아 한 번 정리하고자 글을 작성한다.공식 홈페이지에 따르면 ‘Next Generation Frontend Tooling’ 이라고 소개한다.Vite는 웹 개발에서 개발 서버와 번들링을 모두 처리하는 현대적인 빌드 도구로 설계되었다. Vite의 기능 1 : 개발 서버 & HMR(Hot Module Replacement)프론트엔드 개발자로서 Vite의 가장 체감되는 기능은 단연코 개발 서버 지원 및 HMR 이다. Vite의 핵심적인 기능인 "개발 서버"의 서버 시작 시간을 어떻게 개선했는지에 대한 공식 문서의 설명을 정리해보았다. Vite는 애플리케이션의 모듈을 Dependencies와 Source code 두 .. 2024. 10. 27. [기록결산][글또] 회고를 곁들인 다짐글 글또 10기를 시작하며 글또는 '글쓰는 개발자 모임'으로 마지막 10기에 참여하게 되었다.글또를 시작하며 회고를 곁들인 다짐글을 써본다. 나의 첫 번째 글또이자 마지막 글또이기에 조금 더 애살있게 활동하고자 한다. 먼저 크게 큰 범주로 이루고자 하는 다짐은 딱 두 가지이다. 첫 번째는 글또 10기를 하면서 배운 것들을 내 문장으로 적는게 목표이다. 개발자로서 일을 하면서 마주했던 어려움들이 결국엔 나의 기술적 자양분이 되었다.일을 진행하면서 알게 된 지식들이 많지만 따로 기록하지 않으면 모두 내 것이 되진 않아 따로 찾아보는 경우가 종종 있다. 깊게 고민한 흔적을 잘 정리해보는 경험을 하고 싶다. 어쩌면 당연한 것인지만 기술적으로 배운 것들을 설명하지 못한다면 알고 있는게 아닐 것이다.예를 들어, .. 2024. 10. 13. [DX] husky 적용 - 하나의 레포에 frontend와 backend 코드가 함께 있는 경우 들어가면서오픈소스에 처음 기여를 하면서 PR을 올렸는데 CI가 통과하지 못해 fail이 떠버렸다. 무슨 실수라도 한거 아닌가 하여 떨리는 마음으로 확인해보니 lint와 format을 적용하지 않고 올려서 문제가 되었다. 나중에 다른 PR도 확인해보니 다들 npm run format을 한 번씩 다시 한게 보여 commit 혹은 push 실행 전에 lint와 format을 자동으로 적용하도록 husky를 적용해야겠다고 생각했다. 그 과정에서 알게 된 것을 정리하였다.git hooks과 huskygit hooks 란?git hooks는 git에서 발생하는 특정 이벤트(ex.commit, push)에 자동으로 실행되는 스크립트이다. git hooks를 사용하면 특정 이벤트가 발생할 때 자동으로 사용자가 지정한 .. 2024. 9. 1. [기록결산] 내 것으로 만들기 [기록결산] 내 것으로 만들기기록은 중요하다. 하지만, 기록을 잘 정리했는지 혹은 기록으로 인한 지식이 내 것이 되었는지는 더 중요하다. 인간은 망각의 동물로 그 때 당시엔 이해됐던 것들이 지금은 전혀 기억나지 않는 경우도 종종 발생한다. 아래 글은 불가 7개월 전에 작성한 글에서 태도에 대한 부분말고는 기억이 잘 나지 않아 몹시 당황스럽다. (월별기록결산은 실패 ^^) [기록결산] 애쓴 것은 언젠가 정산된다.[기록결산] 애쓴 것은 언젠가 정산된다.생애 첫 연말정산을 끝내고, 1월도 막바지라는 생각에 '기록결산'이란걸 해보려고 한다. 딱 드는 생각은 뭐다? 월말결산을 월마다 해야한다는 뜻이지요 ..bo5mi.tistory.com그래서 내 것으로 만든 것들을 잘 정리해보았다. pnpm은 performan.. 2024. 8. 11. [TS|TIP] 회전된 사각형을 내접하는 사각형(BoundingBox) 구하기 회전된 사각형을 내접하는 사각형(BoundingBox) 구하기해당 아이디어를 기억해놓기 위한 기록이다. 아래는 순서대로 BoundingBox를 구하기 위한 함수들이다.가능한 한 함수가 하나의 기능을 하도록 구현하였다. 1. 각도를 라디안(radians)으로 변환하는 함수const toRadians = (angle: number): number => { return (angle * Math.PI) / 180;}; 2. 회전한 사각형의 경계 계산에 사용되는 코사인, 사인 값을 구하는 함수const getCosSin = (radians: number): { cos: number; sin: number } => { return { cos: Math.abs(Math.cos(radians).. 2024. 7. 24. [DX] ESLint, Prettier 무엇인지 알고 설정해보기 들어가면서ESLint와 Prettier는 React의 기능이 아니지만, React 프로젝트에서 자주 사용하는 도구이기 때문에 해당 카테고리에 기술한다. Prettier와 Lint를 사용하지 않으면 다음과 같은 문제가 발생할 수 있다. - 의도하지 않은 구현 실수 때문에 에러가 발생하는 경우(예를 들어, 일관되지 않게 function과 arrow function를 혼용하여 this 바인딩이 의도한대로 발생하지 않는 문제) - 협업하는 인원이 많아질수록 개개인별 코드짜는 스타일이 달라 가독성이 떨어지는 경우(예를 들어, 줄바꿈이 4줄코드와 2줄인 코드의 연속적인 충돌 혹은 사용하지 않는 인자들의 잔재) 이러한 문제들은 작지만 신경 쓰이는 부분들로, 개발 생산성을 저하시킬 수 있다. (사실 필자가 겪은 .. 2024. 6. 3. [tailwind CSS] backgroundImage 설정 방법 - (config/style/custom) tailwind CSS - backgroundImage 설정 방법 - (config/style/custom)tailwind css로 backgroundImage를 설정하는 방법은 기록하고자 한다. tailwind 왕왕초보의 무작정 적용기! 목차0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?1. backgroundImage를 tailwind.config.js 파일에서 설정해보기2. style 속성에 backgroundImage를 설정해보기3. 일회성 속성일 경우, 임의 값을 설정하여 backgroundImage를 설정해보기 0. 이미지 파일 부터 넣기 - assets 폴더를 pulbic에 넣을 것인가? src에 넣을 것인가?public 폴더public.. 2024. 6. 2. [Javascript] 직렬화(Serialize), 역직렬화(Deserialize) 직렬화(Serialize), 역직렬화(Deserialize)1. Javscript JSON 이란JSON(Javscript Object Notation)은자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다. 자바스크립트 객체 리터럴과 유사하지만 객체가 아닌 문자열일 뿐이며, 이를 이용해 다른 도메인과 데이터를 주고 받을 수 있게 된다. JSON은 XML 등 다른 데이터 포맷에 비해 간결하며, 손쉽게 자바스크립트 객체로 변환할 수 있어,웹 어플리케이션에서 Server-Client간의 데이터 교환에 주로 JSON을 사용한다. 2. JSON 표기법JSON은 자바스크립트 객체와 유사하지만 표기법이 조금 다르다.{ "name" : "Choi", "age" : "secret", "gender".. 2024. 3. 17. 이전 1 2 3 4 ··· 17 다음
