3. Backend/NestJS

[코드팩토리 NestJS 강의] AppModule과 main.ts 파일

AppModule과 main.ts 파일 NestJS프레임워크는 어디서 모듈들을 찾아와서 어떤 모듈들을 NestJS안에서 관리를 해야되는지 알고있는거냐 NestJS프레임워크가 모듈들을 어떻게 알고 관리는 하는가 → app.module.ts ㄱ ㄱ app.module.ts에 가면 imports가 더 있음 imports는 다른 모듈을 불러올때 사용하게 됨 ~> PostsModule을 불러오게 된 것만약 CLI로 안하고 파일들을 직접 만들었다면, app.module.ts에서 imports에 넣었어야함 import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from '..

2024. 3. 13. 11:25

3. Backend/NestJS

[코드팩토리 NestJS 강의] Module, Provider and Inversion of Control (제어의 역전)

컨트롤러에서 어떻게 주입을 받고 있고, 어떻게 서비스에 대한 권한과 접근이 가능한지에 관한 궁금증이 생길 수 있다 이 부분은 NestJS의 가장 핵심이 되는 요소 중 하나라고 생각하면 됨 클래스 B를 클래스A에서 생성을 했었는데 Dependency Injection은 어디선가 클래스B를 생성해서, 클래스A에서 생성하지않고 constructor에다가 입력을 해줌(*이것을 주입이라고 부름) 외부에서 클래스A가 생성될때 무조건 클래스B에 해당되는 인스턴스를 넣어주도록 정의를 함 그렇지않으면 constructor를 실행할수없으니까 Dependency의 클래스A를 사용할때, 클래스B의 인스턴스가 필요하기에 클래스A는 클래스B에 의존하고 있음 즉, 의존하고 있는 값을 주입해준다 라는 것이 Dependency Inj..

2024. 3. 12. 19:19

3. Backend/NestJS

[코드팩토리 NestJS 강의] Service (서비스)

프로바이더로 NestJS에서 전형적으로 사용하는 Service에 대해 알아보도록 함 처음 NestJS폴더를 생성했을때, controller가 있거, module이 있고 service가 있다 이 3종류는 셋트같은 개념이다. controller에서 구현을 다 했는데, 왜 service가 필요한것인가? controller와 service의 차이는? controller같은 경우에 아키텍처라는 개념이 생김 아키텍처란? 좋은방법으로 코드를 쓰면, 실패하거나 협업이 어려운 일을 최소할 수 있다. controller파일이 담당하는것은 말 그대로 가장 맨 앞에서 요청을 받는 역할을 함 = 최전방에서 요청이 어디로 가야 될지를 함수로 라우팅 해주는 역할을 함 = 컨트롤러는 오직 그 역할만 하고 그 역할에 포커스가 되어있어..

2024. 3. 12. 17:35

3. Backend/NestJS

[코드팩토리 NestJS 강의] Query and Parameters (쿼리와 파라미터)

1. REST API 세트(GET, POST, PUT, DELETE) Method 주소 의미 사용 [GET] http://localhost:3000/posts 다수의 Post를 가져온다 Query 사용 [GET] http://localhost:3000/posts/11 11이라는 ID를 갖고있는 Post하나를 가져온다. Query 사용 [POST] http://localhost:3000/posts 새로운 Post를 생성한다 Body 사용 [PATCH] http://localhost:3000/posts/8 8이라는 ID를 갖고있는 Post를 부분 변경한다. Body 사용 [PUT] http://localhost:3000/posts/8 8이라는 ID를 갖고있는 Post를 변경하거나 생성한다 Body 사용 [D..

2024. 3. 12. 16:29

3. Backend/NestJS

[코드팩토리 NestJS 강의] Controller (컨트롤러)

1. Request Life Cycle (요청 라이프 사이클) REST API 쪽은 아래의 그래프로 설명할 수 있다. (* WebSoket쪽은 좀 다름) 요청로직처리부분 전에 있는 부분들은 쓰면 유용하지만, 안써도 상관없는 부분임 요청로직처리부분은 실질적으로 요청이 들어왔을때, 요청의 요구사항들을 만들어주는 부분이라 꼭 필요함 요청로직처리부분은 Controller, Service, Repository 세가지가 작용을 하면서 응답을 만들어낸다 요소를 공부할때, 순서대로 어디위치에 어디 앞/뒤에 작동하는지를 이해하면 좋음 현재 생성한 폴더에서 nest 설치하는 방법 : nest new . (* .은 현재위치라는 뜻) 새로운 nest프로젝트 폴더 설치 방법 : nest new 폴더이름 고친코드를 기반으로 새로..

2024. 3. 12. 14:23

3. Backend/NestJS

[코드팩토리 NestJS 강의] nodeJS와 Express를 사용해서 기본적인 서버 만들기

1. http패키지만 사용하여 server 만들기 // http패키지만 사용하여 server 만들기 // import http from 'http' 와 동일한 문법 const http = require("http"); const url = require("url"); // localhost는 127.0.0.1이라는 IP를 뜻함, 이것을 look back이라고 표현 = 서버를 실행한 컴퓨터 // 현재 컴퓨터에 3000번 포트에다가 서버를 실행하기 위해서 변수들을 선언한 것 const host = "localhost"; const port = 3000; // 서버 만드는 방법 // http.createServer를 하고, 서버를 만들고 나서 어떤 응답들을 보내줄지 설정하는것을 콜백함수에 넣어줌 // req ..

2024. 3. 8. 18:35

3. Backend/NestJS

[코드팩토리 NestJS 강의] Intro

백엔드 구분 API Server : 프론트엔드와 백엔드 또는 벡엔드끼리의 연결을 가능하게 해주는 영역 NestJS / Django / Spring / GraphQL / REST API / gRPC Database : 데이터 저장소 Postgresql / MySQL / Oracle / MongoDB / DynamoDB Infrastructure : 백엔드를 실행하는 하드웨어를 관리하는 영역 Cloud / K8s / DevOps Node JS 란? (간단한 소개) 오픈소스 : 누구나 볼 수 있도록 소스코드가 공개되어있다 크로스 플랫폼 : 여러 OS에서 사용/실행 할 수 있다. 여러 OS : MaxOS, Windows, Linux (*웬만한 서버는 Linux로 이루어져 있다) 자바스크립트 런타임 : 자바스크립..

2024. 3. 8. 17:10

6. Error

[Error] Next14 Styled-Component 에러

ISSUE Next.js에서 styled-components로 작성한 Theme Provider를 전달하였더니 다음과 같은 에러가 나타나며 실행이 되지 않았습니다. next-dev.js Warning: Prop `className` did not match. Server: '어쩌구저쩌구' Client: '어쩌구저쩌구' REASON NextJS는 초기 렌더링만 서버가 담당(SSR)하고 그 이후에는 서버를 거치지 않은 채 내부 라우팅을 이용해 페이지가 이동되면서 브라우저에서 렌더링(CSR)을 하게 됩니다. 첫 화면 로딩시에는 SSR로 렌더링하면서 오류가 발생하지 않지만 그 이후 부터는 CSR로 렌더링하면서, 서버에서의 클래스명과 클라이언트에서 클래스명이 달라져서 생기는 오류입니다. SOLUTION 해결 방법..

2024. 3. 7. 17:54

2. FrontEnd/CSS

[CSS] 반응형 중단점

반응형 레이아웃을 표시하기 위한 디바이스를 구분하는 여러가지 방법들이 사용되고 있습니다. 대표적으로 1. CSS 미디어쿼리를 사용하는 방법, 2. 자바스크립트를 사용 어떤 것을 사용하더라도 반응형 레이아웃을 디바이스에 따라 구분하는 기준은 가로 너비 가로 너비에 따라 디바이스를 인식하고, 레이아웃을 거기에 맞춰 변경하는 것이 CSS 반응형 레이아웃의 기본 개념이다. 가로 너비를 기준으로 하는 것은 반응형 레이아웃에서 공통이지만, 디바이스 종류별 너비 값 기준은 제각각입니다. 별도로 정해진 표준이라는 것이 없기 때문에 업계에서 많이 사용하는 값을 기준으로 하기도 하고, 레이아웃 특징에 맞춰 개별적인 값을 정하기도 합니다. 영어로는 나누는 기준 해상도 위치를 중단점(Break point) 이라고 합니다. 중..

2024. 3. 7. 17:14

6. Error

[Error] Next14 - invariant expected app router to be mounted, The above error occurred in the <HotReload> component

Uncaught Error: invariant expected app router to be mounted The above error occurred in the component: 두 에러가 떴다 해결 layout.js에 html은 있는데, body태그를 삭제해서 일어난 에러 html태그와 body태그가 필수로 있어야함

2024. 3. 7. 14:39

6. Error

[Error] Cannot find module 'react' or its corresponding type declarations

1.에러 발생 상황 React를 실행하려는데 다음과 같은 에러가 발생했다 react와 react-dom이 존재하지 않는다는 문제 2.해결방법 직접 react와 react-dom을 설치해 에러를 해결했다 npm i react react-dom

2024. 2. 7. 15:06

2. FrontEnd/Three.js

[R3F] Next에 R3F 적용하고, Text 넣는 방법

문제 Next@13.2.0버전에 @react-three/fiber^8.15.11, @react-three/drei^9.88.17, three^0.158.0을 적용하고, 다음 코드와 같이 텍스트를 Canvas에 감싸면 렌더링 되겠지 했더니 다음과 같은 에러가 난다. 이렇게 텍스트 넣으려고 했는데, 오류남 {children} Text is not allowed in the R3F tree! This could be stray whitespace or characters. 해결방법1 다음과 같은 Text컴포넌트를 만들어서, json으로 된 폰트를 지정하여 텍스트 렌더링하는 방법 // Import necessary dependencies import { useEffect, useMemo } from 'react..

2023. 11. 27. 16:41

6. Error

[Next Error] Uncaught Error: invariant expected app router to be mounted_navigation.js:144

위와 같은 에러가 뜬다..힝.. 해결 layout.ts에 and tag가 없어서 나타나는 에러였다. 왜냐면 전 코드는 아래와 같이 넣었기때문에 그런거같다 안에 있는 body태그를 뺐더니 정상작동함 'use client'; import React, { useEffect } from 'react'; import './globals.css'; import GlobalStyle from './styles/global-styles'; import Header from './_components/header'; import useHasMounted from '../useHasMounted'; import { ThemeProvider } from 'styled-components'; import { theme } f..

2023. 11. 22. 11:16

6. Error

[Error] yarn dev할때, ReferenceError: performance is not defined오류

문제 웹사이트 만들고 gitHub에 올린 후 내 개인 노트북으로 clone받고, yarn install 하고 yarn dev를 하려했더니 아래와 같은 오류가 난다..대략난감 imhyeonjeong@imhyeonjeongs-MacBook-Air  ~/Desktop/LIM-HYUN-JEONG   main ±  yarn dev yarn run v1.22.19 $ next dev /Users/imhyeonjeong/Desktop/LIM-HYUN-JEONG/node_modules/next/dist/bin/next:57 performance.mark("next-start"); ^ ReferenceError: performance is not defined at Object. (/Users/imhyeonjeo..

2023. 11. 21. 23:14

6. Error

[Error] @react-three/drei 관련 에러

./node_modules/@react-three/drei/core/Text3D.js Error: × Unexpected token `...`. Expected yield, an identifier, [ or { ╭─[C:\Users\82103\Desktop\hyunjeong\node_modules\@react-three\drei\core\Text3D.js:60:1] 60 │ */ 61 │ const { 62 │ 0: label, 63 │ 1: ...rest · ─── 64 │ } = useMemo(() => getTextFromChildren(children), [children]); 65 │ const args = React.useMemo(() => [label, opts], [label, opts]..

2023. 11. 21. 16:54

2. FrontEnd/Next.js

[Next.js] 12와 13,14의 차이

Next를 12버전을 쓰다가 이번에 내 웹사이트를 만들려고 14로 깔았는데, 바뀌었다고만들었지 실제로 설치하고 보니까 폴더구조부터 완전 변해서 다시 공부하고 셋팅을 했다. 이 과정에서 뭐가 바뀌었는지에 대해 작성하려고한다. 우선, Next 14버전을 깔고 초기셋팅한 내 구조와 12버전에 있을때는, pages폴더 안에 파일을 생성하면 거기로 바로 페이지가 만들어져있는것을 확인할 수 있다. 공식Docs를 기반으로 공부하고 정리한 글입니다. 자동 설치 npx create-next-app@latest //아래와 같은 질문들이 나오는데 이거에 사용할 모듈들 선택해서 설치 What is your project named? 앱 이름 Would you like to use TypeScript? No / Yes Woul..

2023. 11. 21. 15:12

2. FrontEnd/Three.js

[Three.js] R3F(React Three Fiber)

R3F와 Three.js와 Next로 내 웹사이트를 만들어볼 예정이다! : ) 히히 내 머리속에 있던(?)거 이쁘게 만들면서 버그들 쌓여갈 예정^^ 행복하겠다 (해탈) (*Three.js는 어느정도 개념을 알고있는상태라 공식독스 보고 거북이처럼 적용하면서 하나하나 해봐야지) React-three-fiber is a React renderer for three.js. React Three Fiber Documentation React-three-fiber is a React renderer for three.js docs.pmnd.rs 리액트의 생태계에 참여할 수 있고, 쉽게 상호작용할 수 있으며, 상태에 따라 반응할 수 있는 재사용 가능한 자체 구성 요소를 사용하여 선언적으로 장면을 구축할 수 있습니다...

2023. 11. 21. 10:01