개발 마라톤

DB 연결하기 Nextjs MongoDB Atlas 연결하기 mongoose, TypeScript 사용 (tistory.com) Nextjs MongoDB Atlas 연결하기 mongoose, TypeScript 사용 MongoDB Atlas란? 우선 MongoDB는 NoSQL 데이터베이스입니다. 간단히 말하면 MySQL같은 데이터베이스랑은 달리 테이블을 만들고 정규화 시키고 할 필요 없이 그냥 저장하고 싶은대로 저장할 수 있습니다. supern0va.tistory.com Next.js의 MongoDB 연결은 윗 글을 참고했다. 1. MongoDB를 연결하기 위해 연결 URI를 환경변수 파일에 저장한다. MONGODB_URI= ... Next.js는 기본적으로 환경변수 관리를 지원하기 때문에, 따로 모듈..

메인 화면의 배너 부분을 구현하고 싶었는데, 목업 데이터를 만들기 전에 우선 회원과 글의 스키마 구조를 정의해야 할 뿐더러, 목업 데이터를 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 해당 항목을 따라가면 어렵지 않게 설치 가능했다..