개발 마라톤

Next.js Routing 하기 [Next js] Route 이해하기 (velog.io) [Next js] Route 이해하기 React 프로젝트를 Next js로 마이그레이션 하면서 느꼈던 차이점은 라우팅하는 방법이였다. Next js는 pages 폴더 내의 폴더, 파일명으로 자동으로 path가 설정되기 때문에 이를 먼저 이해하고 디렉토리 velog.io 윗 글을 참고하여 정리해보았다. 방법 설명 next/link 컴포넌트 import Link from 'next/link; 를 통하여 라우팅 할 수 있다. next/router 모듈 import { useRouter } from 'next/router'; const router = useRoute(); 를 통하여 라우터를 만들 수 있다. router...

메인 화면의 배너 부분을 구현하고 싶었는데, 목업 데이터를 만들기 전에 우선 회원과 글의 스키마 구조를 정의해야 할 뿐더러, 목업 데이터를 API와 연결해야 할 것 같아 이참에 백엔드 구성 방법을 찾아보았다. 우선 백엔드에 대한 작업을 시작하기 전에, 클라이언트 단에서 백엔드의 데이터를 어떤식으로 Fetching을 하면 좋을 지 찾아보았다. Date Fetching Next.js 13 버전 - Data Fetching (velog.io) 윗 글을 참고하였고, 몇 가지 중요한 부분들을 정리하겠다. [번역] React Server vs Client Component in Next.js 13 (velog.io) [번역] React Server vs Client Component in Next.js 13 원 글..

Next.js의 Image 컴포넌트 더보기 Next.js 13 이전의 사용법 일부 정리 Next.js Image 컴포넌트 완벽 가이드 (mycodings.fly.dev) Next.js Image 컴포넌트 완벽 가이드 Next.js Image 컴포넌트 모든 속성 파헤치기 mycodings.fly.dev Next.js에서는 효율적인 이미지 로딩을 위해 Image 컴포넌트를 제공한다. 윗 글에선 해당 컴포넌트에 대해 다루었으며, 간단하게 정리하면 다음과 같다. 사용처 내용 가져오기 import Image from 'next/image' 필수 속성 src=경로 width={number | undefined} height={number | undefined} width와 heigth는 fill이 true일때는 필..

h1 텍스트 숨기기 웹 접근성을 고려하여 텍스트 숨기기 (velog.io) 웹 접근성을 고려하여 텍스트 숨기기 텍스트를 숨기는 여러 방법 중 웹접근성을 지킬 수 있는 방법은 어떤게 있는지에 관한 글 velog.io 웹 사이트의 제목을 h1으로 주고 싶은데, 텍스트 명은 숨기고 로고 이미지로 대체하고 싶어서 텍스트를 숨기는 방법을 찾아보았다. 윗 글을 정리하면 다음과 같다. display: none; 영역에서 아에 사라지며, 검색엔진이 접근할 수 없고, 스크린리더가 읽을 수 없다. width: 0; height: 0; font-size: 0; line-height: 0; 일부 스크린리더가 해당 요소를 무시할 수 있다. opacity: 0; 일부 스크린리더가 해당 요소를 무시할 수 있다. text-inden..

vanila extract 시작 vanilla-extract — Zero-runtime Stylesheets-in-TypeScript. vanilla-extract — Zero-runtime Stylesheets-in-TypeScript. Zero-runtime Stylesheets-in-TypeScript. vanilla-extract.style 오늘은 대부분의 시간을 vanilla-extract을 배우고, 적용하는데 시간을 보냈다. 설치는 공식 페이지의 Next.js — vanilla-extract Next.js — vanilla-extract Zero-runtime Stylesheets-in-TypeScript. vanilla-extract.style 해당 항목을 따라가면 어렵지 않게 설치 가능했다..