본문 바로가기

JavaScript37

[Next.js] App 디렉토리에서 route handlers로 API 구현하기 - Vercel Postgres + Prisma 풀스택 구현 [Next.js] App 디렉토리에서 route handlers로 API 구현하기 - Vercel Postgres + Prisma 풀스택 구현 1. Vercel Postgres 데이터베이스 설정 1. postgres와 vercel 설치 npm install @vercel/postgres npm install -g vercel@latest 2. vercel에 프로젝트 배포 후 strorage에서 DB 생성(가까운 나라로) -> 프로젝트 연결(Connect Project) 확인(프로젝트명 맞는지 꼭 확인) 3. vscode 터미널에서 vercel 연결 vercel link 5. DB의 .env.local에 있는 키들을 .env파일에 옮겨오는 작업 / 옮겨지지 않을 경우 수동으로 복사해서 붙여넣으면 된다. v.. 2024. 3. 20.
[Next.js] CSR의 Link 태그의 원리, Link와 useRouter의 차이점 [Next.js] CSR의 Link 태그의 원리, Link와 useRouter의 차이점 1. CSR의 Link 태그의 원리 ❓내가 궁금했던 부분 1 : Link태그를 사용하여 페이지 이동을 설정해놓을 경우 브라우저에서 소스 코드로 확인해 보면 태그로 변환되어 있다. 이는 Link태그 내부에 태그가 내장되어 있기 때문인데, 그렇다면 변환된 것은 태그이므로 사용자가 클릭 했을 때에 새로고침이 일어나야 하는 것이 아닌가? 어떻게 부드러운 사용성을 유지할 수 있는가? 문득 궁금했다. Next.js의 Link 컴포넌트를 사용하면 서버에서 받은 HTML에서는 태그로 변환되어 있으므로 기본적으로는 클릭 시 새로고침이 발생합니다.그러나 사용자의 브라우저가 JavaScript를 실행할 수 있고, JavaScript가 활.. 2024. 3. 18.
[Next.js] Data fetching하기, Loading 및 Error Handling Next.js 13이후 Data를 fetching하는 방법 1. 기존 React에서 컴포넌트에서 Data를 fetching하는 방법(클라이언트 컴포넌트 형식) "use client"; import { useEffect, useState } from "react"; // export const metadata = { // title: "Home", // }; // 클라이언트 컴포넌트에서는 meta data 사용불가 export default function Page() { const [movies, setMovies] = useState([]); const [isLoading, setisLoading] = useState(true); const getMovies = async () => { const re.. 2024. 3. 17.
[Next.js] Route groups, Meta Data, dynamic routes 간단 정리 1. Route groups 폴더이름에 ()괄호를 넣어주면 url은 변하지 않고 페이지를 묶어줄 수 있다. routes를 그룹화하여 logical groups로 만들 수 있다. 이렇게 관련된 페이지들을 그룹화 하면 좀 더 직관적으로 파악이 가능하다. 2. Meta Data - 메타 데이터는 병합된다(다른 page에서는 title, layout에는 description 사용할 경우 병합되어 나옴) - page나 layout 에서만 메타데이터를 내보낼 수 있다. - 컴포넌트에서는 메타데이터를 내보낼 수 없다. - 메타 데이터는 서버 컴포넌트에서만 있을 수 있다. - title 등에 template 옵션으로 공통으로 띄울 문자열 지정이 가능하다. default는 기본값. - 공식문서에서 여러가지 옵션들 확인 .. 2024. 3. 16.
[Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 [Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 Next.js에 대해 공부해보면서 알게된 내용들을 간단히 정리해 보고자 한다. 먼저 React는 라이브러리이고, Next.js는 프레임워크이다. 학습하면서 차이가 있었던 것은 리액트는 라이브러리 이기 때문에 폴더 구조, 이름, 라우팅, CSS, 하나부터 열까지 모든 선택과 결정을 내가 해야 했었다. 어떻게 보면 하나 하나 전부 고민해야 하고 여러가지를 공부하고 선택해야 하는 번거로움이 있었지만 내가 원하는 대로, 필요할 때 원하는 패키지와 개발 방식으로 자유롭게 개발할 수 있다는 장점이 있었다. Next.js같은 경우는 프레임워크기 때문에 그들이 정해놓은 룰과 규칙이 있었고, 라우팅 방식이나 폴더구조,.. 2024. 3. 15.
[TypeScript] 타입스크립트란 무엇인가? 타입스크립트 동작 원리에 대하여 TypeScript 란 무엇인가? 1. Javascript의 한계 모든 언어에는 타입 시스템이 존재하며, 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉘어 진다. 각각의 특징은 다음과 같다. 1) 동적 타입 시스템 = JavaScript, Python - 타입을 미리 검사하지 않는다. - 개발자의 의도치 않은 타입 실수로 인해 치명적인 오류가 발생할 가능성이 높다. -> 타입을 미리 검사하지 않기 때문에 타입 오류 시에도 실행이 바로 중단되지 않는다. 때문에 개발자의 타입 실수 시 런타임 중 하루뒤, 한달 뒤 등 예기치 못할 때 갑작스럽게 에러가 발생하는 등 잘 돌아가던 프로그래밍이 갑자기 실행이 안된다던지 치명적인 오류가 발생할 수 있고 디버깅이 힘들다. 2) 정적 타입 시스템 = C, Java -.. 2024. 3. 8.