타코딩

설치 및 초기화 터미널 입력 npx create-next-app@latest page.tsx main안에 다지우기 global.css tailwind초기화문 빼고 다 지우기

@Post('sample') async sample() { const user1 = this.userRepository.create({ email: 'test@jiwon.com', }); const user2 = await this.userRepository.save({ email: 'test@jiwon.com', }); //preload는 불러오고 대체함 하지만 저장하지는 않음 const user3 = await this.userRepository.preload({ id: 101, email: 'test@jiwon.co.kr', }); //삭제하기 await this.userRepository.delete(101); // id 1인 count컬럼 1을 올림 await this.userRepository..

yarn add typeorm @nestjs/typeorm pg docker-compose.yaml services: postgres: image: postgres:15 restart: always volumes: - ./postgres-data:/var/lib/postgresql/data ports: - '5432:5432' environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres POSTGRES_DB: typeormstudy postgres-data 폴더생성 app.module.ts import { Module } from '@nestjs/common'; import { AppController } from './app.controller';..

// node,yarn,다운 node -v yarn -v npm -v 잘깔려있는지 확인 겸 버전도 체크해보기 npm i -g @nestjs/cli nest -v nest new 프로젝트파일명 nest g resource path명 (crud 어쩌구저쩌구나오면 n) import { Body, Controller, Delete, Get, NotFoundException, Param, Post, Put, } from '@nestjs/common'; import { PostsService } from './posts.service'; interface PostModel { id: number; writer: string; title: string; content: string; image?: string; li..

문자열에 따른 이미지를 구현해준다 아래 test이외에도 유저의 아이디나 이메일을 동적으로 입력하면 해당 문자열에 맞는 이미지를 랜덤하게 그려준다. 이미지는 문자열 즉 유저의 아이디나 이메일이 바뀌지 않으면 바뀌지 않는다. npm install gravatar --save @types/gravatar default 종류(d 프로퍼티) mp (mystery person): 신비한 인물의 실루엣을 표시합니다. identicon: 이메일 해시를 기반으로 생성된 기하학적 패턴을 표시합니다. monsterid: 이메일 해시를 기반으로 생성된 몬스터 이미지를 표시합니다. wavatar: 이메일 해시를 기반으로 생성된 얼굴 이미지를 표시합니다. retro: 이메일 해시를 기반으로 생성된 픽셀 아트 스타일의 얼굴 이미지..

npm i swr 둘 다 매우 유사함에도 swr을 쓰는 이유는? 1.npm의 패키지 용량이 tanstackquery의 1/3 임 2.nextjs를 개발한 회사(vercel 등 개발함)에서 개발해서 추후 nextjs의 상용화가 될 가능성이 높기 때문에 전망이 있음 const { data: getuserInfoData } = useSWR('http://localhost:3095/api/users', fetcher); //swr 역시 디스트럭처링 형식으로 사용하는 useSWR이라는 훅을 사용함 매개변수 첫번째 인자는 url //두번째 매개변수는 fetcher라는 함수가 들어감 // fetcher는 따로 파일을 분리해서 import 해서 사용했음 import axios from 'axios'; export co..

페이지 단위 컴포넌트는 한 번에 여러 개를 미리 렌더링을 해놓을 필요 없기 때문에 라우터 페이지에서 초기렌더링속도 최적화를 위해서 리액트에서 코드스플리팅을 하는 게 좋음. 페이지 단위 컴포넌트 외에도 에디터같은 것도 코드 스플리팅하면 좋음 npm install @loadable/component npm install --save @types/loadable__component 로더블 컴포넌트라는 npm 라이브러리가 있음 타입스크립트 안쓰면 위에 하나만 쓴다면 아래에 타입도 다운을 받아야 함 // 공식문서 예제 import loadable from '@loadable/component' const OtherComponent = loadable(() => import('./OtherComponent')) f..

.prettierrc 라는 파일 생성 { "printWidth": 120, "tabWidth": 2, "singleQuote": true, "trailingComma": "all", "semi": true } 위 코드 붙여넣기, 팀프로젝트시 상황에 맞게 코딩컨벤션 설정해서 변경하기

import axios from "axios"; import { useState } from "react"; export default function useMutation( url: string ): [ (data: any) => void, { loading: boolean; data: undefined | any; error: undefined | any } ] { const [loading, setLoading] = useState(false); const [data, setData] = useState(); const [error, setError] = useState(false); function mutation(data: any) { setLoading(true); axios .post(url..

npm create vite@latest // 위 입력하면 프레임워크나 타입스크립트 여부 선택하는것도 다 물어봄 https://ko.vitejs.dev/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev 하나 아쉬운 건 CRA처럼 모듈 안 깔아줌 아래 명령어로 깔아서 시작해야 함 npm install