curvez

frontend

  • FSD를 쓰면서도 코드 위치를 고민했던 이유

    API 호출 코드를 entities에 둘지 features에 둘지 논의하느라 리뷰가 길어진 적이 있다. 여러 곳에서 쓸 수 있으니 entities에 두자는 의견과, 지금은 한 화면에서만 쓰니 features면 충분하다는 의견이 나왔다. 그날은 결론을 내리지 못했다. 비슷한 논의가 반복되면서 코드 위치를 정하는 기준을 다시…

    FSD를 쓰면서도 코드 위치를 고민했던 이유

  • 한국어 블로그의 가독성을 CSS 다섯 줄로 개선하기

    블로그 글이 읽기 불편한데 어디를 고쳐야 할지 알기 어려웠다. 글자가 작은 것 같기도 하고, 줄이 빽빽한 것 같기도 했다. 잘 읽히는 블로그와 나란히 놓고 봐도 느낌만으로는 차이를 설명할 수 없었다. 그래서 우아한형제들 기술블로그, GitHub Blog, CSS-Tricks, Mozilla Hacks의 본문 크기와…

    한국어 블로그의 가독성을 CSS 다섯 줄로 개선하기

  • 같은 파란색이 화면마다 달라질 때: 디자인 토큰으로 정리하기

    디자인 시안의 파란색을 CSS에 옮긴다. 버튼 하나에는 background: #3B82F6 한 줄이면 충분하다. 다음 화면에서도 같은 버튼이 필요해 그 줄을 복사한다. 몇 달 뒤에는 버튼과 링크, 배지가 모두 파란색인데 값은 조금씩 달라져 있다. 색을 바꿀 때마다 화면 전체를 찾아다니지 않으려면 값을…

    같은 파란색이 화면마다 달라질 때: 디자인 토큰으로 정리하기

  • 새로 올린 이미지가 그대로일 때: CDN 캐시와 갱신

    이미지를 바꿔 다시 올렸는데 브라우저에는 예전 파일이 보인다. 원본은 분명히 바뀌었고, 강력 새로고침을 해야 새 이미지가 나타난다. 이런 경우에는 캐시를 확인해야 한다. 이 글에서는 캐시를 제공하는 계층 중 CDN을 살펴본다. CDN이 원본 서버 대신 파일을 전달하는 방식과 캐시 유지 시간을…

    새로 올린 이미지가 그대로일 때: CDN 캐시와 갱신

  • 로그인 버튼이 반응하지 않을 때 Network 탭에서 확인할 것

    로그인 버튼을 눌렀는데 화면이 그대로다. 코드를 다시 읽어도 이상한 곳이 없고, 콘솔에도 오류가 없다. 이럴 때는 브라우저의 Network 탭에서 요청부터 확인한다. 요청이 나갔는지, 어떤 데이터를 보냈는지, 서버가 무엇을 돌려줬는지를 보면 문제의 범위를 좁힐 수 있다. 로그인 요청 하나를 예로 들어…

    로그인 버튼이 반응하지 않을 때 Network 탭에서 확인할 것

  • 번들을 청크로 나누면 무엇이 달라질까

    Next.js 프로젝트를 빌드하면 .next/static/chunks/ 안에 여러 파일이 생긴다. 파일 이름에는 main-a3f9b2.js처럼 해시가 붙어 있다. 작성한 코드를 하나로 합치는 줄 알았는데, 왜 여러 조각으로 나뉘어 나올까? 각 조각을 청크(chunk)라고 한다. 빌드 도구가 청크를 나누는 기준과 캐시·로딩에 미치는 영향을 살펴본다. 직접 코드를…

    번들을 청크로 나누면 무엇이 달라질까

  • URL 하나로 비공개 파일을 여는 원리: 서명된 URL 이해하기

    비공개 스토리지의 파일 링크를 받았는데 주소가 두 줄을 넘는다. 끝에는 X-Amz-Signature=3f9a… 같은 값이 붙어 있다. 이 주소를 브라우저에 넣으면 로그인하거나 헤더에 토큰을 넣지 않아도 파일이 내려온다. 이 링크는 서명된 URL이다. URL에 담긴 서명이 제한된 접근 권한을 대신한다. 다운로드와 업로드가 가능한…

    URL 하나로 비공개 파일을 여는 원리: 서명된 URL 이해하기

  • 컴포넌트 복사에서 반복되는 실수를 스캐폴딩으로 줄이기

    버튼 컴포넌트를 새로 만들려고 기존 폴더를 복사했다. Button.tsx, Button.test.tsx, index.ts를 붙여 넣고 이름을 바꿨는데, index.ts의 export 경로에는 예전 이름이 남았다. import가 깨진 뒤에야 빠뜨린 줄을 발견했다. 새 컴포넌트에서 달라지는 것은 로직인데, 파일의 뼈대를 만드는 데는 매번 같은 작업이 필요했다. 이…

    컴포넌트 복사에서 반복되는 실수를 스캐폴딩으로 줄이기

  • 모노레포에 turbo.json이 필요한 이유

    모노레포 저장소를 복제하면 최상위에 apps/와 packages/가 보인다. 루트 package.json에는 워크스페이스 설정이 있고, 그 옆에는 turbo.json이 놓여 있다. 여러 앱을 한 저장소에 모은다는 것은 알겠는데, turbo.json은 왜 필요할까? 워크스페이스와 Turborepo는 서로 다른 역할을 맡는다. 워크스페이스는 패키지를 연결하고, Turborepo는 작업의 실행 순서와…

    모노레포에 turbo.json이 필요한 이유