Next.Js에서 Title 태그를 처리하기 이번에 흑우집합소를 네이버 서치 어드바이저에 등록했다. 그리고 데이터를 등록하다가 사이트 간단 체크에 돌렸는데 사이트 제목이 미설정이라 떴다. 그래서 확인해보니 정말 설정이 안되어 있었다. 그래서 이것을 수정하려고 자료를 찾아서 적용했다. 방법은 간단한데 각 페이지마다 Title 태그를 적용하는 법과 전역으로 설정하는 법이 있다. 1. 각 페이지마다 title 처리 각 페이지마다 Title을 변경해야 할 때가 있다. 나의 경우 메인과 각 페이지가 다르게 설정해야 했다. 메인은 아래처럼 진행해야 했고… 번호 생성쪽은 그에 맞춰서 다른 것으로 해줘야 했다. 처리하는 방법은 간단하다. pages 디렉토리 안에 라우팅 되는 곳에 아래의 코드로 설정이 가능하다. 이렇게 하면 된다. 전역 설정하기 여기는 더 쉽다. _app.js 파일에 위 처럼 작성해서 넣어주면 된다. 정리 생각보다 어렵지 않다. 단지 페이지가 많으면 약간 귀찮을 뿐이다. 자…

NextJs에서 포트를 변경하기 Next.Js의 기본 포트는 3000으로 되어 있다. 개발용으로 쓸 때는 상관 없지만, 실무 레벨에서 쓸 때는 포트를 변경해야 한다. 이유야 뭐 알려진 포트를 사용하는 것은 좋지 않기 때문이다. 또는 3000번이 이미 다른 서비스를 사용하는데 쓰고 있을 수 있기 때문이다. 바꾸는 방법은 매우 간단하고, 두 가지 방법이 있다. 1. package.json에서 바꿔주기 package.json 파일을 열어준다. 거기서 scripts 항목을 간다. 위 처럼 -p 인자를 통해 변경할 수 있다. 2. npm, yarn 등 커맨드에서 변경하기 여기서 주의해야 할 부분은 터미널에서 사용할 때 npm을 사용하는 부분인데 - - 표시를 빼고 사용할 경우 에러가 발생한다. 왜냐하면 -p만 사용할 때는 port를 의미하는 것이 아닌 prefix로 받아들이기 때문이다. 그래서 npm을 터미널에서 사용할 때는 저 하이픈 2개를 붙여주는 것을 잊지 말자. 1. package.…

구글 애드센스를 달아보려… 흑우집합소에 애드센스를 달려고 했다. 근데 ads.txt 파일만 넣었는데 뭔가 안되는거 같아서 찾아보니 대부분 Script 추가 방식을 사용했다.. 그래서 나도 이 방식도 같이 추가했고, 이를 포스팅으로 남긴다. How To? 먼저 Google adsense에 가입이 다 되어 있고 준비가 된 것을 가정한다. 메뉴에서 사이트를 선택한다. 그리고 새 사이트 추가를 해준다. 추가할 사이트 주소를 작성해준다. 그럼 두 가지 방식으로 검증을 받을 수 있다. 여기서 원하는 방식을 선택하거나, 나처럼 하나가 안되서 다른 방식으로 인증을 해도 된다. 1. Script 인증 방식 스크립트 인증 방식은 별도의 script 태그를 추가해서 인증을 받는 방식이다. 여기서 나온 스크립트는 바닐라js용이고, 비슷하지만 Next.Js에서는 다음과 같이 해준다. 아래의 코드를 Head 태그 내에 넣어야 하는데 보통 _app.tsx에 넣을 것이다. 근데 나는 Head태그 위치가…

오랜만에 NextJs를 처음 셋업하다가… 최근 코드스테이츠&위메이드 블록체인 교육 과정을 듣는데… 일단 블록체인이 내가 생각한 거랑 너무 달랐고, 복잡했다. 결과를 바로 보기 힘들고 작은 시간 투자로는 제대로 해볼 수 없는 분야였다. (당연한 것…) 그러던 중 원티드에서 프리온보딩을 한다고 해서 바로 수강 신청 하였다. 근데 프론트도 있고 백엔드도 있어서 일단 둘 다 신청했다… (-_-;;) 사실 지금도 Next.Js랑 Nest.Js 둘다 쓰고 있어서… 둘다 깊게 잘 하는건 아니지만 서비스를 구현하고 실제 운영중이기도 하다. MyMeLink 이게 1차 결과물이다. 보완점이 엄청 많은데 지금은 일단 손놓고 있다;; 신규 서비스 개발이 하나 있었다가 블록체인 강의도 껴서… 각설하고 이유는 프리온보딩 프론트에서 사전 과제가 있었는데 그걸 위해서 플젝을 셋업하고… 상태관리에서 Zustand를 사용하고 적용을 하다가 문제가 발생했다. 그전에… Next.Js는 12.3.1 이고, Zustan…

NextJs에서 Select 태그를 쓸 때… 요새 MyMeLink 개발을 잠시 멈추고, 신규 서비스 개발을 진행하고 있다. 고도화 해야 하지만 이것 먼저 개발을 하는게 순서상 맞는 거 같아서, 잠시 홀드 했다. 역시 혼자서 다 하는건 빡세다… 본론으로 돌아와서… 신규 서비스를 Next.Js로 만들던 중 Select 태그를 써서 구현을 하다가 개발자 콘솔에 이상하고 무시무시한게 떴다. 그 전에…사용한 select 코드는 아래와 같다. 난 저런 경고 에러만 봐도 해결을 해야 할거 같은 강박관념(?) 같은게 있어서 스스로 무덤을 판다; 먼저 원인은 저기 에러에서 나와있지만… Next.JS에서 select 태그 사용 시 option 값에 selected 사용보다는 defaultValue 라는 것의 사용을 권장한다. 그래서 코드를 다음과 같이 변경하면 경고가 더 이상 발생하지 않는다. 좀 더 찾아본 내용? 이거를 살짝 시간내서 찾아본 결과 React에서는 selected 속성을 사용하는 …

오늘도 평화로운 날이 있을 수 없는… 기존 프로젝트를 진행하면서 신규를 또 진행하는 어이없는 일정을 진행하며… 이번 문제는 DasiyUI에서 Countdown 컴포넌트를 적용하면서 발생한 문제로.. 바로 아래의 문제의 코드를 보자. 위 코드에서 span 태그 안에 style에 —value라는 css 키 요소가 문제였다. 에러는 다음과 같이 발생했다. 에디터 내에서는 에러가 발생하지만 개발용으로 구동 시 잘 돌아간다. 하지만 빌드를 하여 프로덕션으로 가면 이야기가 달라진다. 저 에러를 해결하지 않는 이상 빌드는 진행되지 않는다. 그렇다면 어떻게 해결했는가? 뭐 index.d.ts 라는 파일을 만들고 새로 declare? 재정의 해보고 정의 파일을 src 디렉토리 밖에 빼기도 하고 했지만 당연 안되었다. -_-;; 문제는 어떤거 때문에 발생했다는 것을 알고 있고 이걸 어떻게 해결해야 하는지도 알고 있지만 그 해결 방법을 구현하는 방법을 몰랐다. 마치 해외 여행 나가서 밥 주세요를 그 …

Next.js에서 body에 height 값을… 이번에 Next.JS로 프로젝트를 진행하다가 footer를 하단에 고정시켜야 했다. 그런데 css를 적용했음에도 안되서 개발자 도구를 키고 화면 컴포넌트를 확인하던 도중 화면 사이즈가 전체 화면이 아닌것을 확인하였다. 그래서 형식을 적용하려 했다. 내가 쓰는 Tailwindcss에서 로 적용하려 했지만 body에 적용이 안되었다. 방법을 찾다 포기하려 했는데 방법을 찾게 되어 공유한다. 1. 공통 레이아웃 또는 _app.tsx 에서 global style 을 적용해준다. 아래의 코드를 적용한다. 나는 _app.tsx 에 선언된 공통 레이아웃 코드에서 적용 처리를 해줬다. 이렇게 하면 전체 화면이 적용된다. 1. 공통 레이아웃 또는 _app.tsx 에서 global style 을 적용해준다.