메로그

관계형 데이터베이스와 비관계형 데이터베이스 차이에 대해 간단하게 알고 가겠습니다. 관계형 데이터베이스열과 행이 있는 테이블(표 형식으로)에 데이터를 저장데이터 입출력시 SQL 을 사용해야하고 미리 스키마 정의, 데이터 중복을 피하기 위한 정규화안정적인 데이터 저장, 운영이 필요한 곳에서 사용하면 좋습니다.대표적으로 Oracle, MySQL 이 여기에 속합니다.비관계형 데이터베이스키 값 형식으로 저장함. {key: value}SQL, 스키마 정의, 정규화 필요없음. NoSQL 이라고도 부름분산처리에 유리하기 하기 때문에 대용량 데이터 처리에 좋음.대표적으로 몽고 DB 가 여기에 속합니다.몽고 디비 연동몽고 디비를 연동하기 전에 우선 Nextjs 와 몽고 디비 셋팅을 해줍시다.https://www.mongo..

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 페이지 가..

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 폴더 구조를 가지고 있..

페이스북에서 만든 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...

sharp 를 사용해서 이미지를 리사이즈 할시 모바일에서 찍은 사진들이 90도 돌아가는 경우가 발생합니다.이미지가 리사이즈되면서 이미지의 메타데이터를 기억하지 못해 발생하는 문제인데, 해결방법이 2가지가 있습니다. 첫번째 방법으로, .withMetadata() 함수를 사용해서 원본 이미지에 메타 데이터를 넣어주는 방법입니다.const image = sharp(data) .withMetadata() .resize(width, height) .toBuffer()두번째 방법으로, .rotate() 를 resize 전에 넣는 방법이 있습니다.rotate 의 각도를 제공하지 않으면 EXIF 데이터(메타 데이터)에서 결정됩니다.const image = sharp(buff);const webpBuffer = a..

Nuxt.js에서 서버 미들웨어를 사용하여 CORS(Cross-Origin Resource Sharing)를 허용하는 방법은 아래와 같습니다.CORS를 허용하려면 서버 미들웨어를 만들어야 합니다. 1. Nuxt.js 프로젝트의 루트 디렉토리에 middleware 디렉토리를 만듭니다 (만약 없다면).2. middleware 디렉토리 안에 새로운 파일을 생성하고 원하는 이름을 부여합니다. 예를 들어, cors.js로 파일을 저장합니다.3. cors.js 파일에 다음과 같이 서버 미들웨어 코드를 작성합니다.// middleware/cors.jsexport default function (req, res, next) { res.setHeader('Access-Control-Allow-Origin', '*');..