내 백업이 모든 사진을 날려버렸습니다
내 백업이 모든 사진을 날려버렸습니다. 오프라인 기분 추적기를 위해 백업 버튼을 만들었습니다. 데이터는 JSON 파일로 내보내졌고, 사용자는 이를 저장해 새 휴대폰으로 옮길 수 있었습니다. 모든 게 완벽해 보였습니다...
GyaanSetu JavaScript
The JavaScript and TypeScript ecosystem.
당신의 감성 위주 웹사이트가 절대 상위 노출되지 않는 이유
당신의 감성 위주 웹사이트가 절대 상위 노출되지 않는 이유. 지난달 한 창업자가 저에게 웹사이트 하나를 보여주었습니다. 보기에는 아주 훌륭했습니다. 깔끔한 애니메이션과 세련된 카피가 돋보였죠. 그는 A를 사용하여 단 한 오후 만에 그것을 만들었습니다...
TypeScript의 승리. 이것이 실제로 우리에게 가져다준 것들.
TypeScript가 승리했습니다. 이것이 실제로 우리에게 가져다준 것들입니다. 이제 더 이상 TypeScript 사용 여부를 두고 논쟁하지 않습니다. 새로운 프로젝트들은 기본적으로 TypeScript를 사용합니다. 논쟁은 끝났습니다. 진짜 가치는 단순히 ...
React vs Next.js: Which Should You Learn?
React vs Next.js: Which Should You Learn? Beginners often ask if they should learn React or Next.js first. The wrong choice slows your progress. This guide helps you decide based…
Firebase 기반의 커스텀 이커머스
Firebase 기반의 커스텀 이커머스. 처음부터 직접 커스텀 이커머스 사이트를 구축했습니다. 기성 플랫폼을 사용하지 않고 Firebase Realtime Database와 Netlify를 사용했습니다. 목표는...
두 PWA 간의 서명된 토큰: 백엔드 없는 HMAC SHA256
두 PWA 간의 서명된 토큰: 백엔드 없는 HMAC SHA256. 한 PWA에서 다른 PWA로 사용자 신원을 전달해야 합니다. 두 앱은 서로 다른 Firebase 프로젝트에서 실행되며, 데이터베이스를 공유하지 않습니...
JavaScript로 첫 번째 디스코드 봇 만들기
JavaScript로 첫 번째 디스코드 봇 만들기. 디스코드 봇을 만들고 싶으신가요? 음악을 재생하거나 투표를 진행하는 봇을 보며 어떻게 작동하는지 궁금했을 수도 있습니다. 이 시리즈를 마칠 때쯤이면...
7년 만에 다시 자바스크립트로 돌아온 이유
7년 만에 다시 자바스크립트로 돌아온 이유. 저는 7년 차 UI 개발자입니다. HTML과 CSS를 알고 있으며, Figma 디자인을 코드로 구현할 수 있습니다. 하지만 진정한 개발자라는 느낌은 한 번도...
연결 리스트를 직접 사용하지는 않지만, 당신 소프트웨어의 절반은 이미 연결 리스트로 작동하고 있습니다.
연결 리스트를 직접 사용하지는 않지만, 당신 소프트웨어의 절반은 이미 연결 리스트로 작동하고 있습니다. 실제 자바스크립트 프로젝트에서 연결 리스트를 직접 작성할 일은 아마 없을 것입니다. 언어에 내장된 배열은...
TypeScript의 승리. 그 결과 우리는 무엇을 얻었는가.
TypeScript의 승리. 그 결과 우리는 무엇을 얻었는가. 논쟁은 끝났습니다. 대부분의 새로운 프론트엔드 프로젝트는 기본적으로 TypeScript를 사용합니다. 이제 사람들은 도입 여부를 두고 더 이상 논쟁하지 않습니다. 진짜 가...
앱의 데이터베이스를 구글 드라이브 폴더로 교체했습니다
앱의 데이터베이스를 구글 드라이브 폴더로 교체했습니다. 딸의 음악 학습 진도를 기록하고 싶었습니다. 딸은 매주 선생님으로부터 오디오 클립과 노트를 받습니다. 저는 목록을 만들고 싶었...
이런 것들을 디버깅하기
이런 것들을 디버깅하기. 초보자들은 숙련된 개발자들이 실수를 하지 않는다고 생각합니다. 하지만 실상은 다릅니다. 숙련된 개발자들은 단지 실수를 더 빨리 찾아낼 뿐입니다. 저는 풀스택 프...
React의 리렌더링이 의미하는 세 가지
React의 리렌더링이 의미하는 세 가지. setState를 호출할 때 React는 단순히 DOM만 업데이트하는 것이 아닙니다. 세 가지 별도의 단계를 순차적으로 실행합니다. 대부분의 개발자들은...
Rust가 JavaScript 툴체인을 집어삼켰다. 그러자 Cloudflare가 이를 인수했다.
Rust가 JavaScript 툴체인을 집어삼켰다. 그러자 Cloudflare가 이를 인수했다. Vite는 작동 방식을 바꾸었다. 두 개의 도구에서 하나의 단일 파이프라인으로 전환되었다. 기존 방식은 개발을 위해 esbuild를 사용했...
Pagelyze를 구축하며 React에 대해 배운 것들
Pagelyze를 구축하며 React에 대해 배운 것들. Pagelyze를 구축하면서 React를 바라보는 관점이 바뀌었습니다. 이론을 공부하는 대신 제품 아키텍처를 바라보기 시작했습니다. Pagelyze는 웹...
JavaScript의 얕은 복사 vs 깊은 복사
JavaScript의 얕은 복사 vs 깊은 복사. JavaScript는 데이터 타입에 따라 두 가지 방식으로 복사를 처리합니다. 원시 값 (값에 의한 복사): 원시 타입에는 문자열, 숫자 등이 포함됩니다...
100일, 87개의 도구, 서버 0개
100일, 87개의 도구, 서버 0개. ToolKnit를 구축하는 데 100일을 보냈습니다. 이는 87개의 브라우저 기반 도구 세트입니다. 대부분의 도구 사이트는 다음과 같이 작동합니다: 파일을 업로드하면 서버가 처리하는 방식입니다...
기술직 후보자 5명을 면접했습니다
기술직 후보자 5명을 면접했습니다. 지난주에 프론트엔드 직무를 위해 다섯 명의 후보자를 면접했습니다. 그들은 각기 다른 배경과 기술을 가지고 있었습니다. 하루가 끝날 무렵에는...
React Lost Its Mass and Vercel Is Wearing Its Skin
React Lost Its Mass and Vercel Is Wearing Its Skin The React community used to own the project. Now, it feels like a hosting company manages it. The shift happened slowly. Then it…
JavaScript 배열 메서드 Part 1
JavaScript 배열 메서드 Part 1. 배열은 JavaScript의 특별한 객체입니다. 하나의 변수에 여러 개의 값을 저장합니다. 모든 학생을 위해 별도의 변수를 만드는 대신: l…
모든 개발자가 저지르는 25가지 JSON 실수
모든 개발자가 저지르는 25가지 JSON 실수. JSON은 웹 통신의 핵심입니다. 가볍고 읽기 쉽지만, 규칙이 매우 엄격합니다. 작은 오류 하나로도 코드가 작동하지 않을 수 있습니다...
GraphQL Fragments: Let Each Component Own Its Data
GraphQL Fragments: Let Each Component Own Its Data GraphQL queries look clean at first. One request gets all your data. Then your app grows. Your page query starts collecting fiel…
React vs Angular vs Vue: 나에게 맞는 프레임워크 선택하는 법
React vs Angular vs Vue: 나에게 맞는 프레임워크 선택하는 법. 프론트엔드 프레임워크를 선택하는 일은 마치 함정처럼 느껴지곤 합니다. 모든 블로그 글은 저마다의 승자를 주장하고, 댓글창은 전쟁터가 되기 일쑤죠. 그 진실을 공개합니다...
React Context vs Zustand: 언제 무엇을 사용해야 할까?
React Context vs Zustand: 언제 무엇을 사용해야 할까? 개발자들은 React 상태 관리 시 흔히 한 가지 실수를 범하곤 합니다. Context를 잘못 사용한 뒤, 성능 저하의 원인을 Context 탓으로 돌리는 것이죠. 그...