Nex.js의 인증 라이브러리였던 NextAuth.js가 모든 JavaScript 프레임워크에서 사용할 수 있는 Auth.js로 확장되었다.

이번에 기존 Next.js 프로젝트를 마이그레이션하면서 인증 기능도 함께 Auth.js로 마이그레이션 해보았다.

auth.js 설치

npm uninstall next-auth npm install next-auth@beta

Adapter 설치

데이터베이스 어댑터를 사용하고 있는 경우 새로 설치한다.

npm uninstall @next-auth/prisma-adapter npm install @auth/prisma-adapter

환경변수 변경

.env 파일의 변수명을 바꿔준다.

// 기존
- GOOGLE_CLIENT_ID= '...'
- GOOGLE_CLIENT_SECRET= '...'
- NEXTAUTH_URL=http://localhost:3000

// 변경
+ AUTH_GOOGLE_ID= '...'
+ AUTH_GOOGLE_SECRET= '...'
+ AUTH_URL='http://localhost:3000'

구성 파일 변경

기존의 app/api/auth/[...nextauth]/route.ts의 설정을 루트 위치로 옮긴다. 기존 파일은 App Router의 라우트 핸들러로 사용된다.

이때 데이터베이스 어댑터를 사용하는 경우 한 파일에서 관리했던 설정을 두 개의 파일로 나눈다.

🤔 왜 두 개의 파일로 나눠야 할까?

💡 Auth.js는 두 가지 세션 전략을 지원한다.

1. Database 세션: 데이터베이스에 사용자 정보를 저장해서 기억하는 방식
2. JWT 세션: 사용자 정보 대신 암호화된 토큰을 주고받으면서 기억하는 방식. 데이터베이스는 거치지 않음

데이터베이스 어댑터를 사용하는 경우 Database 세션 전략이 적용된다. 하지만 데이터베이스 어댑터가 Edge 런타임과 호환되지 않으면 데이터베이스에 접근할 수 없다. Edge 런타임은 사용자와 가까운 서버에서 코드를 실행시켜 응답 속도를 높이는 환경인데, 데이터베이스에 직접 연결할 수는 없다.

따라서 설정 파일을 나누어 Edge 런타임 같은 특정 환경에서는 JWT 세션 관련 설정만 적용되도록 만들고, 다른 환경에서는 기존 Database 세션을 사용할 수 있도록 만들어야 한다.

기존 NextAuth.js (v4)

// app/api/auth/[...nextauth]/route.js

import NextAuth from "next-auth";
import { prisma } from "@/lib/prisma";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import CredentialsProvider from "next-auth/providers/credentials";
import bcrypt from "bcrypt";
import GoogleProvider from "next-auth/providers/google";
import KakaoProvider from "next-auth/providers/kakao";
import NaverProvider from "next-auth/providers/naver";

export const authOptions = {
    adapter: PrismaAdapter(prisma),
    providers: [
        CredentialsProvider({
            id: "credentials",
            name: "Credentials",
            credentials: {
                email: { label: "Email", type: "text", placehoder: "이메일" },
                password: {
                    label: "Password",
                    type: "password",
                    placehoder: "비밀번호",
                },
            },

            async authorize(credentials, req) {
                if (!credentials.email) {
                    throw new Error("아이디를 입력해주세요.");
                } else if (!credentials.password) {
                    throw new Error("비밀번호를 입력해주세요.");
                }

                try {
                    let user = await prisma.user.findUnique({
                        where: {
                            email: credentials.email,
                        },
                    });

                    if (!user) {
                        throw new Error(
                            "이메일 또는 비밀번호가 일치하지 않습니다."
                        );
                    }

                    const pwCheck = await bcrypt.compare(
                        credentials.password,
                        user.password
                    );

                    if (!pwCheck) {
                        throw new Error(
                            "이메일 또는 비밀번호가 일치하지 않습니다."
                        );
                    }
                    return user;
                } catch (err) {
                    console.log(err);
                    // try 문에서 전달된 에러 처리
                    if (
                        err.message ==
                        "이메일 또는 비밀번호가 일치하지 않습니다."
                    ) {
                        throw err;
                    }

                    // 예상치 못한 에러 처리
                    throw Error(
                        "로그인 요청 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요."
                    );
                }
            },
        }),
        KakaoProvider({
            clientId: process.env.KAKAO_CLIENT_ID,
            clientSecret: process.env.KAKAO_CLIENT_SECRET,
        }),
        NaverProvider({
            clientId: process.env.NAVER_CLIENT_ID,
            clientSecret: process.env.NAVER_CLIENT_SECRET,
        }),
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
    ],
    session: {
        strategy: "jwt",
    },
    callbacks: {
        jwt: async ({ token, user }) => {
            if (user) {
                token.sub = user.id;
            }
            return token;
        },
        session: async ({ session, token }) => ({
            ...session,
            user: {
                ...session.user,
                id: token.sub,
            },
        }),
    },
    pages: {
        signIn: "/login",
    },
    secret: process.env.SECRET,
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Auth.js (v5)

auth.config.ts: JWT 세션 관련 설정 파일. Edge 런타임에도 안전하다.

// auth.config.ts

import type { NextAuthConfig } from "next-auth";
import Google from "next-auth/providers/google";
import Kakao from "next-auth/providers/kakao";
import Naver from "next-auth/providers/naver";

export const authConfig = {
    providers: [
        Google({
            clientId: process.env.AUTH_GOOGLE_ID!,
            clientSecret: process.env.AUTH_GOOGLE_SECRET!,
        }),
        Kakao({
            clientId: process.env.AUTH_KAKAO_ID!,
            clientSecret: process.env.AUTH_KAKAO_SECRET!,
        }),
        Naver({
            clientId: process.env.AUTH_NAVER_ID!,
            clientSecret: process.env.AUTH_NAVER_SECRET!,
        }),
    ],
    pages: {
        signIn: "/login",
    },
} satisfies NextAuthConfig;

auth.ts: Database 세션 관련 설정 파일. auth.config.ts 파일을 가져와 필요한 설정을 추가한다.

// auth.ts

import { prisma } from "@/lib/prisma";
import { PrismaAdapter } from "@auth/prisma-adapter";
import NextAuth from "next-auth";
import { authConfig } from "./auth.config";
import Credentials from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";

export const { auth, handlers, signIn, signOut } = NextAuth({
    ...authConfig, // auth.config.ts에서 정의한 기본 설정 가져옴
    adapter: PrismaAdapter(prisma),
    session: {
        strategy: "jwt",
        maxAge: 60 * 60 * 24,
    },
    providers: [
        ...authConfig.providers, // auth.config.ts에 정의된 providers 가져옴
        Credentials({
            name: "Credentials",
            credentials: {
                email: { label: "Email", type: "text" },
                password: { label: "Password", type: "password" },
            },
            authorize: async (credentials, req) => {
                const { email, password } = credentials;

                try {
                    let user = await prisma.user.findUnique({
                        where: {
                            email: email as string,
                        },
                    });

                    // 유저가 없는 경우 에러 처리
                    if (!user) {
                        console.log("유저 정보 없음");
                        return null;
                    }

                    const pwCheck = await bcrypt.compare(
                        password as string,
                        user.password!
                    );

                    // 비밀번호가 일치하지 않는 경우 에러 처리
                    if (!pwCheck) {
                        console.log("비밀번호 불일치");
                        return null;
                    }

                    return {
                        id: user.id,
                        email: user.email || undefined,
                        name: user.name || null,
                    };
                } catch (err) {
                    // 예상치 못한 에러 처리
                    console.error("Authorize Error:", err);
                    return null;
                }
            },
        }),
    ],
    callbacks: {
        signIn: async () => {
            return true;
        },
        jwt: async ({ token, user }) => {
            if (user) {
                token.id = user.id;
                token.email = user.email;
            }
            return token;
        },
        session: async ({ session, token }) => {
            if (session && token) {
                session.user.id = token.id as string;
                session.user.email = token.email as string;
            }
            return session;
        },
    },
});

app/api/auth/[...nextauth]/route.ts 파일은 라우트 핸들러로 대체된다.

// app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth";

export const { GET, POST } = handlers;

서버 컴포넌트

기존 NextAuth.js (v4)

getServerSession을 사용하여 세션을 가져왔다.

import { getServerSession } from "next-auth";
import { authOptions } from "../auth/[...nextauth]/route";

export async function POST(req) {
    const session = await getServerSession(authOptions);

  // 코드
}

Auth.js (v5)

Auth.js에서 제공하는 auth() 함수를 호출하여 세션을 가져온다.

// auth.ts

export const { auth, handlers, signIn, signOut } = NextAuth({
  // 코드
})

import { auth } from "@/auth";

export async function POST(req: NextRequest) {
    const session = await auth();  

  // 코드
}

미들웨어

기존 NextAuth.js (v4)

기존에는 next-auth/jwt의 getToken을 사용해 사용자의 세션을 확인했다.

// middleware.js

import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";

const secret = process.env.SECRET;

export async function middleware(req) {
    const token = await getToken({ req, secret });
    const { pathname } = req.nextUrl;

    if (pathname.startsWith("/login") || pathname.startsWith("/signup")) {
        if (token) {
            // ...
        }
    } 
}

Auth.js (v5)

Auth.js의 auth() 함수를 사용해 사용자의 세션을 확인한다. 미들웨어는 Edge 런타임에서 실행되기 때문에 auth.config.ts 파일의 설정을 가져와 필요한 인증만 가볍게 처리한다.

// middleware.ts

import { NextResponse } from "next/server";
import { authConfig } from "./auth.config";
import NextAuth from "next-auth";

const { auth } = NextAuth(authConfig);

export default auth(async function middleware(req) {
    const { pathname } = req.nextUrl;

    if (pathname.startsWith("/login") || pathname.startsWith("/signup")) {
        if (req.auth?.user) {
            // ...
        }
    }
});

정리

• 환경변수 NEXTAUTH_ → AUTH_로 변경
• app/api/auth/[...nextauth]/route.ts 구조 변경
• JWT 세션 관련 설정 파일과 Database 세션 관련 설정 파일 분리
• 서버 컴포넌트에서 getServerSession → auth()로 세션 접근

참고

https://authjs.dev/getting-started/migrating-to-v5

작게 만들어라!

• 함수를 만드는 규칙은 '작게!'다! 함수를 만드는 둘째 규칙은 '더 작게!'다.
• if 문/else 문/while 문 등에 들어가는 블록은 한 줄이어야 한다는 의미다.
• 중첩 구조가 생길 만큼 함수가 커져서는 안 된다는 뜻이다.
• 함수에서 들여쓰기 수준은 1단이나 2단을 넘어서면 안 된다.

한 가지만 해라!

• 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한 가지만을 해야 한다.
• 지정된 함수 이름 아래에서 추상화 수준이 하나인 단계만 수행한다면 그 함수는 한 가지 작업만 한다.
• 단순히 다른 표현이 아니라 의미 있는 이름으로 다른 함수를 추출할 수 있다면 그 함수는 여러 작업을 하는 셈이다.

함수당 추상화 수준은 하나로!

• 함수 내 모든 문장의 추상화 수준이 동일해야 한다.

위에서 아래로 코드 읽기: 내려가기 규칙

• 위에서 아래로 프로그램을 읽으면 함수 추상화 수준이 한 번에 한 단계씩 낮아진다.

Switch 문

• 본질적으로 switch 문은 N 가지를 처리한다. 각 switch 문을 저차원 클래스에 숨기고 절대로 반복하지 않는 방법은 있다. 물론 다형성을 이용한다.

서술적인 이름을 사용하라!

• 함수가 작고 단순할수록 서술적인 이름을 고르기도 쉬워진다.
• 함수 이름을 정할 때는 여러 단어가 쉽게 읽히는 명명법을 사용한다.
• 그다음, 여러 단어를 사용해 함수 기능을 잘 표현하는 이름을 선택한다.
• 이름을 붙일 때는 일관성이 있어야 한다.
• 모듈 내에서 함수 이름은 같은 문구, 명사, 동사를 사용한다.

함수 인수

• 함수에서 이상적인 인수 개수는 0개(무항)다. 다음은 1개(단항)고, 다음은 2개(이항)다.

많이 쓰는 단항 형식

• 함수에 인수 1개를 넘기는 이유로 가장 흔한 경우는 두 가지다. 하나는 인수에 질문을 던지는 경우다. 다른 하나는 인수를 뭔가로 변환해 결과를 반환하는 경우다.
• 아주 유용한 단항 함수 형식이 이벤트다.

이항 함수

• 인수가 2개인 함수는 인수가 1개인 함수보다 이해하기 어렵다.
• 이항 함수가 무조건 나쁘다는 소리는 아니다. 하지만 그만큼 위험이 따른다는 사실을 이해하고 가능하면 단항 함수로 바꾸도록 애써야 한다.

삼항 함수

• 삼항 함수를 만들 때는 신중히 고려하라 권고한다.

인수 객체

• 인수가 2-3개 필요하다면 일부를 독자적인 클래스 변수로 선언할 가능성을 짚어본다.

동사와 키워드

• 단항 함수는 함수와 인수가 동사/명사 쌍을 이뤄야 한다.
• write(name) → writeField(name)

부수 효과를 일으키지 마라!

• 부수 효과는 거짓말이다. 함수에서 한 가지를 하겠다고 약속하고선 남몰래 다른 짓도 하니까.

출력 인수

• 일반적으로 우리는 인수를 함수 입력으로 해석한다.
• 객체 지향 언어에서는 출력 인수를 사용할 필요가 거의 없다. 출력 인수로 사용하라고 설계한 변수가 바로 this이기 때문이다.

명령과 조회를 분리하라!

• 함수는 뭔가를 수행하거나 뭔가에 답하거나 둘 중 하나만 해야 한다.
• 객체 상태를 변경하거나 아니면 객체 정보를 반환하거나 둘 중 하나다.

오류 코드보다 예외를 사용하라!

• 명령 함수에서 오류 코드를 반환하는 방식은 명령/조회 분리 규칙을 미묘하게 위반한다.
• 오류 코드 대신 예외를 사용하면 오류 처리 코드가 원래 코드에서 분리되므로 코드가 깔끔해진다.

Try/Catch 블록 뽑아내기

• try/catch 블록을 별도 함수로 뽑아내는 편이 좋다.
• 정상 동작과 오류 처리 동작을 분리하면 코드를 이해하고 수정하기 쉬워진다.

오류 처리도 한 가지 작업이다.

• 오류를 처리하는 함수는 오류만 처리해야 마땅하다.
• 함수에 키워드 try가 있다면 함수는 try 문으로 시작해 catch/finally 문으로 끝나야 한다는 말이다.

반복하지 마라!

• 많은 원칙과 기법이 중복을 없애거나 제어할 목적으로 나왔다.
• 객체 지향 프로그래밍은 코드를 부모 클래스로 몰아 중복을 없앤다.

구조적 프로그래밍

• 함수는 return 문이 하나여야 한다.
• 함수를 작게 만든다면 간혹 return, break, continue를 여러 차례 사용해도 괜찮다.

함수를 어떻게 짜죠?

• 소프트웨어를 짜는 행위는 여느 글짓기와 비슷하다. 먼저 생각을 기록한 후 읽기 좋게 다듬는다.
• 처음에는 길고 복잡하다. 들여쓰기 단계도 많고 중복된 루프도 많다. 인수 목록도 아주 길다. 이름은 즉흥적이고 코드는 중복된다. 하지만 그 서투른 코드를 빠짐없이 테스트하는 단위 테스트 케이스도 만든다.
• 그런 다음 코드를 다듬고, 함수를 만들고, 이름을 바꾸고, 중복을 제거한다. 메서드를 줄이고 순서를 바꾼다. 때로는 전체 클래스를 쪼개기도 한다.
• 처음부터 탁 짜내지 않는다. 그게 가능한 사람은 없으리라.

결론

• 함수는 언어에서 동사며, 클래스는 명사다.
• 대가(master) 프로그래머는 시스템을 (구현할) 프로그램이 아니라 (풀어갈) 이야기로 여긴다.
• 프로그래밍 언어라는 수단을 사용해 좀 더 풍부하고 좀 더 표현력이 강한 언어를 만들어 이야기를 풀어간다.
• 여러분이 작성하는 함수가 분명하고 정확한 언어로 깔끔하게 같이 맞아떨어져야 이야기를 풀어가기가 쉬워진다는 사실을 기억하기 바란다.

📘 나는 그동안 함수 만들기의 가장 기본인 '한 가지만 하는가'를 잘 지켰는지 돌아보게 되었다. 이번 3장에서 가장 와닿았던 부분은 '시스템을 구현하는 것이 아니라 풀어가야 하는 것'이다. 무언가를 풀려고 하기보다는 빨리 완성시키기 위해 기능이 구현되면 바로 다음 작업으로 넘어가는 일이 다반사였다. 글짓기처럼 함수를 만들 때도 여러 번의 수정 작업이 필요하다는 것을 알게 되었다. 깔끔하고 좋은 함수를 짜기 위해 여러 번의 수정과 개선을 거치는 과정이 필수적임을 깨달았다. 단순히 기능을 구현하는 것에 그치지 않고, 더 나은 구조와 가독성을 위해 함수를 지속적으로 다듬어야 한다. 기한이 있는 프로젝트에서는 이 부분을 어떻게 적용시킬 수 있을지 고민해 봐야겠다.

🔎 TypeScript

TypeScript란?

Microsoft에서 개발한 JavaScript에 타입을 붙인 언어로, JavaScript 기반의 강형(strongly typed programming language) 언어이다.

📌강형 언어 VS 약형 언어

** 강형 언어(strongly typed programming language)** 정의된 모든 상수 또는 변수에 데이터 타입이 선언되어야 하는 프로그래밍 언어. 타입 변환이 불가하다. 강형 언어는 컴파일러를 사용하는데, 문법 체크 혹은 타입 체크를 컴파일 단계에서 실행시킨다. 오류 발생 시 재빠르게 확인, 수정이 가능하다. C++, Java, Python, TypeScript 등이 강형 언어이다.
약형 언어(weakly typed programming language) 상수 또는 변수에 데이터 타입이 선언되지 않아 오류 발생 시 런타임 시점에 발생한다. 타입 변환이 가능하다. JavaScript, PHP 등이 약형 언어이다.

TypeScript로 작성된 코드는 TypeScript Complier(tsc)를 이용해 JavaScript로 컴파일된다.

// ts코드
function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20);

// js코드
function sum(a, b) {
  return a + b;
}
sum(10, 20);

TypeScript의 장점

• 에러를 사전에 검출해 준다. JavaScript를 사용한 프로젝트의 개발 단계에서 오류를 발견하지 못하고 배포했을 경우, 사용자에 의해 에러를 발견하는 위험한 상황이 발생할 수도 있다. TypeScript는 개발 단계에서 오류를 발견하여 즉각적인 수정이 가능하다.

• 코드 가이드 및 자동 완성 기능이 있다. 변수나 상수에 타입을 정확하게 명시해 주었기 때문에 타입에 맞는 메소드를 자동 완성 해주어 코드의 힌트를 얻을 수 있다.

TypeScript Compiler(tsc)

TypeScript 소스 코드를 브라우저에서 실행시키기 위해서는 JavaScript 소스 코드로 변환시켜 주어야 한다. TypeScript 소스 코드를 읽어 검증하고 JavaScript 소스 코드로 변환하는 작업을 TypeScript 컴파일러(tsc)를 통해 해준다. TypeScript 컴파일 단계에서 TypeScript의 소스코드를 JavaScript 소스코드로 변환시켜 주고, 타입 관련 구문을 제거해 준다. 또한 브라우저 호환성을 위해 구 버전의 JavaScript로 변환해 준다.

TypeScript Compiler(tsc) 설치

npm i typescript -g

컴파일 실행

tsc 파일명.ts

실행

node 파일명.js

// ts 컴파일 전
(() => {
    function hello(name: string) {
        return "Hello" + name;
    }
    console.log(hello("Yeo"));
})();

// ts 컴파일 후
(() => {
    function hello(name) {
        return "Hello" + name;
    }
    console.log(hello("Yeo"));
})();

정리

• TypeScript란 JavaScript에 타입을 붙인 언어이다.
• TypeScript Complier(tsc)를 이용해 JavaScript로 컴파일된다.
• 에러를 컴파일 단계에서 검출해 준다.
• 타입에 맞는 코드 가이드 및 자동 완성 기능이 있다.

https://www.techtarget.com/whatis/definition/strongly-typed

의도를 분명히 밝혀라

• "의도가 분명하게 이름을 지으라"
• 변수나 함수 그리고 클래스 이름은 다음과 같은 질문에 모두 답해야 한다. → 변수(혹은 함수나 클래스)의 존재 이유는? → 수행 기능은? → 사용 방법은? → 따로 주석이 필요하다면 의도를 분명히 드러내지 못했다는 말이다.
• 코드 맥락이 코드 자체에 명시적으로 드러나야 한다.

그릇된 정보를 피하라

• 그릇된 단서는 코드 의미를 흐린다.
• 나름대로 널리 쓰이는 의미가 있는 단어를 다른 의미로 사용해도 안 된다.
• 일관성이 떨어지는 표기법은 그릇된 정보다.

의미 있게 구분하라

• 동일한 범위 안에서는 다른 두 개념에 같은 이름을 사용하지 못한다. 그래서 프로그래머가 한쪽 이름을 마음대로 바꾸고픈 유혹에 빠진다.
• 컴파일러를 통과할지라도 연속된 숫자를 덧붙이거나 불용어를 추가하는 방식은 적절하지 못하다.
• 이름이 달라야 한다면 의미도 달라져야 한다.
• 불용어를 추가한 이름 역시 아무런 정보도 제공하지 못한다.
• Product라는 클래스가 있는데 다른 클래스 이름을 ProductInfo 혹은 ProductData라 부른다면 개념을 구분하지 않은 채 이름만 달리한 경우다.

발음하기 쉬운 이름을 사용하라

• 발음하기 어려운 이름은 토론하기도 어렵다.
• genymdhms(generate date, year, month, day, hour, second)라는 단어 대신 generationTimestamp를 사용하면 지적인 대화가 가능해진다.

검색하기 쉬운 이름을 사용하라

• 문자 하나를 사용하는 이름과 상수는 텍스트 코드에서 쉽게 눈에 띄지 않는다는 문제점이 있다.
• 긴 이름이 짧은 이름보다 좋다.
• 검색하기 쉬운 이름이 상수보다 좋다.
• 이름 길이는 범위 크기에 비례해야 한다.
• 변수나 상수를 코드 여러 곳에서 사용한다면 검색하기 쉬운 이름이 바람직하다.

인코딩을 피하라

• 유형이나 범위 정보까지 인코딩에 넣으면 그만큼 이름을 해독하기 어려워진다.
• 인코딩한 이름은 거의가 발음하기 어려우며 오타가 생기기도 쉽다.

자신의 기억력을 자랑하지 마라

• 코드를 읽으면서 변수 이름을 자신이 아는 이름으로 변환해야 한다면 그 변수 이름은 바람직하지 못하다.
• 문자 하나만 사용하는 변수 이름은 문제가 있다. 루프에서 반복 횟수를 세는 변수 i, j, k는 괜찮다.
• 똑똑한 프로그래머와 전문가 프로그래머 사이에서 나타나는 차이점 하나만 들자면, 전문가 프로그래머는 명료함이 최고라는 사실을 이해한다.
• 전문가 프로그래머는 자신의 능력을 좋은 방향으로 사용해 남들이 이해하는 코드를 내놓는다.

클래스 이름

• 클래스 이름과 객체 이름은 명사나 명사구가 적합하다.

메서드 이름

• 메서드 이름은 동사나 동사구가 적합하다.
• 접근자: get
• 변경자: set
• 조건자: is

기발한 이름은 피하라

• 특정 문화에서만 사용하는 농담은 피하는 편의 좋다.
• 의도를 분명하고 솔직하게 표현하라

한 개념에 한 단어를 사용하라

• 추상적인 개념 하나에 단어 하나를 선택해 이를 고수한다.
• 똑같은 메서드를 클래스마다 fetch, retrieve, get으로 제각각 부르면 혼란스럽다.
• 일관성 있는 어휘는 코드를 사용할 프로그래머가 반갑게 여길 선물이다.

말장난을 하지 마라

• 한 단어를 두 가지 목적으로 사용하지 마라.
• 여러 클래스에 add라는 메서드가 생겼다. 지금까지 구현한 add 메서드는 모두가 기존 값 두 개를 더하거나 이어서 새로운 값을 만든다고 가정하자. 새로 작성하는 메서드는 집합에 값 하나를 추가한다. 이 메서드를 add라 불러도 괜찮을까? 새 메서드는 기존 add 메서드와 맥락이 다르다. 그러므로 insert나 append라는 이름이 적당하다.
• 프로그래머는 코드를 최대한 이해하기 쉽게 짜야 한다.

해법 영역에서 가져온 이름을 사용하라

• 전산 용어, 알고리즘 이론, 패턴 이름, 수학 용어 등을 사용해도 괜찮다.
• 모든 이름을 문제 영역에서 가져오는 정책은 현명하지 못하다.
• 기술 개념에는 기술 이름이 가장 적합한 선택이다.

문제 영역에서 가져온 이름을 사용하라

• 문제 영역 개념과 관련이 깊은 코드라면 문제 영역에서 이름을 가져와야 한다.

의미 있는 맥락을 추가하라

• firstName, lastName, street, houseNumber, city, state, zipcode라는 변수가 있다. 변수를 훑어보면 주소라는 사실을 금방 알아챈다. 하지만 어느 메서드가 state라는 변수 하나만 사용한다면?
• addr라는 접두어를 추가해 addrFirstName, addrLastName, addrState라 쓰면 맥락이 좀 더 분명해진다. 물론 Address라는 클래스를 생성하면 더 좋다.
• 맥락을 개선하면 함수를 쪼개기가 쉬워지므로 알고리즘도 좀 더 명확해진다.

불필요한 맥락을 없애라

• 이름에 불필요한 맥락을 추가하지 않도록 주의한다.
• accountAddress와 customerAddress는 Address 클래스 인스턴스로는 좋은 이름이나 클래스 이름으로는 적합하지 못하다. Address는 클래스 이름으로 적합하다.

마치면서

• 좋은 이름을 선택하려면 설명 능력이 뛰어나야 하고 문화적인 배경이 같아야 한다.
• 다른 사람이 짠 코드를 손본다면 리팩터링 도구를 사용해 문제 해결 목적으로 이름을 개선하라.

📘 코딩을 할 때 쉬운 것 같으면서 어려운 일이 변수, 함수 네이밍이다. 이름만 잘 지어도 코드의 질은 훨씬 높아진다는 것을 오늘 내용을 읽으며 다시금 깨달았다. 반성하자면, 이름에 정보가 드러나지 않은 채 나만 아는 단어나 문자로 이름을 붙인 적이 많다. 이름을 잘 설정한다면 주석 처리를 하지 않고도 코드를 읽었을 때 이해가 잘될 것이다. 코드만 이해하기 쉽게 짜는 것이 아닌, 이름도 이해하기 쉽게 짜야 할 것이다. 오늘 내용을 바탕으로 네이밍에 조금 더 주의를 기울여보자!

🧐 개발자라면 누구나 협업하기 좋은 코드, 유지보수를 효율적으로 할 수 있는 코드 등 좋은 코드에 대해 끊임없이 고민할 것이다. 나 또한 더 나은 코드에 대한 고민을 하지만 정작 깨끗한 코드가 무엇인지 모르고, 깨끗한 코드를 알아보지 못한다. 좋은 코드에 대한 힌트를 얻고자 <클린 코드>를 읽고 내용 정리를 해보려 한다!

📌 추천사

• 사소한 곳에서 발휘하는 정직은 사소하지 않다.
• 책임 있는 전문가라면 프로젝트를 시작할 때 생각하고 계획할 시간을 확보해야 한다.
• 세세함에 주의를 기울이는 태도는 전문가에게 더더욱 필수적인 자질이 되었다.
• 스크럼과 애자일에 관심이 모여진 현재는 제품을 신속하게 시장에 출시하는 방법론을 강조한다. 하지만 대다수 활동은 제조가 아니라 유지보수다.

🔑 5S 철학

Lean의 토대 → 린(Lean)은 불필요한 낭비를 최소화하고 소프트웨어의 가치를 최대화하는 방식.

1. 정리, 조직, 정렬(Sort): 적절한 명명법 등과 같은 방법을 사용해 무엇이 어디에 있는지 알아야 함. 2. 정돈, 단정함, 체계화(Seiton): 코드는 누구나 예상하는 위치에 있어야 함. 3. 청소, 정리, 광내기(Seiso): 주석 혹은 주석으로 처리한 코드는 제거해야 함. 4. 청결, 표준화(Seiketsu): 일관적인 구현 스타일과 기법 필요. 5. 생활화, 규율(Shutsuke): 관례를 따르고, 자기 작품을 자주 돌아보고, 기꺼이 변경하는 규율.

• 품질은 하늘에서 뚝 떨어진 위대한 방법론이 아니라 사심 없이 기울이는 무수한 관심에서 얻어진다.
• 소프트웨어 설계에서 재작업은 가치를 가져온다.
• 코드에 정직하고, 코드의 상태에 관하여 동료들에게 정직하고, 무엇보다도, 자기 코드에 대해서 자신에게 정직하라.

📌 0. 들어가면서

• 장인정신
  • 장인에게 필요한 원칙, 패턴, 기법, 경험이라는 지식 습득
    • 열심히 일하고 연습해 지식을 몸과 마음으로 체득
• 깨끗한 코드를 작성하는 방법은 매우 어렵다. 고생을 해야 한다.

📌 1. 깨끗한 코드

코드가 존재하리라

• 앞으로 코드가 사라질 가망은 전혀 없다! → 코드는 요구사항을 상세히 표현하는 수단이니까.
• 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업 = 프로그래밍. 이렇게 명시한 결과가 바로 코드.
• 코드 = 요구사항을 표현하는 언어
• 요구사항에 더욱 가까운 언어를 만들 수도 있고, 요구사항에서 정형 구조를 뽑아내는 도구를 만들 수도 있다. 하지만 어느 순간에는 정밀한 표현이 필요하다.

나쁜 코드

• 우리 모두는 자신이 짠 쓰레기 코드를 쳐다보며 나중에 손보겠다고 생각한 경험이 있다. 우리 모두는 대충 짠 프로그램이 돌아간다는 사실에 안도감을 느끼며 그래도 안 돌아가는 프로그램보다 돌아가는 쓰레기가 좋다고 스스로를 위로한 경험이 있다.
• 다시 돌아와 나중에 정리하겠다고 다짐했었다. 나중은 결코 오지 않는다.

나쁜 코드로 치르는 대가

• 나쁜 코드는 개발 속도를 크게 떨어뜨린다.
• 나쁜 코드가 쌓일수록 팀 생산성은 떨어진다. 그러다가 마침내 0에 근접한다.
• 빨리 가는 유일한 방법은, 언제나 코드를 최대한 깨끗하게 유지하는 습관이다.
• 깨끗한 코드를 작성하려면 '청결'이라는 힘겹게 습득한 감각을 활용해 자잘한 기법들을 적용하는 절제와 규율이 필요하다. 열쇠는 '코드 감각'이다.
• '코드 감각'이 있는 프로그래머는 나쁜 모듈을 보면 좋은 모듈로 개선할 방안을 떠올린다.

💡 깨끗한 코드란?

• 논리 간단히, 의존성 최대한 줄여야 유지보수 쉬워짐. 나쁜 코드 ⇒ 깨진 창문 비유 → 창문이 깨진 건물은 누구도 상관하지 않는다는 인상을 풍긴다. 사람들도 관심을 끊는다. 창문이 더 깨져도 상관하지 않고, 마침내는 자발적으로 창문을 깬다. 창문이 깨지고 나면 쇠퇴하는 과정이 시작된다.

• 메모리 누수, 경쟁 상태, 일관성 없는 명명법 등 오류 처리 꼼꼼히 처리.

• 깨끗한 코드는 한 가지를 제대로 한다. 나쁜 코드는 너무 많은 일을 하려 애쓰다가 의도가 뒤섞이고 목적이 흐려진다.

• 단순하고 직접적, 설계자의 의도 숨기지 않음. 좋은 소설과 마찬가지로 깨끗한 코드는 해결한 문제의 긴장을 명확히 드러내야 한다.

• 작성자가 아닌 사람도 읽기 쉽고 고치기 쉬움.

• 단위 테스트 케이스와 인수 테스트 케이스가 존재.

• 인간이 읽기 좋은 코드를 작성해야 함.

• 언제나 누군가 주의 깊게 짰다는 느낌을 줌. → 누군가 시간을 들여 깔끔하고 단정하게 정리한 코드다. 세세한 사항까지 꼼꼼하게 신경 쓴 코드다.

• 모든 테스트 통과, 중복 없음, 시스템 내 모든 설계 아이디어를 표현, 클래스 / 메서드 / 함수 등을 최대한 줄임.

• 중복 줄이기, 표현력 높이기, 초반부터 간단한 추상화 고려하기.

• 코드가 그 문제를 풀기 위한 언어처럼 보인다면 아름다운 코드.

• 코드를 읽는 시간 : 코드를 짜는 시간 = 10:1을 훌쩍 넘는다. 그러므로 읽기 쉬운 코드가 매우 중요하다.

보이스카우트 규칙

캠프장은 처음 왔을 때보다 더 깨끗하게 해놓고 떠나라.

• 지속적인 개선이야말로 전문가 정신의 본질이다.

결론

• 예술에 대한 책을 읽는다고 예술가가 된다는 보장은 없다. 이 책 역시 마찬가지다. 이 책을 읽는다고 뛰어난 프로그래머가 된다는 보장은 없다. 단지 뛰어난 프로그래머가 생각하는 방식과 그들이 사용하는 기술과 기교와 도구를 소개할 뿐이다.

"연습해, 연습!"

📘 책을 읽으며 메이크업을 했던 시절이 떠올랐다. 눈썹의 대칭, 속눈썹의 각도 등 아주 사소한 부분이 전체를 좌우한다. 메이크업도 시간 내에 완성하는 것이 매우 중요한데, 시간에만 집중하고 디테일에 주의를 기울이지 않으면 완성도가 떨어지고 결국 내 실력은 발전하지 않는다. 프로그래밍도 메이크업과 닮았다는 생각이 들면서, 일정에 맞추기에 급급해 코드에 집중하기보다는 기능이 돌아가는지에만 집중했던 내 모습이 떠올라 부끄러워졌다. 물론 현업에서는 기한을 맞추는 것이 비즈니스 측면에서 매우 중요하기 때문에 꼼꼼하게 코드의 품질에만 집중하는 것은 불가할 것이다. 하지만 깨끗한 코드를 위한 디테일한 관심과 노력이 곧 나와 팀원, 나아가 팀과 회사에 도움이 될 것은 분명할 것이다. '장인 정신'은 내가 무언가를 처음 시작할 때마다 스스로에게 세뇌하는 마인드이다. 어떠한 분야의 전문가란 머리로 하는 사람이 아닌 몸과 마음으로 하는 사람이라고 생각한다. 장인 정신을 가지고 무의식에 새길 만큼 많은 시간과 노력을 들일수록 전문가에 가까워질 것이다. 이 책을 통해 장인 정신을 가진 개발자가 되기 위한 마인드를 정립할 수 있을 것 같아 기대된다. 연습하고, 연습하자!

Note The Hobby plan was deprecated on April 8th, 2024. Any Hobby databases that have not been migrated by April 8th, 2024 have been slept. Read the Hobby plan deprecation FAQ documentation more information about next steps. If you were previously on the Hobby plan and you need to migrate your data, but your database has been slept, you can wake your database one time to export your data. Follow the instructions in the Hobby plan deprecation FAQ to dump your data.

4월 8일에 Hobby 플랜이 중지되었다는 공지를 보게 되었다.... 데이터베이스 연결이 되지 않아 웹 사이트는 제대로 동작하지 않았고, 나는 이를 해결하기 위해 PlanetScale의 플랜을 업그레이드하거나 다른 해결책을 찾아야만 했다.

이리저리 찾아본 결과 Supabase를 알게 되었다. Supabase는 PostgreSQL 기반의 DB 기능을 제공해주는 백엔드 서비스 플랫폼이다. 무료로 사용할 수 있다는 점이 마음에 들었다. 무료로 제공해주는 규모는 작지만, 나의 프로젝트 또한 작은 규모이기 때문에 문제 될 점이 없다고 생각했다.

이제 PlanetScale의 데이터베이스를 Supabase로 옮겨야 하는데.. 나는 Prisma와 함께 사용하고 있어서 Prisma seeding으로 데이터베이스를 저장할까 고민했다. 하지만 유저 정보 같은 데이터들도 저장해야 했기 때문에 기존의 데이터베이스를 한꺼번에 옮기는 것이 좋을 것으로 생각했다.

PlanetScale → Supabase로 마이그레이션 하는 방법을 친절하게 설명해 주신 블로그 글을 발견했다. https://velog.io/@wjdghks963/planetscale-superbase-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98 이 글을 토대로 데이터 옮기기에 성공했다.

Supabase 시작하기

https://supabase.com

Supabase에서 회원가입을 완료하고, Dashboard의 New project를 클릭해 프로젝트를 만든다. 프로젝트명과 데이터베이스 비밀번호를 설정하면 되는데, 나는 Generate a password로 비밀번호를 설정했다.

Database 페이지에서 connect 버튼을 클릭하면 URI를 확인할 수 있다. 중간의 [YOUR-PASSWOD] 란에 아까 설정한 비밀번호를 넣어 사용하면 된다.

Prisma 수정

이제 Prisma를 재설정해보자. 위의 URI는 프로젝트의 .env 파일의 DATABASE_URL으로 저장하는데, Can't reach database server.. 이라는 연결 에러가 날 수 있다고 한다. 이를 방지하기 위해 DATABASE_URL에 넣은 URI를 복사해 DIRECT_URL 변수로 이름을 수정하고 DATABASE_URL 변수에는 포트 번호 6543으로 저장, URI 뒤에 ?pgbouncer=true 쿼리스트링을 추가해준다.

schema.prisma 파일도 수정해야 한다. mysql → postgresql로 바꾸고, directUrl = env("DIRECT_URL")을 추가한다.

npx prisma db push로 Supabase에 테이블을 생성해준다.

데이터베이스 옮기기

https://dbeaver.io/download/ DBever을 사용하여 작업을 진행했다. 로컬로 MySQL을 켜고 DBever에서 데이터베이스 연결을 했다.

새 데이터베이스 연결 버튼을 클릭해 PostgreSQL도 연결해준다.

Connection Settings 창이 뜨는데, Supabase의 데이터베이스 정보들을 넣어야 한다. Supabase 화면의 왼쪽 하단의 설정 버튼 - Database에 들어가면 Host, User 정보가 있을 것이다.

Host - Host, Username - User, Password - 데이터베이스 비밀번호를 넣어준다.

그럼 이렇게 연결되었을 것이다!

이동시킬 데이터가 있는 MySQL에서 데이터 내보내기를 한다. 데이터 내보내기 창의 다음 버튼을 클릭하면 Choose 버튼으로 내보낼 postgres를 선택할 수 있다. public 선택 후 계속 다음 버튼을 누르면 데이터가 내보내기가 완료된다.

프로젝트 재배포하기

수정된 DATABASE_URL, DIRECT_URL를 환경변수에 저장하고 재배포하면 프로젝트가 정상적으로 작동할 것이다! 👏👏👏

https://velog.io/@wjdghks963/planetscale-superbase-%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98

https://www.heropy.dev/p/bCffI2

Database Seeding은 초기 데이터 셋으로 데이터베이스를 채우는 것을 의미한다. Prisma에서 Database Seed하는 방법을 알아보려 한다.

seed.js 파일 생성

/prisma 폴더 안에 seed.js 파일을 생성한다.

seed.js 파일 작성

prisma.schema에서 User, Post 모델을 정의했다고 가정해보자. User에 새로운 Post를 추가하는 스크립트를 작성해보자.

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

// name이 Kim인 데이터가 없다면 생성
async function main() {
  const data = await prisma.user.upsert({
    where: { name: 'Kim' },
    update: {},
    create: {
      name: 'Kim',
      posts: {
        create: {
          title: 'new title',
          content: 'new content',
        },
      },
    },
  })
  console.log({ data });
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

배열 형식의 데이터로 seed를 진행할 수도 있다.

// /util/data.js

const users = [
  { name: 'User1' }, 
  { name: 'User2' }, 
  { name: 'User3' },
  { name: 'User4' }
  { name: 'User5' }
  { name: 'User6' }
  { name: 'User7' }
  { name: 'User8' }
...
]

export default users;

// /prisma/seed.js
import { PrismaClient } from "@prisma/client";
import users from "../util/data.js"

const prisma = new PrismaClient();

async function main() {
  for(let user of users) {
    const userData = await prisma.user.create({
      data: user,
  });
  console.log({ data });
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

package.json 파일 수정

package.json 파일의 "prisma" 키에 "seed" 키를 추가한다.

// package.json
...
"prisma": {
  "seed": "node prisma/seed.js"
},

Seeding

터미널에 아래 명령어를 입력하여 seed를 진행한다.

npx prisma db seed

💥참고) Next.js_import 오류

seed를 진행하는 명령어를 입력했지만, 아래와 같은 에러가 발생했다. SyntaxError: Cannot use import statement outside a module

에러를 해결하기 전에 CommnJS와 ES modules에 대해 간단히 짚어보자.

CommonJS : require(), module.exports 키워드를 사용하여 모듈에 접근 ES modules : import, export 키워드를 사용하여 모듈에 접근

발생 원인

Node.js에서는 기본적으로 CommonJS를 제공해왔다. package.json 파일에 "type" 필드가 없거나 "type": "commonjs" 가 포함되었다면, JS 파일은 CommonJS로 처리된다. import 키워드를 사용하기 위해서는 ES modules로 처리한다는 것을 명시해야 하는데, 명시하지 않았기 때문에 에러가 발생한 것이다.

📍 하지만 Next.js 12부터 ES modules를 지원한다는데 왜 문제가 발생한 것일까..? next.config.js 파일은 ES modules를 지원하지 않는다고 한다. 또한 node를 사용하여 npm 스크립트를 실행하면 이와 같은 문제가 발생할 수 있다고 한다.

해결 방법

1. package.json 파일에 "type": "module"를 추가해주거나

   {
    "name": "next_prisma",
    "version": "0.1.0",
    "type": "module",
   ...
   }

2. next.config.js → next.config.mjs로 확장자를 변경한 후 파일 안의 module.exports를 export default로 바꿔준다.

// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default nextConfig;

참고

https://www.prisma.io/docs/orm/prisma-migrate/workflows/seeding

https://www.codeconcisely.com/posts/nextjs-esm/

https://nodejs.org/api/packages.html#type

Prisma Client

Prisma Client란 데이터베이스 스키마에 맞게 자동으로 생성되는 데이터베이스 클라이언트이다. 쉽게 말해 Prisma를 통해 생성한 데이터베이스 테이블에 쉽게 접근할 수 있게 해주는 도구라고 할 수 있다.

Prisma Client 설치

아래 명령어로 PrismaClient를 설치한다.

npm install @prisma/client

설치 후 아래 명령어로 Prisma Client를 생성해준다.

prisma generate

📢 Prisma Schema에 변경 사항이 있을 때마다 npx prisma generate를 실행해 Prisma Client를 업데이트해줘야 한다.

이제 데이터베이스 접근이 필요한 곳에서 PrismaClient를 인스턴스화 하여 사용하면 된다.

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

or

const { PrismaClient } = require('@prisma/client');

const prisma = new PrismaClient();

💡 Next.js에서의 Prisma Client

Next.js의 경우 개발 환경에서 핫 리로딩(코드 변경시 변경된 코드 재실행. 파일을 저장할 때마다 자바스크립트 파일들이 재실행됨.)으로 인해 매번 새로운 PrismaClient 인스턴스가 초기화되고 데이터베이스에 대한 연결이 생성된다. 이에 따라 너무 많은 데이터베이스 연결이 생기면 데이터베이스 입출력이 매우 느려지거나 오류가 발생할 수 있다. 이를 방지하기 위해 PrismaClient를 인스턴스화하여 gloabalThis 전역 객체에 저장해서 사용한다.

// lib/prisma.js

const { PrismaClient } = require("@prisma/client");

// PrismaClient가 global에 없는 경우에만 인스턴스화
const prisma = globalThis.prisma || new PrismaClient();

// 프로덕션 상태가 아닐 때 globalThis 전역 객체에 저장
if (process.env.NODE_ENV !== "production") globalThis.prisma = prisma;

export default prisma;

Prisma Client 사용

데이터 접근이 필요한 곳에서 인스턴스화한 PrismaClient를 불러와 사용한다. Prisma Client API로 CRUD 작업을 수행할 수 있다.

Create

create 새로운 데이터 생성

const member = await prisma.member.create({
  data: {
    name: 'Kim',
    age: 20
  },
})

createMany 여러 데이터 생성

const createMembers = await prisma.member.createMany({
  data: [
    { name: 'Kim', age: 22 },
    { name: 'Lee', age: 23 },
    { name: 'Park', age: 23 },
  ],
})

Read

findUnique 특정 데이터 가져오기

// name이 Kim인 데이터 조회
const member = await prisma.member.findUnique({
  where: {
    name: 'Kim',
  },
})

findMany 여러 데이터 가져오기

// 모든 데이터 가져오기
const members = await prisma.member.findMany()

// 조건에 맞는 여러 데이터 가져오기
// age가 23인 모든 데이터 조회
const members = await prisma.member.findMany({
  where: {
    age: 23,
  },
})

Update

update where 안의 속성을 가진 데이터 업데이트

// name이 Park인 데이터의 age를 24로 업데이트
const updateMember = await prisma.member.update({
  where: {
    name: 'Park',
  },
  data: {
    age: 24,
  },
})

updateMany where 안의 속성을 가진 모든 데이터 업데이트

// age가 23 이상인 모든 데이터의 role을 ADMIN으로 업데이트
const updateMembers = await prisma.member.updateMany({
  where: {
    age: {
      gte: 23,
    },
  },
  data: {
    role: 'ADMIN',
  },
})

upsert where 안의 속성을 가진 데이터가 있다면 업데이트, 없다면 데이터 생성

// name이 Jo인 데이터가 있다면 age를 20으로 업데이트, 없다면 name이 Jo이고 age가 20데이터 생성
const upsertMember = await prisma.member.upsert({
  where: {
    name: 'Jo',
  },
  update: {
    age: 20,
  },
  create: {
    name: 'Jo',
    age: 20,
  },
})

Delete

delete where 안의 속성을 가진 데이터 삭제

// age가 22인 데이터 삭제하기
const deleteMember = await prisma.member.delete({
  where: {
    age: 22,
  },
})

deleteMany 여러 데이터 삭제

// 모든 데이터 삭제하기
const members = await prisma.member.deleteMany()

// 조건에 맞는 여러 데이터 삭제하기
// age가 23인 모든 데이터 삭제
const members = await prisma.member.deleteMany({
  where: {
    age: 23,
  },
})

정리

• Prisma Client: 데이터베이스 테이블에 쉽게 접근할 수 있게 해주는 도구
• Prisma Schema에 변경 사항이 있을 때마다 npx prisma generate를 실행하여 Prisma Client를 업데이트해야 한다.
• Next.js에서는 따로 prisma.js 파일을 만들어 Prisma Client를 인스턴스화하여 사용한다.

https://www.prisma.io/docs/orm/prisma-client/setup-and-configuration/generating-prisma-client#why-is-prisma-client-generated-into-node_modulesprismaclient-by-default

https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/nextjs-prisma-client-dev-practices

https://medium.com/@2018.itsuki/postgresql-with-next-js-and-prisma-44f66a05378a

https://www.prisma.io/docs/orm/prisma-client/queries/crud

Prisma는 직관적인 데이터 모델, 자동 마이그레이션, 타입 안전성 및 자동 완성 기능을 제공하는 차세대 ORM이다. 📌 ORM: Object-Relational Mapping. 객체로 연결해준다는 의미. 어플리케이션과 데이터베이스 연결 시 SQL 언어가 아닌 어플리케이션 개발 언어를 사용하여 데이터베이스에 접근할 수 있게 해주는 툴

Prisma 설치

아래 명령어로 Prisma를 설치한다.

npm install prisma --save-dev

설치 후 아래 명령어로 Prisma를 실행한다.

npx prisma init

실행하면 프로젝트 파일의 루트 디렉토리에 prisma 폴더와 .env 파일이 생성된다.

데이터베이스 연결

MySQL에 접속해 아래 명령어로 연결할 데이터베이스를 생성한다.

CREATE DATABASE my_db;

.env 파일에는 데이터베이스 URL을 저장할 수 있다.

DATABASE_URL="db종류://유저이름:비밀번호@HOST:포트/데이터베이스"

• 예시

  DATABASE_URL="mysql://root:1234@localhost:3306/my_db"

schema 파일 작성

prisma 폴더에 들어가면 schema.prisma 파일이 존재한다. schema.prisma 파일은 Prisma를 설정하는 메인 파일이다.

schema.prisma 파일은 크게 세 부분으로 나뉜다.

• Generators Prisma client를 기반으로 생성할 클라이언트를 지정하는 부분
• Data sources 어떤 데이터베이스와 연결할지 설정하는 부분
• Data model definition 데이터 모델 및 관계 정의하는 부분

아래와 같은 양식으로 작성한다.

// prisma/schema.prisma

generator client {
    provider = "prisma-client-js"
}

datasource db {
    provider = "mysql"
    url      = env("DATABASE_URL")
}

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  name      String
  password  String
  posts     Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  title     String?
  content   String?
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

...

각 모델은 하나의 id만 가질 수 있고 @default()로 기본값을 설정, autoincrement()로 자동 증가하는 id값을 설정할 수 있다.

String? 은 String 혹은 null이 될 수 있다는 의미이다.

User와 Post 간 1:N 관계가 있을 때 Post[]로 표현, Post 모델에서는 @relation(fields: [authorId], references: [id])를 입력한다. → Post의 authorId는 User의 id를 참조한다는 의미.

Prisma Migrate

마이그레이션을 통해 schema.prisma에서 정의한 Schema를 바탕으로 DB에 테이블을 생성할 수 있다.

npx prisma migrate dev --name init

위의 명령어로 마이그레이션을 실행하면 prisma/migrations/날짜_init/migration.sql 파일이 생성된다.

마이그레이션 실행 후, MySQL에 접속해 생성된 테이블을 확인할 수 있다.

mysql> SHOW TABLES;
+--------------------+
| Tables_in_my_db    |
+--------------------+
| _prisma_migrations |
| user               |
| post               |
+--------------------+

참조

https://www.prisma.io/docs/orm/overview/introduction/what-is-prisma

https://www.prisma.io/docs/getting-started/setup-prisma/add-to-existing-project/relational-databases-node-mysql

https://jalynne-kim.medium.com/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4-%EB%B0%B1%EC%97%94%EB%93%9C-orm-object-relational-mapping-%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%A2%85%EB%A5%98-%ED%99%9C%EC%9A%A9%EB%B0%A9%EC%95%88-c43b69028957

https://www.prisma.io/docs/orm/prisma-schema/data-model/relations

Map은 키가 있는 값이 저장된 컬렉션이다.

맵과 객체의 차이

• 객체: 키를 문자형으로 반환
• 맵: 타입 변환 없이 그대로 유지

Map의 주요 메서드

• new Map() 맵 생성
• map.set(key, value) key를 이용해 value를 저장
• map.get(key) key에 해당하는 값 반환 (key가 존재하지 않으면 undefined 반환)
• map.has(key) key가 존재하면 true, 존재하지 않으면 false 반환
• map.delete(key) key에 해당하는 값 삭제
• map.clear() 맵 안의 모든 요소 제거
• map.size 요소의 개수 반환

✔️ map[key] 를 사용할 수 있지만 map을 일반 객체처럼 취급하게 된다. map을 사용할 때는 map의 전용 메서드 set, get 등을 사용하자.

Map의 특징

Map의 key에는 자료형 제약이 없다. map은 객체를 key로 사용할 수 있다.

let john = { name: "John" };

let visitsCountMap = new Map();

visitsCountMap.set(john, 123);

console.log( visitsCountMap.get(john) ); // 123

맵 체이닝

map.set(key, value) 는 값을 설장할 뿐 아니라 자기 자신(map 객체)를 반환한다. 따라서 map.set을 '체이닝(chaining)'할 수 있다.

const map = new Map();

map
  .set('1', 'str1')
  .set(1, 'num1')
  .set(true, 'bool1');

console.log(map);
// Map(3) {'1' => 'str1', 1 => 'num1', true => 'bool1'}

Map의 요소 반복

• map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환
• map.values() – 각 요소의 값을 모은 이터러블 객체를 반환
• map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// key 대상으로 순회
for (let vegetable of recipeMap.keys()) {
  console.log(vegetable); // cucumber, tomatoes, onion
}

// value 대상으로 순회
for (let amount of recipeMap.values()) {
  console.log(amount); // 500, 350, 50
}

// [key, value] 대상으로 순회
for (let entry of recipeMap) {
  console.log(entry); // cucumber,500 ...
}


//내장 메서드 forEach 지원
recipeMap.forEach( (value, key, map) => {
  console.log(`${key}: ${value}`); // cucumber: 500 ...
});

→ 맵은 값이 삽입된 순서대로 순회가 실시된다.

Object.entries: 객체 → 맵

1. Object.entries(obj)는 객체를 [key, value] 쌍의 배열로 반환해준다.
2. new Map([...])은 그 배열을 받아서 Map 객체를 만들어준다.

   let obj = {
   name: "John",
   age: 30
   };
   

let map = new Map(Object.entries(obj)); // [ ["name","John"], ["age", 30] ]

console.log( map.get('name') ); // John

### Object.fromEntries: 맵 → 객체
`Object.fromEntries()`는 키-값 쌍의 이터러블(iterable)을 받아서 일반 객체로 변환해준다.
```js
let prices = Object.fromEntries([
  ['banana', 1],
  ['orange', 2],
  ['meat', 4]
]);

// now prices = { banana: 1, orange: 2, meat: 4 }

console.log(prices.orange); // 2

→ 주로 API나 다른 코드에서 Map으로 데이터를 관리하다가, 최종적으로 JSON으로 변환하거나 일반 객체로 사용하고 싶을 때 사용한다.

const map = new Map();
map.set('id', 1);
map.set('title', 'Hello');

const obj = Object.fromEntries(map);

// 이 obj는 이제 JSON.stringify(obj)처럼 쉽게 직렬화 가능

Set

Set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다. 키가 없는 값이 저장된다.

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// john, mary 여러 번 추가
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 중복 x
console.log( set.size ); // 3

for (let user of set) {
  console.log(user.name); // // John, Pete, Mary
}

Set의 주요 메서드

• new Set(iterable) – 셋 생성
• set.add(value) – 값 추가, 셋 자신 반환
• set.delete(value) – 값 제거. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false 반환
• set.has(value) – 셋 내에 값이 존재하면 true, 아니면 false 반환
• set.clear() – 셋 안의 모든 요소 제거
• set.size – 요소의 개수 반환

Set의 값 반복

• for...of 문

  const mySet = new Set([1, 2, 3]);
  

for (const value of mySet) { console.log(value); // 1, 2, 3 }

- `forEach()` 메서드
```js
set.forEach((value, valueAgain, set) => {
   console.log(`value: ${value}, valueAgain: ${valueAgain}`);
   // value: a, valueAgain: a
   // value: b, valueAgain: b
   // value: c, valueAgain: c

  // value, valueAgain은 같음
});

→ Map객체의 forEach()는 (value, key, map) 형태이다. 하지만 Set은 key 없이 value만 존재하기 때문에 Set의 forEach(callbackFn)은 내부적으로 callbackFn(value, value, set) 형태로 호출된다.

• set.keys() – 셋 내의 모든 값 포함하는 이터러블 객체 반환
• set.values() – set.keys와 동일한 작업. 맵과의 호환성을 위해 만들어진 메서드
• set.entries() – 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체 반환. 맵과의 호환성을 위해 만들어졌다.

정리

• Map은 키가 있는 값이 저장된 컬렉션이다.
• Map의 key에는 자료형 제약이 없다.
• map.set(key, value) key를 이용해 value를 저장
• map.get(key) key에 해당하는 값 반환 (key가 존재하지 않으면 undefined 반환)
• map.delete(key) key에 해당하는 값 삭제
• map.size 요소의 개수 반환
• Set은 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다.
• set.add(value) – 값 추가, 셋 자신 반환
• set.delete(value) – 값 제거
• set.size – 요소의 개수 반환

모던 자바스크립트 Deep Dive (도서) https://ko.javascript.info/map-set

C++이나 Java 같은 클래스 기반 객체지향 프로그래밍 언어는 클래스를 통해 상속한다. 하지만 자바스크립트는 클래스가 없고, 프로토타입 기반으로 객체 복제를 통해 객체를 생성한다.

ES6에서 자바스크립트의 클래스가 도입되었는데, 클래스 기반 객체지향 프로그래밍 언어와 매우 비슷한 문법 구조를 가지고 있다. 하지만 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있는 문법적 설탕이라고도 한다.

클래스를 통해 여러 객체를 만들 수 있는데, 쉽게 말해 클래스 = 붕어빵 틀, 객체 = 붕어빵이라고 할 수 있다.

생성자 함수와 클래스 문법의 차이

// 생성자 함수
function User({name, age}) {
  this.name = name;
  this.age = age;
}
// prototype에 메서드 추가
User.prototype.sayHello = function() {
  return `Hello, ${this.name}!`;
};

const user = new User({name: 'Lee', age: 13});
console.log(user.sayHello());

// Hello, Lee!

클래스는 class 키워드를 사용해 생성하고, new 연산자와 함께 호출하면 내부에서 정의한 메서드가 들어있는 객체가 생성된다.

// class 문법
class User {
  // constructor 키워드로 생성자 정의
  constructor({name, age}) {
    this.name = name;
    this.age = age;
  }
  // prototype에 메서드 추가
  sayHello() {
    return `Hello, ${this.name}!`;
  }
}

const user = new User({name: 'Lee', age: 13});
console.log(user.sayHello());

// Hello, Lee!

클래스 정의

클래스 선언

클래스를 선언하기 위해 class 키워드와 클래스 이름(예시에서 User)을 함께 사용한다. 클래스 내부의 constructor 메서드는 클래스 안에 한 개만 존재할 수 있다. constructor 내부에서 인스턴스의 생성 및 초기화가 이루어진다.

class User{
  constructor({name, age}) {
    this.name = name;
    this.age = age;
  }
}

메서드 정의

• 프로토타입 메서드

생성자 함수에서 프로토타입 메서드를 생성하기 위해 명시적으로 prototype 프로퍼티에 추가해야 하지만, 클래스에서 정의한 메서드는 prototype 프로퍼티에 추가하지 않아도 자동으로 프로토타입 메서드가 된다.

class User{
  constructor({name, age}) {
    this.name = name;
    this.age = age;
  }
  // 프로토타입 메서드
  sayHello() {
    return `Hello, ${this.name}!`;
  }
}

const user = new User({name: 'Lee', age: 13});
console.log(user.sayHello());

// Hello, Lee!

• 정적 메서드

정적 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드이다. 클래스에서 static 키워드를 붙이면 정적 메서드가 된다. 정적 메서드는 프로토타입이 아닌 클래스에 바인딩 된 메서드가 되기 때문에 인스턴스로 호출하지 않고 클래스로 호출한다.

class User{
  constructor({name, age}) {
    this.name = name;
    this.age = age;
  }
  // 프로토타입 메서드
  sayHello() {
    return `Hello, ${this.name}!`;
  }
  // 정적 메서드
  static welcome() {
    return 'Welcome to our shop.';
  }
}

const user = new User({name: 'Lee', age: 13});
console.log(user.sayHello()); // Hello, Lee!

// 정적 메서드를 인스턴스로 호출하면 에러
console.log(user.welcome()); // Uncaught TypeError: user.welcome is not a function

// 정적 메서드는 인스턴스 없이 호출
console.log(User.welcome()); // Welcome to our shop.

프로토타입 메서드와 정적 메서드는 다음과 같은 차이가 있다.

• 자신이 속해 있는 프로토타입 체인이 다르다.
• 프로토타입 메서드는 인스턴스로 호출하고, 정적 메서드는 클래스로 호출한다.
• 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있지만, 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없다.

클래스 상속

extends 키워드

extends 키워드는 클래스의 자식 클래스를 생성하기 위해 사용된다.

// 수퍼(부모)클래스
class Parent{}

// 서브(자식)클래스
// extends 키워드로 상속
class Child extends Parent{}

상속을 통해 확장된 클래스를 서브 클래스라 하고, 서브 클래스에게 상속한 클래스를 수퍼 클래스라 한다. 프로토타입 메서드, 정적 메서드 모두 상속이 가능하다. 자식 클래스에서 부모 클래스의 속성, 메서드를 사용할 수 있게 된다.

class Animal{
  constructor(name, age) {
    this.name = name;
  }

  sleep() {
    return `${this.name} is sleeping.`;
  }
}

// Animal로부터 상속
class Cat extends Animal{
  cry() {
    return `${this.name} is crying.`;
  }
}

let myCat = new Cat('My cat');

console.log(myCat.sleep()); // My cat is sleeping.
console.log(myCat.cry()); // My cat is crying.

extends 키워드는 프로토타입 기반으로 동작한다. 위의 예제에서 Cat.prototype.[[Prototype]]을 Animal.prototype으로 설정하고, Cat.prototype에서 메서드를 찾지 못하면 Animal.prototype에서 메서드를 가져온다.

super 키워드

super 키워드는 함수처럼 호출할 수도 있고, this와 같이 식별자처럼 참조할 수 있는 키워드이다. super 키워드를 사용하면 부모 클래스의 생성자 함수나 메서드를 호출할 수 있다. 자식 클래스는 자신이 직접 인스턴스를 생성하지 않고 자식 클래스의 생성자 함수에서 super을 호출하여 부모 클래스에게 인스턴스 생성을 위임한다. 자식 클래스의 생성자 함수에서 super을 호출하기 전에는 this를 참조할 수 없다.

class Animal{
  constructor(name, age) {
    this.name = name;
  }
}

class Cat extends Animal{
  constructor(name) {
    super(name); // super 함수 호출로 부모 클래스 생성자 함수 호출
    this.age = age;
  }
}

let myCat = new Cat('My cat', 5);

console.log(myCat.name); // My cat
console.log(myCat.age); // 5

정리

• 클래스 = 붕어빵 틀, 객체 = 붕어빵
• class 키워드를 사용해 클래스 생성하고, new 연산자와 함께 호출하면 내부에서 정의한 메서드가 들어있는 객체가 생성된다.
• constructor 내부에서 인스턴스의 생성 및 초기화가 이루어진다.
• extends, super 키워드를 사용하여 상속한다.

모던 자바스크립트 Deep Dive (도서) https://ko.javascript.info/class https://ko.javascript.info/class-inheritance https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

클로저는 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 외부 함수의 실행이 종료된 후에도 중첩 함수는 외부 함수의 변수를 기억하여 참조할 수 있다. 이러한 중첩 함수를 클로저라고 한다.

📌 렉시컬 스코프 함수가 정의된 위치에 의해 상위 스코프가 결정되는 스코프

함수 객체의 내부 슬롯 [[Environment]]

함수 객체를 생성할 때 자신이 정의된 위치에 의해 결정된 상위 스코프의 참조를 자신의 내부 슬롯 [[Environment]]에 저장한다.

const x = 1;

function funcOne() {
    const x = 5;

// 함수의 호출 위치와 상위 스코프는 아무런 관계가 없다.
    funcTwo();
};

function funcTwo() {
  // 함수 funcTwo는 자신의 상위 스코프를 내부슬롯 [[Environment]]에 저장하여 기억한다.
 console.log(x);
};

funcOne(); // 1
funcTwo(); // 1

클로저와 렉시컬 환경

외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다.

const x = 1;

function outer() {
    const x = 5;

      // 중첩 함수 inner은 클로저
      const inner = function() {
      console.log(x);
    };
    return inner;
};

// 함수 outer을 호출하면 중첩 함수 inner을 반환하고, outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거된다.
const innerFunc = outer();
innerFunc(); // 5

위의 예제에서, 함수 outer의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만, outer의 렉시컬 환경까지 소멸하는 것은 아니다. 함수 outer의 렉시컬 환경은 함수 inner의 [[Environment]] 내부 슬롯에 의해 참조되고 있고 inner은 전역 변수 innerFunc에 의해 참조되고 있다. 📢 클로저에 의해 참조되는 상위 스코프의 변수(예제에서 outer 함수의 x)를 자유 변수라고 부른다. 클로저란 자유 변수에 묶여있는 함수라고도 할 수 있다.

클로저의 활용

상태(state)를 안전하게 은닉, 특정 함수에게만 상태 변경 허용 함수가 호출될 때마다 횟수를 누적하여 출력하는 카운터를 만들어보자.

let num = 0;

const increase = function() {
    return num++;
};

console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3

카운트 상태(num)는 increase 함수가 호출되기 전까지 변경되지 않아야 하고, 카운트 상태(num)는 increase 함수만이 변경할 수 있어야 한다. 하지만 위의 예제에서 카운트 상태가 전역에서 관리되고 있으므로 누구나 접근할 수 있고 변경할 수 있는 위험이 있다.

// 카운트 상태 변경 함수
const increase = (function() {
      let num = 0;
      // 클로저
    return function() {
        return num++
    };
}());

console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3

위의 예제에서, 즉시 실행 함수가 반환한 클로저는 카운트 상태를 유지하기 위한 자유 변수 num을 어디서 호출하든지 참조하고 변경할 수 있다. 또한 num 변수는 은닉된 private 변수이므로 의도되지 않은 변경을 걱정하지 않아도 된다.

정리

• 클로저는 외부 함수의 실행이 종료된 후에도 외부 함수의 변수를 기억하여 참조할 수 있는 함수이다.
• 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다.
• 클로저는 상태(state)를 은닉하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다.

참고

모던 자바스크립트 Deep Dive (도서)

반복문(Loop)

for 문

for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.

for(초기화식; 조건식; 증감식) {
    조건식이 참인 경우 반복할 코드;
}

for 문의 괄호 안에는 세미콜론으로 구분되는 세 가지 항목이 있다.

for(let i = 0; i < 2; i++) {
    console.log(i);
}

// 0
// 1

위의 예시를 살펴보면, 가장 먼저 초기화식인 let i = 0; 이 실행된다. 그 후 i < 2;라는 조건식이 실행되는데, 현재 i의 값이 0이므로 조건식의 결과는 true이므로 console.log(i) 코드가 실행된다. 코드 실행이 종료되면 증감식 i++가 실행되어 i의 값은 1이 된다. 이렇게 반복하다가 조건식의 평가가 false일 때, 즉 i의 값이 2가 될 때 for 문은 종료된다.

📌 for 문에서 초기화식, 조건식, 증감식 모두 생략한다면 무한루프가 된다.

for(;;) {
    // 코드가 무한 반복됨
}

👉 중첩 for 문

for 문 안에 for 문을 중첩해서 사용할 수 있다.

for(let i = 1; i < 10; i++) {
    for(let j = 1; j < 10; j++) {
        console.log(i, j, i*j);
    }
}

// 1 1 1
// 1 2 2
// 1 3 3
// 1 4 4
// 1 5 5
// 1 6 6
// 1 7 7
// 1 8 8
// 1 9 9
// ...
// 9 7 63
// 9 8 72
// 9 9 81

예시로 구구단을 출력해보았다.    1. 첫 번째 for 문의 조건식을 실행시켜 두 번째 for 문으로 들어가고, 두 번째 for 문이 실행된다.    2. 두 번째 for 문의 조건이 모두 완료되면 첫 번째 for 문으로 돌아가고, 두 번째 for 문의 조건식은 초기화된다.    3. 이 과정을 반복하여 첫 번째 for 문의 조건식이 false가 되면 for 문은 종료된다.

while 문

while 문은 조건식의 평가 결과가 true이면 코드 블록을 반복 실행한다. for 문은 반복 횟수가 명확할 때 사용하고 while 문은 반복 횟수가 불명확할 때 주로 사용한다.

while(조건식) {
    // 조건식이 참이면 반복할 코드
}

조건문의 평가 결과가 false가 되면 코드 블록을 실행하지 않고 종료한다.

let i = 0;

while(i < 3) {
    console.log(i);
      i++;
}

// 0
// 1
// 2

📌 while 문에서 조건식의 평가 결과가 언제나 true이면 무한루프가 된다.

while(true) {
    // 코드가 무한 반복됨
}

무한루프에서 탈출하려면 코드 블록 내에 if 문으로 탈출 조건을 만들고 break 문을 사용한다.

let i = 0;

while(true) {
  console.log(i);
  i++;
  if(i === 3) break; // i의 값이 3이 되면 반복문을 빠져나온다.
}

// 0 
// 1
// 2

do... while 문

do... while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다.

do {
    // 실행할 코드
} while(조건식);

코드가 먼저 실행되고, 조건식의 평가 결과가 true인 동안에 코드는 계속 실행된다. do... while 문은 조건식의 평가 결과에 상관없이 코드 블록을 최소한 한 번이라도 실행하고 싶을 때 사용한다.

let i = 0;

do {
  console.log(i);
  i++; // i의 값이 3보다 작으면 계속 실행된다.
} while(i < 3);

// 0 
// 1
// 2

반복문 탈출하기 - break 문

while 문에서 살펴봤듯이 break 문은 코드 블록을 탈출한다. 중첩 for 문의 내부 for 문에서 break를 실행하면 내부 for 문을 탈출하고 외부 for 문으로 진입하는데, 외부 for 문까지 탈출하려면 레이블 문을 사용한다. 🔎 레이블 문: 식별자가 붙은 문

outer: for(let i = 0; i < 3; i++) {
    for(let j = 0; j < 3; j++) {
        if(i + j === 3) break outer; // i + j === 3이면 outer 탈출
          console.log(`${i}, ${j});
    }
}

console.log('Done!');

// 0, 0
// 0, 1
// 0, 2
// 1, 0
// 1, 1
// Done!

📢 레이블 문은 중첩 for 문을 탈출할 때 유용하지만 그 밖의 경우에는 권장하지 않는다. 레이블 문을 사용하면 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 커지기 때문이다.

다음 반복으로 넘어가기 - continue 문

continue 문은 현재 진행 중인 반복을 멈추고 바로 다음 반복을 실행시킨다. break 문처럼 반복문을 탈출하지는 않는다.

for (let i = 0; i < 5; i++) {
    if (i === 3) continue; // i의 값이 3이면 실행을 중단하고 반복문의 증감식으로 이동한다.
      console.log(i);
}

// 0
// 1
// 2
// 4

배열 메서드

forEach

forEach 메서드는 Array(배열) 객체에서 사용할 수 있는 메서드이다. 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다.

const numbers = [1, 2, 3];
const result = [];

// numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출
numbers.forEach(item => result.push(item + 1));
console.log(result);

// [2, 3, 4]

forEach 메서드는 콜백 함수를 호출할 때 배열의 요소값과 인덱스, 호출한 배열을 순차적으로 전달한다.

const number = [1, 2, 3];

numbers.forEach((item, index, arr) => {
    console.log(item, index, arr);
});

// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

forEach 메서드는 break, continue 문을 사용할 수 없고, 배열의 모든 요소를 순회한다.

map

map 메서드는 forEach 메서드처럼 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 둘의 차이점은 forEach 메서드는 단순히 반복문을 대체하기 위한 메서드이고, map 메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성한다는 점이다.

// map 사용
const numbers = [1, 2, 3];

const result = numbers.map(item => item + 1);
console.log(result);

// [2, 3, 4]

// forEach 사용
const numbers = [1, 2, 3];

const result = numbers.forEach(item => item + 1);

console.log(result);

// undefined

같은 코드를 map 메서드와 forEach 메서드를 사용하여 출력하였다. map 메서드는 배열의 모든 요소에 콜백 함수를 실행시켜 새로운 배열을 반환한다는 점을 알 수 있다.

filter

filter 메서드 또한 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. 하지만 콜백 함수의 반환값이 true인 요소들만 추출한 새로운 배열을 반환한다.

const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers.filter(item => item % 2 === 0);
console.log(result);

// [2, 4, 6]

reduce

reduce 메서드는 콜백 함수의 반환값을 다음 순회 시 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.
reduce 메서드는 첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는데, 콜백 함수에는 초기값(콜백 함수의 이전 반환값), 처리할 요소값, 인덱스, reduce 메서드를 호출한 배열이 전달된다.

const result = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);

console.log(result);

// 10 (0(초기값) + 1 + 2 + 3 + 4)

reduce 메서드의 두 번째 인수인 초기값은 생략할 수도 있지만, 에러가 발생할 수 있으니 언제나 초기값을 전달하는 것이 안전하다.

객체 프로퍼티 열거

for ...in 문

객체의 모든 프로퍼티를 순회하며 열거하려면 for ...in 문을 사용한다.

const city = {
    name : 'Seoul',
      code : 11
}

// city 객체의 프로퍼티를 모두 순회하면서 프로퍼티 키를 key 변수에 할당한 후 코드를 실행
for (const key in city) {
    console.log(`${key} : ${city[key]}`);
}

// name : Seoul
// code : 11

for ...in 문은 객체의 프로퍼티 뿐만 아니라 상속받은 프로토타입의 프로퍼티까지 열거한다. 하지만 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 true인 프로퍼티만 순회하며 열거한다.

객체 메서드

객체 자신의 고유 프로퍼티만 열거하기 위해서는 Object.keys/values/entries 메서드를 사용한다.

Object.keys

Object.keys 메서드는 객체 자신의 열거 가능한 프로퍼티 키를 배열로 반환한다.

const city = {
    name : 'Seoul',
      code : 11
}

console.log(Object.keys(city));

//  ['name', 'code']

Object.values

Object.values 메서드는 객체 자신의 열거 가능한 프로퍼티 값을 배열로 반환한다.

const city = {
    name : 'Seoul',
      code : 11
}

console.log(Object.values(city));

//  ['Seoul', 11]

Object.entries

Object.entries 메서드는 객체 자신의 열거 가능한 프로퍼티 [키, 값]을 배열로 반환한다.

const city = {
    name : 'Seoul',
      code : 11
}

console.log(Object.entries(city));

// [['name', 'Seoul'], ['code', 11]]

이터러블 순회

for ...of 문

for ...of 문은 ES6에서 도입된 문법으로 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. for ...of 문은 이터러블 객체(자료를 반복할 수 있는 객체)에서만 사용할 수 있다. 배열, 문자열, Map, Set 등이 이터러블 객체이다.

const number = [1, 2, 3];

for (const item of number) {
      //item 변수에 1, 2, 3이 할당
      console.log(item);
}

// 1
// 2
// 3

정리

• for 문 : 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행
• while 문 : 조건식의 평가 결과가 true이면 코드 블록을 반복 실행. 반복 횟수가 명확할 때 for 문 사용, 반복 횟수가 불명확할 때 while 문 사용
• do... while 문 : 코드 블록을 먼저 실행하고 조건식을 평가. 조건식의 평가 결과에 상관없이 코드 블록을 최소한 한 번이라도 실행하고 싶을 때 사용
• break 문 : 코드 블록 탈출 / continue 문 : 현재 진행 중인 반복 멈추고 바로 다음 반복 실행
• forEach : 배열 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출
• map : 배열의 요소값을 다른 값으로 매핑한 새로운 배열 생성
• filter : 콜백 함수의 반환값이 true인 요소들만 추출한 새로운 배열을 반환
• reduce : 콜백 함수의 반환값을 다음 순회 시 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환
• for ...in 문 :객체의 모든 프로퍼티를 순회하며 열거
• Object.keys : 객체의 프로퍼티 키를 배열로 반환
• Object.values : 객체의 프로퍼티 값을 배열로 반환
• Object.entries : 객체의 프로퍼티 [키, 값]을 배열로 반환
• for ...of 문 : 이터러블 객체(자료를 반복할 수 있는 객체)에서만 사용

참고

모던 자바스크립트 Deep Dive (도서)

https://ko.javascript.info

https://developer.mozilla.org

자바스크립트에서 조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정한다.

if문

if문은 괄호 안에 들어가는 조건이 true이면 코드 블록이 실행된다.

if(조건식){
  // 조건이 참이면 실행될 코드
}

조건이 참인 경우 실행할 코드가 여러개라면, 중괄호{}로 감싸준다.

if(name === 'kim'){
  alert('안녕하세요.');
  alert('반갑습니다.');
}

📢 조건이 참인 경우 실행할 코드가 한 줄 뿐이라면 중괄호를 생략할 수 있지만, 코드의 가독성을 위해 중괄호로 감싸는 것을 추천한다.

if ... else 문

if ... else문은 조건식의 평가 결과가 true일 경우 if문의 코드 블록이 실행되고, false인 경우 else문의 코드 블록이 실행된다.

if(조건식){
  // 조건이 참이면 실행될 코드
} else {
  // 조건이 거짓이면 실행될 코드
}

if(x % 2){ // x값이 2로 나누어질 경우
  console.log('짝수');
} else { // x값이 2로 나누어지지 않은 경우
  console.log('홀수');
}

조건 여러개를 처리해야 할 경우 else if 문을 사용한다. if문과 else문은 한 번만 사용 가능하지만 else if문은 여러 번 사용할 수 있다.

if(조건식1){
  // 조건식1이 참이면 실행될 코드
} else if(조건식2) {
  // 조건식2가 참이면 실행될 코드
} else {
  // 조건식1, 조건식2 모두 거짓이면 실행될 코드
}

if(x > 0){ // x값이 0보다 클 경우
  console.log('양수');
} else if(x < 0) { // x값이 0보다 작을 경우
  console.log('음수');
} else { // x값이 0보다 크지도 작지도 않을 경우
  console.log('영');
}

조건부 연산자 '?'

if ... else 문은 조건부 연산자 '?'를 사용해 나타낼 수 있다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

// x가 2로 나누어지면 짝수, 나누어지지 않으면 홀수
(x % 2) ? '짝수' : '홀수';

📢 단순히 값을 결정하여 변수에 할당하는 경우 조건부 연산자를 사용하는 편이 가독성이 좋다. 하지만 여러 줄의 문이 필요하다면 if ... else 문을 사용하는 편이 가독성이 좋다.

switch문

복수의 if 조건문은 switch 문으로 바꿔 사용할 수 있다. switch 문은 하나 이상의 case 문으로 구성되어 있다. 주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문으로 이동한다. 일치하는 case 문이 없다면 default 문으로 이동하는데, default 문은 필수는 아니다.

switch(표현식) {
  case 표현식1:
    switch 문의 표현식과 표현식1이 일치하면 실행될 문;
    break;
  case 표현식2:
    switch 문의 표현식과 표현식2이 일치하면 실행될 문;
    break;
  default:
    switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
}

let month = 5;
let thisMonth;

switch(month) {
  case 1: thisMonth = 'Jan';
    break;
  case 2: thisMonth = 'Feb'
    break;
  case 3: thisMonth = 'Mar'
    break;
  case 4: thisMonth = 'Apr'
    break;
  case 5: thisMonth = 'May'
    break;
  case 6: thisMonth = 'Jun'
    break;
  case 7: thisMonth = 'Jul'
    break;
  case 8: thisMonth = 'Aug'
    break;
  case 9: thisMonth = 'Sep'
    break;
  case 10: thisMonth = 'Oct'
    break;
  case 11: thisMonth = 'Nov'
    break;
  case 12: thisMonth = 'Dec'
    break;
  default: thisMonth = 'Invalid month';
}

console.log(thisMonth); // Jun

switch 문에서 break 문을 사용하지 않으면 조건에 부합하는지 확인하지 않고 다음 case 문으로 연이어 이동하기 때문에 break 문을 꼭 사용해야 한다.

참고

모던 자바스크립트 Deep Dive (도서)

https://ko.javascript.info/ifelse

https://ko.javascript.info/switch

https://developer.mozilla.org

객체란 키(key)와 값(value)으로 구성된 프로퍼티의 집합이다. 여러 속성(property)을 하나의 변수에 담는 데이터 구조이다. 자바스크립트에서는 함수, 배열 등 대부분의 것들이 객체이다.

let member = {
    name: 'Kim',
      age: 20
};

member라는 변수 안에 { }를 사용하여 객체를 표현하였다.

프로퍼티

위의 코드에서 객체 member의 프로퍼티는 name: 'Kim' 과 age: 20이다. 객체의 상태를 나타내는 값을 프로퍼티라 하며, 콤마(,)로 구분한다.

키와 값

콜론(:)을 기준으로 왼쪽은 키(key), 오른쪽은 값(value)이다. 위의 코드에서 name과 age는 키(key)이고, 'Kim'과 20은 값(value)이다.

프로퍼티 키

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 식별자 역할을 한다. 프로퍼티 키에는 빈 문자열을 포함한 모든 문자열 또는 심벌 값을 사용할 수 있다.

• 키는 식별자 네이밍 규칙을 따르지 않는다면 반드시 따옴표('')를 사용해야 한다.

let member = {
    firstName: 'Jenny',
      'last-name': 'Kim'
};

• 따옴표를 생략한다면 자바스크립트 엔진은 last-name을 - 연산자가 있는 표현식으로 해석한다.

let member = {
    firstName: 'Jenny',
      last-name: 'Kim'  // Uncaught SyntaxError: Unexpected token '-'
};

• 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 예를 들어, 숫자 리터럴을 사용하면 문자열로 반환된다.

let number = {
    0: 10,
      1: 20,
      2: 30
};

console.log(number)  // {0: 10, 1: 20, 2: 30}

• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

let member = {
    name: 'Kim',
      name: 'Lee'
};

console.log(member)  // {name: 'Lee'}

📢 var, function과 같은 예약어를 프로퍼티 키로 사용해도 되지만, 예상치 못한 에러가 발생할 수 있으므로 권장하지 않는다.

프로퍼티 값

프로퍼티 값은 문자열, 숫자, 함수 등 자바스크립트에서 사용할 수 있는 모든 값이 들어올 수 있다. 이 중 프로퍼티 값이 함수일 경우 메서드라 부른다.

let member = {
    name: 'Kim',
      message: function(){  // 여기서 message가 메서드
        console.log('안녕하세요');
    }
};

객체 생성

자바스크립트에서의 객체 생성 방법은 여러가지가 있다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스

let member = {};  // 객체 리터럴
let member = new Object();  // Object 생성자 함수

이 방법 중 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다.

프로퍼티 접근

프로퍼티에 접근하는 방법은 .를 사용하는 마침표 표기법(dot notation)과 []를 사용하는 대괄호 표기법(bracket notation)이 있다.

마침표 표기법(dot notation)

let member = {
    name: 'Kim'
};

console.log(member.name); // Kim

대괄호 표기법(dot notation) 대괄호 표기법에서 대괄호 내부에 지정하는 프로퍼티 키는 반드시 따옴표('')로 감싼 문자열이어야 한다. 따옴표로 감싸지 않으면 식별자로 해석하기 때문이다.

let member = {
    name: 'Kim'
};

console.log(member['name']); // Kim

console.log(member[name]); // undefined

프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름이라면, 프로퍼티 접근 시 반드시 대괄호 표기법을 사용해야 한다.

let member = {
    'last-name': 'Kim'
};

console.log(member.'last-name'); // Uncaught SyntaxError: Unexpected string
console.log(member.last-name); // NaN

console.log(member[last-name]); // Uncaught ReferenceError: last is not defined
console.log(member['last-name']; // Kim

📍 member.last-name을 실행하면 자바스크립트 엔진은 먼저 member.last를 평가한다. member 객체에는 프로퍼티 키가 last인 프로퍼티가 없기 때문에 member.last는 undefined로 평가된다. 다음으로 자바스크립트 엔진은 name이라는 식별자를 찾는데, 어디에도 name이라는 식별자 선언이 없으므로 ReferenceError가 발생한다. 그런데 브라우저 환경에는 name이라는 전역 변수가 암묵적으로 존재하는데, 전역변수 name의 기본값은 빈 문자열이다. 따라서 member.last-name은 undefinded-''와 같으므로 NaN을 출력한다.

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

let member = {
    name: 'Kim'
};

member.name = 'Lee';

console.log(member); // {name: 'Lee'}

프로퍼티 값 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.

let member = {
    name: 'Kim'
};

member.age = 20;

console.log(member); // {name: 'Kim', age: 20}

프로퍼티 값 삭제

delete 연산자를 사용하여 프로퍼티 값을 삭제한다. 이 때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 존재하지 않는 프로퍼티를 삭제해도 에러가 나지 않는다.

let member = {
    name: 'Kim'
};

member.age = 20;

delete member.age;

delete member.number; // 에러 X

console.log(member); // {name: 'Kim'}

정리

• 객체란 키(key)와 값(value)으로 구성된 프로퍼티의 집합이다.

• 프로퍼티 키에는 빈 문자열을 포함한 모든 문자열 또는 심벌 값을 사용할 수 있다.

• 프로퍼티 값은 문자열, 숫자, 함수 등 자바스크립트에서 사용할 수 있는 모든 값이 들어올 수 있다.

• 프로퍼티 값이 함수일 경우 메서드라 부른다.

• 마침표 표기법 obj.property

• 대괄호 표기법 obj['property']. 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름이라면, 프로퍼티 접근 시 반드시 대괄호 표기법을 사용해야 한다.

• 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

• 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.

• delete 연산자를 사용하여 프로퍼티 값을 삭제한다.

*참고 *

모던 자바스크립트 Deep Dive (도서)

https://ko.javascript.info/variables

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics

변수 선언 시 수행 단계

세가지 키워드를 알아보기 전, 변수 선언 시 변수 선언을 하면 어떤 단계를 거치는지 알아보자.

• 선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다. 만약 선언하지 않은 식별자에 접근하면 ReferenceError가 발생한다.

  var member;

• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. → 초기화: 변수가 선언된 이후 최초로 값을 할당하는 것

  var member;
  console.log(member); // undefined
  // 어떠한 값도 할당하지 않았지만 undefined가 자동으로 할당되었다. 

만약 초기화 단계를 거치지 않는다면 메모리 공간에는 이전에 사용했던 값이 남아있을 수 있는데, 이 값을 쓰레기 값이라고 한다. 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하려면 쓰레기 값이 나올 수 있기 때문에 초기화가 필요하다.

var 키워드 사용 시

선언 단계와 초기화 단계가 동시에 진행된다.

let 키워드 사용 시

선언 단계와 초기화 단계가 분리되어 진행된다. 런타임 이전에 자바스크립트 엔진에 의해 선언단계가 먼저 실행되고, 변수 선언문에 도달했을 때 초기화 단계가 실행된다. 만약 초기화 단계가 실행되기 전에 변수에 접근하려 하면 ReferenceError가 발생한다.

// 런타임 이전에 선언 단계 실행

console.log(user); // ReferenceError: user is not defined

let user; // 변수 선언문에서 초기화 단계 실행
console.log(user);

user = 1; // 할당문에서 할당 단계 실행
console.log(user); // 1

let 키워드로 선언한 변수는 스코프의 시작 지점부터 변수 선언문 지점까지 변수를 참조할 수 없다. 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ, Temporal Dead Zone)이라 부른다.

const 키워드 사용 시

const 키워드는 선언+초기화+할당 단계가 동시에 일어난다. 따라서 반드시 선언과 동시에 할당이 이루어져야 한다.

const customer; // SyntaxError: Missing initializer in const declaration

변수 호이스팅

변수 호이스팅이란, 변수 선언 위치와 상관없이 코드의 최상단으로 끌어 올려진 것처럼 동작하는 현상을 말한다.

var 키워드 사용 시

변수 선언이 한 줄씩 순차적으로 실행되는 것이 아닌, 런타임 이전 단계에서 먼저 실행되는 변수 호이스팅이 발생한다.

console.log(member); //undefined
var member; // 변수 선언문

→ 코드가 순차적으로 실행된다면 console.log(member);가 실행될 때 ReferenceError가 발생해야 하지만, undefined가 출력된다. 런타임 이전 단계에서 먼저 실행되기 때문이다.

let 키워드 사용 시

let 키워드로 선언한 변수는 일시적 사각지대에서는 변수를 참조할 수 없기 때문에 변수 호이스팅이 발생하지 않는 것처럼 보이지만, 사실 호이스팅이 발생한다.

let user = 1; // 전역 변수

{
    console.log(user); // ReferenceError: Cannot access 'user' before initialization
      let user = 2; // 지역 변수
}

→ 만약 호이스팅이 발생하지 않는다면, 코드가 순차적으로 실행되어 전역변수 user의 값을 출력해야 한다. 하지만 호이스팅이 일어나기 때문에 ReferenceError가 발생하는 것이다.

const 키워드 사용 시

const 키워드로 선언한 변수는 let 키워드로 선언한 변수처럼 변수 호이스팅이 발생하지 않는 것처럼 동작하지만, 실제로 호이스팅이 발생한다.

const customer = 1; // 전역변수

{
    console.log(customer); // ReferenceError: Cannot access 'customer' before initialization
      const customer = 2; // 지역변수
}

스코프

스코프는 식별자(변수 이름, 함수 이름, 클래스 이름 등)가 유효한 범위를 말한다. 코드의 가장 바깥 영역인 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고, 함수 몸체 내부인 지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수이다. 모든 코드 블록이 지역 스포크를 만드는 특성을 블록 레벨 스코프라 하고, 함수의 코드 블록만을 지역 스코프로 인정하는 특성을 함수 레벨 스코프라고 한다.

var 키워드 사용 시

var 키워드로 선언한 변수는 함수 레벨 스코프를 따른다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역변수가 된다. 블록 밖에서 접근이 가능하다.

var x = 10; 

if(true) {
    var x = 100; // 전역 변수. x변수 중복 선언됨
}

console.log(x); // 100

let 키워드 사용 시

let 키워드로 선언한 변수는 블록 레벨 스코프를 따른다. 따라서 블록 내에서만 접근이 가능하다.

let x = 10; // 전역 변수

if(true) {
    let x = 100; // 지역 변수
}

console.log(x); // 10

const 키워드 사용 시

const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 따른다.

{
    const x = 100;
      console.log(x); // 100
}

console.log(x); // ReferenceError: x is not defined

재할당

재할당이란 이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것을 말한다.

var 키워드 사용 시

var 키워드로 선언한 변수는 값을 재할당할 수 있다.

var member = 'kim';
member = 'park'; 

var 키워드로 선언한 변수는 선언과 동시에 undefined로 초기화되기 때문에 엄밀히 말하면 변수에 처음으로 할당하는 것도 사실은 재할당이다.

→ 이전 값이 저장되어 있던 메모리 공간을 지우고 재할당 값을 새로 저장하는 것이 아니라, 새로운 메모리 공간을 확보하고 그 메모리 공간에 새로운 값을 저장하는 것이다.

let 키워드 사용 시

let 키워드로 선언한 변수도 값을 재할당할 수 있다.

let user = 'kim';
user = 'park'; 

const 키워드 사용 시

const 키워드로 선언한 변수는 재할당이 금지된다. const로 선언한 변수를 상수(constant)라고 한다.

const customer = 'kim';
customer = 'park'; // TypeError: Assignment to constant variable.

정리

*참고 *

모던 자바스크립트 Deep Dive (도서)

https://ko.javascript.info/variables

React, TypeScript 등 자바스크립트 기반의 무언가를 배울 때마다 기본기의 중요성을 느끼곤 한다. 자바스크립트를 처음 학습했을 때 어려움을 겪기도 했고, 제대로 설명할 수 있을까 생각해 보았을 때 자신이 없으므로 자바스크립트의 주요 핵심들을 다시 한번 되짚어보려 한다.

변수 (Variable)

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 뜻한다.

자바스크립트에서는 let 키워드를 사용하여 변수를 선언한다. (ES6 이전에는 var 키워드 사용)

• 변수에 값을 저장하는 것을 할당(assignment)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다.

컴퓨터는 메모리 셀의 집합체인 메모리에 데이터를 저장한다. 메모리의 각 셀은 고유의 메모리 주소를 갖고, 이 메모리 주소는 메모리 공간의 위치를 나타낸다. 변수 이름인 식별자로 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다.

값의 할당

• 변수에 값을 할당할 때는 할당 연산자 =를 사용한다.

let color; // 변수 선언
color = 'red'; // 값 할당

• 변수 선언과 값 할당을 한 줄로 작성할 수 있다.

let color = 'red';

• 한 줄에 여러 변수를 선언하는 것도 가능하다.

  let color = 'red', size = 10, shape = 'round';

  → 하지만 가독성이 좋지 않으므로 한 줄에는 하나의 변수를 선언하는 것이 좋다.

• 이미 값이 할당된 변수에 새로운 값을 재할당 할 수도 있다.

let color = 'red';
color = 'pink';

📍 let, const 키워드를 사용하여 변수를 두 번 선언하면 에러가 발생한다. 따라서 변수는 한 번만 선언하고, 선언한 변수를 참조할 때는 let 없이 변수명만 사용해야 한다.

변수 네이밍 규칙

• 변수명은 특수문자를 제외한 문자, 숫자, 기호 _ 과 $를 포함할 수 있다.
• 변수명은 숫자로 시작할 수 없다.
• 예약어는 변수명으로 사용할 수 없다.

⛔️ 예약어 let, const, class, return, this, for 등

✔️ 알파벳 이외 한글 등 모든 언어를 변수명에 사용할 수 있다. 하지만 영어를 변수명에 사용하는 것이 국제적인 관습이므로, 변수명은 영어를 사용해서 만드는 것이 좋다.

let 이름 = '...';
let 名 = '...';

✔️ 자바스크립트는 대소문자를 구별한다. 아래 변수는 각각 별개의 변수이다.

let userName;
let username;

✔️ 변수명은 의미를 명확히 표현해야 한다. 좋은 변수명은 코드의 가독성을 높인다.

let x = 16;         // 변수가 의미하는 바를 알 수 없다.
let fontSize = 16;     // fontSize 변수는 폰트 크기를 의미한다.

네이밍 컨벤션

카멜 케이스(camelCase) 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 표기법

let userName;

스네이크 케이스(snake_case) 단어와 단어 사이 _ 기호를 추가하는 표기법

let user_name;

파스칼 케이스(PascalCase) 각 단어의 첫 글자를 대문자로 작성하는 표기법

let UserName;

일관성을 유지한다면 어떤 네이밍 컨벤션을 사용해도 좋지만, 자바스크립트에서는 일반적으로 변수나 함수의 이름에는 카멜 케이스를, 생성자 함수, 클래스의 이름에는 파스칼 케이스를 사용한다.

*참고 *

모던 자바스크립트 Deep Dive (도서)

https://ko.javascript.info/variables

바닐라 JS로 SPA를 구현하는 중, a태그 클릭 시 화면 이동이 아닌 같은 페이지에 element들이 중복 렌더링되는 오류가 발생하였다🤯

index.html

각 페이지를 렌더링할 때, index.html의 root 태그 안에 요소들이 추가된다.

👉 root 태그 아래 header, section, main, footer 가 추가된 것을 확인할 수 있다.

router.js

router.js의 render부분을 살펴보자.

document.querySelector(this.rootElementId)로 index.html의 root를 받아오고 rootElement.innerHtml = ''으로 root를 초기화해준 후 rootElement.appendChild(view)로 root에 view(page) 컴포넌트를 추가해 주어야 한다.

👉 하지만 root 초기화가 이루어지지 않고, 기존 elements 아래에 같은 element들이 중복으로 추가되었다😨

🔎원인

view 컴포넌트를 확인해 보았다.

return 값 미설정

Component를 불러올 때, Component의 render부분이 root에 추가되어야 하는데 render의 return 값을 설정하지 않았다. render 안의 컴포넌트들을 div 등으로 감싸서 return 해주어야 하는데 header, footer을 포함한 html 요소들을 감싸기 위해 div를 또 생성하는 것이 괜히 불편했다.

나는 root 태그 안에 직접 요소들을 추가해주기 위해 타겟 요소로 root를 불러온 후 append 해주기만 했다. 그러니 라우터의 render가 이루어지지 않고, root에 계속 중복으로 append만 되었던 것....😵

💡해결 방법

DocumentFragment

멘토님께 div 하위에 heaer, footer을 추가하는 것이 불편했다 말씀드리니 DocumentFragment를 알려주셨다.

DocumentFragment는 특별한 DOM 노드 타입으로, 여러 노드로 구성된 그룹을 감싸 다른 곳으로 전달하게 해주는 wrapper처럼 동작힙니다.
문서에 있는 다른 노드를 DocumentFragment에 추가할 수 있는데, DocumentFragment를 문서 어딘가에 삽입하면 DocumentFragment는 사라지고 DocumentFragment에 추가한 노드만 남습니다.

DocumentFragment는 메모리에서만 정의되는 경량화된 문서 객체이다. DOM에 추가하면 DocumentFragment node는 사라지고 자식 node만 추가된다. 한마디로 투명 포장지같은 존재..

이 DocumentFragment라는 투명 포장지에 element들을 담아보자.

root를 불러오는 타겟 요소를 지워주고 document.createDocumentFragment()로 DocumentFragment를 생성한 후 요소들을 append 해주었다. 마지막으로 DocumentFragment를 return 해주면.. 👉 이렇게 root 하위로 DocumentFragment에 담아둔 element들이 추가되었다. 투명 포장지는 보이지 않는다!

✔️해결 완료

화면도 잘 이동하고, 렌더링도 잘 실행된다.

참고 사이트

https://ko.javascript.info/modifying-document#document-fragment

자바스크립트 개발을 할 때 자주 사용하는 것이 console.log()가 아닐까 싶다. console.log()로 ()안의 값을 콘솔창에 출력하는데, 출력된 값을 확인하여 디버깅(오류를 찾고 수정 )하는 데 주로 사용된다. console에는 우리가 자주 사용하는 console.log()를 포함한 다양한 메서드들이 있다. 알아두면 유용하게 쓰일 console의 주요 매서드들에 대해 알아보자.

console.log()

log 메서드는 콘솔에 메세지를 출력하게 한다. 메세지는 문자열, 숫자, 객체 등이 될 수 있다.

🔎 console.log()를 출력했을 때 undefined가 나오는 이유 console.log()는 return 값이 없다. 특정 return 값을 반환하는 것이 아닌 입력값을 출력하는 역할을 하기 때문이다.

%s

%s를 사용하여 문자열을 치환할 수 있다.

📌 하지만 ES6부터 주로 백틱(｀)을 사용하여 문자열을 치환한다.

%c

%c를 사용하여 스타일을 지정하여 출력할 수 있다.

console.warn()

console.warn()은 콘솔창에 경고 메세지를 출력한다.

console.error()

console.error()은 콘솔창에 에러 메세지를 출력한다.

console.info()

console.info()는 콘솔창에 정보 메세지를 출력한다.

console.assert()

console.assert()는 주어진 조건이 false일 때만 에러 메세지를 출력한다.

console.clear()

console.clear()은 콘솔에 출력된 내용을 지운다.

📌 콘솔창 지우기 단축키

Ctrl + L (windows) Command + K (macOS)

console.dir()

console.dir()은 자바스크립트 객체의 속성들을 출력한다.

<body>

<p onClick="makePink()">Click Me</p>

  <script>

    function makePink() {
      const p = document.querySelector('p');
      p.style.color = '#F8BBD0';
      p.style.fontSize = '50px';
    }

  </script>

  </body>

📍 console.log()와 console.dir()의 차이점

DOM 객체에서 console.log()는 HTML 태그 자체를 출력하지만

console.dir()은 객체가 가지고 있는 모든 속성을 출력한다.

console.group()

console.group()은 콘솔에 그룹을 생성하여 출력한다. console.groupEnd()로 그룹을 종료한다.

console.count()

console.count()은 몇 번 호출되었는지 카운트한다.

console.time()

console.time()은 작업이 얼마나 걸리는지 측정한다. console.timeEnd()로 종료하고, 콘솔창에 측정한 시간을 출력한다.

console.time()과 console.timeEnd()에 동일한 label을 지정해야 한다.

console.table()

console.time()은 데이터를 테이블 형식으로 출력한다.

참고 사이트

https://courses.wesbos.com/account/access/630ef22c88db94aff320bc95/view/194129876

https://developer.mozilla.org/en-US/docs/Web/API/console

Prototype

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이다.

C++나 자바 같은 클래스 기반 객체지향 프로그래밍 언어는 클래스가 있고, 클래스를 통해 상속을 사용한다. 하지만 자바스크립트는 클래스가 없고 객체를 프로토타입 기반으로 복제를 통해 생성한다. (자바스크립트의 class 는 ES6에서 추가된 문법)

프로토타입은 상속하고자 하는 속성과 메소드를 담아두는 공간(유전자). 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속받는다.

클래스는 붕어빵 틀. 클래스 기반에서 객체는 붕어빵 틀인 클래스로 붕어빵을 찍어내지만, 프로토타입 기반에서 객체는 유전자인 프로토타입을 복제해서 사용한다.

function Parent() { 
    this.health = 'good';
    this.skin = 'dry';
}

const child = new Parent ()

Parent.prototype.hair = 'thick' // prototype에 추가 가능

child.hair  

// thick

→ Parent의 prototype에 hair라는 데이터를 추가하면, child에서도 Parent의 데이터를 끌어올 수 있다.

프로토타입 체인

객체의 프로퍼티에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티가 없으면 부모 프로토타입의 프로퍼티를 순차적으로 검색한다.

✔ proto : 부모에게 유전받은 프로토타입을 참조하는 속성

생성자 함수에서의 프로토타입

생성자 함수를 통해 쉽게 객체를 생성할 수 있지만, 객체의 메서드를 등록할 때마다 새로운 함수가 생성된다.

function Member(name) {
    this.name = name;
    this.sayHello = function() {
        console.log(`Good morning, ${this.name}!`); 
    } // 객체의 메서드 등록 할 때마다 새로운 함수 생성
}  

const mem1 = new Member('민영');
const mem2=  new Member('지훈');

여기서 문제는 객체의 메서드를 등록할 때마다 sayHello이라는 새로운 함수를 생성한다. 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리를 낭비하는 것이다.

이 문제를 해결하기 위해 프로토타입을 사용한다. Member 생성자 함수가 생성한 모든 인스턴스가 sayHello 메서드를 공유해서 사용할 수 있도록 프로토타입에 추가한다.

function Member(name) {
    this.name = name;
}  

Member.prototype.sayHello = function() { 
        console.log(`Good morning, ${this.name}!`); 
}

const mem1 = new Member('민영');
const mem2=  new Member('지훈');

프로토타입은 Member 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Member 생성자 함수가 생성한 모든 인스턴스는 Member.prototype으로부터 하나의 sayHello메서드를 공유한다.

sayHello 메서드는 단 하나만 생성되어 프로토타입인 Memeber.prototype의 메서드로 할당되어 있다. 따라서 Member 생성자 함수가 생성하는 모든 인스턴스는 sayHello메서드를 상속받아 사용할 수 있다.

Object.create에 의한 상속

부모 역할을 할 생성자 함수

function Parent() { 
    this.health = 'good';
    this.skin = 'dry';
}

Parent.prototype.hair = 'thick'

자식 역할을 할 생성자 함수

function Child() {
    Parent.call(this);
}  // call 함수는 Child함수의 this가 Parent생성자 함수의 this를 바라보게 한다.

Child.prototype = Object.create(Parent.prototype);
// 인자를 Child.prototype에 연결한다.

const junior = new Child()

Object.create는 프로토타입을 지정해서 새로운 객체를 생성한다. Object.create의 첫 번째 매개변수는 프로토타입을 지정할 객체(부모)를 전달한다. 두 번째 매개변수는 생성할 객체의 프로퍼티를 전달한다. Parent의 프로토타입을 Child의 프로토타입이 참조하게 하라는 것이다.