메로그

Nextjs 13 부터는 폴더기반의 페이지 라우팅 방법을 제공합니다. 기존에는 page 폴더 밑에 파일을 만들어서 라우팅을 제공했다면, 이제는 app 폴더 밑에 각 폴더별로 정의함으로써 layout, page 의 정의를 명확하게 할 수 있게 되었다. app 바로 밑에 있는 layout.tsx 는 루트 레이아웃으로 필수이며, 하위 list 폴더에 layout 은 루트 레이아웃 아래에 포함된 layout 으로 만들어지게 된다. 또한, list 아래 page.tsx 를 만들면 {pageUrl}/list 로 접근할 수 있는 라우팅이 만들어지게 된다. import Link from "next/link"; const List = () => { return ( list 페이지 list 밑에 있는 item1 페이지 가..

.code 명령어를 이용해서 vscode 를 오픈하기 위해 permission denied, unlink '/usr/local/bin/code' 과 같은 에러가 발생하였다. 이러한 경우 code 를 삭제하고 다시 설치해주면 된다. cd /user/local/bin sudo rm -rf code Password: [입력] 다시 vscode 로 들어가서 Command Palette 에서 code 를 검색해서 설치해주면 된다.

Nextjs 란, React 를 이용하여 웹 어플리케이션을 만드는 프레임워크로써 React 에서 하기 어려웠던 SEO, SSR, SSG 등 을 제공합니다. Nextjs 는 버전 13과 이전 버전으로 나뉠 정도로 13부터는 구조적인 변화도 몇가지가 있었습니다. - app 폴더 - 폴더 기반 페이징 처리 - 서버 컴포넌트 - 이미지 최적화 아래는 공식 홈페이지 제공하는 install 입니다. https://nextjs.org/docs/getting-started/installationnpx create-next-app@latest my-app-test-1234설치하게 되면 my-app-test-1234 라는 폴더가 만들어질 것 입니다.그렇게 해서 만들어지면 app 폴더 아래에 Next 폴더 구조를 가지고 있..

SEO 지표 상승을 위해 크게 최적화, 키워드, 백링크 3가지가 있습니다. 웹페이지 최적화 메타 태그 시멘틱 태그 Lighthouse 로 최적화 작업 넥스트티라는 사이트에서 SEO 주요항목 체크 (https://www.next-t.co.kr/blog/) site: 도메인 검색으로 색인 여부 확인하여 색인이 확인되지 않으면 수동으로 색인 요청을 해줍니다. SEO 가 좋아하는 태그 (title, meta, h1 ~ h6, p, img, a, strong, em 태그가 있습니다.) title 과 meta 태그를 설정해주어야 합니다. h1 태그는 페이지당 하나만 있는 것이 좋습니다. img 태그에 alt 태그를 제공해야합니다. strong 태그를 이용하면 키워드를 강조할 수 있습니다. 키워드 최적화 구글 트렌드..

프로젝트의 package.json 의 관리를 도와주는 VScode Extensions 입니다. 요놈은 정말 기똥찬 익스텐션으로 이거를 사용하면 package.json 의 관리를 엄청 편하게 할 수 있습니다. 설치 후, package.json 으로 가면 오른쪽 상단에 V 가 있는것을 볼 수 있다. 이제 V 를 누르게 되면 현 package.json 에 각 버전 정보가 나타납니다. 현재 버전, satisfies 버전, lastest 버전이 나오게 됩니다. 각 버전을 클릭하여 버전을 변경하고 관리할 수 있습니다. satisfies 와 lastest 버전이 동일하다면 올려도 큰 이상이 없다. 다르다면, 이제 거기에 맞는 버전업을 해주면 된다. Version Lens 가 도와주기 때문에 기존에 하던 것보다 훨씬 ..

페이스북에서 만든 legacy api 입니다. 거대한 프로젝트를 타입스크립트를 사용하지 않고 자바스크립트를 이용해서 개발하다보면 props 에 타입이 명시되지 않아 일일히 주석을 체크한다거나, 그마저도 없으면 디버깅을 찍어서 분석하게 된다. 이러한 점을 없애기 위해 자바스크립트에서도 props 에 타입을 지정해주는 방법이다. 설치 yarn add prop-types npm i prop-types 예제 import PropTypes from 'prop-types'; export default UserTableRow({row, selected, onDeleteRow}) { ... } UserTableRow.propTypes = { row: PropTypes.object, selected: PropTypes...