XML Sitemap이란? 사이트맵은 사이트의 페이지, 동영상 및 기타 파일들에 대한 정보를 제공하는 파일입니다. 누구한테 제공하냐면 사이트를 읽고 검색 엔진에 보여주는 크롤러에게 제공합니다. 사이트맵을 만드는 이유는 크롤러가 내 사이트를 크롤링하기 전에 어떤 페이지와 어떤 컨텐츠가 있는지 요약 정보를 제공해 줌으로써 좀 더 효율적인 크롤링을 가능하게 해 주기 때문입니다. 구글 공식 문서에 따르면, 사이트맵이 필요한 경우는 다음과 같습니다. 사이트의 규모가 큰 경우 만든지 얼마 안 됐거나 외부 링크가 적은 경우 페이지 간 연결이 잘 안 되어있거나 개별적으로 존재하는 페이지가 많은 경우 비디오나 이미지처럼 미디어 컨텐츠가 많거나 구글 뉴스에 나온 경우 사이트맵이 잘 작성되어 있는 경우 크롤링이나 검색 순위..
react-color-palette color picker 툴인데 가장 유명한 react-color보다 가볍고 사용법도 간단하다. 특히 typescript 기반으로 만들어져서 typescript 프로젝트에서 오류가 날 확률이 적다. 개인적으로는 디자인도 내 스타일. https://github.com/Wondermarin/react-color-palette GitHub - Wondermarin/react-color-palette: 🎨 Lightweight Color Picker component for React. 🎨 Lightweight Color Picker component for React. Contribute to Wondermarin/react-color-palette development by..
내용 비동기로 파일을 여러개 업로드 할 때, 마지막 파일의 업로드가 완료되면 콜백을 실행해야하는 경우가 있다. 이럴 때 파일 업로드 상황을 파악하기 위해 쓸데없이 코드가 길어질 수 있는데, axios에서는 이런 상황에서 쓸 수 있게 axios.all()이라는 메서드를 제공하고 있다. 이번 포스트에는 간단한 예시와 함께 axios.all() 사용법과 파일 업로드 progress를 구현하는 법을 정리했다. 설치 패키지 및 버전 "dependencies": { "next": "13.4.1", "axios": "^1.4.0", "typescript": "5.0.4", } 레이아웃 구성 먼저 간단하게 기능을 구현하기 위해 을 넣고, multiple 속성을 지정해 줬다. input에는 multiple 속성을 넣어줘..
Tailwind CSS에서 스타일을 적용하는 방식 Tailwind CSS를 사용할 때, state나 props를 통해 클래스를 지정하면 스타일이 적용이 안되는 경우가 있다. Tailwind CSS는 스타일을 적용하기 위해 먼저 코드를 전부 스캔한 후, 코드에서 사용된 스타일을 모아둔 CSS 파일을 만드는데, state같은 가변 데이터는 CSS 파일에 포함되지 않기 때문에 스타일이 적용이 안되는 것이라고 한다. ❌ 가변 데이터 사용 시 export default function page() { // 1~6 랜덤 숫자 const randomNum = Math.floor(Math.random() * 7); // 배경색 프리셋 1~6 중에 랜덤으로 나옴 return } ✅ 정적으로 사용 시 export defa..
이전 포스트 웹에서 S3 파일 제어(CRUD) - 1.API Gateway 사용하기 내용 AWS에서 제공하는 npm인 aws-sdk for javascript v3로 Next.js 프로젝트에서 S3 파일 제어(CRUD) AWS와 Next.js의 기본 사용법을 알고 있다는 가정하에 작성 Vercel, GitHub Pages 등 호스팅 플랫폼 설정은 다루지 않음 API 통신은 Axios를 사용, 다른 라이브러리는 다루지 않음 테스트를 위해 제작한 프로젝트 라이브 데모: https://nextjs-aws-test.vercel.app Upload files to S3 with Next.js Amazon Web Service(AWS) test website with next.js nextjs-aws-test.ve..
목표 AWS 서비스인 API Gateway를 사용해 S3 파일 제어(CRUD) 레퍼런스 How do I upload an image or PDF file to Amazon S3 through API Gateway? AWS Management Console 설정하기 AWS 회원가입을 완료하면, 가장 먼저 AWS 관리 콘솔창이 나옵니다. 관리 콘솔창은 위젯을 통해 내가 자주 찾는 서비스나, 최신 AWS 뉴스 등 나에게 필요한 정보를 한눈에 볼 수 있는 창인데, 여러 가지 위젯을 추가/제거해서 내 용도에 맞게 커스터마이징 할 수 있습니다. 저 같은 경우 Favorites라는 위젯에 S3, API Gateway, IAM을 추가해 바로가기 경로를 만들었고, 그 외에 따로 건드린 부분은 없었습니다. S3 버킷 추가..
