babel)

본 글은 번들러 파헤치기 시리즈의 마지막인 3부로, Rollup을 통해 리액트 컴포넌트 라이브러리를 직접 구성하고 배포하는 과정에 대해 설명하려고 합니다.번들러 파헤치기1부 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule)2부 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, exbuild, vite, turbopack)3부 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / babel) 3부는 구현에 집중하여 작성할 예정으로 구성과 관련된 기술적 배경에 대한 자세한 설명없이 진행할 예정으로, 본격적인 구성에 들어가기에 앞서 1부, 2부를 읽고오시는 것을 추천드립니다.3부..

→2024.03.02

Code/JavaScript

번들러 파헤치기 2 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, esbuild, vite, turbopack)

본 글은 번들러 파헤치기 시리즈의 2부로, 번들러의 발전 및 역사를 주제로 각 번들러에 대한 설명을 진행하려고 합니다.2부에서도 CommonJS(cjs), esmodule, ESM (mjs)에 대한 내용이 등장하기 때문에 이전 포스팅을 가볍게 읽고 오시는 것을 추천드립니다.번들러 파헤치기1부 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule)2부 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, exbuild, vite, turbopack)3부 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / babel)2부 번들러의 발전과 역사자바스크립트에서의 빌드 환경은 모듈 시스템 ..

→2024.03.01

Code/JavaScript

번들러 파헤치기 1 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule)

개인적으로 클라이언트 환경에서 가장 진입장벽이 높게 느껴지는 부분은 빌드 환경인 것 같습니다.다른 부분은 사실 실무에서도 자주 다루고 접하다 보니 금방 익숙해지는 반면, 프론트엔드의 경우 한 번 구성해 놓으면 직접 수정 할 일이 적다 보니 유난히 어렵게 느껴지기 쉬운 듯 합니다.번들러 파헤치기 포스팅은 모듈 시스템의 역사, 번들러의 역사, 빌드 환경 구성으로 나누어 포스팅을 하려고 합니다.각 시리즈는 이전 내용들에 의존하고 있는 부분이 있으니 길더라도 환경 구성 전 모든 시리즈를 훑어보시는 걸 추천드립니다.빌드 환경 자체가 모듈 시스템, 번들러, 컴파일러 등 많은 부분이 서로 의존성이 높고, 공통점, 차이점, 특징도 워낙 다양한 부분이다 보니 선수 이해가 있어야 번들러를 이해하고 알맞은 구성을 할 수 있..

→2024.02.29

Code/그래서

[HTML-그래서] 브라우저 동작 원리와 함께 보는 HTML5

웹, 특히 프론트엔드 환경에서 html은 뗄래야 뗄 수 없는 존재입니다.react / vue 등을 사용했을 때도 html을 항상 같이 사용하고 있으니 더더욱 간과하기 쉬운 부분이라는 생각이 듭니다.저 또한 그랬던 것 같습니다.이번에 html을 공부하면서 마음 먹은 게 있습니다.'알고 있다고 생각하지 말기', '재미없으면 더 깊게 보기'나름대로 의식은 했는데 그럼에도 찝찝한 부분이 남아있긴 합니다. 그래서 내용 정리도 할 겸 html에서 놓치기 쉬운 부분들에 대해 최대한 쉽게 흘러가듯 작성해보겠습니다.HTML5 템플릿 예제// IDE에 html:5를 입력하면 나오는 자동완성 템플릿 ... 우선 첫 줄부터 보겠습니다. 1. DTD (Document Type Definition) 선언부브라..

→2024.02.13

Code/Network

[Network] HTTP cache (browser cache, proxy cache) 파헤치기

저는 사실 캐싱의 의미를 명확히 이해하지 못하고 있었습니다.어딘가에 데이터를 저장해놓는다는 건 알았지만 서버, 브라우저, 클라, 이미지, 라이브러리 등등 너무 여기저기 등장하는지라 '네트워크의 거대한 무언가'로 남아 캐싱 부분이 애매한 지식으로 남아있던 것 같습니다.이번에 개인적으로 캐싱을 공부하며 알게된 것들이 많아 학습한 내용을 공유해볼까 합니다.우선 cache / 캐싱 의미에 대해 설명해보겠습니다.Cache ?캐싱은 특정 기술이 아니라 기법의 명칭입니다.밥을 먹기 위한 과정- 밥솥을 열고 숟가락에 얹은 뒤 다시 자리에 앉아서 한 숟갈을 먹고 다시 밥 한 숟갈을 뜨기위해 밥솥을 열러 간다.이 밥 데이터에 대해 캐싱을 해놓는다면 아래와 같습니다.- 밥솥을 열고 밥을 가져와 식탁에 올려 놓는다.- 먹는다..

→2024.01.23

Code/TypeScript

[React/typescript] 재사용 가능한 동적 타입 리스트 컴포넌트 만들기 (generic type/ render props pattern)

담당하고 있는 서비스가 만들어진지 곧 1년이 다 되어갑니다.MAU 5천만의 업계 최고 플랫폼을 만들어 내고야 말겠다는 꿈을 꾸며 항상 코드를 작성할 때 먼 미래를 생각해 작성했던 것 같은데 각오가 무색하게 3개월만 지나도 '왜 이렇게 했지'라는 생각이 듭니다.그땐 최선이라 생각했던 것들이 지금 와서는 아쉬운 게 투성이인지라 개발 범위가 겹치는 것이 있다면 본 일정에 무리 없는 선에서, 또는 개선해야만 하는 것들은 공유하며 마감 기한을 늘려보는 식으로 거슬리는 것들을 조금이라도 개선해나가며 작업하는 습관을 가지게 된 것 같습니다. 요즘엔 리액트 디자인 패턴을 공부하며 체화 시키기 위해 노력 중인데 신기한 게 공부하다 보면 '어 이거 DynamicInput 컴포넌트에 쓰면 딱이겠다', '이거 온보딩 컴포넌트..

→2023.12.31

Code/그래서

[React - 그래서] key prop은 렌더링에 어떻게 쓰이는가 (Fiber / 재조정 reconciliation)

`${stack} - 그래서` 카테고리 탄생 배경 새로운 카테고리를 개설했습니다. 기술 공부를 할 때 그래서..? 이게 뭐..?라는 느낌이 들며 지식 간 연결이 끊어져있는 느낌이 들 때가 잦습니다. 그럴 때 다른 분들은 '왜?'를 떠올리던데 저는 대부분 그것보다 이전 단계에서 이해를 못하는 편이라 '그래서? 이게 무슨 상관인데?'로 인덱싱 문제를 해결하곤 합니다. why? 보다 then.....what? 느낌이랄까요 노력형 개발자가 저뿐만은 아니겠죠, 계속 성장 하고 있는 걸 보면 사실 큰 문제는 아닌 것 같습니다. 하나씩 모으다 보면 어느 순간에 뭔가 연결되는 느낌이 드는데 그때 적지않은 도파민이 나오기에 그 쾌감이 퍽 재밌기도 합니다. 개인적으로는 새로운 개념을 받아들일 때 얕게 우선 정의부터 대략적..

→2023.12.17

Code/React - Node

[React] 뒤로가기 막기, 감지하기 (history / react-router-dom)

오늘은 모달 React 에서 react-router-dom v6 이상의 환경에서 뒤로가기를 감지하거나 막는 방법에 대해 서술하려고 한다.자사 서비스는 모바일 웹 / 앱에 최적화 되어있어 모바일 유저의 UX를 중요하게 여기고 있다.문제는 웹의 경우에는 뒤로가기를 진행하면 페이지 자체가 이동되는 게 자연스럽다고 생각했으나, 모바일 기기 특히 안드로이드에서는 뒤로가기를 시도했을 때 기대하는 바가 다르다는 것이었다. 안드로이드는 페이지 이동이 아닌 레이어 정도의 뒤로가기 느낌이었다.이전까지는 뒤로가기에 대한 핸들링은 페이지 단으로만 처리를 하고 있었는데 (커버하지 않았다) 가장 핵심 기능인 일정표 페이지에서 뒤로가기 기능을 통해 모달이 켜지거나 꺼지고, 모드가 바뀌는 등의 기능이 추가되었다.react-route..

→2023.10.05

Code/React - Node

[React] 웹뷰 에서 브릿지 통신으로 IOS/Android 위치 권한 받기 (kotlin / swift)

결과물 (IOS / Android 앱 내 화면) 오늘은 웹앱에서 위치 권한 정보를 받아오는 기능을 구현한 과정에 대해 포스팅을 하려고 한다.아 정말 상당히 복잡했던 기능이다. 이 꽉 깨물고 구현해냈다는 말이 알맞지 않을까우선 개발 환경에 대해 설명을 하자면 자사 서비스는 React / typescript 를 기반으로 한 웹 애플리케이션이다.IOS 는 swift, Android는 Kotlin 을 통해 거대한 앱 껍데기를 만들고 내부는 모두 웹뷰를 보여주도록 구현 되어있다.웹앱의 단점이라 하면 디바이스 권한 접근이 불가능하다라는 것인데, 설문 기능 내부 페이지에 위치 권한을 받아오는 기능이 추가되었다.우선 요구사항에 대해 간략히 설명하자면,1. 페이지 진입 시 위치 권한 약관에 동의한 유저이고, 좌표를..

→2023.10.01

Code/Dev environment

[package] patch-package로 오픈 소스 수정하여 사용하기

상황 현재 서비스의 클라이언트는 Graphql 도입과 동시에 apollo-client 가 적용되어 있는데, 이 환경을 조금 더 생산성 있게 관리하기 위해 graphql-code-generator 와 플러그인을 사용해 gql 쿼리 작성 후 스크립트 실행 시 쿼리에 해당하는 커스텀 훅을 아폴로 훅과 결합하여 별도로 생성해줄 수 있도록 되어있다. 문제는 그동안은 React의 Suspense 기능을 사용하지 않고 있다가, 신규 메인 페이지를 작업하던 중 API 의 응답 속도 지연으로 컴포넌트 별 스켈레톤 UI 를 적용해야만 하는 상황이 왔다. 기존 아폴로 훅을 사용해 Suspense 를 적용하려고 하니 작동이 되지 않아 찾아보니, https://www.apollographql.com/docs/react/data..

→2023.10.01

Code/Dev environment

[AWS] amplify 배포 / 빌드 현황 슬랙 웹훅(slack webhook) 알람봇 구현 (lambda)

현재 담당하고 있는 서비스는 amplify 를 통해 master 와 staging 브랜치를 기준으로 배포 환경 구성이 되어있다. 그동안은 프론트를 혼자 담당하고 있었고 마스터 배포가 잦은 편은 아니었기에 직접 aws amplify 에 접속해 배포 현황을 보고 배포가 완료되면 팀 채널에 공유하는 식으로 업무를 진행했었는데, 조금씩 마스터 배포가 훨씬 자주 일어나게 되자 amplify 접속하는 것도 귀찮아져서 슬랙 알람 봇을 구현해야겠다는 생각을 했다. amplify 는 이메일 알람 이외 다른 notification은 제공하지 않았기에 이메일 트리거를 사용하는 방법을 택했다. 그렇게 찾은 두 가지 방법 개인용 슬랙 메일 주소로 알람 받는 법 amplify의 이메일 노티를 감지해 lambda 함수로 슬랙 웹훅..

→2023.09.23

Code/React - Node

[React] AF 플러그인으로 애니메이션 간단 구현 (lottie / bodymovin / adobe effects)

오늘은 video 태그의 autoplay 가 아이폰 저전력 모드 (iphone low power mode) 에서는 작동하지 않는 문제를 애니메이션을 구현하는 방법으로 해결하며 FE-designer AF 협업 세미나를 진행했던 내용을 포함해 작성하려고 한다. 상황 기존에는 메인에서 adobe-effects 를 사용해 만들어진 gif / video 형식을 가진 에셋들이 여러 개 포함 되어있었다. 다소 복잡한 애니메이션들이 많은 페이지였으나 당시 리소스를 생각해 현련한 애니메이션이 들어가는 부분은 1차로 gif 파일로 받았던 기억이 난다. gif로 받고 나니 용량이 큰 탓에 렌더링 속도에 이슈가 있어 이런 저런 방법을 찾아보다가 파일 형식을 webm 과 mp4로 바꾸고 렌더링 속도에 문제가 없을 정도로 용량도..

→2023.09.17

Code/React - Node

[React/node] 하드코딩 방어하기 _ notion 문서 react 렌더링 (html-react-parser)

개발자 스타일마다 다를 순 있지만 개인적으로는 하드코딩을 피하기 위해 정말 노력하는 편이다. 데이터가 변경될 가능성 + 추후 유지보수 + 확장 가능성 등등을 고려하며 추후 데이터의 변경이 있을 때에도 간단하게 변경할 수 있는 구조를 생각하며 구현하는 편인데 처음엔 조금 공수가 드는 것 처럼 보여도 결국 조금만 지나도 큰 효용을 느낄 수 있다고 생각하기 때문이다. 문제 서비스 릴리즈를 앞두고 있던 때에 다양한 이용약관이 추가되어야 하는 상황이었는데 이용약관들은 법적 검토 등의 과정을 통해 다소 여러가지 형태의 각기 다른 레이아웃을 가진 채 노션 (notion)에 정의되어 있었고, 약관을 보여주는 공통 모달 컴포넌트 디자인은 타이틀, 소제목, 본문, bullet, numbering, 여백 등등이 따로 커스텀..

→2023.09.10

Code/React - Node

[React/node] 한글 욕설 필터링 기능 구현하기 (node csv 파일 변환)

결과물 미리보기 자체 로그인 기능을 위한 기획 회의에 참여해 한창 얘기를 나누던 도중 나 : 닉네임에 욕설 필터링이 필요하지 않을까요? PM : 오!!!!!!! 아~~~~~ 예 그래야겠네요 나 : 어느정도까지 커버할 수 있는지 감이 잘 안 와서..리서치 후에 내용 공유 드리겠습니다 여러 정보를 찾아 보았을 때 욕설 필터링은 자체적으로 자연어 처리를 이용해 고도화된 엔진을 사용하여 검수하는 방법과 기타 라이브러리를 사용하는 방법이 있었는데 우선 자연어 처리를 하는 것은 현 상황에 적절하지 않은 방안이었기에, 라이브러리를 찾아보기 시작했다. bad-words (support only english) https://github.com/web-mech/badwords GitHub - web-mech/badwor..

→2023.09.09

Code/React - Node

[React] svg 에셋을 컴포넌트로 변환하여 사용하기 - SVGR

현재 서비스의 클라이언트 프로젝트는 에셋은 거의 모든 것을 svg 파일을 사용하고 있는데, svg를 프로젝트에 유연하게 적용시키기 위해 여러가지 도전을 해봤던 것 같다. svg 파일을 Img 태그에 그대로 넣어 사용하기거나 svg를 임포트 해서 컴포넌트로 만들어 보기도 했었다. 컴포넌트화 시킨 svg 를 또 잘 활용할 수는 없을까 해서 current value 를 이용해 svg 프롭에 직접 접근하여 관리하는 방식도 고민했었는데 이건 디자인 쪽에서 넘어오는 에셋들이 current 를 사용해 관리하기 힘든 구조였기 때문에 사용하지는 못했다 (svg 스타일의 통일성 부족) vscode를 통해 코드 작성을 하는데, 에셋은 자동 임포트가 또 작동되지 않아서 파일 위치 찾아서 하나하나 경로 보고 import 문 작..

→2023.09.07

Code/React - Node

[React / Typescript] IOS safari 상태바 색상 변경 / 커스텀 훅을 이용한 동적 처리

문제 : 반응형 웹 서비스 구현 중 IOS의 사파리 브라우저 환경에서 상단바가 페이지 배경색과 일치하지 않음을 확인 브라우저의 상단바 색상을 해당 페이지의 배경색과 동일하게 변경을 해야 했고, 페이지 별 상이한 배경을 갖고 있는 경우가 있기에 이를 핸들링할 수 있어야 했다. 1. 상태바 색상 변경 (change safari status bar color) - index.html html 파일 내부에 meta 태그를 위와 같이 작성할 경우 content의 색상을 고정으로 가지고 있을 수 있다. 나는 페이지 별로 다른 색상의 상태바를 보여주길 원했기에 커스텀 훅을 생성했다. 2. Custom hook 커스텀 훅 추후 유지 보수를 생각했을 때, 기본으로 설정된 흰색이 아닌 다른 색상이 필요한 경우만을 예외로 ..

→2022.12.09

Code/React-Native

[React native] FlatList 자동 스크롤 슬라이더 / 캐러셀 구현하기

오늘의 결과물 회사 앱이 런칭되고 나서 react native에서 캐러셀을 활용한 디자인을 구현해야 하는 상황이 자주 발생했다. 참으로 다양한 캐러셀과 슬라이더를 만들었는데 이번에 메인 페이지 개편 작업을 하며 5가지 종류의 새로운 캐러셀을 추가로 작업했다. 가만히 생각해보니 리액트 네이티브를 만진 지 얼마 되지 않았을 때.. 잡힐 듯 잡히지 않는 듯한 FlatList로 캐러셀과 슬라이더를 구현하느라 상당히 진땀을 뺐던 기억이 났다. 캐러셀 자체를 만드는 것은 어렵지 않았으나 추가로 들어가는 로직이라던가 슬라이더의 전체 스타일을 잡는 과정에서 마음대로 되지 않았던 문제가 있었다. 그 당시에는 pm과 기획의 부재로 구두상으로 계속 디자이너님께 물어보며 재량껏 구현을 해야 했던 상황이라 더 고되었던 것으로 ..

→2022.03.27

Code/React-Native

[React native / 리액트 네이티브] Grid 구현 방법, FlatList, numColumns, nativeEvent

자사 서비스는 웹을 기반으로 작업이 되어있었다. 그 후 어플을 런칭하면서 서비스 확장을 기대했고 1차적으로 webVeiw를 통해 안드로이드, ios 에서 볼 수 있도록 리액트 네이티브를 사용했었는데 webView로는 ux적인 경험이 부드럽지 못하다는 내부 결론이 도출되었고, 리액트 네이티브 (react-native)로 서비스를 모두 옮기는 작업을 진행하고 있는 단계이다. 완전히 몰두해서 일하기까지는 일주일 정도의 적응기를 가졌는데, 네이티브를 셋팅하는 데 너무 많은 변수 + xcode의 버릇없음 + 맥북의 대환장 먹통 파티에 3일정도를 썼고, 나머지 이틀은 ui가 복잡하지않은 페이지들을 작업하면서 공식문서를 계속 읽어가면서 작업했다. 그렇게 간단한 페이지 작업을 끝낸 후 grid 형태의 디자인을 구현했어..

→2021.07.17

Code/TypeScript

[TypeScript] 타입스크립트의 기본 / 타입(type), 옵셔널 파라미터(optional parameter), 디폴트 파라미터 (default parameter)

타입스크립트의 몇 가지 타입과 특징을 설명하려고 한다. 타입 숫자형 (number type) 문자형 (string type) 비교형 (boolean type) undefined type null type unknown type any type void type object type never type 함수 타입 (function type) 배열 타입 (array type) 이외 타입스크립트, type 연산자를 통한 객체 타입 구체화 타입 추론 옵셔널 파라미터 디폴트 파라미터 | 특수문자를 사용한 or 타입 지정 숫자형 (number type) / 문자형 (string type) let num1: number = 1; let num2: string = 'hello'; num1 = 5 num2 = 'hi' ..

→2021.03.15

Code/Nestjs

[Nestjs] NestJS가 각광받고 있는 이유? / 파일 트리 구조 / 실제코드

파이널 프로젝트에서 백엔드를 맡으면서 nestJS를 사용했는데, 골치아팠던 nestJS를 이해하게 되면서 핫할 수 밖에 없는 스택임을 느꼈고, 이를 토대로 기술 발표를 진행했던 적이 있다. 오늘은 nestJS가 핫한 이유, nestjs의 활용과 유용성에 대해 포스팅을 하려고 한다. 포스팅에 앞서 ppt 자료가 포함되었던 발표이기에 간단한 ppt와 함께 nestJS에 대한 설명을 진행할 예정이다. nestjs에 대한 소개와, 사용한 기능 및 느낀 점 총 2가지 포인트로 설명을 할 것이다. NestJS의 특징 첫 번째, 안정성 NestJS는 물론 자바스크립트 js에서도 작동이 가능하지만, nestJS 개발 당시 타입스크립트를 고려하여 제작되었기 때문에 타입스크립트를 적극적으로 지원한다. 타입스크립트를 지원한..

→2021.03.06

티스토리툴바