처음에는 마우스 좌표를 특정 그리드 값으로 스냅하는 방식을 사용했지만, 배치할 에셋이 바뀌거나 타일의 크기를 바꾸면 좌표를 다시 계산해서 배치해줘야 하는 번거로움이 있었다.

그래서 벡터의 외적(Cross Product)을 활용해 도형 내부에 점이 있는지 확인하는 방식으로 변경했다.

1. 외적

1-1 왜 외적을 사용하는가?

타일이 사각형이라면 위치(x, y)와 크기(width, height)로 판별할 수 있겠지만, 다각형, 회전이 들어간 도형 등은 계산이 매우 번거로워진다.

벡터의 외적은 "선"과 "점"을 각각 벡터로 변환하면 간단한 계산만으로 위치를 판별할 수 있다.

1-2 [원리] : "항상 같은 방향에 있는가?"

외적은 두 벡터 간의 관계에서 방향을 포함하고 있다.

사각형을 예로 들어, 각 변을 같은 방향(시계 또는 반시계)으로 따라갈 때 어떤 점 $P$가 내부에 있다면, 변을 기준으로 항상 같은 방향(오른쪽 또는 왼쪽)에 위치하게 된다.

1-3. 공식

$$cr= AB \cdot AP$$ $$=(AB_x \cdot AP_y) - (AB_y \cdot AP_x)$$ $$= (x_2 - x_1) \cdot (p_y - y_1) - (y_2 - y_1) \cdot (p_x - x_1)$$

$$A = (x_1, y_1)$$ $$B = (x_2, y_2)$$ $$P = (p_x, p_y)$$

이 값의 부호가 뱡향을 의미

• 양수 : 점이 변의 한쪽 방향(예: 왼쪽)
• 음수 : 반대 방향(예: 오른쪽)
• 0 : 변 위에 있음

2. 코드

 const isPointInsideTile = (
  px: number,
  py: number,
  q: ReadonlyArray<readonly [number, number]>
): boolean => {
  // 1. 부동 소수점 오차를 위한 미세값(Epsilon) 설정
  const eps = 1e-9;
  const crs: number[] = [];
  const n = q.length;

  // 2. 사각형의 각 변을 순회하며 외적 계산
  for (let i = 0; i < n; i++) {
    const [x1, y1] = q[i];
    const [x2, y2] = q[(i + 1) % n]; // 다음 꼭짓점 (마지막은 첫 번째와 연결)

    // 벡터1: 변 (x2-x1, y2-y1)
    // 벡터2: 점 (px-x1, py-y1)
    crs.push((x2 - x1) * (py - y1) - (y2 - y1) * (px - x1));
  }

  // 3. 모든 변에 대해 외적의 부호가 일관된지 확인
  // allNonNeg: 모두 왼쪽이거나 변 위에 있음 (양수 또는 0)
  // allNonPos: 모두 오른쪽이거나 변 위에 있음 (음수 또는 0)
  const allNonNeg = crs.every((c) => c >= -eps);
  const allNonPos = crs.every((c) => c <= eps);

  return allNonNeg || allNonPos;
};

3. 유의점

각 변을 순회하며 한 점과의 외적을 계산을 하고, 모든 값이 같은 부호를 가진다면 내부에 위치

• 부동 소수점 (eps) 부동 소수점 오차를 위한 미세값(Epsilon) 설정

• %n 두 점을 연결해 선을 만들 때, 마지막 점은 1번째 점과 연결되어야 하기 때문에 나머지 연산 처리

• 볼록한 도형이라는 전제 이 방법은 "볼록한 도형"에서만 정확하게 동작한다.

  볼록 도형: 다각형, 마름모 오목 도형: 별, 찌그러진 사각형

• 하나의 이미지 파일에 여러 이미지를 붙여넣고 좌표를 통해서 이미지를 불러오는 것
• 네이버를 개발자 도구로 살펴보면 메일 아이콘의 ::before와 ::after에 바탕 이미지의 좌표와 메일 이미지 좌표를 불러와서 아이콘을 만든 것을 알 수 있다.

그렇다면 svg 파일은 어떻게?? <symbol>, <use> 요소를 이용해 이미지 Sprite의 좌표를 가져오듯 사용할 수 있다.

• <symbol> : 각각의 svg 정보가 존재하고 고유한 id값이 존재
• <use> : href 속성에 id symbol 경로를 넣어 원하는 svg를 렌더링

과정

1. Figma에서 svg파일 Export ❗️ 컴포넌트 이름이 파일명과 <symbol>의 id가 됨 ❗️ width, height를 정수로 맞추고 export 하는게 브라우저에 랜더링 했을 때 정렬이 잘 되는 느낌(경험상)

2. Spritebot 다운로드 여러 개의 svg 파일을 각각 <symbol> 요소로 변경해서 하나의 파일로 생성해주는 도구

   GitHub - thomasjbradley/spritebot

3. sprites.svg 생성 Spritebot에 Figma에서 다운로드 받은 svg 파일들을 업로드하고 sprites.svg 생성

4. <use> 요소의 href 속성으로 원하는 svg 불러오기

    <svg>
      <use href={`/sprites.svg#${id}`}/>
    </svg>
   
    // xlinkHref 속성으로도 불러올 수 있음 (차이점은 잘 모룸..)
    <svg>
      <use xlinkHref={`/sprites.svg#${id}`}/>
    </svg>

유의사항

• sprite.svg 파일의 fill 속성은 경로의 색상, stroke 속성은 경로의 테두리 색상이다. fill 속성을 currentColor 값으로 설정하면 부모 요소의 color(폰트) 색상에 따라서 색상을 변경할 수 있음.

  <svg style={{ color }}>
    <use href={`/sprites.svg#${id}`} />
  </svg>

• <use>의 크기를 조절하는 것이 가능한가?? (잘 모르는 내용임) <use>의 width와 height는 부모 <svg>에 의해 제어됨

  • <svg>의 viewBox와 width, height가 <use>에 직접 width, height를 설정하는 것보다 더 큰 영향을 준다.
  • <use> 내부의 요소 크기를 조정하려면 transform="scale(x, y)"을 사용하는 방법이 있다.

색상과 크기 조절에 대한 자세한 내용은 MDN 웹 문서 SVG 튜토리얼 참고.

Supabase에서 제공하는 Kakao Social Login 문서 https://supabase.com/docs/guides/auth/social-login/auth-kakao?queryGroups=language&language=js&queryGroups=environment&environment=server&queryGroups=framework&framework=nextjs

이전 글에서 카카오 개발자 세팅하는 과정을 소개했지만 supabase의 문서에서도 친절하게 안내해주고 있기에 한 번 읽어보는 것을 추천

차이점이라면 Redirect URI에 supabase가 처리해주는 url(https://<project-ref>.supabase.co/auth/v1/callback)을 추가해준다. 그리고 Kakao Client ID와 Kakao Client Secret 를 supabase 프로젝트에 연결해주는 것.

들어가기 전

supabase와 Next.js는 어떻게 동작하는 걸까?

(Next.js를 완전히 이해하고 진행하는 것이 아니라 틀린 점이 있을 수도 있다..)

supabase에서 제공하는 signInWithOAuth()를 실행한다. 이 때 provider와 redirectTo를 파라미터로 전달하는데, provider 종류를 확인하고 redirect URL에서 교환한 코드로 유저 정보를 받아 세션에 정보를 저장한다.

redirect URL에서 코드를 교환하는 로직을 supabase 문서에서 알려주기 때문에 공식 문서를 잘 따라간다면 크게 문제가 없다.

구현

Next.js 환경에 supabase Auth 세팅하기

supabase 패키지 설치 https://supabase.com/docs/guides/auth/quickstarts/nextjs

Server-side 세팅 https://supabase.com/docs/guides/auth/server-side/nextjs

1. .env.local

   NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
   NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

2. client와 server에서 동작하는 각각의 client 만들기 Supabase는 브라우저에서 동작하는 Client Component client와 서버에서 동작하는 Server Component Client 두 가지 client를 사용한다. 즉, 클라이언트 단에서 서버 client 함수인 createServerClient()를 호출하면 에러

   2-1 utils/supabase/client.ts

    import { createBrowserClient } from '@supabase/ssr'
   
    export function browserClient() {
          return createBrowserClient(
            process.env.NEXT_PUBLIC_SUPABASE_URL!,
            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
          )
    }

   2-2 utils.supabase/server.ts

    import { createServerClient } from '@supabase/ssr'
    import { cookies } from 'next/headers'
   
    export async function createClient() {
          const cookieStore = await cookies()
   
          return createServerClient(
            process.env.NEXT_PUBLIC_SUPABASE_URL!,
            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
            {
                  cookies: {
                    getAll() {
                          return cookieStore.getAll()
                    },
                    setAll(cookiesToSet) {
                          try {
                            cookiesToSet.forEach(({ name, value, options }) =>
                              cookieStore.set(name, value, options)
                            )
                          } catch {
                        // The `setAll` method was called from a Server Component.
                        // This can be ignored if you have middleware refreshing
                        // user sessions.
                          }
                    },
                  },
            }
          )
    }

3. middleware 서버 단에서는 쿠키를 사용할 수 없기 때문에 middleware를 통해서 브라우저의 쿠키에서 auth token을 가져오고 저장한다.

   3-1 middlware.ts

    import { type NextRequest } from 'next/server'
    import { updateSession } from '@/utils/supabase/middleware'
   
    export async function middleware(request: NextRequest) {
          return await updateSession(request)
    }
   
    export const config = {
          matcher: [
          ],
    }

   3-2 utils/supabase/middleware.ts

    import { createServerClient } from '@supabase/ssr'
    import { NextResponse, type NextRequest } from 'next/server'
   
    export async function updateSession(request: NextRequest) {
          let supabaseResponse = NextResponse.next({
            request,
      })
   
      const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
              cookies: {
                getAll() {
                      return request.cookies.getAll()
                },
                setAll(cookiesToSet) {
                      cookiesToSet.forEach(({ name, value, options }) =>         request.cookies.set(name, value))
                      supabaseResponse = NextResponse.next({
                        request,
                      })
                      cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
                      )
                },
              },
        }
      )
   
      // Do not run code between createServerClient and
      // supabase.auth.getUser(). A simple mistake could make it very hard to debug
      // issues with users being randomly logged out.
   
      // IMPORTANT: DO NOT REMOVE auth.getUser()
   
      const {
        data: { user },
      } = await supabase.auth.getUser()
   
      // route protect 로직
   
      return supabaseResponse
    }

로그인 페이지

1. 로그인 페이지에서는 client component client를 생성 app/login/page.tsx

    'use client';
   
    import style from '@/app/(anon)/login/page.module.scss';
    import { browserClient } from '@/utils/supabase/client';
    import Image from 'next/image';
    import { useEffect, useState } from 'react';
   
    const Login = () => {
          const signInWithKakao = async () => {
            const supabase = browserClient();
            await supabase.auth.signInWithOAuth({
                  provider: 'kakao',
                  options: {
                    redirectTo: `http:localhost:3000/auth/callback`,
                  },
            });
          };
   
          return (
            <div>
                  <button
                    className={style.loginButton}
                    type='button'
                    onClick={signInWithKakao}
                  >
                    <Image
                          src={'/kakao_login_medium_wide.png'}
                          alt='카카오 로그인 이미지'
                          width={300}
                          height={45}
                    />
                  </button>
            </div>
          );
    };
   
    export default Login;

2. route handler에서는 server component client를 생성 /app/auth/callback/route.ts

    'use server';
   
    import { NextResponse } from 'next/server';
    import { createClient } from '@/utils/supabase/server';
   
    export async function GET(request: Request) {
          const { searchParams, origin } = new URL(request.url);
          const code = searchParams.get('code');
          const next = searchParams.get('next') ?? '/';
   
          if (code) {
            const supabase = await createClient();
            const { error } = await supabase.auth.exchangeCodeForSession(code);
   
            if (!error) {
                  const forwardedHost = request.headers.get('x-forwarded-host'); 
                  const isLocalEnv = process.env.NODE_ENV === 'development';
                  if (isLocalEnv) {
                    return NextResponse.redirect(`${origin}${next}`);
                  } else if (forwardedHost) {
                    return NextResponse.redirect(`https://${forwardedHost}${next}`);
                  } else {
                    return NextResponse.redirect(`${origin}${next}`);
                  }
            }
          }
   
          return NextResponse.redirect(`${origin}/auth/auth-code-error`);
    }

로그인 버튼을 클릭하면 redirectTo 주소로 코드를 query parameter에 담아 전달되고, app/auth/callback의 route가 실행되면서 코드를 교환해 유저 정보를 세션에 저장한다.

중간에 오류를 몇 번 마주쳤는데, route를 살펴보면 코드가 없거나 에러가 있으면 ${origin}/auth/auth-code-error 주소로 이동되어서 어디서 오류가 났는지 확인하기 어렵다. 다음 편에서는 오류를 확인할 수 있는 코드를 추가한 내용을 알아보자.

이번 글은 supabase에서 소셜 로그인을 할 수 있는지 모르고ㅜ 토큰을 발급받아 유저 정보를 반환 받는 과정까지만 구현한 내용이다.

supabase의 Auth Providers를 활용한 내용은 다음편에 작성할 예정

카카오 개발자 세팅

https://developers.kakao.com/docs/latest/ko/kakaologin/common

1. 왼쪽의 설정하기 메뉴를 보면 카카오 로그인 활성화 설정, Redirect URI 등록은 필수 사항이라고 안내되어 있다.

   어플리케이션을 등록하고 내 어플리케이션 메뉴로 들어가서 설정해준다.

   

   

2. 동의 항목 설정

   

   닉네임과 프로필 사진은 그냥 설정할 수 있지만 카카오계정(이메일)은 비즈니스 앱으로 등록되어 있어야 한다. (사업자 번호가 없다면 개인 개발자로 등록하면 됨)

   

3. 플랫폼 메뉴에 도메인도 함께 등록

   

페이지 만들기

들어가기 전

로그인이 진행되는 과정을 살펴보면, 카카오 계정으로 로그인을 요청하면 카카오에서 Redirect URI로 인증 코드를 query parameter로 전달한다. 이 코드로 다시 카카오에 토큰을 발급받고, 토큰을 통해서 유저 정보를 가져올 수 있다.

✅ 카카오 로그인 과정은 인증 코드 받기 → 토큰 받기 → 유저 정보 받기 순차적으로 진행

구현 과정

1. 카카오 계정으로 로그인 요청하고, 인증 코드 받기 1-1 login 버튼 만들기

    /login/page.tsx
   
    const Login = () => {
          // 카카오 REST API 키
        const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_LOGIN_REST_API_KEY;
        // 설정한 REDIRECT_URI
        const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI;
        // 로그인을 요청할 주소
          const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;
   
          return (
            <Link href={KAKAO_AUTH_URL}>
                <Image
                    src={'/kakao_login_medium_wide.png'}
                    alt='카카오 로그인 이미지'
                    width={300}
                    height={45}
                   />
              </Link>
        );
    }

   Kakao에서 제공하는 로그인 버튼 디자인을 참고해서 만들도록 하자 https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

   1-2 Redirect URI에서 인증 코드 확인하기

   • 인증 코드는 REDIRECT_URI?code=#### 식으로 전달 받는다. (http://localhost:3000/auth/callback/kakao?code=####)

   • useSearchParams를 이용해 query parameter를 받아온다.

     /auth/callback/kakao/page.tsx
     
     const LoginRedirection = () => {
         const router = useRouter();
         const authCode = useSearchParams().get('code');
       console.log(authCode);
     
         return (
         <div>
             <h2>loading...</h2>
         </div>
     );

2. 인증 코드를 전달해 토큰 발급 받기 2-1 카카오에 인증 코드를 보내서 토큰 받는 함수 만들기

    /api/login.ts
   
    export const getKakaoLoginToken = async (code: string) => {
          const tokenUrl = 'https://kauth.kakao.com/oauth/token';
          const REST_API_KEY = process.env.NEXT_PUBLIC_KAKAO_LOGIN_REST_API_KEY;
          const REDIRECT_URI = process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI;
   
          const params = new URLSearchParams({
            grant_type: 'authorization_code',
            client_id: REST_API_KEY!,
            redirect_uri: REDIRECT_URI!,
            code: code,
          });
   
          try {
            const response = await fetch(tokenUrl, {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
                  },
                  body: params,
            });
   
            if (!response.ok) {
                  throw new Error(`${response.status}`);
            }
   
            const data = await response.json();
   
            return data;
          } catch (error) {
            console.error(error);
          }
    };

   2-2 Redirect URI 페이지가 렌더링될 때 위에서 만든 토큰 발급 함수를 실행 시키고 로컬 스토리지에 저장하기

    /auth/callback/kakao/page.tsx
   
    useEffect(() => {
        const fetchLoginToken = async (code: string) => {
              if (typeof code === 'string') {
                try {
                      const data = await getKakaoLoginToken(code);
   
                      localStorage.setItem('token', JSON.stringify(data));
   
                      return data;
                } catch (error) {
                      console.error(error);
                }
              }
        };
   
        const handleLogin = async (code: string) => {
              try {
                // 토큰 받기
                const token = await fetchLoginToken(code);
              } catch (error) {
                console.error(error);
              }
        };
   
        if (authCode) {
              handleLogin(authCode);
        }
      }, [authCode, router]);

3. 발급 받은 토큰으로 유저 정보 받기 3-1 카카오에 토큰 보내서 유저 정보 받는 함수 만들기

    /api/login.ts
   
    export interface Token {
        token_type?: string;
          access_token: string;
          refresh_token?: string;
          id_token?: string;
          expires_in?: number;
          refresh_token_expires_in?: string;
          scope?: string;
         token?: string;
        id?: number;
          }
   
    export const getKakaoUserInfo = async ({ access_token }: Token) => {
          const userInfoUrl = 'https://kapi.kakao.com/v2/user/me';
   
          try {
            const response = await fetch(userInfoUrl, {
                  method: 'GET',
                  headers: {
                    Authorization: `Bearer ${access_token}`,
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
                  },
            });
   
            if (!response.ok) {
                  throw new Error(`${response.status}`);
            }
   
            const data = await response.json();
   
            return data;
          } catch (error) {
            console.error(error);
          }
    };

   3-2 Redirect URI 페이지 렌더링 후 토큰 발급 받고 나서 유저 정보를 요청하고 로컬 스토리지에 저장하기

    /auth/callback/kakao/page.tsx
   
    useEffect(() => {
        const fetchUserInfo = async (token: Token) => {
              try {
                   const data = await getKakaoUserInfo(token);
   
                localStorage.setItem('userInfo', JSON.stringify(data));
   
                return data;
              } catch (error) {
                console.error(error);
              }
        };
   
          const handleLogin = async (code: string) => {
              try {
                // 토큰 받기
                const token = await fetchLoginToken(code);
   
                // 유저 정보 받기
                if (token) {
                      await fetchUserInfo(token);
                }
   
              } catch (error) {
                console.error(error);
              }
        };
   
        if (authCode) {
              handleLogin(authCode);
        }
      }, [authCode, router]);

위에서 전달 받은 유저 정보로 supabase의 user 테이블에 저장하면 될 듯하다.

다음 편에서는 Next.js의 route와 supabase의 Auth Provider를 이용해서 간단하게 로그인하고 트리거로 public.user 테이블에 데이터를 생성하는 방법을 알아보자.

먼저 작은 문제들을 해결할 수 있는 객체들을 만든 뒤, 이 객체들을 조합해서 큰 문제를 해결하는 상향식(Bottom-up) 해결법

가장 큰 특징 3가지는 아래와 같다.

1. 은닉성 외부로의 노출을 최소화하여 모듈 간의 결합도를 떨어뜨려 유연함과 유지 보수성을 높임

2. 상속 자식 클래스가 부모 클래스의 특성과 기능을 그대로 물려받는 것을 말하며, 오버라이딩으로 수정 가능

3. 다형성 객체 간 결합력을 낮추면 다양한 기능을 분리하고 연결하는 것이 용이함

이 중 다형성과 관련하여 의존성 주입에 대해 알아보자.

의존성 주입(Dependency Injection)

객체가 필요로 하는 어떤한 기능이나 데이터를 외부에서 생성한 객체(의존성)로 전달하는 것

의존성 주입 방법

• constructor 주입 클래스가 생성될 때 1회 호출

   // camera.js
   class Camera {
     #lens;
  
     constructor() {
       this.#lens = new Lens();
     }
   }
  
   const camera = new Camera();

• setter 주입 setter 함수를 통해서 주입

   // camera.js
   class Camera {
     #lens;
  
     setLens(lens) {
      this.#lens = lens;
     }
   }
  
   camera.setLens(new Lens());
   camera.setLens(new Lens());

등등이 있다. 비유를 들자면, 내가 사용하고 싶은 객체(카메라)의 추가 기능(줌인)을 위해서 외부에서 생성한 객체(렌즈)를 연결하고 싶다. constructor 주입은 카메라가 만들어질 때 렌즈가 내장되어 있는 것이고, setter는 여러 렌즈를 갈아 끼우는 것으로 간단히 비유할 수 있다.

이 때, 메서드 오버라이딩으로 의존성 객체에 기능을 구현할 수 있다.

class Lens {
  zoomIn(level) {
    console.log(`Zoomed in by ${level} levels.`);
  }
}

class Camera {
  #lens;

  constructor() {
    this.#lens = new Lens();
  }

  setLens(lens) {
    this.#lens = lens;
  }

  zoomIn(level) {
    this.#lens.zoomIn(level);
  }
}

camera.zoomIn(2); // "Zoomed in by 2 levels."

JS의 취약점

그런데 여기서 JS의 취약점이 드러난다. 타입 검사를 실행하지 않기 때문에 Lens 클래스가 아니더라도 오류가 발생하지 않고 주입이 되며, zoomIn이라는 기능을 가진 아무 객체를 전달하면 메서드가 실행이 된다.

camera.setLens({
  zoomIn: () => {
   console.log('fake');
  },
});

symbol 생성자를 이용한 메서드 오버라이딩으로 메서드 호출은 방지할 수 있지만 주입하는 것을 원천적으로 방지하는 것은 어렵기 때문에 Typescript를 사용하는 것이 좋다.

const ILens = {
  zoomIn: Symbol(),
  zoomOut: Symbol(),
};

class Lens {
  [ILens.zoomIn](level) {
    console.log(`Zoomed in by ${level} levels.`);
  }
}

class Camera {
  #lens;

  constructor() {
    this.#lens = new Lens();
  }

  setLens(lens) {
    this.#lens = lens;
  }

  zoomIn(level) {
    this.#lens.[ILens.zoomIn](level);
  }
}

interface와 implements

Typescript의 interface는 데이터의 기능을 정의할 때 쓰는 type이다.

interface는 접점 즉, 어떤 객체 간 연결점이다. 어떤 기능을 가진 객체를 연결하고자 할 때, 정해진 형식을 미리 정해놓고 연결할 객체(의존성)는 형식을 따라서 기능을 구현한 뒤 주입하는 것

interface ILens {
  zoomIn(level: number): void;
  zoomOut(level: number): void;
}

class Lens implements ILens {
  zoomIn(level: number): void {
    console.log(`zoom in`);
  }

  zoomOut(level: number): void {
    console.log(`zoom out `);
  }
}

정리

• OOP의 특징 은닉성, 상속, 다형성

• 의존성 주입의 장점 객체를 재결합하고 재사용하기가 쉽다. 객체 간 결합도가 낮아 유지보수가 용이하다.

var instance = new Constructor();

Constructor

• 어떤 생성자 함수(constructor)를 new 연산자와 함께 호출하면
• Contructor에서 정의된 내용을 바탕으로 새로운 instance가 생성된다.
• 이때 instance에는 __proto__ 프로퍼티가 자동으로 생성되고,
• Contructor의 prototype 프로퍼티를 참조한다.

이를 그림으로 간단히 표현하면, 아래와 같다.

prototype

인스턴스가 사용할 메서드를 저장하는 객체이다.

ES5.1 명세에는 [[prototype]]으로 정의되어 있고 instance.__proto__와 같은 방식으로 직접 접근하는 것은 허용하지 않는다. Object.getPrototypeOf(instance) 메서드를 통해서 접근할 수 있는데 대부분의 브라우저에서 __proto__ 접근 방법을 고수하여 호환성 차원에서 ES6에 도입했다.

function Person (name) {
  this._name = name;
  this.getName = function () {
    return this._name
  }
}

만약, 위와 같이 메서드를 prototype이 아닌 인스턴스에 생성할 경우, 생성자를 호출할 때마다 새로운 함수를 만들어 낸다.

const kim = new Person('kim');
const lee = new Person('lee');

console.log(kim.getName === lee.getName); // false

그렇기 때문에 객체의 원형인 prototype에 메서드를 저장한다.

Person.prototype.getName = function () {
  return this._name;
}

메서드 내부의 this는 호출한 주체를 가리키기 때문에 호출할 때에는 __proto__를 생략한다.

// kim.__proto__.getName() // undefined
kim.getName() // kim

• constructor 프로퍼티 prototype과 __proto__ 객체 내부에는 constructor 프로퍼티가 있으며 원래 생성자 함수(자기 자신)을 참조한다.

이는 인스턴스로가 자신의 생성자 함수가 무엇인지 알고자 할 때 필요한 수단이기 때문이다.

var arr = [1, 2];
Array.prototype.constructor === Array // true
arr.__proto__.constructor === Array // true
arr.constructor === Array // true

var arr2 = new arr.constructor(3) // [3]

프로토타입 체인

배열의 내부 구조를 보면 __proto__ 객체에 배열 메서드가 존재하고, 또다시 __proto__가 존재한다. 이는 객체의 __proto__이며 "prototype 객체가 객체"이기 때문에 Object.prototype과 연결된다.

이처럼 __proto__가 연쇄적으로 이어진 것을 프로토타입 체인이라 한다.

만약 객체에서만 사용할 메서드를 만들어 Object.prototype에 정의하면 어떻게 될까?

모든 prototype의 최상단에는 Object.prototype이기 때문에 다른 데이터 타입에서 호출할 수 있게 된다. 그렇기에 Object에 스태틱 메서드로 부여해야 한다.

메서드 오버라이드

만약 인스턴스가 prototype에 정의된 메서드와 동일한 이름의 메서드가 있다면, 인스턴스에 할당한 메서드가 호출된다. 이를 메서드 오버라이드라고 하며, 원본을 삭제하고 교체하는 것이 아니라 덮어씌운다는 이미지로 이해하는 것이 좋다.

덮어씌운다는 것이라면 어떻게 원본에 접근할까? __proto__에 접근해 호출하되 호출 대상을 전달해준다.

var Person = function (name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
}

var kim = new Person('kim');
kim.getName = function () {
    return this.name + '입니다.';
}

kim.__proto__.getName.call(kim) // kim

정리

• new 연산자로 Contructor를 호출하면 instance가 만들어지는데, 이 instance의 생략 가능한 프로퍼티인 __proto__는 Contructor의 prototype을 참조한다.
• prototype에는 메서드나 프로퍼티를 저장할 수 있으며, instance에서 자신의 것처럼 접근할 수 있다.
• prototype을 계속 찾아가면 최종적으로 Object.prototype에 도달한다.

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 기능별로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부른다.

즉, 모듈은 스크립트 파일 하나를 의미하고 모듈을 관리하는 다양한 기능을 제공하는 시스템을 모듈 시스템이라 한다.

장점

1. 유지 보수성 향상 각 기능이 분리되어 있어 수정이나 기능 추가가 용이하며, 의존성을 줄일 수 있다.

2. 전역 스코프 오염 방지 각 모듈은 독립적인 스코프를 가지므로 전역 변수 충돌을 방지

3. 의존성 관리 필요한 기능만을 가져와 사용할 수 있어 불필요한 코드 로드를 방지

CommonJS와 ES module

두가지 시스템인 이유?

간단히 요약하자면,

• Javascript는 정적 문서의 상호작용을 위한 짧은 스크립트 코드를 넣기 위해 개발되었다.
• Google의 V8 엔진의 등장과 Node.js가 탄생으로 브라우저 이외의 환경에서 Javascript를 실행할 수 있게 되었다.
• 서버사이드에서도 Javascript가 이용되기 시작하며 모듈화가 필요해졌고, Node.js는 CommonJS 시스템을 채택한다.
• 이후 여러 키워드를 추가해 가독성을 높이고 비동기 방식으로 실제 사용되는 모듈만 불러오도록 동작하는 ES module이 ES6 표준으로 도입된다.

적용 방법

• 확장자 설정 파일의 확장자를 .cjs 또는 .mjs로 설정

• package.json 설정 type 속성을 commonjs 또는 module로 설정

사용법

• CommonJS module.js 내보내기

  function sum(x = 0, y = 0) {
    return x + y;
  }
  
  module.exports = {
    sum
  }

  main.js 불러오기

  const { sum } = require('./module');
  // const module = require('./module');
  
  console.log(sum(1, 1)); // 2

• ES module module.js 내보내기

  export default function add(x = 0, y = 0) {
    return x + y;
  }

  main.js 불러오기

  import add from './module.js';
  
   console.log(add(200, 200)); // 400

  
  

우리는 무엇을 사용해야 할까?

표준인 ES module이 우위를 차지하는 추세인 듯 하며 현재 Node.js 최신 버전에서는 ES Module이 공식적으로 사용되고 있다. 그러나 지금까지 많은 라이브러리들이 CommonJS로 작성되었으며, 두 Module System은 기본적으로 동작이 달라 서로 호환되기 어렵기 때문에 동작방식을 이해하고 차이점을 이해하는 것은 중요하다.

토스 기술 블로그

CommonJS와 ESM에 모두 대응하는 라이브러리 개발하기 https://toss.tech/article/commonjs-esm-exports-field

참고 https://magnificent7.tistory.com/entry/CJS-vs-ESM

실행 컨텍스트란? 실행할 코드에 제공할 환경 정보(변수 객체, 스코프 체인, this 등)들을 모아놓은 객체

동일한 환경에 있는 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 있는 컨텍스트와 관련 있는 코드를 실행 하는 식으로 환경과 순서를 보장한다.

// ---------------------- (1)
var a = 1;
function outer() {
    function inner() {
        console.log(a); // undefined
        var a = 3;
    }
    inner(); // --------- (2)
    console.log(a); // 1
}
outer(); // ------------- (3)
console.log(a); // 1

위 예시의 실행 순서는 어떻게 될까?

자바스크립트 코드가 실행되는 순간 (1)전역 컨텍스트가 콜 스택에 담긴다. 자바스크립트 파일은 브라우저에서 자동 실행하므로 별도의 실행 명령 없이 최상단에서 전역 컨텍스트가 실행되고 순차적으로 코드를 실행한다.

(3)outer 함수를 호출하면 그에 대한 환경 정보를 수집해서 outer 실행 컨텍스트를 생성하고 콜 스택에 담는다. outer 컨텍스트가 콜 스택의 최상단이기에 전역 컨텍스트의 코드 실행은 일시중단하고 outer 함수의 내부 코드를 순차적으로 실행한다.

이후 (2)inner 함수 호출되어 inner 실행 컨텍스트가 콜 스택의 최상단에 담기면 outer 컨텍스트의 코드 실행은 일시중단하고 inner 함수 내부 코드를 순차적으로 실행한다.

inner 함수의 실행이 종료되면 inner 컨텍스트가 콜 스택에서 제거되고 일시중단되었던 outer 함수의 실행이 이어지고 순차적으로 전역 컨텍스트가 콜 스택에서 제거되면 종료된다.

💡 inner 함수의 console.log(a)가 undefined인 이유는 지역 변수인 a가 호이스팅되어 초기화 되었기 때문

컨텍스트가 생성될 때 수집하는 환경 정보는 다음과 같다.

1. Variable Environment
2. Lexical Environment
3. ThisBinding

환경 정보

1. Variable Envrionment 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보

   최초 실행 시 LexicalEnvironment의 스냅샷으로, 담기는 내용은 같지만 변경 사항은 반영되지 않는다.

   즉, 실행 컨텍스트를 생성할 때 VariableEnvironment를 만들고, 이후에는 LexicalEnvironment를 주로 활용한다.

2. Lexical Environment

   어휘적 환경으로 직역할 수 있지만 현재 컨텍스트를 구성하는 식별자와 외부 환경에 대한 정보를 알려주는 사전적인 표현이 어울린다. <<코어 자바스크립트>>

   Variable Environment와 내용은 같지만 변경 사항이 실시간으로 반영된다.

   • environmentRecord 현재 컨텍스트와 관련된 식별자 정보가 저장(매개변수 식별자, 선언한 함수 그 자체, var 변수 식별자 등)

     environmentRecord가 수집되는 과정은 관련된 코드가 실행되기 이전이다. 이는 변수, 함수 등의 선언문을 먼저 실행하는 소스코드의 평과 과정인데 "식별자들을 최상단으로 끌어올린 후 코드를 실행하는 것처럼 동작한다"라고 간주하는 가상의 개념, 호이스팅이라고도 한다.

   • outerEnvironmentReference 호출된 함수의 상위 컨텍스트의 Lexcical Environment를 참조

     - 스코프

     식별자에 대한 유효 범위

     • 스코프 체인 식별자의 유효범위를 안에서부터 바깥으로 차례대로 검색해 나가는 것

3. ThisBinding this(호출한 주체에 대한 정보)로 저장된 객체가 저장된다.

   함수로서 호출하면 전역 객체가, 메서드로 호출하면 . 앞에 명시된 객체가 this가 된다. 단, 화살표 함수는 this를 바인딩하지 않고 스코프체이닝으로 this를 찾는다

정리

실행 컨텍스트는 자바스크립트 파일이 최로로 실행될 때 전역 컨텍스트를 자동으로 생성하고 이후 주로 함수 실행에 의해 생성된다.

실행 컨텍스트를 생성할 때는 VariableEnvironment, LexicalEnvironment, ThisBinding의 세 가지 정보를 수집한다.

VariableEnvironment와 LexicalEnvironment는 동일한 내용으로 구성되지만 LexicalEnvironment는 함수 실행 도중 변경 사항이 즉시 반영된다.

LexicalEnvironment는 매개변수명, 변수의 식별자, 함수명 등을 수집하는 environmentRecord와 상위 컨텍스트의 LexicalEnvironment의 정보를 참조하는 OuterEnvironmentReference로 구성된다.

this에는 실행 컨텍스트를 활성화하는 당시 지정된 this가 저장된다.

Model, View, Controller의 약자. 각각의 역할만 담당하면 되기 때문에 효율적이고 유지보수가 편해진다.

MDN 참고 https://developer.mozilla.org/ko/docs/Glossary/MVC

• Model

  • 데이터를 관리하고 가공

• View

  • 인터페이스 요소

• Controller

  • View와 Model을 연결하고 상호 작용을 처리

Model에 데이터를 저장하고 Controller로 Model을 데이터를 관리한다. Model이 변경되면 View를 업데이트 하는데, 중요한 점은 View 통해서 Model을 업데이트가 가능한 양방향 데이터 바인딩을 지원한다는 것이다.

• View → Model 사용자 입력값을 Model에 반영
• Model → View 데이터를 받아서 View에 출력

문제는 어플리케이션의 규모가 커져서 Model과 View가 많아지면 데이터 처리가 복잡해지고 예측이 어려워진다.

그래서 페이스북은 데이터의 복잡성을 줄이고 어플리케이션의 확장성을 늘리고자 단방향 데이터 흐름을 가지는 Flux 패턴 구조의 라이브러리를 만든다.

Flux 패턴

단방향 데이터 흐름을 통해 예측 가능하게 어플리케이션의 상태를 관리한다.

• Action
  • 사용자와의 상호 작용
• Dispatcher
  • 데이터 흐름을 관리
  • 액션을 스토어에 전달
• Store
  • 화면에 표시할 데이터
  • 액션에 따라서 상태를 업데이트
• View
  • 인터페이스 요소

Action(상호작용)이 발생하면 Dispatcher에 전달되고 Store에 변경된 데이터를 쌓다가 한번에 View에 렌더링한다.

View에서 Action이 발생하면 Store를 바로 업데이트하는 것이 아니라 Dispatcher를 거쳐 업데이트하기 때문에 데이터 흐름을 따라가기 용이하고 디버깅할 위치를 찾아내기 쉬워진다.

클로저란? MDN에서는 "A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)."라고 소개한다. "클로저는 함수의 주변 상태(어휘 환경)에 대한 참조와 함께 묶인 함수의 조합이다."

어떤 함수 A 내부에서 선언한 변수를 참조하는 내부 함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 후에도 변수가 사라지지 않는 현상 << 코어 자바스크립트 >>

var outer = function () {
  var a = 1;
  var inner = function () {
    console.log(++a);
  };
  return inner;
};

var outer2 = outer();
outer2(); // 2
outer2(); // 3

outer 함수의 반환값으로 inner 함수의 실행 결과가 아닌 함수 자체를 반환한다. 그러면 outer 함수의 실행 컨텍스트가 종료될 때 outer2 변수는 inner 함수를 참조하게 되고, outer2를 호출하면 inner 함수가 실행된다.

outer2 함수를 실행했을 때, 왜 같은 값을 반환하지 않고 a의 값이 늘어나는 것일까?

outer2 함수를 실행했을 때 흐름을 보면, inner 함수의 environmentRecord에는 a 변수가 없기에 스코프 체이닝에 따라 outer에서 선언한 변수 a에 접근한다. outer 함수는 이미 종료되었지만 inner 함수가 a를 참조하고 있기 때문에 가비지 컬렉터의 수집 대상이 되지 않아 변수 a는 존재할 수 있다.

즉, 어떤 함수 내부에서 선언한 변수가 외부에서 호출될 가능성(참조)이 있다면 가비지 컬렉터의 수집 대상이 되지 않고 함수가 종료된 이후에도 남아 있는 것이다.

참고 실행 컨텍스트 https://velog.io/@ss_kim/execution-context

메모리 관리

클로저를 사용하여 어떤 값의 참조 카운트가 1 이상이라면 메모리에 남아 있게 된다. 그렇기에 필요성이 사라진 시점에서 메모리를 소모하지 않도록 참조 카운트를 0으로 만들어 메모리를 관리해주어야 한다.

var outer = function () {
  var a = 1;
  var inner = function () {
    console.log(++a);
  };
  return inner;
};

var outer2 = outer();
outer2();
outer2();
outer2 = null; // inner 함수 참조를 끊음

클로저 활용

클로저를 어떤 상황에서 사용할 수 있을까?

1. 정보 은닉(캡슐화)

outer 함수는 외부로부터 격리된 공간이다. 외부에서 outer 함수를 실행하는 것은 가능하지만 outer 함수의 내부에 접근하는 것은 불가능하다. 위 예시에서 외부에서 변수 a의 값을 재할당하는 것을 불가능하다.

2. 모듈화

클로저를 각각의 변수에 할당하면 함수를 독립적인 부품 형태로 분리할 수 있다.

var outer = function () {
  var a = 1;
  var inner = function () {
    console.log(++a);
  };
  return inner;
};

var outer2 = outer();
var outer3 = outer();

outer2(); // 2
outer2(); // 3

outer3(); // 2
outer3(); // 3

이를 활용해 데이터와 메서드를 묶을 수 있다.

const counter = () => {
  let value = 0;

  return {
    increase: () => {
      value = value + 1
    },
    decrease: () => {
      value = value - 1
    },
}

const counter1 = counter();
counter1.increase();  // 1
counter1.increase();  // 2
counter1.decrease();  // 1

const counter2 = counter();
counter2.decrease();  // -1
counter2.decrease();  // -2
counter2.increase();  // -1

3. React의 Hooks

함수형 컴포넌트는 렌더링될 때마다 함수를 호출한다. 그렇기에 리렌더링될 때 이전 상태를 기억하고 있어야 하는데, useState의 개념을 클로저를 이용해 비슷하게 표현하면 아래와 같다.

let state
function useState(initialValue){
  if(state === undefined){
    state = initialValue
  }
  const setState = (newValue) => {
    state = newValue
  }
  return [state, setState]
}

최초 렌더링 시 initialValue를 state에 할당해서 반환하고, 상태 업데이트 함수 setState를 호출하면 newValue를 state에 재할당 후 반환한다.

참고 https://velog.io/@radin/js-closure https://yeoulcoding.tistory.com/149#recentEntries

function solution(brown, yellow) {
    var answer = [];

    const oneSide = brown / 2;

    for (let i = 1; i < oneSide; i++) {
        const width = oneSide - i
        const height = i

        if(width < height) break;

        if((width - 2) * height === yellow) return answer = [width, height + 2]
    }

    return answer;
}

<풀이>

brown을 2로 나누면 가로와 위, 아래를 뺀 세로의 합이 되고, 이 때 세로는 yellow의 높이가 된다.

yellow의 높이는 최소 1이기 때문에 1부터 brown / 2까지가 되고, 높이가 가로 길이를 넘어설 수 없는 반복문을 돌면서,

가로에서 양 너비 2를 뺀 값(width - 2)과 세로(height)의 곱이 yellow의 갯수와 같으면 값을 반환한다.

function solution(answers) {
    var answer = [];

    const a = [1,2,3,4,5]
    const b = [2,1,2,3,2,4,2,5]
    const c = [3,3,1,1,2,2,4,4,5,5]

    const count = [0,0,0]

    answers.forEach((item, i) => {
        if(item === a[i%5]) count[0]++
        if(item === b[i%8]) count[1]++
        if(item === c[i%10]) count[2]++
    })

    const max = Math.max(...count)

    count.forEach((item, i) => {
        if(item === max) answer.push(i + 1)
    })

    return answer;
}

<풀이>

인수로 주어진 answers 배열을 순회하면서 각 정답이 수포자들의 정답과 일치하는지 확인한다.

수포자들의 정답은 일정한 숫자가 반복되는 값이기에 배열로 만들고 각 배열의 length로 나눈 나머지값으로 인덱스를 구할 수 있다. 예를 들어, 1번이 찍는 방식은 [1,2,3,4,5]가 반복되고, 6번 문제는 i % length 즉5 % 5의 값인 0번 인덱스 1로 비교를 하면 됨

function solution(sizes) {
    var answer = 0;

    sizes.forEach((item, i) => {
        sizes[i] = item.sort((a, b) => a - b)
    })

    const w = sizes.map((item) => item[0])
    const h = sizes.map((item) => item[1])

    return answer = Math.max(...w) * Math.max(...h)
}

<풀이>

주어진 sizes 배열 안에 각 명함을 긴 쪽이 0번 인덱스에 위치하도록 정렬하고, 긴 변의 최댓값과 작은 변의 최댓값을 반환

useInfiniteQuery()

const {
  data,
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  promise,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

• queryFn

  • 필수값
  • 데이터를 요청하는데 사용하는 함수

• initialPageParam

  • 필수값
  • 첫 번째 페이지를 가져올 때 사용하는 매개변수

• getNextPageParam

  • 필수값
  • 다음 페이지 값으로 전달할 매개변수를 반환해야 함
  • 다음 페이지가 없다면 undefined 또는 null을 반환해야 함

• 훅의 return 반환값

  • data

    • queryFn의 데이터가 저장되어 있는 객체, {pages: [], pageParams: []}

  • data.pages

    • fetch한 데이터가 저장되는 배열

  • data.pageParams

    • 각 페이지를 fetch하는데 전달한 매개변수가 저장된 배열
      

예제

export function Component() {

  const observerRef = useRef();

  const fetchPosts = async (page = 1, items = 10) => {
    return await pb.collection('posts').getList(page, items);
  };

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam }) => fetchPosts(pageParam),
    initialPageParam: 1,
    getNextPageParam: (lastPage, allPages) => {
      if (lastPage.length < 10) return undefined;
      return allPages.length + 1;
    },
  });

  useEffect(() => {
    if (!observerRef.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && hasNextPage && !isFetchingNextPage) {
          fetchNextPage();
        }
      },
      { threshold: 1.0 }
    );

    observer.observe(observerRef.current);

    return () => {
      if (observerRef.current) {
        observer.unobserve(observerRef.current);
      }
    };
  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);

  const allPosts = data?.pages.flat() || [];

  return (
    <div className={S.component}>
      <Outlet context={{ posts: allPosts, isLoading }} />
      <div ref={observerRef} style={{ height: '1px' }}></div>
    </div>
  );
}

• fetchPosts 함수
  • pocketbase API를 사용해 데이터를 가져오며 page는 몇 번째 페이지인지, items는 페이지당 데이터의 갯수를 나타냄
  • page = 1, items = 10 일 경우, 09번 째 데이터를 가져오고, page = 2, items = 10 일 경우, 1019번 째 데이터를 가져옴

• getNextPageParam

  • 다음으로 전달할 pageParam 매개변수가 있는지 확인
  • items의 갯수가 10개 미만이라면 다음 페이지는 없는 것으로 생각해 undefind를 반환하고 아니라면 page + 1을 nextPageParam으로 반환해서 다음 페이지를 가져옴

• fetchNextPage()

  • 다음 페이지를 가져오는 함수
  • fetchPosts(nextPageParam)을 실행

• IntersectionObserver

  • 최하단에 주시 대상 요소를 하나 생성하고 뷰포트에 들어올 경우, fetchNextPage()를 실행

<Outlet>

react-router-dom을 사용하면 부모 경로 요소에서 자식 경로 요소를 렌더링하기 위해서 <Outlet>을 사용한다. 공식 문서의 예제로 설명하자면, / 이후의 하위 경로에 따라서 <Outlet> 위치에 <DashboardMessages> 또는 <DashboardTasks>가 렌더링 된다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

useOutletContext

이 때, 부모/자식 간 공유하려는 상태 또는 데이터가 있다면, <Outlet>에 내장되어 있는 context props를 통해서 간단하게 전달할 수 있다.

부모 요소에서는 context로 전달하고, 자식 요소에서는 useOutletContext() 훅으로 전달 받으면 된다.

function Parent() {
  const [count, setCount] = React.useState(0);
  return <Outlet context={[count, setCount]} />;

  // 객체 형태로 전달도 가능
  // return <Outlet context={{count}} />;
}

import { useOutletContext } from "react-router-dom";

function Child() {
  const [count, setCount] = useOutletContext();
  // const {count} = useOutletContext();

  const increment = () => setCount((c) => c + 1);
  return <button onClick={increment}>{count}</button>;
}

완전 이진 트리의 일종으로, 최댓값 또는 최솟값을 빠르게 찾아내기 위한 자료구조. 효율적인 데이터 관리와 처리가 필요한 다양한 알고리즘과 시스템에서 사용되며, 주로 우선순위 큐를 구현할 때 사용됨

우선순위 큐는 큐 자료구조에 우선순위 개념을 도입해 데이터가 들어오면 우선순위에 따라 정렬하고 우선순위가 높은 데이터가 먼저 빠져나가는 구조

종류

1. 최대 힙(Max Heap) - 부모 노드의 값이 자식 노드의 값보다 크거나 같음
2. 최소 힙(Min Heap) - 부모 노드의 값이 자식 노드의 값보다 작거나 같음

특징

1. 완전 이진 트리 구조 - 모든 레벨이 완전히 채워져 있고, 마지막 레벨은 왼쪽에서 오른쪽으로 채워짐

2. 순서 속성 - 반정렬 상태

   • 최대 힙은 부모 노드 >= 자식노드
   • 최소 힙은 부모 노드 <= 자식노드

3. 중복 허용 - 이진 트리와 달리 중복된 값을 허용

4. 효율적인 연산 - log n의 시간 복잡도를 가짐

힙의 구현

• 힙은 트리 구조이지만 js에서 이를 구현하기 위해서 배열을 사용
• 노드 번호를 쉽게 구별하기 위해서 배열의 0번 인덱스는 사용하지 않는 것이 편함
  • 부모 노드 인덱스 = Math.floor(자식 인덱스 / 2)
  • 왼쪽 자식 노드 인덱스 = 부모 인덱스 * 2
  • 오른쪽 자식 노드 인덱스 = (부모 인덱스 * 2) + 1

삽입

최소 힙을 예로 들자면,

1. 새로운 요소를 마지막 노드에 삽입
2. 부모 노드와 우선 순위를 비교하고 위치를 변경해야 한다면 실행
3. 힙의 성질이 true가 될 때까지 부모 노드와 비교를 반복

1. 새로운 요소 2를 마지막 노드에 삽입하고 부모 노드와 비교

2. 부모 노드와 위치를 변경하고 다시 부모 노드와 비교

3. 힙의 성질을 만족할 때까지 반복

삭제

1. 루트(최상위) 노드를 삭제하고 마지막 노드를 루트 노드 자리에 옮김
2. 힙의 성질에 맞게 자식 노드와 비교하며 재정렬

1. 루트 노드 1을 삭제하고 마지막 노드 13을 옮김

2. 우선 순위가 높은 3과 비교해서 재정렬

3. 힙의 성질을 만족할 때까지 반복

코드

class MinHeap {
  // 0번 인덱스는 사용하지 않기 위해 첫 번째 요소로 null 추가
  constructor() {
    this.heap = [null];
  }

  insert(value) {
    this.heap.push(value);
    this.bubbleUp();
  }

  bubbleUp() {
    let index = this.heap.length - 1;
    const insertedNode = this.heap[index]; // 새로 삽입된 노드

    // 비교 대상이 최상위 부모 노드가 될 때까지 반복
    while (index > 1) {
      const parentIndex = Math.floor(index / 2); // 비교할 부모 노드
      // 삽입된 노드의 값이 부모 노드의 값보다 작다면
      // 삽입된 노드 자리에 부모 노드의 값을 넣고, 
      // 다음 비교를 위해 현재 인덱스는 부모 인덱스로 변경
      if (insertedNode < this.heap[parentIndex]) {
        this.heap[index] = this.heap[parentIndex];
        // 구조 분해 할당으로 변경하는 것도 가능
        // [this.heap[index1], this.heap[index2]] = [this.heap[index2], this.heap[index1]];
        index = parentIndex;

      // 삽입된 노드의 값이 부모 노드의 값보다 크거나 같다면 반복문 중단
      } else break;
    }

    // 현재 인덱스에 삽입된 노드의 값을 넣어줌
    this.heap[index] = insertedNode;
  }

  remove() {
    // 트리에 노드가 1개일 경우, 삭제 및 반환
    if (this.heap.length === 2) return this.heap.pop();

    const root = this.heap[1];
    // 마지막 노드를 삭제하고 루트 노드로 이동
    this.heap[1] = this.heap.pop();
    this.bubbleDown();
    // 삭제한 노드 반환
    return root;
  }

  bubbleDown() {
    let index = 1;
    const rootNode = this.heap[index]; // 처음 비교할 루트 노드

    // 노드가 마지막 레벨로 갈 때까지 반복
    while ((index * 2) < this.heap.length) {
      const leftChildIndex = index * 2;
      const rightChildIndex = index * 2 + 1;

      // 오른쪽 자식이 존재할 때, 왼쪽과 오른쪽 자식의 크기 비교
      const smallerChildIndex = 
        rightChildIndex < this.heap.length && this.heap[rightChildIndex] < this.heap[leftChildIndex] 
        ? rightChildIndex 
        : leftChildIndex;

      // 루트 노드가 자식 노드보다 크다면
      // 루트 노드 자리에 자식 노드의 값을 넣고,
      // 다음 비교를 위해 인덱스는 자식 인덱스로 변경
      if (rootNode > this.heap[smallerChildIndex]) {
        this.heap[index] = this.heap[smallerChildIndex];
        index = smallerChildIndex;

      // 루트 노드가 자식 노드보다 크거나 같다면 반복문 중단
      } else break;
    }

    // 현재 인덱스에 처음 루트 노드의 값을 넣어줌
    this.heap[index] = rootNode;
  }
}

function solution(prices) {
    var answer = [];
      // let count = 0;

    for(let i = 0; i < prices.length; i++) {
        let count = 0;

        if(i == prices.length - 1) answer.push(0)

        for(let j = i + 1; j < prices.length; j++) {
            if(prices[i] <= prices[j]) {
                count++
            } else {
                answer.push(++count)
                count = 0
                break;
            }

            if(j == prices.length - 1) {
                answer.push(count)
                count = 0
            }
        }
    }

    return answer;
}

<풀이>

처음 반복문은 prices 배열의 각 요소를 순회하고 중첩된 반목문은 각 요소의 다음 인덱스부터 순회하면서 크기를 비교하고 count를 증가시키거나 answer에 push 마지막 비교 요소에 다다르면 answer에 count를 push

count를 반복문 안에서 선언하면 prices를 순회할 때마다 생성하게 되는데, 반복문 밖에서 선언하고 중첩된 반복문이 끝날 때 0으로 초기화 해주면 효율성이 조금 개선됨

function solution(bridge_length, weight, truck_weights) {
    var answer = 0;

    const on = []
    const wait = [...truck_weights]

    while(on.length || wait.length) {
        answer++

        if(answer == on[0]?.[0]) {
            on.shift()
        }

        if(on.reduce((a,c) => a + c[1], 0) + wait[0] <= weight) {
            on.push([answer + bridge_length, wait.shift()])
        } else {
            if(on[0]) answer = on[0][0] - 1
        }
    }

    return answer;
}

<풀이>

다리를 건너는 트럭, 대기하는 트럭을 배열로 정리. 이 때, 다리를 건너는 트럭은 [지나가는 시간, 무게]로 설정

예제의 표와 같이 다리를 건너는 트럭, 대기하는 트럭이 모두 0이 될때까지 while문 반복되고 answer가 1씩 증가

answer가 다리를 건너는 트럭의 지나가는 시간과 같아지면 shift로 제거

다리를 건너가는 트럭과 다음 올라갈 트럭의 무게가 weight 이하면 지나가는 트럭 배열에 추가 weight 이상이면 answer를 다리를 건너는 맨 앞 트럭의 시간으로 변경해서 반복문 실행

<처음 작성한 코드>

    while(on.length || wait.length) {
        answer++

        if(answer > bridge_length) {
            on.shift()
        }

        if(on.reduce((a,c) => a+c,0) + wait[0] <= weight) {
            on.push(wait.shift())
        } else {
            if(wait.length) on.push(0)
        }
    }

처음 작성한 코드에서는 다리를 건너가는 트럭과 다음 올라갈 트럭의 무게가 weight 이상일 때, 대기 중인 트럭 배열에 0을 추가해 줬는데, 이럴 경우에 다음 트럭이 못 올라가는 경우를 생략하지 않아 실행 횟수가 많아짐

function solution(priorities, location) {
    var answer = 0;

    let a = []
    let arr = priorities.map((item, i) => [i, item])

    for(let i = 0; i < priorities.length; i++) {
        const sliced = arr.slice(i)
        const max = Math.max(...sliced.map((item) => item[1]))
        const index = sliced.findIndex((item) => item[1] === max)

        arr = [...a, ...sliced.slice(index), ...sliced.slice(0, index)]
        a.push([sliced[index][0], max])

    }

    return answer = arr.findIndex((item) => item[0] === location && item[1] === priorities[location]) + 1
}

<풀이>

priorities를 각 요소와 인덱스로 구성된 새로운 배열로 바꾼 후, 순회하면서 가장 큰 값을 찾아 정렬해나감

반복문 안에 메서드가 사용되어 O(n^2)의 시간 복잡도를 가짐 효율성이 좋지는 않지만 priorities의 길이의 제한 사항이 100이라 통과는 됨

다른 사람 풀이

function improvedSolution(priorities, location) {
    let queue = priorities.map((priority, index) => ({ index, priority }));
    let answer = 0;

    while (queue.length > 0) {
        let current = queue.shift();
        if (queue.some(item => item.priority > current.priority)) {
            queue.push(current);
        } else {
            answer++;
            if (current.index === location) {
                return answer;
            }
        }
    }
}

some메서드를 사용해 queue의 우선 순위 중 맨 앞 요소보다 하나라도 큰 요소가 있다면 queue의 맨 뒤로 보내버림

맨 앞 요소의 우선 순위가 제일 높다면 queue에서 제거하고 카운트

function solution(s){
    var answer = true;
    const stack = {open:0, value:[]};

    stack.value = s.split('').map((item) => {
        if(item === '(') {
            stack.open++
            return 1
        } else {
            stack.open--
            if(stack.open < 0) return answer = false
            return -1
        }
    })

    if(stack.value.reduce((a,c) => a+c, 0) !== 0) return false

    return answer;
}

<풀이>

괄호를 나누어 순회하면서 '('는 1로, ')'는 -1로 바꾼다.

앞에서부터 더해가면 괄호가 열릴 때는 1씩 더해지고, 닫히면 1씩 빠짐 -> 괄호는 계속해서 열 수 있기 때문에 양수로 증가하는 것은 상관 없지만 음수가 되면 올바른 구조가 아니고, 최종적으로 0이 되어야 열고 닫는 개수가 맞음