신입생 JavaScript 기초 교육자료 01

교내 개발 동아리 신입생 교육 자료

신입생 기존 수준

• html, js, css, jquery, php, mysql 환경에서 2년 정도 개발을 하였음
• 워드프레스를 활용한 사이트 제작 경험이 다수 있음

교육 목표

• Typescript, React, Next.js, Fastify, Electron, Flutter 기반으로 풀스택 개발을 할 수 있는 것을 목표로 함.

단계별 목표

• JS 딥다이브와 함께 병행 교육하고 있음
• 1단계 목표 - Next.js 기반에서 퍼블리싱을 할 수 있는 것을 목표로 함
• 2단계 목표 - Next.js 기반에서 API 서버에서 데이터를 불러와 보여주는 것을 목표로 함
• 3단계 목표 - Next.js 기반에서 API 서버와 CRUD 동작과 파일 업로드 동작까지 작동하는 것을 목표로 함
• 4단계 목표 - Fastify 기반의 API 서버 작성을 목표로 함
• 5단계 목표 - Electron을 활용하여 Next.js 기반의 PC 앱 작성을 목표로 함
• 6단계 목표 - Flutter를 활용하여 모바일 앱 작성을 목표로 함
• 이후는 동아리 내 프로젝트에 맞춰 진행

Node.js

• Javascript 런타임
• 서버, CLI등 다양한 환경에서 동작한다

NPM

• Node.js에서 사용할 수 있는 패키지 매니저
• PHP의 Composer, Python의 PIP 같은 도구
• npm init 으로 프로젝트의 폴더에서 초기화
• package.json 파일로 해당 프로젝트의 정보를 관리한다.
  샘플) next.js의 package.json

{
  "name": "user",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.24.1",
    "classnames": "^2.5.1",
    "dayjs": "^1.11.10",
    "next": "14.1.0",
    "next-auth": "^5.0.0-beta.13",
    "react": "^18",
    "react-dom": "^18",
    "zustand": "^4.5.1"
  },
  "devDependencies": {
    "@tanstack/react-query-devtools": "^5.24.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "sass": "^1.71.1",
    "typescript": "^5",
    "typescript-plugin-css-modules": "^5.1.0"
  }
}

• npm install 패키지명 으로 product 환경 설치
• npm install -d 패키지명으로 개발 환경 설치
• node_modules 폴더에 package.json에서 설정한 모듈들이 위치해 있음.
• package.json의 scripts에 다양한 실행 명령을 지정할 수 있음.
  npm run dev - 개발 환경 실행
  npm run build - product 배포용 파일 생성
  npm run start - product 환경 실행
  등등
• package-lock.json 파일에서 의존성 패키지들의 히스토리를 관리해줌.
  참고) https://jihyundev.tistory.com/21

Environment Variables

• 환경 변수
• .env, .dev.env, .product.env 등 환경에 맞춰 각자 설정 가능
• 서버 환경, 라이브러리, 프레임워크에 따라 각자의 규칙이 있는 경우도 있음. ( NEXT_PUBLIC_변수명 등 )

React, Next.js 기초

렌더링 방식

• 브라우저에서 출력되는 방식에 따라 크게 2가지로 나뉘고 Next.js에서는 이를 복합적으로 섞어서 사용함.
• Next.js에서는 기본적으로 서버 컴포넌트(SSR)로 동작하고 필요한 곳에 "use client";설정을 하여 CSR로 부분적으로 활용 가능

CSR

• Client Side Rendering
• 브라우저에서 js를 통해 동적으로 렌더링 됨
• SPA(Single Page Application) 작성 시 많이 활용됨
• 원하는 내용만 동적으로 업데이트 가능

SSR

• Server Side Rendering
• 서버(node.js)에서 렌더링 된 데이터를 브라우저로 전송해줌
• MPA(Multiple Page Application) 작성 시 많이 활용됨
• CSR보다 SEO에 유리하고 서버 자원을 더 많이 사용한다.

폴더 & 파일명 컨벤션

• kebab-case를 사용한다.
• 컴포넌트의 경우 _component 폴더를 필요한 곳에 생성Next.js App 라우팅
• src/app 폴더 밑에서 폴더 기반으로 라우팅 됨
• layout.tsx 는 해당 폴더 하위 전체에 적용
• page.tsx 는 해당 폴더에 적용
• 폴더명이 ()로 감싸져 있는 경우 라우팅에서는 적용되지 않으나 layout.tsx 등을 적용할 수 있음

컴포넌트

• 반복되는 요소는 컴포넌트로 분리
• 이벤트 핸들러가 필요한 경우, React hook을 사용해야 되는 경우에는 클라이언트 컴포넌트로 분리
• 컴포넌트는 필요한 곳에 _component 폴더를 생성하여 해당 폴더내에 작성

Next.js에서의 SCSS

• CSS Module 방식을 사용함
• 파일명은 tsx파일명.module.scss
  ex) gnb.tsx 이면 gnb.module.scss
• 컴포넌트나 page의 최상위 객체로 매핑함.
  tsx와 scss의 연결을 최소화하고 scss nesting을 사용하여 작성하기 위함.
• 변수는 css 변수를 사용한다. (피그마 변수와 동일하게 설정)
• mixin은 각 module.scss 파일에서 @use로 불러와서 사용.

import styles from "./gnb.module.scss";
const Gnb = () => {
    return (
        <header classNAme={styles.gnb}>
            <h1 className="logo">코딩여고</h1>
        </header>
    );
};
export default Gnb;

@use "@/styles/_mixin.scss" as *;
.gnb {
  &:global {
    width: 100%;
    z-index: 100;
    > h1.logo {
      background-color: #F00;
      color: #FFF;
      font-size: 16px;
      @include mo {
        font-size: 12px;
      }
    }
  }
}