XML Sitemap이란? 사이트맵은 사이트의 페이지, 동영상 및 기타 파일들에 대한 정보를 제공하는 파일입니다. 누구한테 제공하냐면 사이트를 읽고 검색 엔진에 보여주는 크롤러에게 제공합니다. 사이트맵을 만드는 이유는 크롤러가 내 사이트를 크롤링하기 전에 어떤 페이지와 어떤 컨텐츠가 있는지 요약 정보를 제공해 줌으로써 좀 더 효율적인 크롤링을 가능하게 해 주기 때문입니다. 구글 공식 문서에 따르면, 사이트맵이 필요한 경우는 다음과 같습니다. 사이트의 규모가 큰 경우 만든지 얼마 안 됐거나 외부 링크가 적은 경우 페이지 간 연결이 잘 안 되어있거나 개별적으로 존재하는 페이지가 많은 경우 비디오나 이미지처럼 미디어 컨텐츠가 많거나 구글 뉴스에 나온 경우 사이트맵이 잘 작성되어 있는 경우 크롤링이나 검색 순위..
nextjs-progressbar NProgress 기반 Next.js 라이브러리인데 사용법이 간단해서 쓰기 좋은 듯. 하지만 커스터마이징 옵션을 많이 제공하지 않는 건 아쉽다. https://github.com/apal21/nextjs-progressbar GitHub - apal21/nextjs-progressbar: A simple Next.js progressbar component using NProgress. A simple Next.js progressbar component using NProgress. - GitHub - apal21/nextjs-progressbar: A simple Next.js progressbar component using NProgress. github.com ..
클라이언트에서 process.env가 undefined를 반환하는 이유? Next.js는 환경 변수를 Node.js 환경에서만 읽을 수 있게 제한하고 있다. 브라우저에서는 접근할 수 없기 때문에 undefined가 뜨는 것. .env TEST_URL="https://test.com" index.js export default function Index() { console.log("process.env.TEST_URL" + process.env.TEST_URL); } console 클라이언트에서 필요한 경우가 있을까? 거의 없긴 하지만 100%라고 확신할 수는 없다. 예를 들어 카톡으로 웹페이지 공유 기능을 구현할 때 카카오 개발자 페이지에서 자바스크립트 key를 발급받고 발급받은 키를 프론트에서 함수를..
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..
커밋 아이디 확인 커밋을 제어하기 전에 먼저 커밋 아이디를 확인해야 한다. 커밋 아이디는 커밋을 생성할 때마다 자동으로 생성되는 고유 아이디를 의미한다. 터미널을 열고 프로젝트 루트 폴더로 이동 후 git log를 입력하면 최신 커밋과 같이 이전 커밋들도 시간 순서대로 보여준다. git log git revert, reset revert, reset은 커밋을 되돌리기 위해 사용하는 명령어다. 둘 다 커밋을 되돌린다는 점에서는 동일하지만, reset은 커밋 history 자체를 뒤로 돌리고, revert는 커밋 history는 그대로 유지한 체 로컬 파일만 이전 커밋 상태로 되돌린다는 차이점이 있다. git reset # 커밋 history를 이전으로 되돌린다. git revert # 커밋 history를..
imgur이 뭔데? 보통 meme이나 웃긴 이미지 공유하는 커뮤니티 사이튼데, 무료에다 이미지 불러오는 속도도 빨라서 이미지 스토리지로도 많이 사용한다. 제대로 스토리지를 쓰고 싶은 사람은 S3를 쓰겠지만,,, 가볍게 테스트 용으로 쓰고 싶을 때는 또 이만한 사이트가 없다. 403 에러 뜨는 이유? 1. CORS 설정 확인 프로젝트 자체에서 크로스 도메인 리퀘스트를 차단하면 imgur 뿐만 아니라 대부분의 외부 요청이 차단되기 때문에, 다른 걸 확인하기 전에 먼저 이것부터 확인해야 한다. 관리자 도구로 내부에 아래와 같은 태그가 있는지 확인해 보자. 태그를 발견했다면, 아래처럼 수정해 주거나 태그 자체를 없애주면 된다. 2. 127.0.0.1을 localhost로 변경 만약에 위에 방식이 안되면, 테스트..
단일 조건 정렬 sort()는 배열의 정렬을 조건에 맞게 재정렬한 후 반환해 주는 메서드다. 원하는 조건대로 정렬하려면 sort() 안에 배열을 재정렬 해주는 조건을 넣어줘야 되는데, 단일 조건의 경우는 다음과 같이 사용할 수 있다. 배열 정렬 예시 const data = [1, 7, 3, 5, 8]; const asc = data.sort((a, b) => a - b); // 오름차순 [1, 3, 5, 7, 8] const desc = data.sort((a, b) => b - a); // 내림차순 [8, 7, 5, 3, 1] 객체 배열 정렬 예시 const data = [ {name: "계란", price: 1500}, {name: "사과", price: 2000}, {name: "양파", price..
내용 비동기로 파일을 여러개 업로드 할 때, 마지막 파일의 업로드가 완료되면 콜백을 실행해야하는 경우가 있다. 이럴 때 파일 업로드 상황을 파악하기 위해 쓸데없이 코드가 길어질 수 있는데, axios에서는 이런 상황에서 쓸 수 있게 axios.all()이라는 메서드를 제공하고 있다. 이번 포스트에는 간단한 예시와 함께 axios.all() 사용법과 파일 업로드 progress를 구현하는 법을 정리했다. 설치 패키지 및 버전 "dependencies": { "next": "13.4.1", "axios": "^1.4.0", "typescript": "5.0.4", } 레이아웃 구성 먼저 간단하게 기능을 구현하기 위해 을 넣고, multiple 속성을 지정해 줬다. input에는 multiple 속성을 넣어줘..
