어제보다 더 나은 오늘

Reusing Styles - Tailwind CSSManaging duplication and creating reusable abstractions.tailwindcss.com Tailwind CSS 공식 문서에서 있는 Reusing Styles에 있는 내용을 내 나름대로 정리해보는 포스팅이다. 전문 번역은 아니고 필요한 내용에 대한 일부 번역임을 밝힌다.   1. 에디터 및 언어 기능 사용 재사용해야 하는 스타일을 단일 파일 내에서만 재사용하는 경우, 에디터의 다중 커서 편집 기능과 언어별 루프를 사용하는 것이 중복을 관리하는 가장 간단한 방법이다.   2. 컴포넌트 추출 여러 파일에서 일부 스타일을 재사용해야 하는 경우 가장 좋은 전략은 React, Svelte 또는 Vue와 같은 프론트엔드 프레..

들어가기에 앞서 Derrick Stolee가 작성한 Commits are snapshots, not diffs를 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다. Git은 뭐가 뭔지 헷갈리기로 악명이 높다. 사용자들은 기대와 어긋나는 용어와 문구를 접하며 곤혹스러워 한다. 이러한 현상은 git cherry-pick이나 git rebase와 같이 '히스토리를 다시 작성'하는 명령에서 가장 두드러진다. 내 경험상 이러한 혼란의 근본 원인은 커밋을 여기저기에서 무엇이 어떻게 바뀌었는지 보여주는 diff로 해석하기 때문이다. 하지만 커밋은 diff가 아니라 스냅샷이다! Git을 감싸고 있는 베일을 걷어내고 레포지토리에 데이터를 저장하는 방식을 살펴보면 Git을 이해할 수 있..

들어가기에 앞서React Query를 사용해 에러 핸들링을 하면서 많은 도움을 받았던 아티클을 공유하고자 합니다. React Query의 메인테이너인 TkDodo의 블로그 포스팅 React Query Error Handling을 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다.   에러 처리는 비동기 데이터 작업, 특히 데이터를 가져오는 작업(fetch)의 필수적인 부분이다. 우리는 모든 요청이 성공하는 것이 아니며, 모든 프로미스(Promise)가 이행(fulfilled)되는 것도 아니라는 사실을 직시해야 한다. 처음부터 이 부분에 집중하지 않는 경우가 많다. 에러 처리는 나중에 생각하고, '잘 되는 케이스'를 먼저 처리하곤 하는 것이다. 하지만 에러를 어떻게 처리..

들어가기에 앞서 프로젝트 폴더 구조를 설계하면서 많은 도움을 받았던 아티클을 공유하고자 합니다. Folder Structuring Techniques for Beginner to Advanced React Projects를 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다. React는 코드 작성과 구조에 관해서 정해진 통념이 없는 엄청나게 유연한 라이브러리다. 하지만 어떤 규칙도 없기 때문에 React로 프로젝트를 만들 때 이 유연성이라는 특성으로 인해 프로젝트 구조를 설계하는 작업 자체가 도전 과제가 된다. 이 글에서는 모든 규모의 프로젝트에 적용할 수 있는 세 가지 폴더 구조를 다룰 것이다. 가장 간단한 폴더 구조에서 시작해서 가장 복잡한 구조 순서로 소개할 것이..

React docs의 beta 버전이 정식으로 풀렸다. 기존 reactjs.org를 주소창에 입력하면 바로 새 주소인 react.dev로 이동하지만, https://legacy.reactjs.org/ 로 예전 사이트를 여전히 볼 수 있다. 새로운 react 사이트는 아직 다국어 버전을 지원하지 않기에 한국어로 편하게 볼 수 있는 legacy react 사이트를 종종 방문할 일이 있을지도 모르겠다. React The library for web and native user interfaces react.dev 새로운 리액트 사이트를 둘러보다가 새 프로젝트 시작하기 페이지를 보고 깜짝 놀랐다. 리액트에서 소개하는 리액트 프로젝트를 시작하는 터미널 명령어가 다음의 네 가지다. - Next.js : npx cr..

들어가기에 앞서 이 포스팅은 inDepthDev의 아티클 Here is why appendChild moves a DOM node between parents를 번역한 것입니다. 번역에 오류가 있는 경우 댓글을 통해 알려주시면 신속하게 수정하도록 하겠습니다. 나는 웹의 기본 원리를 아는 것이 무엇보다 중요하다고 믿는 사람이다. 그래서 종종 웹 개발 아키텍처나 웹 플랫폼 API에 관한 흥미로운 질문들을 하곤 한다. 이러한 질문을 던짐으로써 피면접자가 자신의 일에 대해 얼마나 열정을 가지고 있는 개발자인지, 지식에 대한 열망을 가지고 얼만큼 멀리 가봤는지를 이해하는 데 도움을 받는다. 지난주 트위터에 다음과 같은 질문을 올렸다. 아래와 같은 HTML 코드와 appendChild 메소드를 사용하는 다음과 같은..