개발쬬

변수형 분리 정적 할당next 에서 메타데이터를 활용하려고 할때, 기본 메타데이터를 기준으로 몇개의 특정 페이지만 페이지의 메타데이터를 바꿔주려고 한다. generateMetadata 사용해서 페이지별로 설정해주기 위해선 상위 layout 에서 메타 정보를 받아야되는데, 프로젝트 규모가 커질수록 요구사항이 까다로워지기 때문에 최대한 결합도를 낮추는 방향으로 작업하기 위해 메타정보를 페이지별로 분리해서 사용하는 방법을 사용했다. 우선 프로젝트에 메타데이터를 사용하기 위한 폴더 하나를 만들어주었습니다.* 폴더를 만들어 별도 분리해줬지만 따로 분리할 필요는 없다. (아래 코드는 예시!) 페이지별 할당 사전 준비 경로 : shared > helper > metatdata > constants.ts// c..

한참 SEO 를 이것저것 찾아보던 중 발견한 궁금증이 생겼다.대체 이렇게 카테고리별로 깔끔하게 노출되는 웹사이트는 어떻게 만드는거지? 특히나 구글에서는 대형 사이트들은 이런 UI를 가지고 있는 경우가 100 이면 100이였다. 그래서 여기저기 찾아보다가 발견한 구글 검색 센터! 구글 검색 센터 최적화된 SEO 환경을 만들기 위해 참고하는 사이트 입니다. 구글 검색엔진 최적화 기초부터, 크롤링, 색인, 순위 등 다양한 정보를 참고할 수 있다고 한다~ 한마디로 검색엔진 최적화 + 눈에 띄는 UI를 제공해 사이트를 개선시킨다는것에 목적을 가지고 있다고 한다 검색엔진 최적화 개선 문서 | Google 검색 센터 | Documentation | Google for Developers검색엔진..

trading view 는 가상거래소에서 자주 사용하는 차트이다. 이번에 좋은 기회가 있어서 해당 차트를 사용하게 되었는데, 생각보다 소스가 이리저리 흩어져있어서 한번에 모아서 보고싶어서 정리해보려고 한다. 트레이딩뷰 활용하기 예제 아래 github 에는 각각의 환경에서 설정한 트레이딩뷰의 세팅환경 예시를 볼 수 있다. nextjs, angular, android 등등 각각의 개발 환경에서 세팅된 페이지를 볼 수 있고, 주기적인 업데이트가 이루어지기 때문에 틈틈히 확인하면서 개발하면 매우 도움이 된다. github 에 올려진 그대로 참고해서 만들어도 된다. GitHub - tradingview/charting-library-examples: Examples of Charting Library integr..

Next에서는 image를 사용할 수 있는 코드가 따로 있다! Error: Failed to parse src "@public/img/common/logo/logo.svg" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://) Next/image 가이드대로 이미지를 첨부했는데 이런 에러가 났다. 전역으로 설정해놓은 @public 경로를 사용했는데 전역변수는 @로 핸들링 되는거 아니엿나? 했는데 / 로 시작하는 path를 입력해 달라고 뜨길래 @public 을 삭제하니 정상 작동했다. 👉 잘못된 경로설정 src 👉 정상작동된 경로설정 src..

최근 여러가지 개발을 진행하다보면서 여러가지 개발환경에 접근하게 됐다. 예를들어 Next 기반의 React 라던가 Vue 환경이라던가. 사실 회사에서 프로젝트를 하면서 얻게 된 상식 중 하나가 Vue 에서는 환경변수명 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. ✔️ Vue 환경변수 설정 접두사에 꼭 VUE_APP 을 붙여줘야한다는 사실이였다. VUE_APP_API_URL= "url" 그리고 이번 사이드 프로젝트에 들어가면서 Next 기반으로 작업해 나가는데 계속해서 환경변수가 읽히지 않는 현상이 일어났다. 보통 env 키를 확인하려면 콘솔에 process.env.{API키명} 을 붙여주면 서버가 콘솔에 찍힌다. 근데 계속해서 undefined 가 표시됐다. ✔️ .env 를 확인할때 pro..