Programming

Nest.js 란? node.js 로 데이터베이스를 구성할 수 있게 해주는 프레임워크 ( typescript와 express를 이용한다. - 프레임워크의 프레임워크 ) Nest.js의 필요성 큰 규모의 프로젝트의 데이터베이스를 만들기 쉽다. Nest.js 설치 npm i -g @nestjs/cli Nest.js 프로젝트 만들기 nest new 프로젝트 Nest.js 서버 실행하기 npm run start:dev yarn start:dev Nest.js 기본 동작 main.ts가 가장 먼저 실행되고, module, controller, service로 앱을 만든다. controller url에서 정보를 받아, 라우팅해주는 역할 // app.controller.ts import { Controller, Ge..

insomnia 란? Rest API를 쉽게 테스트 할 수 있게 해주는 프로그램 insomnia 설치 Download Download Insomnia the best API Client for REST, GraphQL, GRPC and OpenAPI design tool for developers insomnia.rest insomnia 사용법

자주사용하는 것은 글로벌 설치 yarn global add typescript 프로젝트 전용 설치 yarn add @prisma/client graphql apollo-server ts-node nodemon @graphql-tools/schema @graphql-tools/merge @graphql-tools/load-files nodemon + ts-node 설정하기 //package.json에 nodemon 명령어 만들기 { "scripts": { "dev": "nodemon --exec ts-node src/server --ext ts,js" } } typescript 설정 파일 수정하기 // tsconfig.json ( ts => js 로 컴파일 될때 사용 ) { "include": ["src/..

database 리스트 확인하기 \l database 생성, 삭제 // 데이터베이스 생성 CREATE DATABASE "데이터베이스"; // 데이터베이스 삭제 DROP DATABASE "데이터베이스"; 사용자 생성, 삭제 // 사용자 만들기 CREATE USER 사용자; // 사용자 삭제하기 DROP USER 사용자; 사용자 리스트 확인하기 /dg, /du 사용자 권한 database 생성하기 CREATE DATABASE 데이터베이스 OWNER 사용자; 사용자 권한 database 접속하기 \c 데이터베이스 사용자 table 생성하기 CREATE TABLE 테이블이름 ( 필드이름1 필드타입, 필드이름2 필드타입, ... ); table 리스트 확인하기 \d table 내용 확인하기 \d "테이블" Pos..

npx create-next-app@latest --ts // yarn create next-app --typescript

Frame : HTTP/2의 통신상 가장작은 정보, ( Header, Data ) Message : 요청과 응답, 다수의 Frame으로 이루어져 있다 ( Request, Respond ) Stream : 클라이언트와, 서버간의 주고 받는 여러개의 Message

Next.js로 CSS 스타일링 하기 1. styled-jsx 사용하기 ( Next.js 기본 내장 ) // style jsx는 컴포넌트 단위로 적용됩니다. ( 다른 컴포넌트로 넘어가면 적용안됨 ) // 기본 사용 방식 // 자식 컴포넌트까지 모두 적용하기 {` ...스타일 추가 `} 2. styled-components 사용하기 [React] styled-components란? / 사용법 (js/ts) styled-components란? React.js 안에서 스타일(CSS)을 바꿀 수 있게 해주는 Node.js 패키지 React란? [Node.js] React.js 란? / React 사용법 ( create-react-app ) React란? 웹/앱의 사용자 조작환경(UI)를 만들.. defineal..

Next.js에서 외부(Third-party) javascript 불러오기 1. 메타데이터에 추가하기 이 접근 방식은 효과가 있지만 이러한 방식으로 스크립트를 포함하면 동일한 페이지에서 가져온 다른 JavaScript 코드를 불러오는 시기가 불명확합니다. 특정 스크립트가 렌더링을 차단중이고 페이지 콘텐츠 로드를 지연시킬 수 있는 경우, 성능이 저하될 수 있습니다. 2. 태그 사용하기 // Script 태그 사용하기 위해 불러오기 import Script from "next/script" export default function FirstPost() { return ( console.log(`script loaded correctly, window.FB has been populated`) } /> Fi..

메타데이터 수정하기 기존의 html에서는 First Post ); }