본문 바로가기

JavaScript

Typescript 앱 생성하기(초기 셋팅 방법) JS 프로젝트를 TS 프로젝트로 마이그레이션 하기 or TS 템플릿으로 생성하기-> 마이그레이션 시 보통 파일을 하나씩 변경한다. 1. 직접 react-create-app 마이그레이션 하기1) 리액트 앱 생성 및 타입 선언 패키지 install npx create-react-app . npm i @types/node @types/react @types/react-dom @types/jest` 2) tsconfig.json 설정하기{ "compilerOptions": { "target": "ES5", "module": "CommonJS", "strict": true, "allowJs": true, "esModuleInterop": true, // 외부 패키지 등에서나 e.. 더보기
[TypeScript] tsconfig.json 설정 옵션 알아보기 1. tsconfig.jsontsconfig.json에서는 이렇게 컴파일러 옵션을 설정할 수 있는데, 컴파일 시 얼마나 엄격하게 타입 오류를 검사할지, 자바스크립트 버전을 어떻게 할지 프로젝트에 따라, 개발자의 입맛에 맞춰 설정할 수 있다. tsc --init으로 초기화 하면 tsconfig.json 파일이 기본옵션으로 생성된다.(직접 생성해도 된다)1) "include"  : 컴파일할 파일이 많을 경우, 일일히 컴파일 하지 않고 특정 위치 기준으로 아래의 모든 파일을 컴파일하도록 설정할 수 있다.{ "include": ["src"]}2) "compilerOptions" : "target", "module", "outDir", "strict", "mpduleDetection" 등 { "compile.. 더보기
[TypeScript] 타입 스크립트의 필요성과 동작 원리 1. 타입 스크립트가 등장하게 된 계기자바스크립트는 본래 간단한 프로그래밍을 위해 만들어졌기 때문에 웹 브라우저에서만 작동하고, 유연하게 설계되었다는 장점이 있었다. 하지만 자바스크립트의 인기가 더욱 커지고 Node.js가 등장하게 되면서 웹 브라우저 외의 환경에서도 사용이 가능해졌고 활용도가 높아지면서 더 복잡한 프로그래밍에도 널리 사용이 가능해졌다.이렇게 되면서 자바스크립트의 장점인 '유연함'과 자유로움은 곧 버그 발생 가능성이 높다는 문제점을 야기하게 되었고 더욱 안정적인 프로그래밍을 위해서 타입 스크립트가 등장하게 되었다. 이로써 타입 스크립트는 자바스크립트의 문법은 유지한 채, 타입과 같은 안정적인 문법이 추가된 자바스크립트의 확장된 언어라고 할 수 있다. 2. 자바스크립트의 한계점1) 자바스크.. 더보기
[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.. 더보기
[Next.js] CSR의 Link 태그의 원리, Link와 useRouter의 차이점 [Next.js] CSR의 Link 태그의 원리, Link와 useRouter의 차이점 1. CSR의 Link 태그의 원리 ❓내가 궁금했던 부분 1 : Link태그를 사용하여 페이지 이동을 설정해놓을 경우 브라우저에서 소스 코드로 확인해 보면 태그로 변환되어 있다. 이는 Link태그 내부에 태그가 내장되어 있기 때문인데, 그렇다면 변환된 것은 태그이므로 사용자가 클릭 했을 때에 새로고침이 일어나야 하는 것이 아닌가? 어떻게 부드러운 사용성을 유지할 수 있는가? 문득 궁금했다. Next.js의 Link 컴포넌트를 사용하면 서버에서 받은 HTML에서는 태그로 변환되어 있으므로 기본적으로는 클릭 시 새로고침이 발생합니다.그러나 사용자의 브라우저가 JavaScript를 실행할 수 있고, JavaScript가 활.. 더보기
[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.. 더보기
[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는 기본값. - 공식문서에서 여러가지 옵션들 확인 .. 더보기
[Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 [Next.js] Next.js Routing과 Hydronation, 'use Client' 알아보기 Next.js에 대해 공부해보면서 알게된 내용들을 간단히 정리해 보고자 한다. 먼저 React는 라이브러리이고, Next.js는 프레임워크이다. 학습하면서 차이가 있었던 것은 리액트는 라이브러리 이기 때문에 폴더 구조, 이름, 라우팅, CSS, 하나부터 열까지 모든 선택과 결정을 내가 해야 했었다. 어떻게 보면 하나 하나 전부 고민해야 하고 여러가지를 공부하고 선택해야 하는 번거로움이 있었지만 내가 원하는 대로, 필요할 때 원하는 패키지와 개발 방식으로 자유롭게 개발할 수 있다는 장점이 있었다. Next.js같은 경우는 프레임워크기 때문에 그들이 정해놓은 룰과 규칙이 있었고, 라우팅 방식이나 폴더구조,.. 더보기
728x90
반응형

티스토리툴바