GPT생겨서 공부하기 참 쉬워졌쥬..

1️⃣ 공식문서 초기 세팅 (이건 꼭 해라)

✔️ 프로젝트 생성 npx create-react-router@latest

Remix v2는 이제 React Router에 흡수됐어. 👉 Remix = React Router + 서버 기능 이라고 생각해.

2️⃣ 생성 후 구조부터 이해 (중요 ⭐⭐⭐)

처음 보면 이게 제일 멘붕이야.

app/
 ├─ routes/
 │   ├─ _index.tsx
 │   ├─ login.tsx
 │   └─ posts.$id.tsx
 ├─ root.tsx
 └─ entry.server.tsx

핵심만 딱 정리해줄게

• routes/ = 페이지
• 파일 이름 = URL

이거 하나만 기억해도 반은 이해함

• routes/login.tsx → /login
• routes/posts.$id.tsx → /posts/123

👉 React Router의 안 써도 됨 👉 파일이 라우터다

3️⃣ Remix에서 제일 중요한 개념 TOP 4

🧠 ① loader (서버에서 데이터 가져오기)

export const loader = async () => {
  return { message: 'hello' };
};

✔️ 이 함수는 브라우저에서 실행 안 됨 ✔️ 서버에서만 실행

const data = useLoaderData<typeof loader>();

👉 API 호출 + 상태관리 + 로딩을 한 번에 해결

🧠 ② action (폼 submit 처리)

export const action = async ({ request }) => {
  const formData = await request.formData();
  return null;
};

✔️ POST / PUT / DELETE 전용 ✔️ 서버에서 실행됨

👉 axios.post() + onSubmit 안 써도 됨

🧠 ③ Form (Remix 전용)

<Form method="post">
  <input name="email" />
  <button type="submit" />
</Form>

👉 submit 하면 자동으로 action() 실행 👉 새로고침 ❌ 👉 상태관리 ❌

🧠 ④ useNavigation (로딩 상태)

const navigation = useNavigation();

navigation.state === 'loading'
navigation.state === 'submitting'

👉 버튼 로딩 처리, 스피너 여기서 함

4️⃣ “아 그래서 뭐가 좋은데?” (리액트랑 비교)

시작 전 환경 세팅

1️⃣ 필수 도구

Insomnia → API 테스트용 (Postman 대체)

2️⃣ NestJS CLI 설치 및 프로젝트 생성

npm i -g @nestjs/cli nest new project-name

nest new 명령어를 사용하면 기본적인 폴더 구조와 설정이 자동으로 구성된다.

Single Responsibility Principle (SRP)

NestJS는 단일 책임 원칙(SRP) 을 굉장히 강하게 따른다.

하나의 module / class / function 은 하나의 책임만 가져야 한다

기본 구조 예시

AppModule ├── AppController └── AppService

역할 분리

1. Controller

• HTTP 요청/응답 처리
• URL, Method 정의

2. Service

• 실제 비즈니스 로직 담당

3. Module

• 관련 Controller와 Provider를 묶는 단위

👉 Controller에서 로직을 처리하지 않고 Service로 위임하는 구조가 기본이다.

ValidationPipe (요청 데이터 검증)

NestJS는 class 기반 유효성 검사를 공식적으로 지원한다.

1️⃣ 패키지 설치 npm i class-validator class-transformer

class-validator : 유효성 검사

class-transformer : plain object → class 변환

2️⃣ DTO를 위한 패키지 npm i @nestjs/mapped-types

DTO 상속 및 변환을 도와주는 유틸 패키지

3️⃣ DTO 예시

export class CreateMovieDto {
  @IsString()
  title: string;

  @IsNumber()
  year: number;
}

👉 ValidationPipe를 사용하면

컨트롤러 진입 전에 자동으로 유효성 검증이 이루어진다.

Dependency Injection (DI)

NestJS의 가장 핵심 개념 중 하나.

NestJS의 DI 기본 구조 – 핵심 3요소

역할 - 의미 Provider - 주입 가능한 클래스 Consumer - 주입받는 쪽 Module - Provider를 등록하는 장소

예시

@Injectable()
export class MoviesService {}

@Module({
  providers: [MoviesService],
})
export class MoviesModule {}

@Controller('movies')
export class MoviesController {
  constructor(private readonly moviesService: MoviesService) {}
}

👉 객체를 직접 생성하지 않고 NestJS가 DI 컨테이너를 통해 자동으로 주입해준다.

Fastify vs Express

NestJS는 기본적으로 Express 위에서 동작한다

하지만 Fastify를 사용하면 Express 대비 약 2배 빠른 성능을 낼 수 있다.

Req / Res 직접 접근 getAll(@Req() req, @Res() res): GetMovieDto[] { return this.movies; }

NestJS에서는 @Req(), @Res() 데코레이터를 통해 플랫폼(Express / Fastify)의 객체에 직접 접근할 수 있다.

❗ 하지만 권장되지 않는 이유

NestJS의 추상화 레이어를 깨게 됨

플랫폼 종속 코드가 됨

테스트 및 유지보수 어려움 증가

👉 가능하면 NestJS 방식(@Body, @Param, @Query 등)을 사용하는 것이 좋다.

정리하며 느낀 점

NestJS는 구조와 규칙을 강하게 강제하는 프레임워크

처음엔 번거롭지만 규모가 커질수록 장점이 커진다

특히 DI + Module 구조는 테스트, 유지보수, 협업에 굉장히 유리하다

React 개발자 입장에서는 “왜 이렇게 나눠?” 싶지만 커질수록 이 구조가 왜 필요한지 체감하게 되겠지

이유는,

• 프로젝트에 파일을 포함하지 않아도 됨

• 캐싱 활용 가능 (다른 사이트에서도 같은 CDN 사용 시)
• 초기 설정이 간단 ... 가장 큰 이유는 회사에서 빨리 HTML <-> 에디터 읽기쓰기 호환 기능을 가진 에디터를 도입해달라고 했기 때문.

하지만 React에서 CDN으로 불러오면 아래와 같은 단점이 있어서 npm방식으로 바꾸려 한다.

• CDN 서버 장애 시 사용 불가

• 버전 관리가 명확하지 않음 (URL에 버전이 있어도 관리가 어려움)
• 보안 이슈 가능성 (외부 스크립트 실행)
• 번들러 최적화 불가

아지만 이렇게 하다보니 예전에 써서 문제가 없던 Quill에디터는 모노리식 번들(단일번들) 이라 css만 import하면 동작하고, 모든것을 webpack이 처리해서 문제가 없었다고 한다. TinyMCE 라는 라이브러리는 모듈러 아키텍처라 필요한 리소스를 런타임에 로드하기 때문에 React 에서 사용시 문제가 생겼다. 이 라이브러리의 유연성과 확장성 때문에 리소스 경로설정 이라는 것이 필요했다.

추가로 번들 크기가 증가할것이다 라는 문제점이 또 보였고..

결국 CRACO/webpack 설정을 하기로 했다.

TinyMCE webpack 최적화 구현 계획 (하이브리드 방식) 개요

목표

• TinyMCE를 npm 패키지로 사용 (CDN 제거)
• 공통 webpack 설정 + 앱별 오버라이드 구조
• webpack으로 리소스 최적화 및 번들 크기 감소
• seller-admin에 먼저 적용 (테스트 후 system-admin 확장) 구현 단계

1. CRACO 설치 및 공통 설정

• apps/seller-admin/package.json에 @craco/craco 의존성 추가
• 루트에 공통 설정 생성: craco.base.js
• TinyMCE 리소스 복사 설정 (CopyWebpackPlugin)
• 공통 번들 최적화 설정 (압축, 트리쉐이킹, 코드 스플리팅)
• apps/seller-admin/craco.config.js 생성
• 공통 설정 import 및 seller-admin 특화 오버라이드 (필요시)
• apps/seller-admin/package.json의 scripts를 react-scripts → craco로 변경

  2. Node.js 버전 고정

• 루트에 .nvmrc 파일 생성 (Node.js 24.6.0)
• Jenkins 배포 시 버전 일관성 보장

  3. TinyMCE 컴포넌트 수정

• packages/ui-components/src/organisms/TinyMCEEditor.tsx 수정
• base_url 설정 제거 (webpack이 처리)
• tinymceScriptSrc prop 제거 (npm 패키지 사용)
• 필요한 플러그인만 import하여 트리쉐이킹 최적화

  4. 빌드 스크립트 검증

• pnpm install 실행
• pnpm --filter seller-admin start로 개발 서버 테스트
• pnpm --filter seller-admin build로 프로덕션 빌드 테스트

주요 파일 변경

1. apps/seller-admin/package.json

• @craco/craco 의존성 추가
• scripts 수정: react-scripts → craco

  2. craco.base.js (신규, 루트)

• 공통 webpack 설정
• TinyMCE 리소스 복사 (CopyWebpackPlugin)
• 공통 번들 최적화 설정

  3. apps/seller-admin/craco.config.js (신규)

• 공통 설정 import
• seller-admin 특화 설정 오버라이드 (필요시)

  4. .nvmrc (신규)

• Node.js 24.6.0 고정

  5. packages/ui-components/src/organisms/TinyMCEEditor.tsx

• base_url 제거
• tinymceScriptSrc 제거

아키텍처

루트/
├── craco.base.js          # 공통 webpack 설정
├── .nvmrc                  # Node.js 버전 고정
└── apps/
    └── seller-admin/
        └── craco.config.js # 공통 설정 import + 오버라이드

예상 효과

• 번들 크기: 약 20-30% 감소 (트리쉐이킹 및 최적화)
• 로딩 속도: 개선 (로컬 파일, 번들 최적화)
• 안정성: 향상 (외부 CDN 의존성 제거)
• 유지보수성: 향상 (공통 설정 중앙 관리)

  주의사항

  Jenkins 배포 시 Node.js 24.6.0 이상 필요 빌드 메모리 사용량 증가 가능 (webpack 최적화) seller-admin 테스트 완료 후 system-admin에도 동일 적용

코드

1. apps/system-admin/package.json 수정

script 에서 'start':'react-script start' 와 같은 것들을 아래처럼 바꾸고

• "prestart": "node ../../scripts/copy-tinymce.js seller-admin",
• "start": "craco start",
• "build": "craco build",
• "test": "craco test",

devDependencies에서 아래와 같은 것들을 설치

• "@craco/craco": "^7.1.0",
• "copy-webpack-plugin": "^12.0.2",

2. apps/system-admin/craco.config.js 생성

const baseConfig = require('../../craco.base.js');

module.exports = {
  ...baseConfig,
  // system-admin 특화 설정이 필요한 경우 여기에 추가
  // 예: 특정 플러그인, 로더 설정 등
};

3. 루트 스크립트에 copy-tinymce.js 생성

const fs = require('fs');
const path = require('path');

// 루트 디렉토리 찾기 (craco.base.js와 동일한 기준)
const rootDir = path.resolve(__dirname, '../../..');

// 여러 가능한 경로 시도
const possibleSources = [
  // 1. 루트의 node_modules (craco.base.js와 동일한 방식)
  path.resolve(rootDir, 'node_modules/tinymce'),
  // 2. pnpm의 .pnpm 디렉토리에서 찾기
  (() => {
    try {
      const pnpmStore = path.resolve(rootDir, 'node_modules/.pnpm');
      if (fs.existsSync(pnpmStore)) {
        // tinymce@로 시작하는 디렉토리 찾기
        const entries = fs.readdirSync(pnpmStore);
        for (const entry of entries) {
          if (entry.startsWith('tinymce@')) {
            const entryPath = path.join(pnpmStore, entry);
            if (fs.statSync(entryPath).isDirectory()) {
              const tinymcePath = path.join(entryPath, 'node_modules/tinymce');
              if (fs.existsSync(tinymcePath)) {
                return tinymcePath;
              }
            }
          }
        }
      }
      return null;
    } catch (e) {
      return null;
    }
  })(),
  // 3. ui-components의 node_modules
  path.resolve(rootDir, 'packages/ui-components/node_modules/tinymce'),
  // 4. system-admin의 node_modules
  path.resolve(__dirname, '../node_modules/tinymce'),
];

// 존재하는 소스 경로 찾기
let source = null;
for (const possibleSource of possibleSources) {
  if (possibleSource && fs.existsSync(possibleSource)) {
    source = possibleSource;
    break;
  }
}

if (!source) {
  console.error('❌ TinyMCE not found in node_modules');
  console.error('   Tried paths:');
  possibleSources.forEach((p, i) => {
    if (p) {
      const exists = fs.existsSync(p) ? '✓' : '✗';
      console.error(`   ${i + 1}. ${exists} ${p}`);
    } else {
      console.error(`   ${i + 1}. (skipped)`);
    }
  });
  console.error('\n   Please ensure TinyMCE is installed:');
  console.error('   pnpm install');
  console.error('\n   Or check if TinyMCE is in packages/ui-components:');
  console.error('   ls packages/ui-components/node_modules/tinymce');
  process.exit(1);
}

const dest = path.resolve(__dirname, '../public/tinymce');
const checkFile = path.resolve(dest, 'plugins/help/js/i18n/keynav/en.js');

// 파일이 없을 때만 복사 (빠름)
if (!fs.existsSync(checkFile)) {
  console.log('📦 Copying TinyMCE files (first time only)...');
  console.log(`   From: ${source}`);
  console.log(`   To: ${dest}`);

  const { execSync } = require('child_process');

  if (fs.existsSync(dest)) {
    fs.rmSync(dest, { recursive: true, force: true });
  }

  const isWindows = process.platform === 'win32';
  if (isWindows) {
    execSync(`xcopy /E /I /Y "${source}" "${dest}"`, { stdio: 'inherit' });
  } else {
    execSync(`cp -R "${source}" "${dest}"`, { stdio: 'inherit' });
  }
  console.log('✅ Done');
} else {
  console.log('⚡ TinyMCE files already exist');
}

파일별 용도 설명

1. craco.base.js - Webpack 설정 파일

• 용도: CRACO를 통한 webpack 설정
• 역할: 개발/프로덕션 모드에서 webpack이 실행될 때 동작 CopyWebpackPlugin으로 TinyMCE 리소스를 빌드 출력에 복사 프로덕션 빌드 최적화 (코드 스플리팅, 트리쉐이킹, 압축)
• 작동 시점:
• craco start 실행 시 (개발 모드)
• craco build 실행 시 (프로덕션 빌드)
• 🔴 문제점: 개발 모드에서 CopyWebpackPlugin이 초기 복사를 보장하지 않을 수 있음 개발 서버 시작 시 파일이 없으면 에러 발생 가능!!!

  2. scripts/copy-tinymce.js - 파일 복사 스크립트

• 용도: 개발 서버/빌드 시작 전에 TinyMCE 파일을 수동 복사
• 역할: prestart, prebuild 훅에서 실행 TinyMCE 파일이 없을 때만 복사 (조건부) 개발 모드에서 리소스 누락 방지
• 작동 시점: pnpm start 실행 전 (prestart 훅) pnpm build 실행 전 (prebuild 훅)
• 장점: 개발 서버 시작 전에 파일 존재 보장 파일이 있으면 스킵하여 빠른 시작 에러 메시지로 문제 진단 용이

Deployment

git에 push 를 마쳤다면, Vercel이 호출할 수 있도록 package.json 에 명령어를 수정한다

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start":"next start"
  },

vercel 은 그냥 deploy 버튼만 누르고 기다리면 된다. 그리고 나타나는 오류들을 해결하면 dashboard에 보인다.

추가) <Link prefetch href={/movies/${id}}>{title}</Link>

배포 시에 prefetch 라는 props 통해 통해 사용자가 클릭하기 전부터 fetch를 진행한다. 스크롤을 내리고 아래쪽에 있는 링크가 보여지면, NextJS는 자동적으로 요청을 보내게 된다. movie페이지를 자동으로 fetch 하고 있는 것이다. 클릭하지 않았지만 마치 페이지에 들어간 것처럼 요청하는 것이다!!

1. application 전체에 적용할 global style 을 만든다. 전체 웹사디트의 bg color 나 폰트를 적용하도록 한다.

2. app/layout 에서 import global css를 한다.

3. 공통 디자인을 적용해준다.

   html,
   body,
   div,
   span,
   applet,
   object,
   iframe,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   blockquote,
   pre,
   a,
   abbr,
   acronym,
   address,
   big,
   cite,
   code,
   del,
   dfn,
   em,
   img,
   ins,
   kbd,
   q,
   s,
   samp,
   small,
   strike,
   strong,
   sub,
   sup,
   tt,
   var,
   b,
   u,
   i,
   center,
   dl,
   dt,
   dd,
   ol,
   ul,
   li,
   fieldset,
   form,
   label,
   legend,
   table,
   caption,
   tbody,
   tfoot,
   thead,
   tr,
   th,
   td,
   article,
   aside,
   canvas,
   details,
   embed,
   figure,
   figcaption,
   footer,
   header,
   hgroup,
   menu,
   nav,
   output,
   ruby,
   section,
   summary,
   time,
   mark,
   audio,
   video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   }
   /* HTML5 display-role reset for older browsers */
   article,
   aside,
   details,
   figcaption,
   figure,
   footer,
   header,
   hgroup,
   menu,
   nav,
   section {
   display: block;
   }
   body {
   line-height: 1;
   }
   ol,
   ul {
   list-style: none;
   }
   blockquote,
   q {
   quotes: none;
   }
   blockquote:before,
   blockquote:after,
   q:before,
   q:after {
   content: "";
   content: none;
   }
   table {
   border-collapse: collapse;
   border-spacing: 0;
   }
   

body { font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; background-color: black; color: white; font-size: 18px; }

a { color: inhefit;

text-decoration: none; }

a:hover { text-decoration: underline; }

4. 특정 디자인에 적용하고 싶다면 이름에 `.module.css`를 넣도록 한다.
![](https://velog.velcdn.com/images/angel_eugnen/post/0bbb9e61-c53d-4b38-860e-eb0e403d3359/image.png)

폴더 위치는 /styles 폴더에 있어도 무관하다.

그리고 오로지 className만 작성할 것이다.

5. 그리고 사용하고 싶은 tsx 파일에서 css 파일을 마치 자바스크립트 처럼 import 해온다.
`import styles from '../style/navigation.module.css'`

Error Handling

1. API 요청이 안되거나
2. 네트워크가 끊기는 등 에러가 생긴 경우의 핸들링은 error.tsx 파일을 만들면 된다.

프레임워크 특성상 파일 위치는 페이지 대상이 되는 폴더 안에 넣어야 한다.

"use client";
export default function ErrorOMG() {
  return <h1>Error OMG</h1>;
}

Parallel Request

import { API_URL } from "../../../(home)/page";
async function getMovie(id: string) {
  console.log(`getMovie: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 5000));
  const response = await fetch(`${API_URL}/${id}`);
  const json = await response.json();
  return json;
}
async function getVideo(id: string) {
  console.log(`getVideo: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 5000));
  const response = await fetch(`${API_URL}/${id}/videos`);
  const json = await response.json();
  return json;
}
export default async function Text({ params }) {
  const { id } = await params;
  console.log("startfetching");
  const movie = await getMovie(id); // 이 함수 응답이 오래걸리면
  const video = await getVideo(id); // 첫줄 함수를 기다리다가 응답이 늦는다. 병렬로 실행해야 한다.
  console.log("endfetching");

  return (
    <div>
      testestest
      <h1>{movie.title}</h1>
    </div>
  );
}

이렇게 하면 start fetching 이 출력되고 end fetching이 순차적으로 출력되며 총 10초 넘게 걸리게 된다.

startfetching
getMovie: 1752386606417
getVideo: 1752386607056
endfetching

병렬 요청으로 바꿔줘야 한다.

promise.all을 사용하면 결과값이 동시에 나올 것이다.

const [movie, videos]=  await Promise.all([getMovie(id), getVideos(id)])

이렇게 요청을 보내면

startfetching
getMovie: 1752386815316
getVideo: 1752386815316 
endfetching

동시에 시작하게 된다. 순차적인 작업이 아니기 때문이다. 이것이 병렬 fetch 이다.

하지만 지금은 둘이 끝나야 보이므로, 둘을 분리하는 것이 좋다. 둘중 어느 한쪽도 기다릴 필요가 없게! 그것이 suspense이다.

Suspense

getMovie와 getVideos 만 렌더링 하는 컴포넌트를 만든다. /components/movie-video.tsx /components/movie-info.tsx

// 1. components.movie-video.tsx
import { API_URL } from "../app/(home)/page";
async function getVideos(id: string) {
  console.log(`getVideo: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 5000));
  const response = await fetch(`${API_URL}/${id}/videos`);
  const json = await response.json();
  return json;
}

export default async function MovieVideos({ id }: { id: string }) {
  const videos = await getVideos(id);
  return <h6>{JSON.stringify(videos)}</h6>;
}

//2. components/movie-video.tsx
import { API_URL } from "../app/(home)/page";
async function getMovie(id: string) {
  console.log(`getMovie: ${Date.now()}`);
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const response = await fetch(`${API_URL}/${id}`);
  const json = await response.json();
  return json;
}

export default async function MovieInfo({ id }: { id: string }) {
  const movie = await getMovie(id);
  return <h6>{JSON.stringify(movie)}</h6>;
}

를 만들고 개별적으로 기다리게 한다. 그리고 page.tsx에서 MovieInfo 와 MovieVideos를 렌더링한다.

import { Suspense } from "react";
import MovieDetail from "../../../../components/movie-info";
import MovieVideos from "../../../../components/movie-video";
export default async function Text({ params }) {
  const { id } = await params;



  return (
    <div>
      <Suspense fallback={<h1>Loading Movie Info</h1>}>
        <MovieDetail id={id} />
      </Suspense>
      <Suspense fallback={<h1>Loading Movie Video</h1>}>
        <MovieVideos id={id} />
      </Suspense>
    </div>
  );
}

그럼 순차적으로 데이터가 준비되는 순간 사용자는 렌더링된 데이터를 볼 수 있다. 그리고 page.tsx 와 같은 위치에 있는 loading.tsx 는 최적화 한 덕분에 await 하는게 없으므로 전체 로딩하는 일이 없게 된다.

page 단위 로딩: loading.tsx 서버컴포넌트 단위 로딩: Suspense

Next15) 15버전 부터는 기본 캐싱이 안되기 때문에 캐싱을 확인하려면 fetch의 두번째 인자 cache옵션을 force-cache 로 바꿔줘야 한다고 한다.

Data Fetching

fetch, streaming, suspense, boundary 등을 배울것이다. 쉽고 멋지다고 한다.

NextJS 의 fetching을 위해 영화 상세보기 API를 이용하자.

[출처-노마드코더] : https://nomad-movies.nomadcoders.workers.dev/

/: This page /movies: List popular movies /movies/:id: Get movie by :id /movies/:id/credits: Get credits for a movie by :id /movies/:id/videos: Get videos for a movie by :id /movies/:id/providers: Get providers for a movie by :id /movies/:id/similar: Get similar movies for a movie by :id

url 종류는 위와 같다.

React Client Fetching

"use client";
// 과거에 리액트에서 하던 방식의 클라이언트 fetch는 아래와 같다.
import { useEffect, useState } from "react";

export default function HOME() {
  const [isLoading, setIsLoading] = useState(true);
  const [movies, setMovies] = useState([]);
  const getMovies = async () => {
    const response = await fetch(
      "https://nomad-movies.nomadcoders.workers.dev/movies"
    );
    const json = await response.json();
    setMovies(json);
    setIsLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);
  return (
    <div>
      <h1>HOME</h1>
      <p>{isLoading ? "...isLoading" : JSON.stringify(movies)}</p>
    </div>
  );
}

기존방식: React API <===> API <===> DB 이렇게 하면 네트워크 탭을 열면 누구나 api를 보고 쿼리를 통해 정보를 찾을 수 있어서 보안적으로 안전하지 않은 경우가 있다.

모든것을 client 에서 fetching을 하면 API에서 보안을 위해 DB요청하는 중간의 API이 필요했다. 하지만 NextJS 는 중간의 백엔드 API 없이 DB에서 바로 데이터를 가져올 수 있다.

또한 React앱에서는 로딩 상태를 항상 신경써서 직접 만들어야 하고, useState를 사용해서 데이터를 관리해야 한다.

하지만 server component 에서 fetching을 하면, useEffect와 useState, Loding을 사용하지 않아도 된다.

그리고 프론트엔드 개발자는 백엔드가 만든 API가 필요하지 않게 된다.

//next.js
// 브라우저에서는 아무것도 fetch하지 않는다.
export const metadata = {
  title: "Home",
};
const MoviesURL = "https://nomad-movies.nomadcoders.workers.dev/movies";

async function getMovies() {
  const response = await fetch(MoviesURL);
  const json = await response.json();
  return json;
}
// 한번만 서버에서 fetch 하면 캐시된다. server component 에서 Next JS 가 fetch한 것을 기억하고 있기 때문이다.
// 새로고침해도 이미 응답이 캐시되었기 때문에 로딩이 필요 없다
// 하지만 만약 서버 끄고 재 실행된다면 로딩이 필요하다. 즉 첫번째 fetch한 데이터가 존재하면 API에 요청하지 않고 캐싱된 데이터를 보여준다.
export default async function HomePage() {
  const movies = await getMovies();
  return <div>{JSON.stringify(movies)}</div>;
}

최신 데이터가 필요할때는 캐싱이나 revalidation을 해야한다.

Loding

백엔드의 응답까지 첫 초기 렌더링이 UI 가 표기되지 않는 멈춤상태로 있는 설정이 싫고 최소한의 정적 UI를(네비게이션) 보고있게 하고 싶다면 loading파일을 하나 만들어서 해결할 수 있다. loading.tsx 파일을 만들어주자

export default function Loading() {
  return <h2>Loading...</h2>;
}

loading 파일만 제공 해줘도 된다. 이것은 백엔드가 페이지를 streaming 하기 때문에 가능하다. 백엔드에서 fetch함수가 완료되면 결과값을 브라우저에 보낸다. 그래서 layout과 navigation을 먼저 보내고 loading이 끝난 결과값을 보여주면 된다.

네트워크 탭을 열면 로딩중이라면 localhost가 로딩중임을 확인 할 수 있다. 이때 NextJS는 브라우저의 일부를 보여주며 기다려 달라고 하고, loading컴포넌트가 교체되는 것이다. 그리고 HomePage가 async인 이유는 준비된 Html 부분을 브라우저에 전달하기 위함이다.

변수가 라우터에 들어갈 때 사용한다. 파일시스템으로 동작한다.

[id] 이런 식으로 동작한다.

export default function MovieDetail(props){
    console.log(props)
    return <div>Movie</div>
}

콘솔로 찍어보면

이렇게 나온다.

id, sesarchParams을 얻게 되는데, searchParams는 url 뒤에 ? 데 대한 내용이다..

15 버전 이상 부터는 params 와 searchParams가 비동기로 작동해서, async await를 사용해야 한다.

const Page = async ({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>
  searchParams: Promise<{ [key: string]: string }>
}) => {
  const { id } = await params
  const search = await searchParams

  console.log(id, search)

  return <h1>My Post: {id}</h1>
}

export default Page

그러면 이렇게 출력된다.

layout, not-found 는 꼭 루트 폴더에 있어야 한다.

그룹을 만들고 싶으면 (home) 처럼 폴더 이름을 괄호로 묶어줘야 한다. 폴더 이름을 지정해주면 url이 바뀌지 않고, 프레임 워크에서만 보인다.

그래서 루트에 있던 홈 컴포넌트를 (home) 폴더로 옮길 수 있다.

Metadata

꼭 내보내야 하는 object 이고, 이것을 Metadata라고 부른다. 그리고 이것은 헤더에 표시된다.

export const metadata = {
  title: 'Home',
  description: '집에 보내줘 빨리, 바이 짜이쩬~',
}
export default function HOME(){
   return  <div> HOME</div>
}

metadata는 병합된다. title을 상위에 적고 하위에 description을 적으면 title은 상위에 있는 내용으로, description은 하위에 있는 내용으로 메타데이터가 병합된다. 또한 metadata는 서버 컴포넌트에만 있을 수 있다.

메타데이터에 대한 템플릿 또한 만들 수 있다.

루트에서 템플릿 메타데이터를 만들었다.

import { Metadata } from "next"

export const metadata :Metadata = {
  title: {template:"%s | Next Movies",
  default: "Loading...",
  },
  description: '집에 보내줘 빨리, 바이 짜이쩬~',
}

export default function Layout({childeren}:{childeren:React.ReactNode}){
   return ( <div>
    {childeren}
&copy; Next JS is great!    </div>)
}

헤더에 반영되고, head 태그에 반영된 것을 알 수 있다.

추가) 동적 메타데이터 정보가 api에 있을때? generateMetadata에서 호출해도 된다

export async function generateMetadata({ params: { id } }: IParamas) {
  const movie = await getMovie(id); // 영화 정보를 불러오기 위해 API 를 부르면 안좋은가? -> 최신버전은 fetch한번하면 캐싱된 응답을 받아서 괜찮다 ㅎㅎ
  return {
    title: movie.title,
  };
}

layout.tsx 라는 파일을 만들면 그 하위에 적용된다.

이렇게 있는 경우 루트의 layout 에서 컴포넌트를 임포트 하여 그것이 제일 상단으로, 그리고 아채 children이 추가된다.

그리고 about-us라는 루트 하위의 폴더에서 layout을 만들고 하위 url로 접속하면

app/about-us/jobs/sales 라는 폴더에서 레이아웃이 렌더링 되는 것을 알 수 있다.

레이아웃은 서로 상쇄되는 것이 아닌 중첩되고 있다.

Next JS 동작 방식

<RootLayout/> 확인 -> /about-us 경로 확인 -> <Layout/> 확인 -> 하위의 children인 <Sales/> 렌더링

즉 2개의 layout을 중첩하여 렌더링 하고 있다.

프레임 워크는 page의 가장 가까운 layout을 찾으려고 한다. 그래서 가까운 layout을 찾으면, 그 위 상위 항목을 확인하고 또 layout을 찾는다.

0

Hydration

단순 HTML을 React applaction으로 초기화 하는 작업이다.(HTML 위에서 React Application을 실행한다는 의미)

예를 들어 React 를 Initialize하여 onClick를 부착해 여기서 작성 가능 한 기능을 수행하도록 하는 것이다.

/aout-us 접근 => <button>0</button> => 사용자 확인 이후 => <button onClick={()=>이벤트수행}></button>

마치 위의 상태로 있는 것이다. 그리고 먼저 렌더링 한 후에 뒷단에서 next.js를 로딩하고 framework 를 초기화 하고 React application을 생성하는 것이다.

그러면 버튼이 interactive해지고 eventListener가 생기는 것이다.

🤔 render()

ReactDOM.render(element, container, [callback])

• element: 화면에 그려진 React element (집어넣어 줄 요소)
• container: React element를 해당 container DOM에 렌더링 (구체적인 위치)
• callback: 렌더링 후 반환되는 값을 돌려주는 콜백 함수 CRA하게 되면 index.js에 다음 코드를 쉽게 볼 수 있습니다.

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

즉, <App/> 컴포넌트를 root라는 id를 가지고 있는 엘리먼트 내부로 넣어주어 페이지를 렌더링 해주고 있습니다.

🤔 hyrate()

ReactDOM.hydrate(element, container, [callback]) 기본적으로 render()와 동일하지만, ReactDOMServer로 렌더링된 HTML에 이벤트 리스터(자바스크립트 코드)를 연결해주기 위해 사용됩니다.

서버 사이드를 통해 이미 HTML에는 엘리먼트들이 채워져 있죠? 따라서 다시 render 해줄 필요 없이 hydrate를 통해 기존 마크업에 이벤트 리스너를 붙여주는 과정입니다.

위 과정들을 정리해봅시다.

Next.js는 서버에서 HTML을 문자열로 가져온 후에, 클라이언트에서 서버로부터 보내준 HTML을 render(), hydrate()하여 브라우저에 렌더링 했습니다. 이 일련의 과정을 Hydration이라고 합니다!

Hydration 사전적 정의 [명사] 수분 공급

서버의 데이터가 클라이언트의 DOM과 결합하는 과정을 빗대어 hydrate라는 단어로 정의된 것 같습니다.

React는 클라이언트 렌더링만 있어, 유저에게 보여줄 HTML, CSS 그리고 자바스크립트 모두 render() 함수를 이용해 생성하여, 모든 리소스를 한번에 렌더링합니다.

반면, Next.js는 서버에서 보여줄 HTML 컨텐츠를 미리 렌더링(내용을 채워서)하여 가져오기 때문에 render() 함수로 HTML 뼈대만 렌더하고, hydrate()를 통해 서버에서 받아온 HTML에 유저가 상호작용할 수 있는 이벤트 리스너(JS파일)을 연결하는 것입니다.

HTML에 JS파일(수분💦)을 주입한다고 해서 hydrate라고 이해할 수 있겠습니다!

client

client 에서 hydrdate 되어 interactive 하게 만들어질 components는 오직 use client 지시어를 최 상단에 갖고있는 컴포넌트만 가능하다.

따라서 Navigation 만 hydration 되는 것이다.

백엔드에서 render되고 프론트엔드에서 hydrate된다는 것이다.

이는 data fetch 되는 방식에서 중요한 개념이다. useQuery, useEffect ... 등등은 이제 안 쓸것이다.

hydrate장점

: Javascript를 선택적으로 작은파일만 다운로드 하게 할 수 있다. 그래서 백엔드에서 HTML을 먼저 preRender할 수 있다. 그리고 use client를 작성하면 그 child는 모두 client component가 된다. 그리고 server component 에서 fetch를 진행하면, 보안을 신경쓰지 않아도 된다. client에서 render 되기 때문! 그래서 API키를 넣거나 DB에 접근해도 된다.

Recap

Routing, Navigation, Layout, client, server components 등에 대해 배울 예정이다.

client, server 는 NextJS에서 나온 개념이라고 한다.

NextJS는 프레임워크라서, 올바른 폴더에 정확한 이름의 파일이 들어가 있으면 NextJS는 우리 코드를 이용해서 만들어 준다.

app 폴더 안에 page 파일을 찾는것 처럼. 그리고 꼭 export를 해야한다. 그리고 동시에 layout을 찾는다. 그래서 자동 생성된다. meta data라는 객체와 RootLauout는 html 바디 안에 body 태그를 갖는다.

Routing

• react 라우팅 방식

  / -> <Home />
  /about-us -> <AboutUs />

• NextJS 방식

  app 폴더 -> / (roote segment)
  app폴더/about-us 폴더 -> /about-us

  

• 주의

이렇게 된 경우 url 에서 /about-us/company에 접근하면 404 와 같다. page.tsx파일이 할당되지 않았기 때문이다.

Navigation Bar

"use client"
import Link from "next/link"
import { usePathname } from "next/navigation"

export default function Navigation(){
    const path = usePathname();
    return <nav>
        <ul>
            <li>
                <Link href='/'>HOME</Link>
                {path === '/' ? '💕':''}
            </li>
            <li>
                <Link href='/about-us'>AboutUS</Link>
                {path === '/about-us' ? '💕':''}

            </li>
        </ul>
    </nav>
}

Link 라는 태그를 이용해 네비게이션을 구현한다. 현재 경로를 알기 위해선 usePathname을 이용한다. 이때 최상단에 use client 를 작성하지 않으면 에러가 난다.

왜그럴까? client component가 뭘까

평범한 react 가 렌더링 되는 방식은 client side application이다. 유저가 페이지에 도착한 시점에는 javascript를 모두 실행한 후 페이지를 렌더링 한다. html에 UI가 없는 시점에서 Javascript를 기다릴 때 빈화면이 보이게 된다. App을 실행하려면 JavaScript가 실행되어야만 한다.

client side rendering 단점

• 만약 사용자가 데이터 연결 상태가 안좋은 상태에서 이 페이지에 접근하게 된다면, 아무 UI가 없는 빈 화면을 더 오래보게 될 것이다.
• Google에서도 빈 HTML을 보게 된다.

server side rendering 장점

• 페이지의 내용들이 (html) 이미 브라우저에 있다. html 을 보여주는데 Javascript가 필요하지 않기 때문이다. 그래서 빈 화면을 보지 않게 된다.
• 가장 먼저 back end 에서 렌더링 되는 것이다.=> 렌더링이란, JavaScript function을 가져와서 브라우저가 이해할 수 있는 html로 변환하는 작업니다.

1. Introduction

이 Framework 는 풀스택 웹앱을 개발하기 위한 최선의 Framework 라고 한다. 이 코스가 끝날 때에는 모든 프로그램을 NextJS로 만들고 싶어질거라 한다.

React Framework 중에 1등이라 하는 NextJS 최신 업데이트로 많이 발전했다고 한다.(14기준) 자동화로 개발자 경험 1위 라는데.. 기대가 된다.

2. Requirements

React.js 다룰줄 알아야 한다. (state, props, fetch, routing 등을 알아야 하니..)

3. Library(React) vs Framework(NextJS)

• Library: 라이브러리는 코드 내에서 사용하는 것이다. 원하는 아키텍를 원하는 방식으로 짠다. 함수 지향, 객체지향 프로그래밍이 가능하다. 코드 내에서 사용하고 사용의 주체는, 사용자이다. 파일이름, 폴더 구조 등. 라이브러리는 우리가 사용할 때 쓸 수 있다는 것이다.라이브러리의 도움이 필요할 때만 가져와서 사용할 수 있다. 다운받아서 사용하는 것. React는 UI 인터페이스를 build하는데 사용하는 라이브러리 이다.반응형 인터페이스를 구축하는데 도움이 된다. CSS 에 Styled Components 를 사용하거나 tailwind를 사용하거나, expo 를 사용하거나 routing을 사용하거나.. 등등의 모든 자유를 개발자가 가지는 것이다.

• Framework: 개발자에게 주도권은 없다. 프레임워크가 주도하고 담당한다. 프레임워크가 대신 자동화 하고 결정을 담당한다. 그래서 NextJS는 많은 Feature을 가지고 있다. 그래서 규칙을 따라야 한다. 이것이 프레임 워크다. 개발자가 규칙을 지켜야 한다는 것이다. 적당한 폴더에 파일을 만들어야 한다는 것. 그것이 지켜지지 않는다면 동작하지 않는다. import의 개념을 잊어라. 올바른 변수의 모양으로 넣어야 한다는 것이다. 올바른 위치에 넣으면 그것을 실행해 줄것이다.

라이브러리는 개발자가 사용하고, 프레임워크는 코드를 사용한다.

4. Old vs New Version

• Page Router : app 폴더에서 찾는다
• App Router : pages폴더에서 찾는다.

app에서 라우팅 하는 방식과 data fetching하는 법은 많이 바뀌었다. getStaticProps같은 것은 잊어라. page Router를 사용했다면, 최신 버전을 사용하기 위해선 migration 해야 한다.

5. Installation

npm init -y

// 이후  package.json 생김. author 수정
{
  "name": "next-practice",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Eugenius1st/next-practice.git"
  },
  "keywords": [],
  "author": "",
  "license": "MIT", // 여기 수정
  "bugs": {
    "url": "https://github.com/Eugenius1st/next-practice/issues"
  },
  "homepage": "https://github.com/Eugenius1st/next-practice#readme",
  "description": ""
}

npm install react@latest next@latest react-dom@latest

• react: UI 와 여타 많은 것들을 구성하는 부분
• reactdom: 브라우저에서 렌더링 하는 도구

// 이후 스크립트 수정
  "scripts": {
    "dev": "next dev"

  },

실행하면 NextJS는 pages라는 폴더를 찾으로 할 것이다. 그리고 그 폴더는 app 폴더 안에 있을 것이다.

다음 app/page.tsx 혹은 .jsx를 만들어라.

그리고 npm run dev로 실행

그리고 실행하면 local:3000 에서 실행중임을 알 수 있다. 그리고 자연히 layout.tsx 가 생겨남을 알 수 있다.

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

1. 도커 설치

도커를 아직 설치 중이라면, Docker 공식 사이트에서 OS에 맞는 설치 파일을 다운로드하여 설치합니다. 설치 후 Docker Desktop을 실행하고 정상적으로 작동하는지 확인합니다.

https://www.docker.com/

2. React + TypeScript 프로젝트를 위한 Dockerfile 생성

프로젝트 루트 디렉토리에 Dockerfile을 생성합니다.

# Node.js 이미지를 베이스로 사용
FROM node:18-alpine

# 컨테이너 내 앱 디렉토리 생성
WORKDIR /usr/src/app

# package.json과 package-lock.json 복사
COPY package*.json ./

# 의존성 설치
RUN npm install

# 애플리케이션 소스 코드 복사
COPY . .

# 개발 서버 실행
CMD ["npm", "start"]

# 컨테이너가 노출할 포트
EXPOSE 3000

3. docker-compose.yml 파일 생성

개발 시 여러 컨테이너를 관리하기 편하도록 docker-compose.yml 파일을 작성합니다.

version: '3.9'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000" # 호스트의 3000 포트를 컨테이너의 3000 포트에 매핑
    volumes:
      - .:/usr/src/app # 로컬 파일 변경 시 컨테이너에 반영
      - /usr/src/app/node_modules # node_modules는 볼륨 매핑 제외
    stdin_open: true
    environment:
      - CHOKIDAR_USEPOLLING=true # 파일 변경 감지를 위한 설정
4. 프로젝트의 package.json 스크립트 수정
React 프로젝트가 도커 컨테이너 내에서도 제대로 실행되도록 설정을 추가합니다. 예를 들어, start 스크립트를 수정합니다.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

5. 도커 빌드 및 실행

도커 환경을 실행하려면 다음 명령어를 사용합니다.

빌드

docker-compose build

실행

docker-compose up

6. 도커 환경 확인

브라우저에서 http://localhost:3000으로 접속하여 React 앱이 정상적으로 실행되는지 확인합니다. 코드 수정 시 변경 사항이 자동으로 반영되는지 확인합니다.

7. 추가 고려 사항

환경 변수: .env 파일을 사용하고, docker-compose.yml에서 이를 참조하도록 설정합니다.

생산 환경 설정: Dockerfile에 RUN npm run build를 추가하고, Nginx 또는 다른 웹 서버를 통해 빌드된 파일을 서빙할 수 있도록 설정합니다.

도커 허브 ID와 비밀번호는 도커 이미지를 도커 허브(Docker Hub)에서 푸시(push)하거나 풀(pull) 할 때 사용됩니다. 도커 허브는 도커 이미지들을 저장하고 관리하는 레지스트리 서비스입니다. 즉, 특정 이미지를 다운로드하거나, 자신이 만든 이미지를 도커 허브에 업로드하기 위해 사용될 수 있습니다.

1. 도커 허브 로그인

도커 허브에 로그인하려면 터미널에서 아래 명령어를 실행해야 합니다. 이때, 백엔드에서 제공한 도커 허브 ID와 PW를 사용합니다.

docker login
명령어를 입력하면 아래와 같은 프롬프트가 뜨고, 여기에 ID와 비밀번호를 입력합니다.

Username: your-docker-hub-id
Password: your-docker-hub-password

로그인이 성공하면, "Login Succeeded" 메시지가 나타납니다.

2. 이미지 Pull (다운로드)

도커 허브에서 이미지를 받아오는(pull) 방법입니다. 백엔드에서 제공한 도커 허브 ID와 이미지 이름을 알고 있다면, 해당 이미지를 아래와 같이 다운로드할 수 있습니다.

docker pull your-docker-hub-id/your-image-name:tag
예를 들어, 백엔드에서 제공한 이미지 이름이 ai-soccer-backend이고 태그가 latest라면 다음과 같이 실행합니다.

docker pull your-docker-hub-id/ai-soccer-backend:latest

이 명령어는 도커 허브에서 해당 이미지를 다운로드하여 로컬 머신에 저장합니다.

3. 이미지 Push (업로드)

만약 자신이 만든 도커 이미지를 도커 허브에 업로드하고 싶다면, 먼저 이미지를 빌드한 후 도커 허브에 푸시(push)할 수 있습니다.

docker tag my-image your-docker-hub-id/my-image:latest
이미지 푸시: 태그가 완료되면 이미지를 도커 허브에 푸시할 수 있습니다.

docker push your-docker-hub-id/my-image:latest

이렇게 하면 your-docker-hub-id/my-image:latest라는 이름으로 도커 허브에 이미지가 업로드됩니다.

4. 도커 컴포즈에서 이미지 사용하기

만약 docker-compose.yml 파일을 사용해서 도커 이미지를 실행하고 있다면, image 키를 사용하여 도커 허브에서 이미지를 가져올 수 있습니다.

예를 들어:

version: '3.9'
services:
  backend:
    image: your-docker-hub-id/ai-soccer-backend:latest
    ports:
      - "8080:8080"

이렇게 설정하면 docker-compose up 명령어를 실행할 때 도커 컴포즈가 자동으로 도커 허브에서 이미지를 풀(pull)하여 컨테이너를 실행합니다.

요약

1. 도커 허브 로그인: docker login 명령어를 사용하여 제공된 ID와 비밀번호로 로그인.
2. 이미지 Pull: docker pull 명령어를 사용하여 도커 허브에서 이미지를 다운로드.
3. 이미지 Push: 이미지를 도커 허브에 업로드하려면 docker tag와 docker push 명령어를 사용.
4. 도커 컴포즈 설정: docker-compose.yml에서 image 키로 도커 허브의 이미지를 사용할 수 있습니다.
5. 이렇게 제공된 도커 허브 ID와 비밀번호를 사용하여 필요한 이미지를 다운로드하거나 업로드할 수 있습니다.

OOP(Object-Oriented Programming, 객체 지향 프로그래밍)란?

OOP는 코드를 구성하는 방법에 대한 규칙 OOP는 직관적이고 데이터아 구조를 직관적으로 생각하게 해준다. Class 에는 속성, 메서드, 상속이 있다.

OOP가 필요한 이유?

• 이해하기 쉬운 코드를 위해.
• 캡슐화를 위해
• 다른 종류의 데이터와 함수들을 동일한 하나의 파일에 갖고 있는것 대신에, 데이터를 구체화 할 수 있다. (Box, Object, Bubble)
• 더 나은 방법으로 이해하기 쉽고, 보다 전문적으로 개발할 수 있다는 큰 장점을 얻을 수 있습니다.

OOP 는 확장가능성 있도록만든다. OOP 는 데이터를 수정하기 위해 어떤 함수를 넣어야 하는지를 알려준다. 명확한 경게를 만드는 것이다. 많은 딕셔너리로 다른 일을 하는 함수를 만들 필요가 없다.

Class

class 는 구조를 정의할 수 있도록 해준다. Class 는 캡슐화 하도록 도와준다. 또한 이 데이터를 기반으로 동작하는 함수를 정의할 수 있다.

class Puppy:
  pass

ruffus = Puppy() # ruffus 는 Puppy의 한 종류라는 뜻이다.

print(ruffus) 
# <__main__.Puppy object at 0x0000028B34AFE470>

Method

method는 class 안에 있는 함수이다. 그게 다다. 함수를 만들고 class 안에 넣기만 하면 끝. 즉, class 밖에 있는 것은 function(함수) 인 것이고 class 안에 있는 것은 method(메소드) 인 것이다.

class Puppy:
  def __init__():
    print("Puppy is born")

# TypeError: Puppy.__init__() takes 0 positional arguments but 1 was given
# 0 개의 arguments 를 가져야 하는데 1개의 arguments 가 온 것이다.
# method 를 가지고 있을 경우 자동으로 "기본적으로" method 의 첫번째 arguments 는 self 가 되어야 한다. 물론 self 라고 쓸 필요는 없다.

ruffus = Puppy() # Puppy를 생성한 순간에 바로 init 함수가 자동적으로 호출 된 것이다.

# method 의 첫번째 arguments 는 self다.
# 자신을 참조한다.
class Puppy:
  def __init__(self):
    print(self)
    print("Puppy is born")

ruffus = Puppy() # Puppy를 생성한 순간에 바로 __init__ 함수가 실행 된 것이다.

print(ruffus)
# <__main__.Puppy object at 0x0000022295EFED70> 메모리 주소가 출력되었다.
# Puppy is born
# <__main__.Puppy object at 0x0000022295EFED70>

이것이 왜 유용할까? 자기 자신을 커스텀 할 수 있기에 유용하다.

class Puppy:
  def __init__(self):
    self.name = "ruffus"
    self.age = 0.1
    self.breed = 'biggke'
ruffus = Puppy() # Puppy를 생성한 순간에 바로 __init__ 함수가 실행 된 것이다.
print(ruffus.name, ruffus.age, ruffus.breed)
# ruffus 0.1 biggke

다음 편에서 커스텀 하는 법을 더 알아보자 ~

아주 편하다!

mkdir -p src/{components/pages/{player,staff/{coach,supervision,office},systemAdmin,analyst,superAdmin,shared},routes,types,utils}

배포

처음 배포시

eas publish

두번째부터

eas update

인스타그램 백엔드는 python 으로 만들어져 있다. 인공지능 역시 python 으로 만들어졌다. (model 학습 등등) 금융에서 trading 같은 것도 가능하다. 과학 분석, 통계 등등 데이터의 시각적 처리도 python으로 한다. 생태계가 정말 크고 다양하다.

python은 정말 많은 것들을 할 수 있다. python 의 세계로 들어오면 다양한 것을 할 수 있다는 것이다.

간단 문법 짚고 넘어가기1

websites = ("google.com", "airbnb.com", "https://twitter.com", "facebook.com",
            "https://tiktok.com")

for website in websites:
  if not website.startswith('https://'):
     # 이게 바로 변수 넣는 법
    website = f"https://{website}"
    print(website)

# string 에 이렇게 변수를 넣을 수 있다.

간단 문법 짚고 넘어가기2

아무것도 설치하지 않고 사용할 수 있는!!

파이썬 내장 라이브러리: https://docs.python.org/3/library/index.html

pypi

거의 모든 300,000 개 이상의 프로젝트를 찾을 수 있다.

https://pypi.org/

그중에 하나를 사용해 보자

• requests python 코드에서 웹사이트로 request 보내는 것을 할 수 있게 해주는 라이브러리 이다.

from requests import get #ㅎget 은 function이다

websites = ('google.com', 'airbnb.com', 'https://twitter.com')

for website in websites: #status 코드 확인
  if not website.startswith('https://'):
    website = f"https://{website}"
    response = get(website)
    print(response.status_code)
 # 웹사이트가 성공적으로 응답함을 알 수 있다.