전체 글

그래서 모노레포가 뭐지? (feat. yarn workspace)

요즘 Monorepo를 검색 해보면 여기저기서 도입해본 경험에 대한 관련 글들이 많이 나온다. 필자도 현재 회사에서 Yarn workspace, Yarn Berry를 활용한 모노레포를 사용해본 경험이 있는데 그 경험과 함께 모노레포 관련 개념들을 함께 설명해보려 글을 작성한다. 모노레포 소개 모노레포(Monorepo)란 여러 개의 프로젝트나 패키지를 하나의 저장소에서 관리하는 방식을 의미한다. 이 방식은 저장소를 공유함으로써 프로젝트 간의 협업, 의존성 관리, 코드 재사용 등을 쉽게 할 수 있는 장점이 있다. 모노레포 구조가 아니라면, 아마 대부분의 기업들은 우리가 늘상 써오던 멀티레포(폴리레포) 방식을 사용할 것 이다. 멀티레포(폴리레포) 멀티레포 구조는 폴리레포 구조라고도 불린다. 멀티레포 방식은 각..

모듈 시스템의 역사와 모듈 번들러 알아보기

Javascript 개발을 하면서 번들러는 빼놓을 수 없는 도구 중 하나이다. 현재 가장 많이 쓰고있는 Webpack부터 Rollup, Parcel, 그리고 최근 급부상중인 Vite, webpack보다 10배(?) 빠르다는 Turbopack까지 현재 다양한 도구들이 사용되고 있다. 나 또한 저 도구들 중 써본것도 있고, 안써본것이 더 많은데 이 글을 통해 먼저 모듈시스템, 모듈 번들러가 등장하게 된 배경, Webpack에 대해 조사한 장단점에 대해 정리해보려고 한다. 먼저 들어가기에 앞서, 이러한 Bundling tool 들이 왜 필요하게 되었는지 Javascript 모듈 시스템에 대한 배경지식을 쌓고 넘어가면 좋을 것 같다. 과거에는 스크립트를 직접 HTML 파일에 삽입하는 방식으로 개발했다. 이러한 ..

CSS 스펙 탐구하기

이 글은 사내 기술 블로그에 기고했던 https://tech.streami.co/state-of-css-by-deobi/ 글을 옮겨와 그대로 작성했습니다. 안녕하세요, 저는 스트리미 FE팀에서 이용자가 마주하는 고팍스의 인터페이스를 개발하는 프론트엔드 엔지니어 더비입니다. 이번 포스팅에서는 제가 지난 4분기 FE팀 기술 세미나에서 State of CSS라는 제목으로 발표했던 세션에 대해 소개할까 합니다. 세션 소개 세션 목차 1. 들어가며-이 주제를 선택한 이유는? 2. Subgrid 3. Writing Modes 4. CSS Logical Properties 5. Viewport-Percentage Length Units 6. blend-mode 7. Filters & Effects 8. backdro..

글또를 시작하게 되면서💪📖

1. 글또 지원 이번에 글또 8기에 지원하여 운 좋게 참여하게 되었다. 글또는 "글쓰는 또라이"의 줄임말로 6개월간 2주에 한번씩 블로그에 글을 쓰고 싶은 주제를 선정하고, 관련해서 정리하여 올려야 한다. 이 글은 그 첫번째 글로써 앞으로 어떻게 글또를 참여할 것인가 다짐하는 글이다. 글또는 아래와 같은 비전을 갖고 다양한 직군의 개발자들이 모여 글을 쓰는 방법을 배우고 서로 인사이트를 나누며 함께 성장할 수 있는 커뮤니티이기도 하다. 글을 작성하는 개발 직군분들이 모여서, 좋은 영향을 주고 서로 같이 자랄 수 있는 커뮤니티 개발자들의 성장을 지원하는 커뮤니티 각자의 직군에서 얻을 수 있는 내용을 토대로 글쓰기 진행 부가적으로 삶의 철학, 여러 고민을 나누는 커뮤니티 나는 현재 굿닥 개발자이신 오원종 님..

회고라는 걸 처음 써보는 2022년 회고✏️

3년 차 프론트엔드 개발자로 접어드는 올해가 되어서야 회고라는 것을 처음 써본다. 요즘은 개인 블로그에 각자가 배운 것, 경험한 것, 느낀 것들을 정리하며 1년을 되돌아보는 시간을 갖은, 회고 글을 많이들 쓰시는 모습을 봤다. 1년을 되돌아보며 잘한 것은 칭찬하고, 못한 것은 문제점을 파악하며 더 나은 2023년을 만들 수 있도록 의미 있는 회고가 되기를 바라며 첫 회고글을 작성해 본다. 회사🌆 1. NFT 마켓 프로젝트 React, NextJS, Typescript, MUI, emotion-css를 사용하여 개발한 2022년 초반의 프로젝트이다. 드디어 실무에서 사용해보고 싶었던 NextJS를 사용할 수 있는 프로젝트여서 가슴이 뛰고 정말 재밌었던 프로젝트였다. 물론 일정이 빠듯해 야근을 매일 하다가 ..

React에서 babel의 동작원리 & React와 Virtual DOM 이해하기

먼저 babel이란? Babel 은 자바스크립트 컴파일러이다. 최신 버전의 자바스크립트 문법은 브라우저가 이해할 수 없기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다. 이로써 ES6, ES7 등의 최신 문법을 사용해서 개발을 할 수 있는것이다. React 에서 babel의 동작 function App() { return Tech Hello!; } 위와 같은 기본적인 jsx 코드가 있다. 이 코드는 babel을 거치게 되면 function App() { return /*@__PURE__*/ React.createElement( "h1", { id: "header", }, "Hello Tech" ); } 로 변하게 된다. React.createElement 두번째 줄을 보면 React의..

React Query는 어떤 기술일까?

현재 재직중인 가상자산 거래소 회사에서 올해 2분기 프론트엔드 세미나 진행당시 발표했던 React Query에 대해 조사한 내용입니다. React Query란 무엇인가요? React Query는 Server State를 관리하는 라이브러리로 React 프로젝트에서 Server와 Client 사이 비동기 로직들을 손쉽게 다루게 해주는 도구입니다. 현재 저희의 store에는 Client State, Server State 할것 없이 많은 것들을 저장하고 있습니다. (ex. 유저정보, 배너정보, 코인 가격 등...) React Query에서 Redux, Mobx 등 기존 상태 관리 라이브러리는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 그다지 좋지 않다고 말하고 있습니다. 공식 문서에서..