MongoDB란? 1. 비관계형 데이터베이스 2. 데이터를 object 자료형처럼 저장 3. collection, document 방식으로 데이터 저장 => collection = 폴더 => document = 파일 1. mongoDB 사이트 접속 https://www.mongodb.com/ MongoDB: The Developer Data Platform Get your ideas to market faster with a developer data platform built on the leading modern database. MongoDB makes working with data easy. www.mongodb.com 2. 회원가입 3. Databace Access 메뉴 클릭 4. Add No..
server component export default function Home() { return ( test ); } 평소처럼 사용하는 컴포넌트들은 server component이다. 장점: 페이지 로드가 빠르다. 단점: 리액트문법처럼 html안에 { }를 사용해 자바스크립트 문법을 사용하지 못한다. => useState, useEffect, onClick 불가능 client component 'use client' export default function Home() { return ( test ); } 차이가 없어 보이지만 상단에 'use client'를 붙이면 client component가 된다. 장점: 리액트 문법과 동일하게 html에 자바스크립트를 넣을 수 있다. 단점: 페이지 로드가 ..
일반 이미지 넣는 법 1. public폴더에 이미지 추가 2. 태그 사용 최적화 이미지 넣는 법 1. public폴더에 이미지 추가 2. import 추가 import Image from 'next/image' 3. 컴포넌트 사용 (장점) 1. lazy loading => 로딩속도 최적화 2. 사이즈 최적화 3. layout shift 방지 => 레이아웃 어긋남 방지 (단점) 1. width, height 옵션이 필수임 => fill="true" 넣고, 부모 가 width, height를 대신 넣어도 됨. => 절대경로가 아닌 import 방식으로 이미지를 가져오면 안 써도 됨. import test from "./test.png" => 하지만, 이미지가 많은 경우 하나하나 import 하기 번거롭다. ..
폴더 방식의 라우팅 지원 1. 우선 app폴더의 하위폴더를 생성 ex) app/list => 작명한 폴더이름 = url 이름이 됨. 2. 만든 폴더 안에 page.js 파일을 생성 ex) app/list/page.js => html 작성 공간 Link 태그 => 페이지 이동 태그 1. 사용할 태그를 우선 import import Link from "next/link"; 2. html 안에 작성 home list home 기준으로 url은 "/"이며, 폴더명 = url명에 따라 작성 => 페이지 이동 태그 완성 중복 레이아웃 구성법 다른 페이지에 같은 html을 구성하고 싶은 경우 ex) header(상단바) 또는 footer(하단바) layout.js는 page.js를 덮는구조를 가진다. => 위에서 작..
1. node.js 설치 => 18v 이상 권유 2. node 버전 확인 명령어 node -v 3. node.js 및 npm 삭제 1) 제어판 > 프로그램 추가/제거 > node.js 삭제 2) 아래 경로에 해당하는 디렉터리 삭제 C:\Program Files\Nodejs C:\Program Files (x86)\Nodejs C:\Users\User\AppData\Roaming\npm C:\Users\User\AppData\Roaming\npm-cache => 파일이 없다면 건너뛰기 4. node 버전 및 npm 버전 확인 C:\Users\User>node -v > 'node.js'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. C:\Users\User>npm -v..
CSR(client-side rendering) => 브라우저에서 html을 실시간으로 만드는 방법 React, Vue.js는 이에 해당함. 장점: 1. 페이지 전환이 부드러움 2. 이쁜 사이트를 만들 수 있음. 단점: 1. 구글 검색 노출이 낮음 2. 페이지 로딩속도가 낮음 => 투자대비 수입지표가 낮아짐 SSR(server-side rendering) => 서버에서 html을 미리 만들어서 보내주는 방법 Next.js, nuxt, sveltekit, remix 등이 해당함. 장점: 1. 조금 가벼운 편 2. 구글 검색 노출이 잘 됨. 3. 일부 선택적인 CSR이 가능 4. 최적화된 HTML 랜더링 단점: 1. 폴더 기반 라우팅으로 인해 예약파일이 많아져 복잡함. 2. 리액트의 미완성 기능을 도입해서 ..
조건문으로 타입 만들기 type Age = T extends string ? string : unknown; let age : Age //age는 string 타입 let age2 : Age //age는 unknown 타입 타입 조건식은 주로 extends 키워드랑 삼항연산자를 사용 extends : 왼쪽이 오른쪽의 성질을 가지고 있는지 체크 => 삼항연산자를 통해 string이면 age는 string 타입이 되고, string이 아니라면 unknown타입으로 설정해라 라는 의미. infer 키워드 type Person = T extends infer R ? R : unknown; type newType = Person // string 타입 infer : 입력한 타입을 변수로 만들어주는 키워드 1. 조..
keyof 연산자 interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" 타입 let a :PersonKeys = 'age'; //가능 let b :PersonKeys = 'ageeee'; //불가능 keyof 연산자를 object 타입에 사용하면 모든 key값을 union타입으로 합친다. => "age" | "name" 타입 interface Person { [key :number]: number; } type PersonKeys = keyof Person; //number 타입 let a :PersonKeys = 10; //가능 let b :PersonKeys = 20; //가능 in..
