분류 전체보기

Joi란 사용자가 입력한 데이터가 유효한지 검사하는 유효성 검사 라이브러리 라고 할 수 있다. 설치 및 사용하기 npm install joi joi를 사용하기 위해서 install해준다. const Joi = require('joi'); 스키마 정의하기 // validate할 schema 정의 const schema = Joi.object().keys({ username: Joi.string().min(3).max(30).required(), birthyear: Joi.number().integer().min(1900).max(2018), }); 유효성 검사를 하려면 db에 정의되어 있는 컬럼들을 가져와서 몇개의 컬럼만 유효성 검사를 할 수 있다. username: 글자이고, 길이가 최소 3글자에서 최대..

sql문을 작성할 때 json형식으로 해서 connection pool을 했었다. 그런데 우연히 knex로 받아오는 것을 보고 괜찮은 방법이여서 더 알고자 정리하고자 한다. 설치하기 npm install knex --save 위의 명령어를 쳐서 knex를 설치해준다. DB정보 생성하기 const knex = require('knex')({ client: 'mysql', connection: { host : HOST_ADDR, user : DB_USER, password : DB_PASSWORD, database : DB_NAME } }) client : 이 매개변수는 필수이며, 라이브러리와 함께 사용할 클라이언트 어댑터를 결정한다. CRUD 작성하기 1) select knex.select('컬럼 이름')..

: Incremental Static regeneration의 request는 page가 re-generate되도록 한다. revalidate 속성은 얼마동안에 한번 regeneration이 일어날지를 설정한다. 공식문서를 보다가 revalidate를 보고 궁금하게 생겨서 정리하게 되었다. revalidate는 말 그대로 재검증한다는 말이다. 개념을 보니 초를 줘서 이 초시간이 지나면 페이지가 업데이트가 된다는 말이었다. 그런데 초마다 업데이트가 된다면 과부하되지 않을까라고 생각했다. 그런데 참고사이트에서 해답을 얻게 되었다. 1) 자동 업데이트되는가? → 화면 요청이 없는 경우에는 rebuild가 되지 않는다. 2) 사용자가 validate초 이상을 페이지에 머물러야 업데이트되는가? → 기준이 buil..

: SWR은 vercel에서 제작한, 데이터를 가져오기 위한 모듈이다. Next.js에서 유독 많이 보이는 개념이라, 정리하고자 한다. 아마도 swr이 서버 사이드 랜더링도 되기 때문인 것 같다. 사용 import useSWR from 'swr' function Profile() { const { data, error, isLoading } = useSWR('/api/user', fetcher) if (error) return failed to load if (isLoading) return loading... return hello {data.name}! } key : 일반적으로 API URL을 말한다. fetcher : key값을 이용해 데이터를 가져오는 함수이다. fetch 혹은 axios를 이용해..

1. CRA와 CNA 비교하기 react와 Next.js가 생성한 프로젝트를 보면 다름이 보인다. react에서는 pages폴더가 없는데, next에는 존재한다. 여기에 파일을 만들면 자동으로 라우팅되어 url에 해당 파일의 이름을 치면 해당 사이트로 이동된다. 1) 페이지 비교하기(CRA) 개발자 도구를 열어 Network 탭을 눌러, 첫 페이지의 response탭을 보면 첫 페이지 요청으로 받아온 HTML문서의 내용을 확인해볼 수 있다. 보면 우리가 App.js 파일에 적어준 내용이 하나도 들어있지 않다. id가 root인 텅 비어있는 DIV 태그만 반환하고 있음과 밑에 번들링된 static/js 경로의 'bundle.js' 파일을 전달하고 있다. CSR에서 빈 HTML 문서를 먼저 반환하고, 그 후..

1. Dynamic Routes 동적 라우팅은 일반적으로 url을 pages/post/123으로 접근했다면 next.js에서는 pages/post/[params].js파일을 만들어서 pid를 담는다. import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { params } = router.query return Post: {params} } export default Post next/router모듈에서 useRouter를 가져와서 사용할 수 있다. useRouter에서 router로 변수를 선언해주고, router.query를 출력한다. 출력해보면 아래와 같이 나온다. 파일을 만들 때 해당..

1. Patterns layout : layout component를 생성하고 생성한 component를 상위 컴포넌트로 적용할 컴포넌트들을 감싸주면 된다. _app.js 파일이 지나치게 커지는 것을 막기 위하여 쓴다. Layout 컴포넌트를 만들어주고, App 컴포넌트에서 이를 사용한다. Head 컴포넌트 리액트에서 react-helmet으로 구현했던 것들을 Next.js에서는 간단히 Head 컴포넌트로 구현 가능하다. 2. Fetching Data public 폴더에 있는 파일들은 쉽게 import할 수 있다. Image next.js에서는 이미지 최적화를 위해 img 태그 대신 Image 태그를 사용한다. import Image from "next/image"; ... ... 3. Redirect ..

1. Pages react 컴포넌트를 export하는 파일들을 pages폴더 안에 넣어주면, 파일 이름으로 url을 만들어 자동으로 라우팅 해준다. 안의 function이름은 파일이름과 달라도 된다. 특징 파일 이름이 url이 된다. export default function ~ 형태로 컴포넌트 작성해야함. url에 pages폴더에 없는 파일이 보여줘도 자동으로 404페이지를 보여준다. 2. Routing 보통 페이지간 이동은 a 태그를 사용하지만, next.js에서는 사용하지 않는다. a 태그를 사용하면 처음 페이지 진입시 번들파일을 받고, a태그에 의해 라우팅 되면서 다시 번들파일을 받기 때문이다. 그래서 next에서 페이지간 이동에는 모두 Link 태그를 사용한다. 3. CSS Modules imp..