오늘은 SWR을 v2.2.4로 업그레이드하면서 생긴 오류에 대해서 해결 방법을 써보려해요! 일단 vercel팀의 swr issues에 등록된 내용 중 나도 마주한 문제가 하나 있어서 적어볼게요. 버그내용 아래는 문의내용을 조회하는 SWR hooks의 일부를 가져왔어요. export default function useUserInquery() { const { data: session } = useSession(); const { data: inqueries, error } = useSWR( [ '/user/inquery', { headers: { authorization: session?.user?.accessToken, }, }, ], ([url, opt]: [string, any]) => fetche..

오늘은 javascript에서 typescript로 바꿔야할 이유를 코드를 통해 알아보도록 할게요! Javascript vs Typescript 차이점 1. JavaScript는 동적 타입 언어 / TypeScript는 정적 타입 언어로 대표적인 차이점! 2. 이 두 언어 사이의 주요 차이점은 타입 시스템에 있어요. TypeScript는 개발자가 변수, 함수 매개변수, 반환값 등에 명시적인 타입 정보를 제공할 수 있도록 해줘요. 이는 코드의 가독성을 높이고 오류를 사전에 감지하여 개발자의 실수를 줄일 수 있게 됩니다! 이제 JavaScript 코드를 TypeScript로 변환해야하는 몇 가지 예시를 살펴보겠습니다. Typescript로 변환 예시 1. 변수 및 매개변수의 타입 명시 JavaScript에서..

robots.txt가 무엇인지, 어떻게 적용하는지, 그리고 역할에 대해서 알아보는 시간을 갖도록 할게요! 검색엔진에 노출되기 위해 사이트를 네이버서치어드바이저, 또는 구글서치콘솔을 사용한 분이라면 당연히 알고 있을거라고 생각해요. robots.txt도 SEO(검색엔진최적화)를 위해서 꼭 있어야하는 존재인만큼 다뤄보도록 하겠습니다! robots.txt는 무엇일까? 구글 서치 콘솔에서는 아래와 같이 설명하고 있습니다. robots.txt는 크롤링해서는 안 되는 사이트 내 URL 또는 디렉터리를 검색엔진에 알려주는 텍스트 파일의 이름입니다. 특정 크롤러(또는 모든 크롤러)에 대해 개별 URL 또는 전체 디렉터리를 차단하는 규칙이 포함되어 있습니다 위의 글을 읽어보면 알겠지만, 이 파일은 봇을 차단 또는 사이트..

오늘은 메타태그 설정을 통해 SEO에 영향을 미치는 요소를 알아보도록 할게요! 모든 내용은 mdn web docs의 내용을 기반으로 설명할테니 하단 레퍼런스도 참고해주세요. 예시는 저의 프로젝트 사이트인 문제은행 Exambomb에서 확인할 수 있어요! https://exam-bomb-service.vercel.app/ 기사 필/실기 문제은행(기출문제, 시험) | Exam Bomb. 기사 필/실기 시험대비 문제은행을 제공해요. 기출문제, 시험 등 다양한 문제가 준비됐어요. exam-bomb-service.vercel.app Meta Tittle 먼저 타이틀에 대한 설명이에요. 페이지 제목은 SEO에 큰 영향을 줍니다. 권장사항으로는 15자 이내로 유저의 주목을 이끌수 있는 "훅"이 바로 이 부분입니다. 유..

오늘은 NextJs를 사용하여 정적 사이트(SSG말고 build파일)를 배포해야하는 상황에서 build 파일을 만드는 과정을 알아볼게요! 정적사이트로 배포를 해야할 이유가 없다면 next start 해서 사용하는게 낫지만, 굳이 필요한 상황이라면 쓸 수 있는 방법을 확인해볼게요! 일단 최신 버전인 Next v13.3.0 이상부터는 next export를 다르게 사용해야해요. 이 버전인 사람은 아래 링크로 확인해주세요! (저는 Next v13 기준이며, app directory를 사용하지 않는 상황입니다.) https://nextjs.org/docs/pages/building-your-application/deploying/static-exports Deploying: Static Exports | Nex..

지난 시간엔 serverside를 통해서 정적인 xml로 sitemap을 생성하는 과정을 나타냈어요! 오늘은 동적인 xml을 생성하여 페이지에 들어올 때, 항상 최신 sitemap이 생성되도록 만드는 과정을 해보도록 할게요! sitemap에 대해 지난 시간보다 좀 더 알아본 후에 진행하려합니다. sitemap xml 태그 방법 https://exam-bomb-service.vercel.app/ https://zippoom.com/sitemap/sub/index.xml 2023-03-17T09:00:23.523Z 위의 첫번째 케이스는 urlset 태그로 url 자체를 알려주는 방식과, 두번째 케이스처럼 태그를 통해 해당 xml에 또다른 sitemap이 존재함을 알려주는 방식이 있어요! 두가지 방법 중에 저..

오늘은 Nextjs에서 Sitemap.xml을 자동화할 수 있는 방법에 대해 알아보려해요! 일단 Sitemap의 역할이 무엇인지 알아야지 왜 Sitemap을 만들어야하는지 알겠죠? Sitemap이란? https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko 사이트맵이란 무엇인가요? | Google 검색 센터 | 문서 | Google for Developers 사이트맵은 Google에서 사이트를 더 지능적으로 크롤링할 수 있도록 정보를 제공합니다. 사이트맵의 작동 방식을 알아보고 필요한지 결정하세요. developers.google.com 구글 검색 센터에서 제공하는 사이트맵에 대한 정보에요. 그 중에 몇가지만 정..

오늘은 직접 SSR과 CSR, SSG을 Nextjs에서 결과를 통해 차이점을 알아보도록 할까요?! 요즘 프론트엔드 면접의 대표 질문이기 때문에 어떤식으로 활용해야 좋은지를 제대로 아는게 중요하다고 생각해요ㅎㅎ 오늘은 CSR과 SSG만 알아보도록 할께요! (추후에 SSR / ISR 예정) 1. CSR(Client Side Rendering) 먼저 Client Side Rendering(CSR)은 말그대로 클라이언트에서 렌더링 진행한다는 뜻으로 초기 로드시에 HTML를 통해 다운받은 JS파일 빈 HTML에 DOM을 그려나간다는 특징이 있습니다. 대표적으로 Single Page Application(SPA)의 React를 통해 사용할 수 있어요. 그렇기때문에 초기에 그리는 시간으로 인해 초기페이지 진입에 살짝..

오늘은 저의 개발속도를 향상 시켜줄 tailwindcss를 프로젝트에 install하는 방법을 알아볼까 해요! tailwindCSS를 한 번도 안써본 사람은 있어도 한 번만 쓴 사람은 아마 없을거라고 생각해욯ㅎㅎ 그렇다면 왜 제가 이걸 계속 쓰는지 한 번 볼까요?! 일단 제가 생각하는 장점을 말해보자면 1. 조금만 익숙해진다면 css 개발 속도가 훨씬 증가! (코드량 감소) 2. 자주 필요한 css가 미리 만들어져 있어서 손쉽게 구현 가능! 하지만 그럼에도 단점이 있긴하죠,, 제가 생각하는 단점을 말해보면 1. 익숙하지 않다면 지저분하게 생각들수도 있다! 태그의 className에 연달아 쓰기때문에 지저분하대요.... (하지만 저는 css 파일에 tailwind를 적용하여 사용하기에 지저분하다고는 생각안..

오늘은 React 상속에 대한 내용을 좀 다뤄보도록 하겠습니다! 크게 3가지 정도의 Component 상속 개념이 있어요! Children, rest, 그리고 props 상속이 있다고 생각하면 될 것 같아요! (rest랑 props는 비슷하다고 생각하면 되겠습니다!) 먼저로는 제일 많이 사용하는 props의 개념으로 보도록 하겠습니다. Nextjs Props 상속 위의 사진은 제가 만들고 있는 소개 페이지의 한 부분이에요! (아직 미완성,,,, 진행중입니다 ㅠㅠ) 이 곳에 우리가 컴포넌트로 만들어야할 부분이 딱 보이는 바로 9개나 반복되는 박스가 되겠죠?! 그래서 그 박스를 아래와 같이 만들었어요! 자 여기서 첫번째 상속 Props의 개념이 나옵니다!! 저는 4가지의 props를 설정했어요 classNa..