분류 전체보기141 [TypeScript] tsconfig.json 설정 옵션 알아보기 1. tsconfig.jsontsconfig.json에서는 이렇게 컴파일러 옵션을 설정할 수 있는데, 컴파일 시 얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 버전을 어떻게 할지 프로젝트에 따라, 개발자의 입맛에 맞춰 설정할 수 있다. tsc --init으로 초기화 하면 tsconfig.json 파일이 기본옵션으로 생성된다.(직접 생성해도 된다)1) "include" : 컴파일할 파일이 많을 경우, 일일히 컴파일 하지 않고 특정 위치 기준으로 아래의 모든 파일을 컴파일하도록 설정할 수 있다.{ "include": ["src"]}2) "compilerOptions" : "target", "module", "outDir", "strict", "mpduleDetection" 등 { "compile.. 2024. 10. 22. [TypeScript] 타입 스크립트의 필요성과 동작 원리 1. 타입 스크립트가 등장하게 된 계기자바스크립트는 본래 간단한 프로그래밍을 위해 만들어졌기 때문에 웹 브라우저에서만 작동하고, 유연하게 설계되었다는 장점이 있었다. 하지만 자바스크립트의 인기가 더욱 커지고 Node.js가 등장하게 되면서 웹 브라우저 외의 환경에서도 사용이 가능해졌고 활용도가 높아지면서 더 복잡한 프로그래밍에도 널리 사용이 가능해졌다.이렇게 되면서 자바스크립트의 장점인 '유연함'과 자유로움은 곧 버그 발생 가능성이 높다는 문제점을 야기하게 되었고 더욱 안정적인 프로그래밍을 위해서 타입 스크립트가 등장하게 되었다. 이로써 타입 스크립트는 자바스크립트의 문법은 유지한 채, 타입과 같은 안정적인 문법이 추가된 자바스크립트의 확장된 언어라고 할 수 있다. 2. 자바스크립트의 한계점1) 자바스크.. 2024. 10. 22. [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. 이전 1 2 3 4 ··· 24 다음 728x90 반응형
