개발 마라톤

폴더 구조 정의 이번 프로젝트 때 컨벤션을 정할 시기에 폴더 구조도 정리해야 된다는 것을 이해하고는 있었다. 부트캠프 1차 프로젝트때는 폴더 구조를 정하지 않아서, 서로 파일이 다른 위치에 있었던 것이 기억났다. 이번 개인 프로젝트는 나 혼자서 진행하므로, 폴더 구조를 따로 정리하지 않았는데, 작업하다보면 햇갈릴 수도 있고, 나중에 ReadMe 같은 곳에 정리해두고 싶어서, 글로 정리해보기로 했다. src ( @ 디렉토리 ) @ /app /api /styles /component /~ /schemas /types /utils /api /db schemas @/schemas introductionPosts.model.ts

메인 화면의 배너 부분을 구현하고 싶었는데, 목업 데이터를 만들기 전에 우선 회원과 글의 스키마 구조를 정의해야 할 뿐더러, 목업 데이터를 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 원 글..

nth-child 범위 선택 선택자 nth-child 범위 ( n번 부터 n번까지 ) (tistory.com) 선택자 nth-child 범위 ( n번 부터 n번까지 ) 기본 nth-child 선택자:nth-child(n) // n번 선택자:nth-last-child(n) //뒤에서 n번째 선택자:nth-child(2n) // 2의배수번째 2,4,6,8.......번째들 모두 선택자:nth-child(odd) //홀수번째 모두 선택 선택자:nth-child(even) //짝 gahyun-web-diary.tistory.com 맨 마지막 요소 몇개의 margin 등을 빼고 싶어서 nth-child를 범위로도 사용할 수 있을지 찾아보았다. 윗 글에서 정리되어 있으며 정리해보면 다음과 같다. nth-child(..

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..