즐겁게, 코드

깃허브 해킹을 당했어요. 갑자기 메일로 Vercel 배포 실패 메일이 여러 건 동시에 오길래, 처음에는 deps bump가 잘못 동작한건 아닐지 오해했어요. 그런데 조금 더 들여다보니 모든 레포지토리에서 불특정 파일들이 제거됐고, 모르는 유저에게 스타를 약 100개쯤 눌러 놓았더라고요. (그 와중에 레포지토리 자체를 삭제하면 모바일 2FA 요청이 가는 걸 알고, 몰래 공격하기 위해 이런 방식을 사용한 것 같아요.) 어디서 토큰이 노출된걸 탈취해 공격에 사용된 것 같은데, 한번 토이 프로젝트에서 Admin 권한을 갖고 있는 Github Token이 외부에 노출된 건은 없을지 확인해보시면 좋을 것 같아요. 비싼 교훈을 얻긴 했는데, 토이 프로젝트들이 다 망가져서 너무 슬픈 날이네요.

QT나 WPF 등 비교적 허들이 높은 프레임워크 대신 electron이라는 프레임워크를 사용하면, 웹 개발자들도 굉장히 빠르게 데스크탑 어플리케이션을 개발할 수 있게 됩니다. 여기에 그치지 않고 electron-react-boilerplate(ERB) 라는 보일러플레이트를 활용하면 SPA 기반 웹 서비스를 개발하는 것과 거의 유사한 경험으로 데스크탑 어플리케이션을 개발할 수 있게 되는데요, 이 글에서는 ERB를 사용할 때 데스크탑 어플리케이션을 개발할 때 TailwindCSS(테일윈드)를 적용하는 방법을 정리합니다. 본 글은 ERB 문서에서 제공하는 방법으로 스캐폴딩이 완료되었음을 전제로 합니다. TailwindCSS 테일윈드를 적용하기 위해서는 테일윈드 설치 + ERB 설정의 두 단계가 필요한데요, 먼..

TL;DR 절대 경로 import를 활용하기 import 정렬 기준을 적용하기 사용하지 않는 패키지를 제거하기 프론트엔드 개발을 경험해보신 분이라면, 분명 한번쯤은 정돈되지 않은 import 코드 영역을 보며 아쉬움을 느꼈던 경험이 있을 거에요. import React, { createContext, useEffect, useState } from "react"; //Global Style import GlobalStyle from "./components/GlobalStyle"; //Import Pages import About from "./pages/About"; import Group from "./pages/Group"; import Nav from "./components/Nav/Nav"; i..

채널톡의 bezier-react 코드를 리딩하던 중, 낯선 구문을 만나게 되어 찾아보게 되었어요. import React, { // 임포트 단계에서 type 키워드를 붙여주는 것이 가능했던가? // 어떤 기능적 역할을 하는 것이지? type Ref, forwardRef, useMemo, } from 'react' 바로 import type 구문인데요, 해당 구문을 활용하면 불러오는 대상이 값인지 타입인지를 명시할 수 있답니다. // model/user.ts export interface User { id: string; name: string; } // component.tsx import { type User } from "@/model/User"; interface Props { user: User;..

바쁘다는 핑계로 지식을 정리하는 일에 너무 소홀했던 것 같아요 😅 퇴사 후 여유가 생기면서 서버리스 이제는 AWS Lambda로 간다 라는 책을 1/3 정도 읽을 수 있었는데요, 이번 글에서는 새로 배운 내용과 느낀 점을 간단히 적어보고, 새로운 람다 함수를 함께 배포해보도록 하겠습니다. 서버리스 프레임워크 혹시 IaC (Infrastructure as a code) 에 대해 들어 보셨나요? 요즘은 퍼블릭 클라우드 인프라를 Ansible, CloudFormation, Terraform 등의 IaC 툴을 통해 관리하는 것 같은데요, IaC를 활용하면 개발자가 GUI나 CLI 콘솔을 매번 입력할 필요 없이 코드나 설정 파일을 통해 인프라를 관리할 수 있게 됩니다. 예시 : 주어진 조건대로 EC2 인스턴스를..

자바스크립트의 .forEach, .map 등 메서드를 활용하면 현재 순회중인 요소와 인덱스를 함께 얻을 수 있습니다. const array = [a, b, c]; array.forEach((item, index) => { console.log(`item: ${item} / index: ${index}`); } // item: a / index : 0 // item: b / index : 1 // item: c / index : 2 이는 배열의 요소에 접근할 때 인덱스로 접근할 것이냐, 요소 자체에 접근할 것이냐를 고민하지 않게 해주어 코드 퀄리티와 생산성을 높여주기도 하는데요, 파이썬에서는 항상 이런 고민을 해야만 했습니다. string = "Hello, World!" # 순회중인 요소에 직접 접근할 것..

TL;DR esbuild는 정말 빠른 도구지만, 실제 환경에서 웹팩을 대체하기에는 아직은 시간이 더 필요할 것 같다. 웹 프론트엔드 분야를 학습해보신 분들이라면 한번쯤은 "이제 웹팩이 뭔지 공부해볼까?" 했다가, 복잡한 웹팩 설정과 플러그인들로 인해 좌절된 적이 있을 것입니다. 이번 글에서는 웹팩을 언젠가는 대체할 가능성이 있는 차세대 번들러, esbuild를 알아보며 느낀 점을 가볍게 적어보려 합니다. 이게 가능하다고? : esbuild의 번들링 속도 esbuild는 go로 만들어진 차세대 번들러로, 공식 홈페이지 의 대문에서부터 기존의 도구들과는 차원이 다른 번들링 속도를 어필합니다. esbuild의 큰 장점은 기존의 주류 번들러인 Webpack 5와 비교했을 때 압도적인 퍼포먼스를 보여준다는 점과,..