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..
내용 비동기로 파일을 여러개 업로드 할 때, 마지막 파일의 업로드가 완료되면 콜백을 실행해야하는 경우가 있다. 이럴 때 파일 업로드 상황을 파악하기 위해 쓸데없이 코드가 길어질 수 있는데, axios에서는 이런 상황에서 쓸 수 있게 axios.all()이라는 메서드를 제공하고 있다. 이번 포스트에는 간단한 예시와 함께 axios.all() 사용법과 파일 업로드 progress를 구현하는 법을 정리했다. 설치 패키지 및 버전 "dependencies": { "next": "13.4.1", "axios": "^1.4.0", "typescript": "5.0.4", } 레이아웃 구성 먼저 간단하게 기능을 구현하기 위해 을 넣고, multiple 속성을 지정해 줬다. input에는 multiple 속성을 넣어줘..
내용 state가 배열인 경우에 어떻게 값을 추가하고, 제거하는지 알아보기 배열에 값 추가 전개 연산자(Spread Operator)를 사용해 기존에 지정되어 있던 state를 배열에 담고, 해당 배열 뒤에 값을 추가한 새 배열을 state에 지정한다. 배열 안의 값이 string인 경우 // state 기본값: ["A", "B"] const [arr, setArr] = useState(["A", "B"]); // state에 "C" 추가 setArr(prevList => [...prevList, "C"]); // 결과: ["A", "B", "C"] console.log(arr); 배열 안의 값이 object인 경우 // state 기본값: [{word: "A"}, {word: "B"}] const [a..
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..
서론 리액트에서 배열에 map 함수를 적용할 때, 'Each child in a list should have a unique "key" prop'이라는 콘솔 오류가 뜨는 경우가 있습니다. 오류가 나도 렌더링에 문제는 없지만, 되도록이면 오류는 잡아주는 게 좋기 때문에, 제가 사용한 방법을 공유하려고 합니다. 원인 제가 파악한 선에서 오류가 나는 경우는 3가지가 있었습니다. key 값이 없는 경우 key 값이 잘못 입력된 경우 key 값이 잘못된 위치에 입력된 경우 1. key 값이 없는 경우 key 값이 없는 경우, map 함수 내부에서 return 되는 JSX 코드의 최상위 태그에 key를 prop 형식으로 입력해 주면 됩니다. 코드 예시 최상위 태그 전체 코드 예시 const page = () =>..
