전체 글199 [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" : "fe.. 2024. 3. 17. [Fabric.js] The transformation matrix in fabric.js (fabric.js의 변환 행렬) 번역 및 예제 The transformation matrix in fabric.js 이 글은 faric.js을 공부하면서 마주했던 transmation matrix에 대해 정리한 글에 대한 (가벼운) 번역이자 추가 설명을 위한 글입니다. The transformation matrix in fabric.js Recently I’m using the excellent fabric.js library for a side project. I came across the transformation matrix. The purpose of this article… medium.com The purpose of this article is to detail how the transformation matrix works and e.. 2024. 2. 29. [기록결산] 애쓴 것은 언젠가 정산된다. [기록결산] 애쓴 것은 언젠가 정산된다.생애 첫 연말정산을 끝내고, 1월도 막바지라는 생각에 '기록결산'이란걸 해보려고 한다. 딱 드는 생각은 뭐다? 월말결산을 월마다 해야한다는 뜻이지요 .. 바로 회고를 습관화해보고자 월마다 성찰과 반성과 반영을 동시에 하자! 라는 목표 하나로 24년을 기록해보려고 한다. 물론 더 꼼꼼하고 자세히 적는 것이 물론 독자나 미래의 나에게 더욱 좋을 것이다. 하지만 완벽주의의 탈피를 쓴 필자는 이 일을 1년 뒤로 미룰 것이기 때문에 완벽하지 않아도 기록하고자 한다.24년 1월 3일import get from "lodash/get"; / lodash 알아보기24년 1월 4 ~ 5일중단 배포와 관련 QA를 쳐내다 .... !24년 1월 8일ga gtmgym = google ta.. 2024. 1. 31. [React] useEffect에서의 의존성(dependency)과 실행 흐름 useEffect에 대해 정리하고 싶은 마음이 들어 useEffect의 실행 조건과 흐름을 한 큐에 정리해보고자 한다. useEffect 란? useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 근데 useEffect는 왜 Effect라는 이름을 가질까? Hook은 컴포넌트의 렌더링과 별개로 발생하는 작업들, 즉 "부수 효과"를 처리하기 위해 사용된다. (" S H O C K I N G ") 이 useEffect Hook은 컴포넌트가 렌더링되고 나서 비동기적 또는 부수적인 작업을 수행할 수 있도록 도와주기 때문에 "Effect"라는 용어가 사용되었다고 한다. 더보기 React의 클래스 컴포넌트에서는 componentDidMount, componentD.. 2024. 1. 29. [클린코드] 44~48일차 - 동시성2 톺아보기 [클린코드] 44~45일차 - 동시성2 톺아보기 클린코드 44일차 (p. 404 ~ 407 (17장) / 408 ~ 412 (18장) ) 클린코드 45일차 (p. 413 ~ 419 (18장) ) 클린코드 46일차 (p. 420 ~ 428 (18장) ) 클린코드 47일차 (p. 429 ~ 436 (18장) ) 클린코드 48일차 (p. 437 ~ 446 (18장) ) 18장 동시성2 225쪽에서 소개한 동시성을 좀 더 자세히 보완하기 위한 장이다. 클라이언트/서버 예제 예제를 살펴보면 서버와 클라이언트의 단순한 소켓 프로그래밍 코드를 보여주고 있다. 서버는 소켓을 열어놓고 클라이언트가 연결하기를 기다린다. 클라이언트는 소켓에 연결해 요청을 보낸다. 아래는 클라이언트/서버 테스트 코드이다. 해당 테스트는 10.. 2023. 12. 22. 이전 1 2 3 4 ··· 17 다음
