전체 글

전체 글

    카테고리 없음

    2024-06 블로그 이사 안내

    첫 기술 블로그를 3년 넘게 티스토리에서 운영했네요.이제부턴 Medium에서 기술 블로그를 이어가려고 합니다.글을 옮길 수 없다는 점에서 그동안의 매몰비용이 아까워 고민을 했었지만, 접근성 측면에서 미디엄으로의 이사를 결정했습니다.웹접근성이 아니라 그냥 순전히 제 접근성을 위해..티스토리는 구글링하다 우연히 포스팅을 만나지 않는 이상 개발 트렌딩을 파악하기 쉽지 않아서 직접 글 쓸 때 말고는 들어가질 않게 되다 보니 개인적으로는 좀 아쉬웠습니다.미디엄에서는 개발 관련 글을 손쉽게 확인할 수 있고, 미디엄 아티클을 찜해놓고 계정에서 볼 수 있으니 인사이트 모음집 마냥 쉽게 이용할 수 있지 않을까 하는 생각이 크게 들었던 것 같습니다.티스토리에 작성했던 글은 비교적 최신 글 중 좀 더 넓은 범위의 내용을 다..

    [개인 프로젝트] IOS 웹뷰 앱 '비가 오기 전에' 회고 - 무식한 자가 용감하다
    Project

    [개인 프로젝트] IOS 웹뷰 앱 '비가 오기 전에' 회고 - 무식한 자가 용감하다

    결과물 앱스토어 URL 14일간의 개인 프로젝트가 드디어 끝이 났습니다. 어쩌다 보니 갑자기 계획에 없던 프로젝트를 진행하게 되었습니다. 하고 싶은 게 생기면 바로 행동부터 하는 편인데 이번엔 그게 이 앱을 만들어내는 것이었습니다. 퇴사 이후 이사 일정이 있었기에 신경 쓸 것이 많아 그전까지는 사부작사부작 진득하니 하고 싶던 공부를 해야겠다 하며 무직 백수의 기간을 보내고 있었습니다. 날이 좀 풀린 어느 날 커피를 사러 가기 위해 대충 후드집업을 입고 나왔는데 세상에 너무 추운 겁니다. '아.. 엄청 춥네.. 몇 도야..' 평소에도 귀찮아서 날씨를 안 보고 다니다 보니 봉변당하는 일이 잦았는데, 문득 비 오기 전에 우산 챙기라고 알려주고, 기온에 맞는 옷차림도 위젯으로 볼 수 있으면 좋겠다는 생각이 들었..

    번들러 파헤치기 3 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / babel)
    Code/JavaScript

    번들러 파헤치기 3 - 오픈소스 라이브러리 만들기 (rollup / react / typescript / 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부..

    번들러 파헤치기 2 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, esbuild, vite, turbopack)
    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부 번들러의 발전과 역사자바스크립트에서의 빌드 환경은 모듈 시스템 ..

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

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

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

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

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

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

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

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

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

    2024.01.06 (토요일) - 좋은 결과물
    개발 일기

    2024.01.06 (토요일) - 좋은 결과물

    어느덧 새해가 밝았습니다.주말 아침, 일어나서 환기를 시키고 발이 시려운 탓에 양반 다리를 하고 공부를 하다가 새삼 새해가 밝았다는 사실이 놀라워 멍을 좀 때리다가 블로그에 들어왔습니다.매체를 가리지 않고 글 쓰는 걸 좋아하는 편입니다.기술 블로그는 지식 공유의 목적이 뚜렷하기에 주제와 구성을 생각하며 나름대로 신경 써 작성하곤 하는데 다른 곳에선 그냥 생각나는대로 주제 없이 쓰다가 제목을 정하고 발행을 합니다. 이 곳에선 구어체를 사용한다면, 다른 곳에선 편하게 문어체로 글을 쓰고 더 솔직하게 또 진정성있게 내용을 풀어낸다는 차이가 있을 것 같네요.요즘엔 커리어에 대한 고민이 8할을 차지하고 있어 이곳에 편하게 글을 작성해볼까 합니다.23년엔 참 많은 일이 있었다.최고의 복지는 동료라는 말이 있지 않나..

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

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

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

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

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

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

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

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

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

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

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

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

    [package] patch-package로 오픈 소스 수정하여 사용하기
    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..

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

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

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

    [React] AF 플러그인으로 애니메이션 간단 구현 (lottie / bodymovin / adobe effects)
    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로 바꾸고 렌더링 속도에 문제가 없을 정도로 용량도..

티스토리툴바