Web Developer - Nextjs/SEO

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자 이내로 유저의 주목을 이끌수 있는 "훅"이 바로 이 부분입니다. 유..

리팩터링하는 이유는 무엇인지 알아보려해요. 최근 개발하면서 리팩터링을 하셨나요? 했다면 어떤 이유로 하셨나요?! (오늘도 어김없이 컨셉을 잡습니다 ㅎ) 리팩터링을 통해 모든 문제점이 해결하는건 아니지만, 우리가 확실히 얻을 수 있는 이점은 꼭 얻었으면 좋겠어요. 우리가 왜 리팩터링을 해야하는지 한번 나눠볼게요! 소프트웨어 설계가 좋아지게 하자! 대표적으로 중복 코드가 여기저기 뿌려져있다면 모든 곳을 수정했는지 알 수 없어요. 그 말은 해당 코드를 수정할 때, 모든 곳에서 예상대로 작동할 것을 확신할 수 있을까요? 바람직한 설계의 핵심은 모든 코드가 언제나 고유한 일을 수행함을 보장할 수 있어야해요. // / 오픈채팅링크 // /user 오픈채팅링크 // /home 오픈채팅링크 // /test 오픈채팅링크..

오늘은 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..

오늘은! NextJs에서 페이지를 이동하는 방법에 대해서 알아보도록 합시다! NextJs는 pages directory의 .js .ts .jsx .tsx 파일을 기반으로 페이지가 라우팅되는 시스템을 가져요! 예를 들면, React를 한다면 아래처럼 react-router-dom을 사용하여 설정해야 하죠... 사실 저는 위와 같은 페이지 라우팅 방식이 너무 귀찮아서 ,,,,, Next만 사용해요...(못쓴다고 한적은 없슴다!!) Next에선 위의 방식들이 전혀 필요가 없게 되는데요! 처음에 말했듯이 pages directory의 파일을 기반으로 라우팅되기 때문입니다! 예를 들면 메인 페이지같은 경우는 pages/index.tsx 가 되고요! about 페이지는 pages/about/index.tsx 를 만..

오늘은 버튼하나도 좀 더 다양한 모션을 줄 수 있는 방법을 나눠보려해요! 이미지로 아래의 Navbar 버튼 4가지 케이스를 가져와봤는데요! (그냥 만든것이니,,, 디자인 측면의 색상 조절 같은 부분은... 알아서 해주세요ㅠㅠ!) CSS 기술만 참고!!! 기본상태 hover상태 - 마우스 올려놓은 상태 active상태 - 마우스를 클릭하고 있는 상태 selected상태 - 눌러서 선택된 상태 일단 오늘은 hover와 active를 다룬 후, 다음 시간엔 selected 상태의 위의 점 찍은 형태를 만드는 방법에 대해 알아보도록 하겠습니당. 마지막의 selected에 주는 액션은 좀 어려운 기술도 들어가기에 다음 글에 이어서 쓰도록 하지요! ㅎㅎ 영상으로 살짝 공유하자면 이런식으로 작동해요! 먼저 위의 Li..

오늘은 정말 간단하게 절대경로를 뚝딱 설정하는 법을 알아보도록 하자! 기억상으로...는 React에서 절대경로를 사용하려면 좀 복잡하게 설정해야했던 기억이 있다...?! 물론 내가 엄청 돌아갔을지도 모르겠지만 react-app-rewired와 customize-cra를 설치해서 config 파일도 만들고해서 귀찮았던 기억이 있지만, Next에선 정말 간편하게 할 수 있다! 후후 저번 시간에 만들어졌던 tsconfig.json 파일에서만 수정하면 되는데요! 아래처럼 기존에 있던 compilerOptions 에다가 추가로 baseUrl을 "."으로 현재경로로 설정한 후! paths를 통해 설정해주면 끝~!!! { "compilerOptions": { "baseUrl": ".", "paths": { "@lib..

최근 회사 업무 중 하나인 회사 소개 홈페이지의 리뉴얼!!! 소개 페이지이다보니 데이터를 다루며 표출하는 기술보다는 CSS와 자바스크립트를 이용한 인터랙션 디자인이 주된 업무가 됐어요..! (물론, 이것뿐 아니라 커머스 백오피스 개발도 있기에 극과 극의 업무를 ,,,,, 해요,,, 갈리는 소리가 들리시나요......) 적당한 CSS는 할 줄 알았지만 이정도로 CSS를 통해 다양한 애니메이션, 시각적 효과를 줄 수 있다는게 너무 신기해서 여러가지 CSS 기술을 포스팅하려 해요!!ㅎㅎㅎㅎ 첫번째로 다룰 내용은, 디자인 시안을 받은 후 우리가 해야할 작업에 가까워요! 모든 디자인엔 메인 컬러들이 있습니다. 메인컬러는 정말 많이 쓰이는 컬러니깐 자주 쓰이겠죠?? 여기서 잠깐, 만약에 메인컬러를 20군데에 사용했..

프로젝트를 시작하기위해선 어떤 환경에서 개발을 할지 생각을 해봐야한다! ​ 그 중에 NextJs로 개발환경을 구축하는 과정에 대해 알아보고자 한다. ​ 일단 한가지는 보안 전문회사라 개발pc의 보호를 위해 외부망도 쓰지 않고 인터넷도 차단된 공간에서의 오프라인 설치..... 과정이다 ​ 아 물론! 패키지설치를 위한 npm은 작동된다! ​ 일단, 확실한건 create-next-app이 불가능하기에 다음과 과정으로 next를 수동설치하게 되었다. ** 수동설치 필요없는 분은 npx create-next-app 한 방이면 끝!!!!!! ​ 1. Next / React 설치! ​ 먼저 아래와 같이 터미널에 입력하여 package.json과 react next typescript 기반으로 설치를 할 수 있다! 사..