어제의 나보다 성장한 오늘의 나

FEConf 2025 참여 후기

today_me — Sun, 24 Aug 2025 01:56:57 +0900

세종대학교 광개토관에서 열린 FECONF 2025를 다녀왔다.

일단 사람이 정말 많았다. 프론트엔드 개발자들만 모여있는데도 천 명은 족히 넘게 온 것 같았다. 에어컨이 빵빵해도 더워서 땀이 났다.

컨퍼런스를 다녀오면 항상 현장에서 발표를 들을 때는 이해가 잘 되는데, 막상 집에 돌아오면 머릿속에 키워드 몇 개만 남는 느낌이다. 그래서 까먹기 전에 핸드폰에 적어둔 메모를 기반으로 간단히 리서치를 하고 정리를 해봤다.

1. Svelte

1.1) fine-grained reactivity

리액트는 상태가 변경되면 해당 컴포넌트와 자식 컴포넌트가 모두 리렌더링 된다.
하지만 svelte는 변경한 특정 상태만을 렌더링 되도록 할 수 있다고 한다.

1.2) Virtual DOM을 쓰지 않고 실제 DOM을 직접 조작

Virtual DOM을 사용하는 Vue나 React는 Virtual DOM 연산의 오버헤드가 있다.
Svelte는 직접 DOM을 조작하기 때문에 해당 되지 않는다. 겉보기엔 DOM을 직접 다룬다는 점에서 과거의 jQuery와 비슷하다고 생각할 수 있지만, 컴파일 타임에 최적화된 코드로 변환된다는 점에서 본질적으로 차별성이 있다.

1.3) 컴파일러

컴파일 타임에 최적화된 코드로 변환하여 런타임 오버헤드가 거의 없다. 1.2에 포함된 내용이다.

2. React Compiler

2.1) 자동 메모이제이션 처리

memo, useMemo 같은 최적화를 자동으로 적용해 불필요한 렌더링 방지한다.
하지만 자동으로 여러 경우의 수를 미리 따져서 캐시를 만들어 두기 때문에 코드의 양이 많이 늘어난다.

즉, 번들 사이즈가 커진다는 단점이 있다. 일종의 trade-off가 있는 것이다.

프론트엔드 개발하면서 memo, useMemo, useCallback을 고민하는 것이 참 귀찮았는데, 솔깃한 인사이트였다.

2.2) 아직 실험 단계
아직 RCRelease Candidate 버전이다. 그렇기 때문에 약간 사용이 꺼려 진다.

Meta와 같은 회사에서는 이미 프로덕션 환경에 도입하여 사용하고 있지만, 앱에 컴파일러를 점진적으로 도입할지는 코드베이스의 건강 상태와 React의 규칙을 얼마나 잘 준수했는지에 따라 달라질 것입니다.

하지만 위와 같이 React 공식문서에서는 Meta는 이미 잘쓰고 있다고 한다. ㅎㅎ

3. Devup UI (CSS-in-JS)

Next.js가 떠오르고 서버 컴포넌트 개념이 등장하는 배경에서 런타임에 JS가 동적으로 CSS를 생성하는 CSS-in-JS 방식은 호환이 잘되지 않아 인기가 조금씩 떨어졌다. 그래도 사용은 하고 싶어서 사람들이 모든 곳에 use client를 붙이곤 했지만 너무 별로다... 결국 Tailwind처럼 빌드 시점에 클래스 기반 CSS를 생성하는 방식이 호환이 잘되서 각광받고 있다.

"음..왠지 더 잘 만들 수 있을거 같은데 ??"

라는 생각으로 CSS-in-JS이면서도 서버 컴포넌트에 호환될 수 있는 라이브러리를 만들고 있다고 하셨다.

css variable 지원과 조건부 오퍼레이션 추가
최신 번들러 (vite, rsbuild, next.js webpack) 지원
코드 AST 변환 및 rust와 wa를 활용한 스타일 캐시 로직 작성
rgba를 hex로 변환 및 중복된 색상 제거를 통한 최적화

등등 ...

하여튼 엄청 깎으면서 만들고 계셨다.

4. 웹 접근성와 ARIA

접근성 트리를 올바르게 구축하기 위해서는 ARIA 속성을 적극적으로 활용해야 한다. ARIA는 스크린리더나 보조기기가 요소를 정확히 인식하도록 도와주며, 이를 통해 모든 사용자가 차별 없이 이용할 수 있는 웹을 만들 수 있다.

이 외에도 SEO 최적화를 통한 비용 절감, 모노레포에서 폴리레포로의 마이그레이션 작업에 대해 들었다.

많은 인사이트들을 얻은 알찬 주말을 보냈다. 강의를 듣다가 예전에 next.js를 도입할 때 궁합이 좋은 CSS 라이브러리를 찾으면서 했던 고민들이 오랜만에 생각나기도 했다.

https://8156217.tistory.com/86

[Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

Next.js로 프로젝트를 하면서 드는 의문이 있다. 왜 MUI 같은 라이브러리들은 자꾸 호환이 안된다고 하는 걸까?? tailwind는 왜 되는걸까?? 공식 문서를 보면 다음과 같이 나와 있다. Next.js와 호환이 잘

8156217.tistory.com

그리고 나중에 리액트 컴파일러를 한번 시도해 봐야겠다. 웹 성능과 개발 생산성이 많이 올라갈 것 같다.

전에는 구글 컨퍼런스에서 v0를 알게 되어 잘 쓰고 있다. 컨퍼런스는 이런 꿀팁과 좋은 키워드들을 얻을 수 있어서 좋다!!

유네스코 유니트윈 르완다 출장

today_me — Tue, 5 Aug 2025 01:45:15 +0900

최근 유네스코 유니트윈(UNITWIN) 사업의 일환으로 2025.7.28 ~ 2025.8.1 기간동안 르완다에 출장을 다녀오게 되었다.

출장 일정

이번 출장의 주요 일정은 르완다 수도 키갈리에서 진행되었다.
현지에서는 Rwanda Polytechnic과 University of Rwanda 두 학교가 참여했고, 우린 이들을 대상으로 기업가 정신 훈련과 AI 관련 비즈니스 워크숍을 진행했다.

75분 동안의 AI 관련 강연

나는 ‘Product Development in AI Company’ 라는 주제로 약 75분간 강연을 진행했다.

발표에서는 다음과 같은 내용들을 다루었다.

프로젝트 관리
AI 서비스 개발의 과정
제품 고도화 방식
기술 스택과 인프라
Cursor, ChatGPT 등 실용적인 AI 툴들

학생들은 AI 툴들이 익숙하다.
GPT는 이미 많이들 쓰고 있었고 Cursor를 사용해 본 친구들도 있었다.

일정 관리나 협업 도구에 대한 관심도 높았다.
실제 기업에서는 관리 툴들을 어떻게 활용하는 지 궁금해 했다.

각 툴들이 다른 유사한 툴과의 차이점이 뭔지 많은 질문을 받았다.
수준 높은 질문과 몰입도 있는 질문에 놀랐다. 그리고 아프리카식 억양에 다시 한 번 놀랐다..
질문 이해하는 데 진땀 뺐다 ㅋㅋㅋㅋ...

Group Work

학생들을 6개 그룹(조당 약 10명)으로 나누고, 3박 4일 동안 하나의 비즈니스 아이템을 구상해서 마지막 날 발표하는 시간을 가졌다.
처음엔 다들 서로 어색해했지만, 시간이 흐르면서 점점 친해지면서 다들 열기가 붙었다.

내가 맡은 조는 도시 소규모 농업인을 위한 스마트팜 솔루션을 주제로 선정했다.

우리조 (3조)

"르완다의 도시에서는 채소가 너무 비싸다. 도시에서는 땅과 물이 부족해서 농사를 짓기 힘들기 때문에 외부에서 수입해야 하고, 이 과정에서 가격이 뻥튀기 된다."

이 문제를 해결하기 위해 수직 농업과 실시간 토양 모니터링 시스템을 활용한 솔루션을 내놓았다.
열심히 준비하더니만 결국 우리 조가 1등을 했다.

서로 끌어안고 기뻐하는 모습을 보는데 엄청나게 기뻐보였다.
예전에 친구들하고 해커톤 나갔을 때 상 받던 기억이 떠올랐었다.
큰 상도 아닌데 그 때는 마치 노벨상 받은 거 기뻤었다.

이 친구들의 몰입한 모습에 부러운 감정이 들었었다.

르완다의 열악한 교육 환경

1. 전기 공급의 부족

정전이 하루에도 몇 번씩 일어난다.
그룹 워크 중엔 강당 전력 부족으로 저녁이 되면 금방 어두워졌었다.

2. 일자리 부족

공학 계열 전공자도 일자리를 찾기 어렵다.
University of Rwanda 학교는 르완다에서 매우 유명한 학교임에도 일자리를 찾지 못하는 경우가 많이 있다고 한다.
건축이나 관광이 주 산업이고 기술은 아직이라고 한다.

3. 컴퓨터 보급 늦음

컴퓨터가 보급된 지 아직 3년도 안 됐다.
그래서 이메일 하나 보내는 데도 시간이 오래 걸리고, 타이핑이 서툰 경우도 많았다.

환경이 좋지 않아 보였다.
그래서 열정도 많고 하고 싶은 것들도 많아 보이는 데 환경이 받쳐주지 않는 느낌을 받았다.

느낀 점

아이들이 참 열정이 넘친다. 이런 교육 기회도 직접 참여하고, 몰입도 있게 문제를 해결하려고 하는 모습이 보기 좋았다.
그런데 환경이 참 아쉽다. 일자리가 많고 교육 기회만 많으면 더 즐겁게 공부할 수 있을 텐데.
이런 열정을 보며 좋은 환경에서 일하면서 열정이 부족한 내가 부끄러워 지기도 했다.

그리고 기술이 참 매력적이라고 느꼈다. 기술은 만국 공통이기 때문에 내가 가진 것을 쉽게 공유할 수 있다. 저번 스페인 MWC 박람회에서 부스를 운영했을 때도 신기했던 것이 모두가 다른 나라에서 와서 같은 흥미를 나누고 있다는 것이 참 좋았다.
특히 같이 가셨던 법 전공 박사님 한 분이 "법은 한 나라에 특정 되는 데 기술은 모두가 공유할 수 있다."고 부럽다고 말씀 해주셨다.

앞으로는 내가 배우는 기술을 더 가치있게 생각하려고 한다. 계속 공부하면서 기술을 어떻게 나누고 활용할지를 고민해봐야겠다.
단순히 밥벌이 수단으로서의 기술도 물론 소중하지만, 잘 활용하면 더 큰 가치를 만들어낼 수 있을 것 같았다.

[Next.js] 데이터 요청 구조를 Server Action으로 통합해보기

today_me — Mon, 21 Jul 2025 21:39:27 +0900

Next.js를 활용 하면서 많이 하게 되는 고민은, 이걸 대체 어떻게 써야 우리 팀에 적합하게 활용할 수 있을까? 입니다.
서버 컴포넌트(Server Components), 서버 액션(Server Actions) 등 Next.js의 다양한 기능들을 접해보면 분명히 강력하고 놀라운 부분도 많지만, 때로는 다양한 옵션들과 제약들로 인해 개발이 더 복잡해져서 오히려 개발 생산성이 저하 된다고 느껴질 때도 있습니다. 결국 좋은 기술이 있더라도 팀에 맞게 쓰지 않으면 오히려 독이 될 수 있다는 것이죠.

이번 글에서는 실제 프로젝트에서 경험한 기존 데이터 요청 방식에서의 개발 생산성 이슈와, 이를 Server Action 중심으로 통합함으로써 개선해 본 경험에 대해 공유드리고자 합니다.

다양한 방식으로 이뤄졌던 기존의 데이터 요청 구조

Next.js를 사용하면서 우리는 아래와 같이 상황에 따라 데이터 요청 방식을 다르게 가져가고 있었습니다.

1. 서버 컴포넌트 내 fetch
서비스 단 (services/) 들을 컴포넌트 내에서 직접 호출

// app/page.tsx (서버 컴포넌트)
import { getUserByIdFromDB } from '@/services/user';

export default async function Page() {
  const user = await getUserByIdFromDB('123');
  return <div>{user.name}</div>;
}

2. 클라이언트 컴포넌트 내 fetch

api route handler를 만들고 이를 fetch를 통해 호출.

실제로는 tanstack-Query 사용하여 브라우저 캐시를 적극 활용합니다.

// app/components/UserInfo.tsx (클라이언트 컴포넌트)
'use client';

export function UserInfo() {
  const [name, setName] = useState('');

  const fetchUser = async () => {
    const res = await fetch('/api/user?id=123');
    const data = await res.json();
    setName(data.name);
  };

  return <button onClick={fetchUser}>{name || 'Load User'}</button>;
};

호출하는 라우트 핸들러

// app/api/user/route.ts
import { NextResponse } from 'next/server';

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const id = searchParams.get('id');
  const user = await getUserByIdFromDB(id!);

  return NextResponse.json(user);
}

3. Mutation

server action을 활용하여 호출

// app/components/EditUser.tsx
'use client';

import { updateUserName } from '@/actions/user';

const EditUser = () => {
  const handleSubmit = async () => {
    const res = await updateUserName('123', 'John');
    if (res.success) alert('Updated!');
  };

  return <button onClick={handleSubmit}>Update Name</button>;
};

액션 정의

// app/actions/user.ts
'use server';

export async function updateUserName(id: string, name: string) {
  return { success: true, ... };
}

이렇게 데이터 요청 방식이 세 가지로 나누어져 있다 보니 다음과 같은 문제들이 발생하기 시작했습니다.

구조적 불일치가 만든 DX 저하

1. 라우팅 방식의 불일치
- 서버 컴포넌트는 라우트 단 없이 바로 서비스 단 호출
- 클라이언트 컴포넌트는 app/api 라우트를 통해 요청
- Mutation은 server action을 통해 이루어짐 (route 역할을 대신 수행)

2. 응답 형태(response type)의 불일치
- 서버 컴포넌트는 직접 타입이 적용된 결과값 반환
- API Route는 Response.json() 형태로 wrapping
- Server Action은 { success: boolean, message?: string, data?: T } 식으로 custom 구조 사용

3. 호출 로직 분산으로 인한 폴더 구조 혼란
- services/, api/, actions/ 등 호출 위치가 제각각이라 개발자가 로직 위치를 예측하기 어려움

구조가 불일치 하다보니 자연스레 헷갈려하는 팀원들이 나타나기 시작했죠 ㅎㅎ..
특히 이번에 새로 합류한 팀원이 프로젝트 구조를 이해하는 과정에서, 각기 다른 데이터 요청 방식으로 어디서 어떤 데이터를 요청하고 응답 받는지 예측 하기 어렵다는 피드백을 했습니다. 그래서 데이터 요청 방식을 통합 시켜서 개발 생산성을 높여 보고자 하였습니다.

Server Action를 활용한 데이터 처리 구조 통합

1. 모든 데이터 요청은 Server Action을 통해 처리한다
- 클라이언트와 서버 컴포넌트 모두 actions/에 정의된 함수만 사용
- fetch나 API Route는 사용하지 않고, Server Action → Service 함수 형태로 흐름을 통일

2. 비즈니스 로직은 services/에서 관리하고, Server Action에서만 호출한다
- 클라이언트가 직접 service를 건드리는 일은 없도록 분리
- 서비스 로직은 항상 action 내부에서 호출되도록 규칙화하여 역할과 책임을 명확히 분리

액션 정의

// app/actions/user.ts
'use server'

import { getUserByIdFromDB } from '@/services/user';

export async function getUserById(id: string) {
  const user = await getUserByIdFromDB(id);
  return { success: true, data: user };
}

서버 컴포넌트 fetch

import { getUserById } from '@/actions/user';

const Page = async () => {
  const res = await getUserById('123');
  if (!res.success) return <div>Error</div>;
  return <div>{res.data.name}</div>;
};

클라이언트 컴포넌트 fetch

'use client';

import { getUserById } from '@/actions/user';

const ClientComp = () => {
  const handleClick = async () => {
    const res = await getUserById('123');
    console.log(res.data);
  };

  return <button onClick={handleClick}>불러오기</button>;
};

이러면 뭐가 좋지??

1. 요청 방식 일관성
서버/클라이언트 구분 없이 동일한 방식으로 호출 가능하기 때문에 재사용이 가능 합니다.
전에는 같은 기능이어도 클라이언트에서 쓰면 라우트 핸들러를 만들어야 했는데...하하..

2. 디렉토리 일관성
actions/ 디렉토리 중심으로 통일되므로 유지보수성이 올라갑니다.

3.타입 안정성
라우트 핸들러와 달리 타입이 자동 추론 된다.
다른 프로젝트에서 Trpc를 사용하는 입장에서 이건 아주 행복합니다.

근데 이렇게 해도 괜찮을까??

1. Server Actions는 원래 mutation용으로 설계됨

next.js의 공식 문서의 server action를 읽어보면 form submission 또는 mutation 용이라고 되어 있습니다. 예제를 모두 보아도 fetch 용도로 사용하지 않습니다. 이것을 보면 제가 시도한 방식이 공식적으로 권장하는 방식은 아닌 것 같습니다.
https://nextjs.org/docs/app/guides/forms#programmatic-form-submission

2. Server Actions perform HTTP POST requests

모두 내부에서 사용하는 것들 대상이기 때문에 문제가 되지 않습니다.

쨋든 현재 상황에서는 문제가 되지 않아 보입니다.

결론

솔직히 이게 맞는 방법인지는 잘 모르겠습니다.
다만 우리 팀에게는 DX를 높여준 좋은 방식 입니다.

전에는 무조건 공식 문서대로만 해야 된다고 생각했었는데 꼭 그렇지만은 않은 것 같습니다.
어떤 기술을 사용하더라도 현재 상황에 적합한 방법으로 사용하는 것이 중요하다는 것을 배웠습니다!

참고자료
https://nextjs.org/docs/app/guides/forms#programmatic-form-submission
https://www.robinwieruch.de/next-server-actions-fetch-data/

Data Fetching with Server Actions in Next.js

Can I fetch data with Server Actions in Next.js? There are different ways to fetch data. Normally Server Actions are used to mutate data, but ...

www.robinwieruch.de

Recoil를 대체할 전역 상태 관리 라이브러리(HIState) 제작기

today_me — Mon, 14 Jul 2025 23:47:18 +0900

이전에 프로젝트에서 클라이언트 애플리케이션 내의 모든 전역 상태를 Recoil로 통합 관리하고 있었습니다.

하지만 프로젝트의 구조가 점점 바뀌면서, Recoil의 역할이 줄어들게 되었습니다.

서버 상태는 React Query로 대체

우선, React Query의 도입으로 서버 상태 관리 방식이 완전히 바뀌었습니다.

데이터 fetching, 캐싱, 로딩 상태 관리 등을 React Query로 손 쉽게 처리하면서 Recoil은 더 이상 서버 상태를 다루지 않게 되었습니다.

Recoil은 여전히 클라이언트 전역 상태(UI 상태, Role)를 관리하는 용도로 일부 사용되고 있었습니다.

제한적인 역할만 수행하면서도 비교적 무거운 Recoil을 계속 유지하는 것은 부담스럽다고 판단했습니다.

Context API는 ??

context API도 여러 장점이 있습니다.

React 내장 기능이므로 추가 설치 없이 사용 가능하고 props drilling을 해결 해줄 수 있습니다.

그러나.. 두 가지 치명적인 단점이 있습니다.

1. 불필요한 리렌더링
Context의 value가 변경되면 해당 Context를 구독(useContext)하고 있는 모든 Consumer 컴포넌트가 강제로 리렌더링 됩니다.
이는 개별 필드의 변경 여부와 무관하게 발생하며, 구체적인 구독 범위를 분리할 수 없어 성능 최적화에 취약합니다.

MyProvider.tsx

import { createContext, useContext, useMemo, useState } from 'react';

// Context
interface AppState {
  count: number;
  message: string;
}

const AppContext = createContext<AppState | null>(null);

// Provider
function AppProvider({ children }: { children: React.ReactNode }) {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('hello');

  const value = useMemo(() => ({ count, message }), [count, message]);

  return (
    <AppContext.Provider value={value}>
      <button onClick={() => setCount((c) => c + 1)}>count +</button>
      <button onClick={() => setMessage((m) => m + '!')}>message +</button>
      {children}
    </AppContext.Provider>
  );
}

// count만 사용하는 컴포넌트
function CountDisplay() {
  const { count } = useContext(AppContext)!;
  console.log('CountDisplay가 렌더링됨');
  return <div />;
}

// message만 사용하는 컴포넌트
function MessageDisplay() {
  const { message } = useContext(AppContext)!;
  console.log('MessageDisplay가 렌더링됨');
  return <div />;
}

// App
export default function App() {
  return (
    <AppProvider>
      <CountDisplay />
      <MessageDisplay />
    </AppProvider>
  );
}

count 버튼을 누르면 MessageDisplay도 함께 렌더링됩니다.

message 버튼을 누르면 CountDisplay도 함께 렌더링됩니다.

이는 Context의 value 전체 객체가 변경 되면서, 이를 사용하는 모든 Consumer가 리렌더링되기 때문입니다.

2. Provider-Consumer의 강결합 구조

Consumer들은 반드시 해당 Context의 Provider 하위 트리 내에 존재해야 하며, 이는 컴포넌트 재사용성을 떨어뜨립니다.

외부 스토어 + useSyncExternalStore를 활용하여 직접 만들자

React 외부에서 상태를 관리하고, 필요한 컴포넌트만 구독할 수 있는 외부 스토어 기반 상태 관리 도구를 직접 구현했습니다.

이름은 서비스 이름인 HIStudy를 따서 HIState 라고 명명했습니다 :)

구조는 아래와 같습니다.

HIStateManager.ts

export class HIStateManager<T> {
  private state: T;
  private listeners: StateListener[] = [];

  constructor(initialState: T) {
    this.state = initialState;
  }

  setState = (param: SetStateParam<T>) => {
    if (param instanceof Function) {
      const newState = param(this.state);
      this.state = newState;
    } else {
      this.state = param;
    }
    this.emitChange();
  };

  getState = () => {
    return this.state;
  };

  subscribe = (listener: StateListener) => {
    this.listeners = [...this.listeners, listener];
    return () => {
      this.listeners = this.listeners.filter((l) => l !== listener);
    };
  };

  emitChange = () => {
    for (let listener of this.listeners) {
      listener();
    }
  };
}

이 HIStateManager 클래스는 React 외부에서 상태를 관리하는 외부 스토어입니다.
setState는 새로운 상태를 직접 전달하거나, 이전 상태를 기반으로 한 콜백 함수를 받아 상태를 업데이트할 수 있습니다.
상태가 변경되면 등록된 listeners(예: handleStoreChange 같은 구독 함수)들에게 emitChange를 통해 변화를 알림으로써, React 컴포넌트가 이를 감지하고 리렌더링할 수 있도록 합니다.

hooks/HIState.ts

interface Atom<T> {
  key: string;
  default: T;
}

interface GlobalStateMapValue<T> {
  atom: Atom<T>;
  stateManager: HIStateManager<T>;
}

type SetterOrUpdater<T> = (valOrUpdater: ((currVal: T) => T) | T) => void;

const globalStateMap = new Map<string, GlobalStateMapValue<any>>();


export function useHIState<T>(atom: Atom<T>): [T, SetterOrUpdater<T>] {
  const store = globalStateMap.get(atom.key)!.stateManager;

  const value = useSyncExternalStore(store.subscribe, store.getState);

  return [value, store.setState];
}

export function useHIStateValue<T>(atom: Atom<T>): T {
  const store = globalStateMap.get(atom.key)!.stateManager;

  const value = useSyncExternalStore(store.subscribe, store.getState);

  return value;
}

export function useSetHiState<T>(atom: Atom<T>): SetterOrUpdater<T> {
  const globalStateMapValue = globalStateMap.get(atom.key)!;
  return globalStateMapValue.stateManager.setState;
}

이 훅들은 HIStateManager로 관리되는 외부 상태를 React 컴포넌트와 안전하게 동기화(sync) 해주는 커스텀 훅들입니다.

useSyncExternalStore(store.subscribe, store.getState)를 사용하여 외부 스토어의 현재 상태를 구독하고, 상태 변경 시 자동으로 컴포넌트를 리렌더링합니다. hook들은 recoil에서 제공하는 기능을 본따서 만들었습니다.

export function createHISAtom<T>(atom: Atom<T>): Atom<T> {
  if (globalStateMap.has(atom.key)) {
    console.warn(`[HIState] Duplicate key "${atom.key}" ignored.`);
    return globalStateMap.get(atom.key)!.atom;
  }

  const stateManager = new HIStateManager<T>(atom.default);

  globalStateMap.set(atom.key, {
    atom,
    stateManager,
  });
  return atom;
}

외부 스토어를 생성하는 유틸 함수입니다.

Page.tsx

export default function Page() {
	const [counter, setCounter] = useHIState(counterState);
}

간단하게 쓸 수 있습니다 :)

결과

Recoil 사용

제작 라이브러리 사용

gzip 기준 718.76 KB → 695.15 KB (약 3.28% 감소)

작지만 소중한 개선이 이루어졌습니다 :)

아래 PR에서 모든 코드를 확인하실 수 있습니다!

https://github.com/HandongSF/histudy-fe/pull/132

Feat/131 global state lib by ohinhyuk · Pull Request #132 · HandongSF/histudy-fe

작업 사항 Recoil 제거 전 Recoil 제거 후 gzip 기준 718.76 KB → 695.15 KB → 약 3.28% 감소 관련 이슈 close #131

github.com

이미지 포맷 비교 분석 (JPG, PNG, WebP, HEIC, AVIF)

today_me — Mon, 7 Jul 2025 23:26:53 +0900

이미지는 웹 성능에 직접적인 영향을 줄 정도로 용량이 큰 리소스입니다.

특히 우리 서비스는 사진 포함 콘텐츠가 중심이기 때문에, 웹에 사용할 이미지 포맷을 어떻게 선택하느냐가 성능에 직접적인 영향을 줍니다.

그래서 대표적인 이미지 포맷인 JPG, PNG, WebP, HEIC, AVIF의 기술적 특징과 브라우저 호환성을 비교 분석하고, 어떤 포맷이 우리 서비스에 적합한지를 판단해봤습니다.

가장 익숙한 포맷인 JPG와 PNG를 먼저 비교하기 전에 얘네한테 사용된 압축 기술에 대해서 먼저 알아봅시다.

압축(Compression) 방식

이미지에서 사용하는 압축 방식은 크게 두 가지입니다.

1) 손실 압축 (Lossy Compression)

압축률이 높아 파일 크기를 크게 줄일 수 있습니다.
다만 파일 압축 시 이미지의 일부 데이터가 영구적으로 삭제 됩니다.
예: JPG

2) 무손실 압축 (Lossless Compression)

압축 후에도 모든 이미지 데이터가 그대로 보존됩니다.
주로 로고, UI, 그래픽, 그래프 등 디테일이 중요한 이미지에 적합합니다.
예: PNG

JPG vs PNG

1) JPG (JPEG)

JPG는 1992년에 Joint Photographic Experts Group에서 개발한 이미지 포맷으로, 손실 압축 방식을 사용합니다.

가장 큰 장점은 파일 크기가 작고 웹 호환성이 매우 뛰어나며, 특히 사진과 같이 색상 변화가 많은 이미지에 적합하다는 점입니다.

다만 압축 과정에서 일부 이미지 정보가 손실되기 때문에 화질이 저하될 수 있고, 투명 배경을 지원하지 않는다는 단점이 있습니다.

2) PNG

PNG는 1996년에 PNG Development Group에 의해 개발된 이미지 포맷으로, 무손실 압축 방식을 사용합니다.

이미지 데이터를 손상시키지 않고 저장하므로 화질이 유지되며, 투명도(알파 채널)를 지원하고 픽셀 단위의 정밀한 표현이 가능합니다.

하지만 파일 크기가 크고, 연속적인 색상 변화가 많은 일반 사진에는 비효율적이어서 주로 로고, 아이콘, UI 요소 등에 적합합니다.

Adobe 공식 JPG vs PNG 비교

JPEG와 TIFF 파일의 용도 | Adobe

JPEG와 PNG는 가장 널리 사용되는 이미지 파일 포맷입니다. 두 파일의 주요 특징과 차이점, 용도를 살펴보세요.

www.adobe.com

그럼 최적화를 위한 다른 차세대 확장자들을 알아봅시다.

WebP 이란??

WebP는 2010년에 Google이 개발한, 손실과 무손실 압축을 모두 지원하는 웹 최적화 이미지 포맷입니다.

투명도와 애니메이션도 지원하며, 동일 품질 대비 더 작은 파일 크기를 제공하는 것이 핵심입니다.

파일 크기가 무려

JPG보다 25~34% 더 작으며 PNG보다 26% 더 작습니다.

호환성은 어떨까

2025년 기준 Can I use

Chrome, Firefox, Safari, Edge 등 주요 브라우저 모두 지원
IE(Internet Explorer)만 미지원

더 더 높은 압축률의 HEIC, AVIF

HEIC (High Efficiency Image Container)

HEIC는 2015년 MPEG에서 만든 이미지 포맷으로, 애플이 iOS 11부터 기본으로 사용하고 있는 형식입니다.

아이폰을 쓰신 분들은 많이 보셨을 확장자입니다 ㅎㅎ

일반적인 JPG보다 훨씬 적은 용량으로 고화질 이미지를 저장할 수 있고,

HDR 효과, 라이브 포토, 심도 정보처럼 아이폰의 다양한 사진 기능을 담을 수 있다는 게 큰 장점이라고 합니다.

하지만 호환성이...

사실상 웹을 위한 이미지 포맷은 아닌 듯 하네요...

AVIF (AV1 Image File Format)

AVIF는 2019년에 Google, Netflix 같은 기업들이 참여한 ‘Alliance for Open Media’라는 단체에서 만든 이미지 포맷입니다.

사실 저도 이번에 처음 알았는데, 기존의 WebP보다도 더 높은 압축률과 HDR, 무손실 압축, 투명도 지원 같은 고급 기능까지 갖춘 포맷이라고 합니다.

과연 이 친구의 호환성은?

아직까지는 브라우저와 툴의 지원 범위가 제한적이며, 일반 이미지 뷰어에서도 미리보기가 안 되는 경우가 많다고 합니다.

can i use에서도 webP에 비해 지원하는 버전이 적은 것을 확인하실 수 있습니다.

fallback 전략 없이 단독으로 사용하긴 어려워 보이네요.

결론: WebP 선택

WebP는 JPG, PNG 대비 용량이 작으면서도, HEIC와 AVIF와 달리 주요 브라우저에서도 안정적으로 지원됩니다.

특히 GA(구글 애널리틱스)를 확인해본 결과, 우리 서비스에서는 Internet Explorer의 사용률이 0%이기 때문에 WebP 도입에 문제가 없다고 판단했습니다.

높은 압축률과 높은 호환성을 위해서 WebP를 택하게 되었습니다 :)

[Next.js] Middleware를 활용한 인증 처리 통합

today_me — Sun, 6 Jul 2025 22:10:04 +0900

기존 인증 로직 관리 문제

프로젝트 내 인증 및 권한 검사 로직이 각 페이지와 API 핸들러에 흩어져 있었습니다.

각 페이지마다 인증/인가 처리를 하고 있으며,
API 보호를 위해 각 handler 내부에 반복적으로 인증 검사를 호출하고 있었습니다.

이런 방식은 새 기능을 추가할 때마다 중복 로직이 추가되고, 또 로직이 흩어져 있어서 관리도 어렵습니다.

그래서 요청이 들어오는 가장 앞단, 즉 middleware에서 인증을 일괄 처리해보기로 했습니다.
이렇게 하면 인증에 대한 처리를 각 페이지나 API에서 따로 신경 쓰지 않아도 되는 장점이 있습니다.

Middleware으로 기존 로직 마이그레이션

우선 기존의 접근 제어 로직을 middleware.ts에 그대로 옮겨 적용해봤습니다.

middleware.ts

export async function middleware(request: NextRequest) {
  const token = request.cookies.get("token")?.value;

  if (!token) {
    return NextResponse.redirect(new URL("/logout", request.url));
  }

  try {
    const payload = await verifyToken(token);

    const hasPermission = checkPermission({
      path: request.nextUrl.pathname,
      role: payload.role,
      permissions: payload.permissions,
    });

    if (!hasPermission) {
      return NextResponse.redirect(new URL("/forbidden", request.url));
    }

    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL("/logout", request.url));
  }
}

그러나 실행과 동시에 다음과 같은 에러가 발생했습니다.

Error: The edge runtime does not support Node.js 'crypto' module.

이 때부터 뭔가 쉽지 않겠다는 생각이 들었습니다...

열심히 알아보니 middleware에는 독특한 특징이 있었습니다.

Middleware는 next 서버 (node runtime) 와는 다르게 edge runtime 위에서 동작합니다.
https://nextjs.org/docs/app/api-reference/edge

Edge Runtime이란?

Node.js가 아닌 Web API 기반의 경량 실행 환경
빠르고 가볍지만, Node 내장 모듈을 사용할 수 없고 사용 가능 API가 제한 적임

즉, 기존에 사용하던 MongoDB 클라이언트, node-cache, createHash 같은 기능을 지원하지 않습니다.

*edge에서 지원하는 API들
https://nextjs.org/docs/app/api-reference/edge#reference

그럼 기존 로직을 그대로 사용하는 것은 어려워 보이는데 어떻게 해결할 수 있을까??

시도 1: Middleware를 Node.js 런타임으로 전환

Next.js의 canary 버전에서는 middleware의 runtime을 'nodejs'로 설정할 수 있습니다.

middleware.ts

export const config = {
  runtime: "nodejs", // Canary 버전에서만 지원
};

이렇게 하면 Node 전용 API를 사용할 수 있어 기존 로직으로 구현할 수 있습니다.
그러나 canary는 실험적이기 때문에 안정성이 떨어지고, production에서는 사용이 권장되지 않아 보류하였습니다.

시도 2: Edge-safe 방식으로 구현

이슈 1) JWT 라이브러리 사용 제약
많은 JWT 라이브러리(예: jsonwebtoken)는 Node.js 전용 API에 의존하고 있어 Edge Runtime에서 사용할 수 없습니다.
-> 그러나 다행히 현재 사용중인 jose는 Edge 환경에서도 지원됩니다.

이슈 2) Node.js 내장 모듈 사용 불가 (node:crypto, node:cache 등)
Edge Runtime에서는 node:crypto 등 Node 고유 모듈을 사용할 수 없습니다.
-> Web Crypto API를 사용하여 해시, 암호화 등의 기능을 대체할 수 있습니다.

const hashBuffer = await crypto.subtle.digest(
  "SHA-256",
  new TextEncoder().encode("hello")
);

이슈 3) MongoDB 클라이언트 사용 불가
기존에는 JWT 검증을 위해 JWK 키를 MongoDB에서 가져오는 구조였지만, Edge 환경에서는 DB 클라이언트가 동작하지 않아 직접적인 DB 접근이 불가능합니다.
-> JWK 키를 /api/jwks 같은 endpoint에 공개하고, middleware에서 fetch()를 통해 가져오는 방식으로 개선할 수 있습니다. 이는 엔터프라이즈 환경에서 JWK 키가 외부에 노출된다는 우려가 있긴 합니다.

현 상황에서 Edge-safe 방식의 단점

위와 같이 구현하면 Edge-safe 방식으로도 가능은 하지만,

여러 인증 로직을 직접 Edge 환경에 맞게 재구현해야 하고,
middleware의 책임이 지나치게 커진다는 단점이 있습니다.

“어차피 fetch를 활용 할 거면, 로직 자체를 Route handler에 위임하는 게 더 낫지 않을까?”

시도 3: 토큰 검증 로직을 Route handler로 위임 ✅

middleware.ts: 토큰 유무 판단 및 리다이렉트 처리만 수행
Route Handler (/api/auth): JWT 서명 검증, 권한 검사 등 핵심 로직 처리

middleware.ts

export async function middleware(req: NextRequest) {
  const token = req.cookies.get("token")?.value;
  const pathname = req.nextUrl.pathname;

  if (!token) {
    return NextResponse.redirect(new URL("/logout", req.url));
  }

  const authResult = await fetch(`{NEXT_BASE_URL}/api/auth`, {
    method: "POST",
    headers: {
      Cookie: token,
    },
    body: JSON.stringify({
      pathname,
    }),
  });

  if (authResult.status === 401) {
    return NextResponse.redirect(new URL("/logout", req.url));
  } else if (authResult.status === 403) {
    return NextResponse.redirect(new URL("/forbidden", req.url));
  }
  return response;
}

장점

middleware는 요청 흐름만 제어 → 코드가 간단하고 가독성 높음
인증 로직은 Node.js 환경에서 자유롭게 구현 가능
JWK를 기존처럼 외부에 노출할 필요 없음

최종 결정 및 요약

현재 상황에서는 토큰 검증 로직을 Route handler로 위임하는 방식이 가장 현실적이고 적합하다고 판단했습니다.
핵심 인증/권한 로직은 그대로 유지하면서도, Edge 환경의 제약을 피할 수 있기 때문입니다.

Next.js App Router의 middleware는 인증 흐름을 통일하는 데 효과적인 도구입니다.
하지만 Edge Runtime이라는 제약 조건 때문에 Node.js 고유 기능들을 사용할 수 없으므로, 모든 인증 로직을 middleware 내부에서 처리하기에는 한계가 있습니다.

따라서 우리는 다음과 같은 구조를 선택했습니다:
• middleware: 요청 흐름을 제어 (토큰 유무 판단, 리다이렉트 등)
• Route handler (/api/auth): Node.js 환경에서 실제 토큰 검증 및 권한 판단 수행

향후에 Next.js에서 정식 릴리즈에서 middleware의 Node.js runtime 지원이 될 수 있다고 하니 지켜 봐야겠습니다 :)

[Next.js] pre-fetch를 통한 초기 렌더링 최적화

today_me — Sat, 5 Jul 2025 15:04:18 +0900

현재 서비스에는 현재 생성 상태를 확인하기 위해 주기적인 polling을 하거나, 사용자의 상호작용에 따라 데이터를 요청해야 하는 경우가 종종 있습니다.

이러한 경우, 클라이언트 컴포넌트에서 여러 번 fetch를 트리거해야 하며, 이를 효율적으로 관리하기 위해 useQuery를 적극 활용하고 있습니다.

useQuery를 사용하는 이유는 다음과 같은 처리를 간단하게 해결할 수 있기 때문입니다

• 캐시 관리

• 폴링 처리

• 로딩 및 에러 상태 핸들링

이번 글에서는 이러한 요구사항을 가진 클라이언트 컴포넌트에서 데이터 fetch를 어떻게 최적화했는지에 대한 경험을 공유해보려고 합니다

기존 구조

기존 요청 구조

데이터 관리 페이지는 다음과 같은 두 개의 요청을 처리합니다.
1. 데이터 목록 조회
2. 선택된 항목의 상세 분석 결과 조회

사용자는 먼저 목록을 보고, 그 중 하나를 선택하면 분석 결과가 출력되는 구조입니다.

기본적으로 목록이 렌더링 되면 자동으로 첫 번째 데이터가 자동 선택되는 기능이 있습니다.
이 구조에서 다음과 같은 두 가지 성능 문제가 존재했습니다.

문제점 1: 초기 로딩 문제

사용자는 페이지 진입 직후 상당한 시간 동안 로딩 UI를 봐야 합니다.

로딩 예시 화면

문제의 원인은 클라이언트에서 렌더링 된 후 보내는 늦은 요청 때문입니다.

이를 해결하기 위해 데이터를 서버에서 미리 프리패치하여, 페이지 진입 시 즉시 콘텐츠가 렌더링되도록 개선했습니다.

app/data/page.tsx

export default async function Page() {
  
  const dataList = await extDataService.getDataList(); // pre-fetch
  
  return (
    <DataView dataList={dataList} /> // client component
  );
}

서버 컴포넌트에서 데이터를 먼저 가져와 클라이언트 컴포넌트에 props로 전달하는 구조입니다.

페이지 진입 시 데이터를 미리 프리패치함으로써, 클라이언트에서 별도 요청 없이 즉시 렌더링이 가능합니다.

문제점 2: 워터폴 요청 (Waterfall Requests)

두 번째 문제는 데이터 간의 의존성으로 인해 발생하는 워터폴 요청입니다.
목록 중 첫 번째 항목이 기본적으로 자동 선택되는 로직을 넣다 보니 목록을 가져온 후 상세 분석 데이터를 추가로 요청하게 됩니다.

get_series 워터폴 요청 발생

서버에서 목록을 가져올 때, 목록의 첫 번째 항목에 대한 상세 데이터도 함께 미리 요청합니다.
이 데이터를 React Query의 prefetchQuery로 캐시에 등록한 뒤,
dehydrate를 사용해 클라이언트로 직렬화해 전달합니다.

클라이언트에서는 useQuery로 동일한 key로 요청을 보내면,
이미 캐시에 존재하는 값이 즉시 사용되므로 별도의 fetch가 발생하지 않습니다.

app/data/page.tsx

export default async function Page() {

  const dataList = await dataService.getDataList();
  const firstItem = dataList[0];

  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["detailData", firstItem.id],
    queryFn: () =>
      fetchDetailData(firstItem.id),
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <DataView dataList={dataList} defaultItem={firstItem} />
    </HydrationBoundary>
  );
}

app/components/client-component/data-view.tsx

'use client';

export default function DataView({
	dataList, 
	defaultItem
}){
	const [selectedItem, setSelectedItem] = useState(defaultItem)

	const { data } = useQuery({
		queryKey: ["detailData", selectedItem.id],
		queryFn: () => fetchDetailData(selectedItem.id),
		refetchOnWindowFocus: false,
	});
}

prefetchQuery 이후 캐시가 생성된 것을 devtools에서 확인할 수 있습니다.

react query devtools에서 캐시 조회

개선 된 결과

html의 응답이 이전 보다 좀 늦어졌습니다. 서버에서 프리패치를 진행하기 때문입니다.

그래서 덕분에 그 이후로 fetch 요청이 발생하지 않았습니다.

초기 로딩 문제와 워터풀 요청을 모두 해결한 것으로 확인하였습니다 :)

응답 시간도 개선 전 930ms -> 개선후 420 ms 로 약 55% 개선 되었습니다

개선된 시스템 구조

[Next.js] timezone 불일치로 인한 Hydration Failed 이슈

today_me — Sat, 5 Jul 2025 12:58:38 +0900

Hydration failed because the server rendered HTML didn’t match the client.
This can happen if a SSR-ed Client Component is used.

서버와 클라이언트 간의 HTML 불일치 때문에 해당 에러가 발생했습니다.
어떤 상황에서 이 문제가 발생했는지, 그리고 어떻게 해결했는지를 공유합니다.

기존 날짜 처리 방식

기존에는 다음 Util을 사용해서 날짜 데이터를 처리 합니다.

utils/date-format.ts

export function getFormattedLocaleDateString(date: string | Date) {
  if (typeof date === "string") {
    return new Date(date).toLocaleDateString();
  } else if (typeof date === "object") {
    return date.toLocaleDateString();
  }
}

toLocaleDateString() 는 Date 객체를 현지 표준 시간대와 언어 설정에 맞춰 문자열로 변환합니다.

즉, 사용자의 로컬 타임존에 따라 날짜를 다르게 포맷팅합니다.

그게 왜 문제가 될까??

클라이언트 컴포넌트의 경우 getFormattedLocaleDateString() 함수는 서버에서도 실행되고, hydration 시 클라이언트에서도 동일하게 실행됩니다. 이 때 불일치가 발생합니다.

서버는 UTC 타임존 기준으로 날짜를 포매팅합니다.
그러나 클라이언트는 사용자의 로컬 타임존(KST 등) 을 기준으로 포매팅합니다.

즉, new Date().toLocaleDateString()의 결과가 서버와 클라이언트에서 다르기 때문에 hydration 시 HTML mismatch가 발생한 것입니다.

서버(UTC)에서는 2025. 1. 11.로 렌더링됨
클라이언트(KST)에서는 2025. 1. 12.로 렌더링됨

결과적으로 서로 다른 날짜 문자열이 나와 hydration 에러가 발생한 것입니다.

근데 왜 서버는 UTC 기준인가?

Next.js의 서버는 Node.js 환경에서 실행되며, UTC 타임존을 사용합니다.

서버가 UTC 기준으로 동작해야 하는 이유는 다음과 같습니다.

글로벌 사용자 기준으로 표준화된 시간 관리가 가능
데이터 저장/변경 시 타임존 이슈 없이 일관성 있는 처리

생각 해보면 당연한 얘기죠.

해결 방법

원인은 파악했으니 문제를 해결하려면 SSR과 CSR 간 시간 표현 기준을 통일해야 합니다. 방법은 크게 두 가지입니다.

1. UTC 기준으로 포맷 고정하기

가장 심플한 방법입니다.

options에 timeZone을 추가하면 됩니다.

new Date().toLocaleString("ko-KR", {timeZone: "UTC"})

실제로도 많은 회사들이 UTC를 기준으로 모든 시간대를 통일하여 사용합니다.
글로벌 서비스인 Datadog, AWS 서비스도 기본적으로 UTC를 기준으로 하죠.

2. 날짜를 클라이언트에서만 포매팅한다.

'use client';

export function LocalizedDate({ date }: { date: string }) {
  const [formatted, setFormatted] = useState('');

  useEffect(() => {
    const d = new Date(date);
    setFormatted(d.toLocaleDateString());
  }, [date]);

  return <span>{formatted}</span>;
}

Hydration mismatch 문제는 서버에서 렌더링 한 것과 클라이언트에서 렌더링 한것이 다르기 때문에 일어납니다.

그러므로 useEffect를 활용하여 포매팅을 진행해서 보여주면 해결 할 수 있습니다.

useEffect는 브라우저가 HTML을 렌더링한 후 실행되는 side effect hook 이기 때문이죠.

그리고 이 훅은 참고로 클라이언트에서만 실행 됩니다.

결론

2번 useEffect 방식도 hydration mismatch를 충분히 방지할 수 있지만, 초기 렌더링 시 잠깐 값이 비어 있거나 깜빡이는 현상이 발생합니다. 또한 모든 날짜 표시를 클라이언트에서 처리해야 하므로, 개발 관점에서 로직이 분산되고 유지보수가 어려워지는 단점이 있습니다.

그래서 우리는 서버와 클라이언트 모두에서 일관되게 동작하도록 UTC 기준으로 날짜 포맷을 통일하기로 했습니다 :)

[Next.js] 서버 컴포넌트에서의 에러 처리와 ErrorBoundary

today_me — Thu, 3 Jul 2025 00:26:57 +0900

문제 상황

위와 같은 에러 화면이 출력 되었다.

처음엔 단순한 인증 오류로 보였다. 그런데 CSS도 전혀 적용되지 않고, 페이지 렌더링도 중단된 듯하다.

서버 컴포넌트 렌더링 자체가 실패한 것처럼 보였고, 에러 바운더리(error.tsx)가 이를 제대로 처리하지 못한 것 같다.

뭐가 문제일까?

문제가 발생한 페이지의 코드의 형식은 아래와 같다.

export default async function Page() {
  const data = await dataService.getData(); // 이 부분에서 에러 발생

  return (
    <div>
      <DataTable data={data} />
    </div>
  );
}

dataService.getData()에서 예외가 발생하여 throw Error를 하였고, 이를 명시적으로 try-catch로 감싸지 않았다.

에러는 상위로 전파되며 결국 서버에서의 렌더링에 문제가 생긴 것으로 보였다.

그런데 분명 app/error.tsx 파일이 있는데 왜 이 에러를 처리하지 못했을까?

error.tsx

'use client' // Error boundaries must be Client Components
 
import { useEffect } from 'react'
 
export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)
  }, [error])
 
  return (
    <div>
      
      ...
 
      <Button variant="outline" size="lg" onClick={reset}>
            다시 시도하기
          </Button>
      <Link href="/login">
        <Button variant="delete" size="lg" className="w-full">
              로그인 화면으로 이동하기
        </Button>
       </Link>
    </div>
  )
}

클라이언트 컴포넌트로 잘 작성되어 있었다. 에러가 났던 화면에 코드에서의 버튼도 보이는 걸 보면 error.tsx가 렌더링 되긴 했다.

좀 부실해보이지만..

다만 서버의 서비스 단에서 던진 에러 메세지는 error.tsx까지 도달하지 않았다.

로컬에서 재연

음?? 로컬에서는 에러 바운더리가 서버 에러를 잘 잡아낸다.
그래서 검색을 해보았다.

서버 컴포넌트의 에러는 Error Boundary로 전달되지 않는다.

Next.js 공식 문서 및 관련 GitHub Discussions에 따르면

1. 서버 컴포넌트에서 렌더링 도중 잡지 못한 에러는 React의 Error Boundary(error.tsx)로 전달되지 않는다.

2. 그러나 개발 모드에서는 디버깅을 위해 서버의 에러 메세지를 그대로 전달하여 보여 준다.

프로덕션에서는 보안 상 이유 (DB connection 에러 정보 등)로 해당 에러 메시지를 클라이언트에 전달않고 단순화 해서 보여준다.

그럼 Error Boundary는 언제 동작하고, 언제 동작하지 않는가?

React의 Error Boundary는 컴포넌트 트리 내에서 발생하는 예외를 잡아내고, fallback UI를 렌더링할 수 있게 해주는 안전장치다.

하지만 그 역할과 한계를 명확히 이해하고 써야 한다.

error-boundary.js

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  // 렌더링에 영향을 주는 상태 업데이트
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  // 실제 에러 로깅은 여기서 수행
  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>문제가 발생했습니다.</h1>;
    }

    return this.props.children;
  }
}

여기서 핵심은 componentDidCatch는 클래스 컴포넌트의 생명주기 메서드라는 점이다.

함수형 컴포넌트에서는 메서드를 사용할 수 없기 때문에, Error Boundary는 반드시 클래스 컴포넌트로 작성해야 한다.

그런데 중요한 제약이 있다

Error Boundary는 오직 “렌더링 중” 발생한 에러만 처리할 수 있다.

처리할 수 있는 상황

- render() 중 터진 에러

- 생명주기 메서드 (constructor, render, getDerivedStateFromProps 등)

처리할 수 없는 상황

- async/await 등 비동기 함수에서 발생한 에러

- useEffect, 이벤트 핸들러(onClick 등)처럼 마운트 이후에 발생하는 에러

- 서버 사이드 렌더링(SSR) 중 발생하는 에러 (특히 Next.js의 서버 컴포넌트)

useEffect(() => {
  throw new Error("이 에러는 Error Boundary가 못 잡는다.");
}, []);

서버 컴포넌트의 에러는 왜 안 잡힐까?

Next.js에서는 서버 컴포넌트가 서버에서 렌더링되고, 클라이언트로 HTML이 전송된다.

이때 서버에서 발생하는 에러는 React Error Boundary가 작동하기 전에 이미 렌더링이 중단되기 때문에, 클라이언트에 전달되지 않는다. 그래서 브라우저에 망가진 HTML이 전달 되게 된다.

이런 경우에 서버 컴포넌트에서 직접 try/catch로 처리하고,

redirect() 해주거나 fallback UI를 return 해주면 된다.

주저리 주저리 말이 길어졌는데 결국은 기존에 error boundary의 역할을 정확히 이해하지 못했던 게 문제였다.

에러가 개발 서버에서는 잘 잡아서 보여주다보니 착각을 했었던 것이다 ㅠㅠ

서버 컴포넌트의 에러 핸들링에 대한 처리가 없어서 무방비한 상태였던 것이고, 이를 핸들링 해줌으로써 문제를 해결했다.

참고 자료

• Vercel Discussion #66999

• Vercel Discussion #49426

• 공식 문서: Server Component에서의 에러 처리

• https://ko.legacy.reactjs.org/docs/error-boundaries.html

Husky를 활용한 Git hooks 설정과 작동원리

today_me — Fri, 29 Nov 2024 00:36:05 +0900

도입 배경

현재 개발 중인 우리 서비스는 배포를 진행할 때 github action을 통해 빌드를 진행 하는 데 그 때 불용 코드나 오류가 있으면 빌드가 실패한다. 그 이유는 코드 퀄리티를 위해 빌드 실행 시 함께 진행되는 타입스크립트 컴파일에서 linting을 진행하도록 설정했기 때문이다. 그래서 우리 개발팀은 배포 전에 반드시 로컬에서 사전에 빌드 테스트를 해봐야 하는데 사람들이 이를 종종 까먹고 github에 업로드 하여 배포 때 계속 실패하게 되는 이슈가 있었다. 이를 해결하기 위해 husky를 도입 해보기로 하였다.

husky란?

Ultra-fast modern native git hooks Automatically lint your commit messages, code, and run tests upon committing or pushing.

쉽게 말해서 Git Hooks를 사용하기 편하게 해주는 도구라고 볼 수 있다.

Git hooks는 무엇일까?

특정 이벤트가 발생했을 때 git에서 특정 스크립트를 실행하도록 하는 것이다. 쉽게 말해 커밋, 푸쉬, 머지 등이 발생했을 때 쉘이나 perl 스크립트와 같은 실행 가능 파일을 실행 시켜 특정 작업을 수행 하는 것이다.
참고로 기본 훅 디렉토리는 .git/hooks에 위치해 있고 관련 설정 파일은 .git/config 이다.
설정을 추가하고 원하는 훅을 형식에 맞게 작성하여 hooks 디렉터리에 넣어 훅을 트리거링 하여 사용하는 방식이다.

Git hooks 종류

git hooks에는 클라이언트 훅과 서버 훅이 있다.

1) 클라이언트 훅
commit, rebase, merge, push 등 작업자의 환경(로컬 환경)에서 발생하는 이벤트 전/후 실행 되는 훅이다.

2) 서버 훅
Git Repository 측에서 발생하는 훅이다. 중앙 관리가 가능하므로 서버 관리자라면 서버 훅이 좀 더 유용하게 사용될 수 있다.

우리는 git hooks 중 클라이언트 훅을 사용하여 빌드 테스트를 자동화하여 작업자의 실수를 줄이고자 했다.

그 과정에서 husky를 통해 간편하게 설정하였다.

Husky 사용

pnpm을 사용했기에 pnpm을 기준으로 작성하였다.

1. 설치

pnpm add --save-dev husky

2. 간편 설정

pnpm exec husky init

3. 원하는 훅 설정

pre-commit과 pre-push 중 고민을 했었으나 pre-commit으로 하게 되면 불필요한 빌드 작동 때문에 생산성을 오히려 저하 시킬 것이라 판단되어 pre-push를 선택하였음.

.husky/pre-push

#!/bin/bash
pnpm build

이제 설정이 끝났다! 예상대로 push 명령어를 실행하면 먼저 빌드가 자동 실행되고 실패 시 push가 진행 되지 않는다!

Husky 작동원리

사용하기 간편한 건 알겠는데 대체 어떻게 작동하는 걸까??

앞서 말했듯이 git hooks를 사용하려면 .git/hooks에 훅을 추가해야 한다.
근데 해당 디렉토리에는 추가된 훅이 없는 데 왜 작동을 하는 걸까??

아래의 명령어 때문이다.

pnpm exec husky init

해당 init을 진행하면 다음과 같은 일들이 일어난다.

husky init (recommended) The init command simplifies setting up husky in a project. It creates a pre-commit script in .husky/ and updates the prepare script in package.json. Modifications can be made later to suit your workflow.

husky init을 실행하면 .husky 폴더가 생기고 스크립트 샘플들이 나타난다. 이곳에서 스크립트를 정의하여 사용한다. 그리고 .husky 폴더를 git hooks 폴더로 인식하기 위해 git hooks 설정 파일인 .git/config에 코드가 추가 되었다.

[core]
        repositoryformatversion = 0
        filemode = true
        bare = false
        logallrefupdates = true
        ignorecase = true
        precomposeunicode = true
        hooksPath = .husky/_ -> 추가 됨

그래서 husky 폴더를 git hooks 관련 디렉토리로 인지할 수 있게 된 것이다.

근데 알다시피 .git/config는 git에 무시되서 깃허브에 올라가지 않는다.
그럼 다른 협업 개발자들도 husky를 사용하려면 husky init 명령어를 해줘야 하는 걸까??

그렇지 않다.

그것은 prepare script 때문이다.
위의 설명에 따르면 husky init 후 package.json에 prepare script도 추가된다.

 "scripts": {
    ...
    "prepare": "husky" -> 추가 됨
  },

npm 공식문서
https://docs.npmjs.com/cli/v8/using-npm/scripts

npm 공식 문서에 따르면 prepare 스크립트는 로컬에서의 npm insall이 발생하면 작동한다.

즉, 다른 사람들은 그저 허스키가 설치된 레포지토리를 받고 npm install을 해주면 관련 라이브러리 설치 이후 prepare에 설정된 husky가 작동하고 이를 통해 본인 로컬 환경의 .git/config에 hooksPath = .husky/_ 가 자동으로 추가되는 것이다.

그렇기 때문에 협업하는 사람들은 git hooks를 따로 추가하지 않더라도 husky가 알아서 다 설정해주기 때문에 git hooks를 간편하게 사용이 가능한 것이다.

husky는 간편해서 어떤 식으로 작동하는 지 몰라도 쉽게 사용할 수 있다. 그렇지만 작동 원리를 공부하면서 git hooks에 대해 더 깊게 알 수 있었기에 공유를 위해 포스팅을 남긴다.

[NextJS] Next.js 프로젝트에서 CSS 프레임 워크 결정 하기

today_me — Mon, 25 Mar 2024 00:25:38 +0900

Next.js를 사용하여 프로젝트를 진행하기로 하였다. 현재 상황과 Next.js의 호환성을 고려하여 css Framework를 선정하고 있다.

1. 현재 상황

디자이너가 없다. 능력 있는 디자이너와 함께 협업을 했더라면 tailwind css 하나만 사용해도 괜찮았을 것 같다. 하지만 모달, 사이드 바 등등 컴포넌트들을 직접 만들어야 하는 상황이 있어서 컴포넌트를 제공해주는 무언가가 필요하다.

2. Next.js 의 호환성

이번 프로젝트에서는 UI가 큰 비중을 차지 하지는 않아서 최대한 Next.js의 장점을 살려서 서버 사이드를 최대한 활용 하려고 한다.

일단 클라이언트 사이드에서 많이들 사용하는 CSS-In-JS..! 예쁜 UI 컴포넌트들을 많이 제공해주지만...

Next.js의 서버 컴포넌트는 CSS-In-JS와는 호환성이 떨어진다. 아래 글에 정리를 해두었다.

2024.03.21 - [Next.js] - [Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

[Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

8156217.tistory.com

일단 tailwind css를 사용하기로 했다.

팀원들이 tailwind css에 대한 사용 경험도 있으며, Next.js도 tailwind css와의 높은 호환성을 제공한다.

공식 문서 내용

Tailwind CSS is a utility-first CSS framework that works exceptionally well with Next.js.

어쨌든 Tailwind Css를 가져가기로 했고, 앞서 말했듯이 컴포넌트가 필요했다. 그래서 Tailwind Css 기반 컴포넌트 라이브러리들을 찾아보았다.

1) Flowbite ( 결정 )

Flowbite - Tailwind CSS component library
Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS

Flowbite는 tailwind css 기반이기 때문에 호환이 괜찮다.

그리고 다른 라이브러리들에 비해 UI들을 그나마 다양하게 제공 해줘서 결정하게 되었다. ~~그래도 부족하지만..~~

참고로 next.js에서 이 라이브러리를 사용하려면 flowbite-react와 함께 사용하여야 한다!

2) daisy UI

The most popular component library for Tailwind CSS

daisy UI는 호환성이 정말 좋다. 처음에는 호환성 때문에 사용하려 했으나 제공하는 컴포넌트가 너무 적었다.

그리고 컴포넌트가 너무 심플해서 많은 커스텀을 필요하기 때문에 사용을 안하기로 마음 먹었다.

3) Next UI

이건 tailwind css 기반은 아니었지만 그냥 이름부터 뭔가 Next.js와 호환 될 것 같아서 사용하려고 해봤다.

App Directory Setup
Next.js 13 introduces a new app/ directory structure. 
By default it uses Server Components. 
As NextUI components use React hooks, we added the use client; at build time, 
so you can import them directly in your React Server Components (RSC).

하지만 공식 문서에서 리액트 훅을 사용하기 때문에 서버 컴포넌트와 호환성이 떨어진다고 한다.

그래서 클라이언트 컴포넌트로 전환 시켜야 사용이 가능하다고 한다.

왜 이름은 Next UI 일까..

결론은 Tailwind Css와 flowbite ( + flowbite-react )를 함께 사용하기로 마음 먹었다.

이유는 호환성, 그리고 다양한 컴포넌트의 필요성 때문이라고 요약할 수 있겠다.

더 좋은 라이브러리가 있다면 댓글로 남겨 주시면 너무 감사할 것 같습니다!

[React] 클래스 인스턴스의 효율적인 렌더링과 접근 범위 제어 방법

today_me — Sun, 24 Mar 2024 23:49:12 +0900

리액트에서 클래스를 설계하고 컴포넌트 내에서 클래스 인스턴스를 활용하는 코드를 작성하였는데, 더 효율적으로 관리하는 방법을 배우게 되어 공유하고 싶은 마음에 글을 작성하게 되었습니다.

두 가지에 초점을 맞췄습니다

1) 인스턴스의 불필요한 재렌더링 방지
2) 인스턴스의 전역적인 접근 막기 ( 사이드 이펙트 방지 차원 )

1. 처음 작성했던 클래스 방식 ( 예시 코드 )

calculator.js

export class Calculator {

  add(a, b) {
    return a + b;
  }

  multiply(a, b) {
    return a * b;
  }
  
}

page.jsx

export default function Page(){

    const [first , setFirst] = useState(1);
    const [second , setSecond] = useState(2);
    const [result , setResult] = useState(0);
    const calculator = new Calculator();
    
    useEffect( () => {
        setResult(calculator.add(1+2));
    } , [first , second])

    return (
        <>
            {result}
        </>
    )
}

문제점

page가 재랜더링 될 때마다 calculator의 인스턴스가 새로 생성되게 된다. (불필요한 재렌더링)

2. 싱글톤 클래스 사용

싱글톤을 사용하여 하나의 인스턴스만 활용하여 메모리 누수를 방지

calculator.js

export class Calculator {
  static instance = null;

  constructor() {
    if (Calculator.instance) {
      return Calculator.instance;
    }
    Calculator.instance = this;
  }

  static getInstance() {
    if (!Calculator.instance) {
      Calculator.instance = new Calculator();
    }
    return Calculator.instance;
  }

  ...
}

문제점

이 instance는 전역적으로 접근이 가능하다. ( 사이드 이펙트 위험 가능성 )

그리고 다른 페이지에서 다른 인스턴스를 사용하고 싶어도 그럴 수 없다.

독립적인 인스턴스 사용이 불가능하다 ㅠㅠ

3. 컨텍스트의 활용

컨텍스트를 활용해서 접근 범위를 제한 한다.

Context API에 인스턴스 주입

const calculatorInstance = new Calculator();

const CalculatorContext = createContext(calculatorInstance);

export const CalculatorProvider = ({ children }) => {
  return (
    <CalculatorContext.Provider value={calculatorInstance}>
      {children}
    </CalculatorContext.Provider>
  );
};

페이지 내에서 활용

import React from 'react';
import { useCalculator } from './CalculatorContext';


export default function Page() {

	const calculator = useCalculator(); // 컨텍스트에서 Calculator 인스턴스를 가져온다.

    const [first , setFirst] = useState(1);
    const [second , setSecond] = useState(2);
    const [result , setResult] = useState(0);

    
    useEffect( () => {
        setResult(calculator.add(1+2));
    } , [first , second])
  
    return(
        <>
                {result}
        </>
    )
}

효과

불필요한 재렌더링이 방지되고 해당 인스턴스에 Context 내부에서만 접근이 가능합니다. ( 두 가지 이슈 해결 )

리액트가 상태 변경을 추적할 필요가 없어서 관련된 오버헤드가 줄어듭니다.

다만 코드가 조금 길고 신경써야할 Context가 하나 더 추가 되었네요.

4. useState 활용 ( 현재 사용 중 )

export default function Page() {

	const [calculator] = useState(() => new Calculator());
  
    const [first , setFirst] = useState(1);
    const [second , setSecond] = useState(2);
    const [result , setResult] = useState(0);

    
    useEffect( () => {
        setResult(calculator.add(1+2));
    } , [first , second])
  
	return(
    	<>
            {result}
     	</>
	)
}

이게 끝입니다.

인스턴스를 State에 주입 시켜주고 사용합니다.

효과

State이기 때문에 직접적인 변경이 없을 시에는 렌더링이 일어나지 않죠. ( 불필요한 재렌더링 방지 )

그리고 상위에서는 접근이 불가능합니다. ( 접근 범위 제한 )

하위 컴포넌트에서 접근하고 싶다면 prop으로 내려주면 사용 가능합니다.

여러 곳에서 내려줘야 한다면 코드가 더러워 질 수 있겠습니다.

하지만 저의 경우 많이 내려주지 않아서 관련 이슈는 없었습니다.

상황에 맞게 잘 사용하시면 되겠습니다.

하나의 인스턴스를 전역적으로 사용하고 싶다면 싱글톤

불필요한 추적 없이 싫거나 클래스를 다양한 하위 컴포넌트에서 사용한다 싶으면 Context

짧은 코드로 깔끔하게 사용하고 싶다면 useState

저는 코드가 짧고 간결하면서 요구 사항을 모두 만족 시킬 수 있어서 useState가 좋았습니다!

[Next.js] Next.js와 호환되는 css와 그렇지 못한 css에 대한 고찰

today_me — Thu, 21 Mar 2024 00:50:24 +0900

Next.js로 프로젝트를 하면서 드는 의문이 있다.

왜 MUI 같은 라이브러리들은 자꾸 호환이 안된다고 하는 걸까??

tailwind는 왜 되는걸까??

공식 문서를 보면 다음과 같이 나와 있다.

Next.js와 호환이 잘되는 것들

1. CSS Modules

2. tailwind CSS

3. Sass

Next.js와 호환이 잘 안되는 것

CSS-in-JS

~~근데 또 emotion은 이제 지원한다고 한다.~~

CSS-in-JS가 지원이 안되는 이유는??

이유는 다음과 같이 나타나 있다.

Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components.

-> Next.js에서 Server Components(RSC)를 활용하면, 서버 측에서 pre-render 단계에서 미리 HTML과 CSS를 클라이언트에 전달합니다. 그리고 클라이언트가 이를 받아서 화면에 보여주게 됩니다. 따라서, Next.js의 서버 컴포넌트(RSC)를 활용하려면 빌드 시에 CSS 파일이 사전에 준비되어야 합니다. 반대로 런타임에 JavaScript를 사용해 CSS를 동적으로 생성하는 접근법 ( 이를테면 CSS-In-JS )은 Next.js의 RSC에 호환되지 않고 주로 클라이언트 컴포넌트에서 활용됩니다. 이는 서버 측에서 처리되는 RSC가 HTML과 함께 최적화된 CSS를 미리 클라이언트에 전달하는 특성 때문입니다.

그럼 어떤 방식들이 빌드 타임에 css 파일을 만들 수 있어서 Next.js의 RSC와 호환이 되고 어떤 방식들이 그러지 못할까??

1. Vanilla CSS (순수 CSS)

순수 CSS는 별도의 라이브러리나 프레임워크 없이 웹 브라우저가 직접 해석할 수 있는 원시 CSS 코드를 사용하는 방식이다.

순수 Css는 별 다른 처리가 필요하지 않아 서버 컴포넌트(RSC)에서 호환 문제가 발생하지 않는다.

2. CSS Preprocessors (CSS 전처리기)

Sass, Less, Postcss 를 포함하는 CSS 전처리기는 빌드 타임에 순수 CSS로 컴파일 된다.

그래서 역시 호환 문제가 발생하지 않는다.

3. CSS Modules

CSS 클래스 이름을 고유하게 만들어 스타일 충돌을 방지하는 방식. 빌드 시점에 이미 스타일이 처리되어 최종 CSS 파일이 생성하기 때문에 서버 사이드 렌더링과 문제없이 호환 된다.

4. Utility-First CSS

Tailwind css 가 포함된다. 빌드 타임에 유의미하게 사용되는 유틸리티 클래스만을 포함하는 최적화된 CSS 파일을 생성한다.

생성된 CSS 파일은 서버 사이드에서 HTML에 직접 적용되므로, JavaScript의 실행 없이도 최종 사용자에게 스타일이 적용된 페이지를 제공할 수 있다.

4. CSS-in-JS

Styled-components, MUI 등을 포함하고 JavaScript를 사용하여 스타일을 정의한다. 그래서 런타임에 동적으로 스타일이 적용된다. ~~일부 라이브러리는 추가 작업을 통해 서버 사이드 렌더링을 지원한다.(ex. Emotion)~~

어쨌든 빌드 타임에 css가 완성되냐 , 런타임에서 JS를 통해 동적으로 css가 렌더링 되냐가 Next.js의 서버 컴포넌트와의 호환성을 결정해 준다고 결론을 내렸다!

[React] useSyncExternalStore 사용 방법과 사용 이유

today_me — Thu, 14 Mar 2024 00:46:01 +0900

리액트 공식 문서에 따르면 useSyncExternalStore는 '외부 스토어를 구독할 수 있는 React 훅' 이라고 나와있습니다.

외부 스토어가 뭘까요??

반대로 외부 스토어가 아닌 경우에 대해서 먼저 생각해보면 이해하기가 수월합니다.

보통 우리는 구독할 데이터를 useState나 useContext 등의 리액트 훅을 이용하여 state에 저 장 하고 사용합니다. setState로 값을 수정하면 자동으로 리렌더링이 일어나죠. 하지만 이것들은 리액트 내부에서 사용될 때만 가능합니다. 리액트 훅이니까요.

반대로 리액트 내부에서 이용하지 않는 경우는 뭐가 있을 까요??

class를 사용하거나 function 으로 만들어 외부 저장소를 만드는 경우를 들 수 있습니다.

counter.js 클래스 형태

class Counter {
  constructor() {
    this.count = 0;
  }

  increment() {
    this.count += 1;
  }

  decrement() {
    this.count -= 1;
  }
}

counter.js 함수 형태

function createCounter() {
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }

  return { increment, decrement };
}

이런식으로 만들 수 있습니다.

사용 방식은 인스턴스를 생성해서 메서드를 호출하는 식으로 되겠죠.

이렇게 '데이터가 외부'에서 관리되고 있을 때 '리액트 내부에서 구독'하려고 하면 어떻게 해야할까요??

이 때 useSyncExternalStore 리액트 훅을 통해 쉽게 구독할 수 있습니다.

class CounterStore {
  constructor() {
    this.count = 0;
    this.listeners = [];
  }

  increment() {
    this.count++;
    this.emitChange();
  }

  decrement() {
    this.count--;
    this.emitChange();
  }

  subscribe(listener) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter(l => l !== listener);
    };
  },

  getSnapshot() {
    return this.count;
  }

  emitChange() {
    for (let listener of listeners) {
    	listener();
 	}
  }
}

// 싱글톤 인스턴스 생성
export const counterStore = new CounterStore();

import React from 'react';
import { useSyncExternalStore } from 'react';
import { counterStore } from './path/to/CounterStore';

function CounterComponent() {
  // useSyncExternalStore로 카운터의 상태를 구독
  const count = useSyncExternalStore(
    counterStore.subscribe,
    counterStore.getSnapshot
  );

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => counterStore.increment()}>Increment</button>
      <button onClick={() => counterStore.decrement()}>Decrement</button>
    </div>
  );
}

export default CounterComponent;

리스너들을 관리할 리스트를 추가하고 구독 (subscribe) 과 값 반환(getSnapshot) 메서드를 이용하여 구독을 진행합니다. 변화 알림 (emitChange) 메서드를 만들고 변화를 알려야 하는 곳에 사용합니다. 위에서는 카운터가 증가하거나 감소하였을 때 변화를 리스너들에게 알릴 수 있도록 emitChange를 호출하게 하였습니다. 필요한 곳에 emitChange를 호출하도록 커스텀 하시면 됩니다.

사용 중에 회고를 해보았다.

그냥 진작에 리액트 내부에서 state로 관리하면 되는거 아닌가??
쓰는 게 맞는 선택이었나??

일단 회사의 요구 사항이 다음과 같았다.

1. 프론트엔드와 백엔드 모두에서 접근할 수 있는 형태 ( 리액트 , node.js 를 pnpm으로 한 워크 스페이스에서 관리 중 이었음 )

2. 클래스를 사용하여 관련 변수들을 클래스 프로퍼티로 관리하고 다양한 연산 과정을 클래스 메서드로 관리할 수 있도록.

이 두 가지 요구 사항을 충족 하기 위해 클래스를 사용하였고 클래스는 리액트의 외부 스토어로 관리 되기 때문에 useSyncExternalStore가 적절한 선택이었다고 스스로 결론을 내렸다.

[Python] 가상 환경 설정 및 프로젝트 관리 관련 커맨드 (pyenv , poetry)

today_me — Wed, 6 Mar 2024 01:10:12 +0900

사내에서 파이썬 AI 모델을 다룰 일이 있어서 파이썬 가상 환경 설정 방법을 공부하면서 커맨드를 정리하였다.

내가 사용하기 위해 정리 한 것이라 다소 정리가 되어 있지 않을 수 있다....

글로벌 파이썬 버전 확인

python --version

Pyenv 사용

내 컴퓨터에 설치된 모든 파이썬 버전 확인

pyenv versions

원하는 Python 버전을 pyenv를 통해 설치합니다

pyenv install 3.8.6

글로벌 파이썬 버전 변경

pyenv global [파이썬 버전]

설치한 Python 버전으로 가상 환경을 생성합니다.

pyenv virtualenv 3.8.6 my-virtual-env-3.8.6

생성한 가상 환경을 활성화합니다

pyenv activate my-virtual-env-3.8.6

작업이 끝났다면, 가상 환경을 비활성화합니다

pyenv deactivate

파이썬 위치 확인

pyenv which python3
/Users/oinhyuk/.pyenv/versions/3.10.13/bin/python3

poetry 사용

poetry 설치 전 가상환경 프로젝트 내부에 설치되도록 설정

poetry config virtualenvs.in-project true --local

poetry 적용된 프로젝트에서 가상환경 생성 및 의존성 설치

poetry install

프로젝트 설정 시 toml 파일 생성

poetry init

가상 환경 생성 및 실행

poetry shell

필요 패키지 설치

poetry add

가상환경 나가기

deactivate

[HTTP] Resource , URI , URL , URN 에 대해 알아보자

today_me — Fri, 9 Feb 2024 16:54:16 +0900

HTTP를 공부하다가 Resource, URI , URL , URN 의 개념에 대해 공부하게 되었습니다.

겹치는 부분이 많다 보니 제대로 공부하지 않으면 굉장히 헷갈리는 개념입니다.

그래서 오늘 이것들에 대해 정리를 해보기로 했습니다.

1. Resource

인터넷 상의 Resource 란 URI(Uniform Resource Identifier)를 통해 유일하게 식별되고 접근할 수 있는 모든 형태의 디지털 자산 또는 서비스를 의미합니다. 이는 웹 페이지, 이미지 파일, 비디오, API 엔드포인트, 문서, 소프트웨어 컴포넌트 등 인터넷을 통해 제공되고 사용될 수 있는 데이터나 기능을 포함합니다. 물론 html, css 파일도 이곳에 포함됩니다.

이것들을 식별할 수 있도록 도와주는 것에는 URI, URL , URN 등이 있습니다.

2. URI (Uniform Resource Identifier)

URI는 인터넷 상의 Resource를 식별하기 위한 고유한 문자열입니다.

Uniform : Resource를 식별하는 방식이 통일 되어 있다.
Resource : 위에서 정의한 모든 형태의 디지털 자산과 서비스.
Identifier : 다른 리소스와의 구별을 위한 고유한 식별자.

URI 안에는 URL과 URN이 있습니다. 즉 URI가 더 큰 개념으로 URL과 URN을 포괄하고 있습니다.

3. URL (Uniform Resource Locator)

URL은 웹 상에서의 리소스의 위치를 나타내는 문자열입니다. 웹 주소 라고도 합니다.

웹 브라우징, 하이퍼링크 , API 호출 등에서 주로 사용됩니다.

예시

http://www.example.com
ftp://ftp.example.com/downloads/file.zip

4. URN ( Uniform Resource Name )

인터넷 상의 리소스를 식별하기 위한 유니크한 이름을 제공하는 URI의 한 형태

주로 사용 되는 곳

디지털 객체 식별: 학술 문서, 연구 보고서, 정부 문서와 같은 디지털 콘텐츠에 대해 식별자 제공

네임스페이스 관리: 소프트웨어 개발, XML 문서, 네트워크 프로토콜 설정 등에서 특정 네임스페이스 내의 요소에 대해 식별자 제공

예시

urn:isbn:0451450523

urn:uuid:6e8bc430-9c3a-11d9-9669-0800200c9a66

이렇게 URI와 URL과 URN을 구별해보았습니다. 웹 개발에서 URI 보다는 URL이라고 말하는게 좀 더 정확한 표현일 수 있겠다는 생각이 드네요. 그리고 웹 개발자라면 URN 보다는 URL에 대해 잘 알고 있어야 합니다.

그렇기에 URL의 문법에 대해서 알아보도록 하겠습니다.

5. URL 문법

http://www.samplewebsite.com:8080/resources/article.html?query=search&sort=ascending#section2>

1) 스키마 (Schema) or 프로토콜 (Protocol)

http://

브라우저가 사용해야 하는 프로토콜을 나타냅니다.

http , https , maileto , ssh , ftp 등 다양한 종류가 있습니다.

2) 호스트 (Host) or 도메인 이름 (Domain name)

www.samplewebsite.com

리소스가 호스팅 되고 있는 서버의 도메인 이름입니다. IP 주소로 대체 가능합니다.

3) 포트 ( Port )

:8080

서버 상에서 리소스에 접근하기 위한 기술적인 게이트 번호입니다. http 프로토콜의 표준 포트( HTTP - 80 , HTTPS - 443)의 경우엔 포트 생략이 가능합니다.

4) 경로 ( Path )

/resources/article.html

서버 내에서 특정 리소스의 위치를 나타냅니다.

5) 쿼리 ( Query )

?query=search&sort=ascending

리소스에 대한 추가 정보를 나타냅니다. 검색 , 정렬 등의 정보를 파라미터로 전달합니다.

6) 프래그먼트 ( Fragment )

#section2

리소스 내에서 특정 부분을 직접 가르킵니다. 문서내의 section2라는 앵커 부분을 가리킵니다. 주로 문서 내의 특정 위치로 바로 이동할 때 사용됩니다.

[Node JS] JS 의존성 주입 라이브러리 - tsyringe

today_me — Thu, 8 Feb 2024 00:27:46 +0900

JS로 벡엔드를 개발할 때 DI를 어떻게 설계 해야할 지 고민이 될 것이다. 이 때 tsyringe는 좋은 선택이다.

JS 의존성 주입 라이브러리로 tsyringe는 코드 관리에 아주 좋다. 왜냐하면 다른 라이브러리에 비해 코드의 양이 매우 짧다. 그 이유는 이 라이브러리는 의존성을 데코레이터 기반으로 Container에 등록 해주는 방식인데 클래스에 데코레이터가 붙어있으면 자동 으로 container에 등록해주기 때문에 코드의 양이 줄어든다. ( 마치 스프링 같다. )

그럼 사용하는 방법에 대해 코드로 알아보자

1) 설치 방법

// npm
npm install --save tsyringe

// pnpm
pnpm add tsyringe

// yarn
yarn add tsyringe

2) tsconfig.json 설정

데코레이터 관련 설정을 tsconfig.json 에 추가 해야 한다.

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

3) reflect-metadata 전역 설정

한 번만 설정해주면 된다. index.ts에 설정해주자.

// index.ts
import "reflect-metadata";

4) 데이터 베이스 설정

DBConfig를 Container에 등록한다.

@singleton
export class DBConfig implements Disposable {
	
	// db 관련 변수

  constructor() {
		// db 연결  
	}
	
	get db(){
    // db 관련 변수 getter
	}

	dispose() {
	  // dispose 로직
  }
}

5) 의존성 주입: Foo <- DBConfig

추가적으로 Foo도 container에 등록되어서 resolve를 통해 Foo에 접근할 수있다.

import {injectable} from "tsyringe";

@singleton
class Foo {
  constructor(private database: DBConfig) {}
}

// some other file
import "reflect-metadata";
import {container} from "tsyringe";
import {Foo} from "./foo";

const instance = container.resolve(Foo);

이런 방식으로 사용하면 된다. 아주 간단하다.

더 다양한 활용은 공식 문서를 참고하자.

Reference

https://github.com/microsoft/tsyringe

GitHub - microsoft/tsyringe: Lightweight dependency injection container for JavaScript/TypeScript

Lightweight dependency injection container for JavaScript/TypeScript - GitHub - microsoft/tsyringe: Lightweight dependency injection container for JavaScript/TypeScript

github.com

[Nods.JS] fastify/awilix 을 이용한 DI 설계 (JS DI 라이브러리)

today_me — Thu, 8 Feb 2024 00:22:52 +0900

개발팀 내에서 빠른 생산성을 위해 fastify를 사용하기로 하였고 개발 도중 의존성 주입에 필요성을 느끼게 되어 awilix를 도입하고자 하였다. 이에 따라 오늘은 fastify에서 awilix를 어떻게 사용하는 지에 대해서 알아보자.

자바스크립트로 의존성 주입을 설계 하다보면 해당 클래스나 함수에 필요한 의존성들을 미리 등록해 두어야 한다. 이를 Awilix에서는 container로 관리한다. 필요한 의존성들은 미리 container에 등록(register) 해두고 필요한 곳에서 꺼내서(resolve) 사용한다.

1) 설치

npm i @fastify/awilix awilix

2) 플러그인 연결

fastify와 awilix를 연결해 주는 작업을 진행한다.

const { fastifyAwilixPlugin } = require('@fastify/awilix')
const fastify = require('fastify')

app = fastify({ logger: true })
app.register(fastifyAwilixPlugin, { disposeOnClose: true, disposeOnResponse: true })

3) 컨테이너에 등록

컨테이너에 의존성 클래스들을 등록한다.

const { diContainer } = require('@fastify/awilix')
const { asClass, asFunction, Lifetime } = require('awilix')

// Code from the previous example goes here

diContainer.register({
  userRepository: asClass(UserRepository, {
    lifetime: Lifetime.SINGLETON,
    dispose: (module) => module.dispose(),
  }),
})

3-2) 클래스를 사용하여 등록

클래스를 사용하면 구조화 시켜 관리하기 편하다. 아래 예시는 싱글톤으로 설정하여 한 번만 생성되고 이후에 호출 될 경우 생성된 인스턴스를 사용하게 끔 해준다.

class UserService {
  constructor({ userRepository }) {
    this.userRepository = userRepository
  }

  dispose() {
    // Disposal logic goes here
  }
}

class UserRepository {
  constructor() {
    // Constructor logic goes here
  }

  dispose() {
    // Disposal logic goes here
  }
}

diContainer.register({
  userService: asClass(UserRepository, {
    lifetime: Lifetime.SINGLETON,
    dispose: (module) => module.dispose(),
  }),
  userRepository: asClass(UserRepository, {
    lifetime: Lifetime.SINGLETON,
    dispose: (module) => module.dispose(),
  }),
})

4) 컨테이너에서 꺼내서 사용

resolve를 이용하면 간단하게 꺼낼 수있다.

app.post('/', async (req, res) => {
  const userRepositoryForApp = app.diContainer.resolve('userRepository') // This returns exact same result as the previous line

  res.send({
    status: 'OK',
  })
})

Reference

https://github.com/fastify/fastify-awilix

GitHub - fastify/fastify-awilix: Dependency injection support for fastify

Dependency injection support for fastify. Contribute to fastify/fastify-awilix development by creating an account on GitHub.

github.com

[DI] 의존성 주입 (Dependency Injection)이란?

today_me — Thu, 8 Feb 2024 00:16:20 +0900

벡엔드를 공부 하다보면 한 번쯤 의존성 주입에 대해 들어본 적 있을 것이다. 중요하다는 건 알겠는데 대체 무엇일까??

의존성 주입은 의존성(Dependency)과 주입(Injection)이 합쳐진 말이다. 그래서 의존성에 대해서 먼저 이해해야 한다.

코드와 함께 보자

예시 1) 의존성 X

class Person {
    driveCar() {
        console.log("차를 운전합니다.");
    }
}

const driver = new Person();
driver.driveCar(); // 차를 운전합니다.

Person 클래스에서 driveCar 메서드를 실행 시키는 단순한 구조이다. Person 클래스는 현재 다른 클래스와 어떤 의존성도 가지고 있지 않은 독립적인 구조이다.

예시 2) 강한 결합 ( 높은 의존성 )

class Car {
    start() {
        console.log("차가 출발합니다.");
    }
}

class Person {
    private car: Car;

    constructor() {
        this.car = new Car(); // 강한 결합: Person이 Car를 직접 생성
    }

    driveCar() {
        this.car.start();
    }
}

const driver = new Person();
driver.driveCar(); // 차가 출발합니다.

Person 클래스가 생성될 때마다 Car 클래스가 생성된다. Person 은 Car 클래스와 강한 결합을 하고 있다. 이는 유연성이 떨어지고, Car 클래스의 변경이 Person 클래스에도 영향을 미칠 수 있다.

이것이 의존성 이다. 그렇다면 어떻게 코드를 더 유연하게 만들 수 있을까??

예시 3) 유연한 결합 ( 의존성 주입 )

class Car {
    start() {
        console.log("차가 출발합니다.");
    }
}

class ElectricCar extends Car {
    start() {
        console.log("전기차가 조용히 출발합니다.");
    }
}

class Person {
    private car: Car;

    constructor(car: Car) { // 의존성 주입
        this.car = car;
    }

    driveCar() {
        this.car.start();
    }
}

const myCar = new Car();
const myElectricCar = new ElectricCar();

const driver1 = new Person(myCar);
driver1.driveCar(); // 차가 출발합니다.

const driver2 = new Person(myElectricCar);
driver2.driveCar(); // 전기차가 조용히 출발합니다.

이 예시에서는 Car 클래스를 상속받는 ElectricCar 클래스를 추가하고, Person 클래스는 생성자를 통해 어떠한 Car 타입의 인스턴스도 받을 수 있게 되었다. 이는 Person 클래스가 다양한 종류의 차량에 대해 유연하게 대응할 수 있게 하며, 코드의 재사용성과 확장성을 향상 되었음을 알 수있다.

이처럼 의존성 주입을 통해 클래스 간의 결합도를 낮추고, 유연성과 재사용성을 높일 수 있다. 또한, 코드를 더 쉽게 테스트할 수 있게 되며, 유지 보수성도 개선된다.

[Vite] Vite가 나타나게 된 계기 ( feat. 번들러의 역사 )

today_me — Sun, 4 Feb 2024 00:12:52 +0900

Vite가 엄청 떠오르고 있습니다. 최신 번들러 들 중 가장 빠르다고 하는데 대체 왜 빠른 걸까요??

1. 번들러가 나오게 된 계기

ES6가 나타나면서 자바스크립트에서 ESM (ES Modules)를 지원합니다. ESM은 간단하게 말하면 자바스크립트가 모듈화를 할 수 있도록 export / import 기능을 지원하고 <script> 간 모듈을 내보낼 수 있게 된 것입니다. ESM이 지원되면서 웹 브라우저에서 더 많은 기능들과 많은 활동들이 나타났고 관리해야 하는 소스 코드나 라이브러리들이 늘어나게 되었습니다. 그래서 더 효율 적인 관리 툴이 필요하게 되었습니다.

2. WebPack의 등장

WebPack은 여러 파일과 에셋들을 번들로 합치고 최적화하여 브라우저에서 사용할 수 있게 제공합니다. 압축의 개념으로 볼 수 있습니다. 이를 통해 효율적으로 코드를 관리합니다. 특히 SPA 들에서 큰 빛을 발휘하였습니다. 추가적으로 웹팩은 소스 코드의 변화가 새로고침 없이 브라우저에 바로 반영될 수 있게 하는 HMR 기능과 코드를 여러 개의 번들 파일로 나누어 필요한 시점에 로드할 수 있도록 하는 기능 Code Splitting 등을 지원합니다. 이 장점들 때문에 웹팩이 필수가 되었다고 해도 무방할 정도로 대부분의 프론트엔드 개발에서 사용하게 되었습니다.

3. WebPack보다 100배 빠른 ES build의 등장

웹팩보다 훨씬 빠르고 효율적인 녀석이 나타났습니다. ES Build는 웹팩보다 빌드 타임이 100배 가량 빠릅니다. 그 이유는 다음과 같습니다.

네이티브 코드로 컴파일되는 Go 언어로 작성
파싱, 링크 , 코드 생성 모두를 병렬 처리 (CPU 활용도 최대)
효율적인 메모리 사용
불필요한 데이터 변환 / 할당 없음

4. 가장 빠르고 효율적인 Vite

Vite는 위에 나타난 번들링 툴들의 단점들을 보완합니다. 그래서 왜 Vite가 빠르고 요즘 많이 사용하는 걸까요??

이 이유는 다음과 같습니다.

ES build 사용 - “pre-bundling” 작업을 WebPack보다 훨씬 빠른 ES build를 바탕으로 진행한다.
Native ESM 사용 - 코드 수정이 있을 때 브라우저에서 변경 된 부분을 먼저 요청하고 교체된 부분만 전달

새로운 프로젝트를 하게 된다면 모듈 번들러로 Vite를 선택하는 것을 추천드립니다!

[Docker] 도커에 몽고 DB를 설치하고 실행 시키기

today_me — Sat, 3 Feb 2024 16:52:51 +0900

몽고 디비를 로컬에 직접 설치하지 않고 도커 컨테이너 안에 설치하여 접속하여 사용해보는 방법을 알아보자.

1. 도커 설치

도커 공식홈페이지에서 도커를 설치한다.

https://www.docker.com/get-started/

Get Started | Docker

Get started with Docker Desktop and join millions of developers in faster, more secure app development using containers and beyond.

www.docker.com

~ docker -v
Docker version 24.0.7, build afdd53b

2. 몽고 디비 이미지를 Docker Hub로 부터 설치한다.

설치

docker pull mongo

이미지 확인

~ docker images
REPOSITORY   TAG       IMAGE ID       CREATED       SIZE
mongo        latest    545fe6e3d65b   4 weeks ago   721MB

3. 도커 컨테이너 생성 / 실행

컨테이너 실행

docker run --name container_name -d -p 27017:27017 mongo

--name : 컨테이너 이름 지정

-d : 백 그라운드 실행

-p : 포트를 연결해준다. ( 27017:27017 -> 로컬의 27017 포트와 컨테이너의 27017포트를 연결 )

실행 중인 컨테이너 확인

~ docker ps
CONTAINER ID   IMAGE     COMMAND                   CREATED         STATUS         PORTS                      NAMES
ca17f96a34cd   mongo     "docker-entrypoint.s…"   8 minutes ago   Up 8 minutes   0.0.0.0:27017->27017/tcp   mongo-container

‼ 참고로 모든 컨테이너 (종료된 컨테이너 포함) 를 보려면 ps에 -a를 붙여 주면 된다.

 -a, --all             Show all containers (default shows just running)

4. 컨테이너에 접속

1) bash로 접속

-it : 대화형 상호 작용을 위한 옵션으로, 터미널 입력 및 출력을 활성화하여 사용자가 컨테이너 내부의 명령어를 실행하고 상호 작용할 수 있게 한다.

~ docker exec -it mongo-container bash
root@ca17f96a34cd:/ ls
bin   data  docker-entrypoint-initdb.d	home	    lib    mnt	proc  run   srv  tmp  var
boot  dev   etc				js-yaml.js  media  opt	root  sbin  sys  usr

2) mongosh로 접속

~ docker exec -it mongo-container mongosh
Current Mongosh Log ID:	65bdefd8c8aebdd642b2972e
Connecting to:		mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.1.1
Using MongoDB:		7.0.5
Using Mongosh:		2.1.1

For mongosh info see: https://docs.mongodb.com/mongodb-shell/

------
   The server generated these startup warnings when booting
   2024-02-03T07:23:00.248+00:00: Using the XFS filesystem is strongly recommended with the WiredTiger storage engine. See http://dochub.mongodb.org/core/prodnotes-filesystem
   2024-02-03T07:23:00.674+00:00: Access control is not enabled for the database. Read and write access to data and configuration is unrestricted
   2024-02-03T07:23:00.674+00:00: /sys/kernel/mm/transparent_hugepage/enabled is 'always'. We suggest setting it to 'never'
   2024-02-03T07:23:00.675+00:00: vm.max_map_count is too low
------

컨테이너 실행할 때 -p로 포트 매핑을 했었다면 로컬에서

~ mongosh

만쳐도 접속 할 수 있다.

이렇게 로컬과 포트 매핑 까지 해두면 개발할 때 로컬 환경에서 도커의 몽고 디비를 연결해서 사용할 수 있다!

[AWS] AWS의 Cloud Front 서비스에 대해 알아보자 ( feat. 캐싱 )

today_me — Tue, 30 Jan 2024 01:48:42 +0900

개발자들은 데이터를 사용자들에게 더 빠르게 전달하기 위해 캐싱을 이용한다. 캐싱이란 사용자에게 데이터에 더 빠르게 도달할 수 있도록 접근성이 더 좋은 임시 저장 위치에 데이터 복사본을 미리 저장해 두는 것이다. 그렇다면 사용자에게 프론트엔드의 화면 단을 사용자에게 더 빠르게 보여주려면 어떤 방법이 있을까??

바로 AWS의 Cloud Front 서비스를 이용하는 방법이 있다.

AWS Cloud Front 서비스는 사용자가 화면 단을 더 빠르게 제공 받을 수 있도록 엣지 로케이션(Edge Location) 이라는 임시 저장 위치에 오리진 서버(Origin)의 원본 데이터인 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠 복사본을 미리 저장해 둔다.

여기서 잠깐 용어 정리...

엣지 로케이션 (Edge Location) : 다양하게 분포해 있는 임시 저장 공간
오리진 서버 (Origin) : EC2 서버나 S3 버킷과 같은 화면의 원본 데이터를 가지고 있는 서버
지연 시간(Latency) : 네트워크를 통해 데이터를 전송하는 데 걸리는 시간

S3나 EC2 서버의 데이터를 여러 개의 엣지 로케이션에 복사해 두고 요청이 왔을 때 사용자에게 제일 지연 시간이 낮은 엣지 로케이션에서 데이터를 제공해준다. 이 방식은 사용자에게 지연 시간을 단축 시켜주기 때문에 더 나은 사용자 경험을 제공할 수 있다. 이 때 지연 시간이 낮다는 것은 물리적 거리나 트래픽 상황에 따라 결정 된다.

만약 S3나 EC2의 서버의 원본 데이터가 변경 되었다면 사용자의 요청이 엣지 로케이션으로 왔을 때 바로 제공하지 않고 S3나 EC2로 가서 변경된 데이터를 가지고 와서 엣지 로케이션의 데이터를 업데이트 해준 뒤 사용자에게 제공 한다. 일종의 CDN (content Delivery Network)이다.

앞으로 토이 프로젝트 할 일이 있다면 직접 꼭 적용 해봐야 겠다.

참고 자료

https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

Amazon CloudFront란 무엇입니까? - Amazon CloudFront

Amazon CloudFront란 무엇입니까? Amazon CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 엣지 로케이션

docs.aws.amazon.com

[Apache] 웹서버 리버스 프록시 설정 ( Feat. Next.js 프로젝트 )

today_me — Mon, 29 Jan 2024 02:35:35 +0900

아파치 웹 서버에 배포한 Next.JS 프로젝트를 위해서 웹서버에 리버스 프록시를 설정하였습니다.

저의 Next.JS 프로젝트를 서버에서 실행 시키면 포트는 3031 이고 경로는 루트(/)로 열리게 됩니다. 그럼 {도메인}:3031/ 로 접속하면 Next.JS 프로젝트에 접속할 수 있었습니다. 근데 이 서버에는 여러 가지 프로젝트들이 많이 있었습니다.
그래서 웹 서버 관리자가 루트 경로가 아닌 {도메인}/sw-mileage-admin 으로 접속 할 수 있기를 원했습니다. 포트는 80 이고 경로는 /sw-mileage-admin 임을 알 수 있습니다.

Why 리버스 프록시??

포워드 프록시 : 클라이언트 → 인터넷 으로 나가는 요청을 중개한다. 리다이렉션이 가능 하지만 나가는 요청을 리다이렉트하는 것이기에 적절하지 않다.
포트 포워딩 : 들어오는 요청의 IP와 포트를 변경 시킬 수 있으나 경로를 변경하기에는 적절하지 않음
리버스 프록시 : 외부의 요청 -> 내부 서버(들)로 전달. 들어오는 요청의 포트와 경로를 변경할 수 있으며, 여러 서버에 대한 요청을 효율적으로 관리할 수 있음.

웹 서버에 설정 파일에 코드를 추가하면 된다.

다음 세 가지만 해주면 된다.

클라이언트 접근 권한 허용
요청 경로 설정
정적 파일 경로 설정

/etc/apache2/sites-available/000-default.conf

<VirtualHost *:80>

				
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html

        # 해당 주소로의 모든 클라이언트들의 접근을 허용
        <Proxy "http://localhost:3031">
         Require all granted
        </Proxy>

         # /sw-mileage 경로로 들어오는 요청을 localhost:3031로 리디렉션
         ProxyPass /sw-mileage-admin http://localhost:3031
         ProxyPassReverse /sw-mileage-admin http://localhost:3031
		
         # 정적 파일 Alias 설정 (_next)
         Alias "/_next" "/home/sw_mileage/SW-Milege-Front/.next"
		    <Directory "/home/sw_mileage/SW-Milege-Front/.next">
		        Options FollowSymLinks
		        AllowOverride All
		        Require all granted
		    </Directory>


        # 정적 파일 Alias 설정 (assets)
        Alias "/assets" "/home/sw_mileage/SW-Milege-Front/public/assets"
        <Directory "/home/sw_mileage/SW-Milege-Front/public/assets">
            Options FollowSymLinks
            AllowOverride All
            Require all granted
        </Directory>
		
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
		
</VirtualHost>

작성 후 아래 커맨드를 통해 웹 서버를 재시작 하면 적용이 된다.

sudo systemctl restart apache2

[Next.js] getServerSideProps 에서 403 인증 에러 캐치 후 로그인 페이지로 리다이렉션 시키기

today_me — Sun, 28 Jan 2024 17:04:48 +0900

Next JS 프로젝트에서 인증 되지 않은 사용자가 페이지를 사용할 때는 로그인 페이지로 리다이렉션 시키는 로직을 추가하고자 했다.

플로우는 다음과 같다

getServerSideProps를 사용하여 서버 사이드에서 인증 토큰을 헤더에 넣어 GET 요청을 보낸다.
백앤드에서 토큰이 유효 하지 않음을 파악하고 403 에러를 반환한다.
403 에러를 캐치하여 페이지 렌더링 시 리다이렉션 시키는 로직을 추가한다.

getServerSideProps

// 서버 사이드 요청
const getServerSidePropsFunction: GetServerSideProps<{
  fetchData: IGetMileageCategory[];
}> = async (context) => {
  setServerSideCookie(context);        // 요청에 토큰 추가
  const res = await axiosInstance.get('/api/mileage/categories');
  const fetchData = res.data;

  return { props: { fetchData } };
};


// 에러 캐치 템플릿 적용
export const getServerSideProps = withTryCatchForSSR(getServerSidePropsFunction);


// requireLogin , error 전달
export default function MileageCategory({
  fetchData,
  requireLogin,
  error,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  if (requireLogin) {
    handleServerAuth403Error(error);
    return;
  }
  
  
  return (
   
   <>
   	...
   </>
  );
}

403TryCatchTemplate

import { GetServerSideProps } from 'next';
import axios, { AxiosError } from 'axios';

export const withTryCatchForSSR = <P>(
  getServerSidePropsFunction: GetServerSideProps<P>
): GetServerSideProps<P> => {
  return async (context) => {
    try {
      return await getServerSidePropsFunction(context);
    } catch (error) {
      const axiosError = error as AxiosError;

      if (axiosError.isAxiosError && axiosError.response?.status === 403) {
        return {
          props: {
            requireLogin: true,      // 로그인 필요함을 나타내는 플래그
            error: '로그인이 필요합니다',
            permanent: false,
          } as unknown as P,
        };
      } else {
        console.error('Error:', axiosError.message);
        return {
          props: {
            fetchData: null,
            error: axiosError.message || 'An error occurred',
          } as unknown as P,
        };
      }
    }
  };
};

handle403AuthError

// 쿠키 제거 및 로그인 페이지 리다이렉션
export const handleServerAuth403Error = async (errorMessage) => {
  setSession(null);   // 쿠키 제거
  window.location.href = '/auth/login';
  alert(errorMessage); 
};

[Next.js] GetServerSideProps 헤더에 인증 토큰 추가 하는 방법 (쿠키 사용)

today_me — Sun, 28 Jan 2024 16:41:10 +0900

Next.js에서는 클라이언트에서 API 요청을 보내는 방법이 있고 GetServerSideProps 함수 처럼 서버 사이드에서 API 요청을 보내는 방법이 있다.

클라이언트 사이드에서 요청 시

클라이언트 사이드에서는 보통 브라우저의 JavaScript를 통해 API 요청을 보낸다.
JWT 엑세스 토큰과 같은 인증 정보를 로컬 스토리지, 세션 스토리지, 쿠키 등에 저장할 수 있다.

서버 사이드에서 요청 시

서버 사이드에서는 Next.js의 렌더링 과정 중에 API 요청을 처리한다.
서버 사이드에서는 클라이언트 사이드의 로컬 스토리지나 세션 스토리지에 접근할 수 없기 때문에, 대신 HTTP 요청의 쿠키를 통해 인증 정보를 관리한다.

우리 개발 팀에서는 인가를 위해 Jwt 엑세스 토큰 사용하였기에 브라우저 어딘가에 저장하였다가 API 요청 시 요청 헤더에 토큰을 붙여 줘야 했다. 이 때 로컬 스토리지에 토큰을 저장한다면 서버 사이드에서 요청을 보낼 때 접근이 불가해서 값을 가져올 수 없었다. 그래서 쿠키를 이용했다. getServerSideProps의 context 객체에서 쿠키를 꺼내어 요청 헤더에 토큰을 붙여 줘야 했다.

getServerSideProps

함수 내에서 제공하는 context 객체를 받아서 cookie를 꺼내고 요청 헤더에 입력한다.

const getServerSidePropsFunction: GetServerSideProps<{
  fetchData: IGetData;
}> = async (context) => {
  setServerSideCookie(context);   // 쿠키 꺼내고 요청 헤더에 입력
  
  const res = await axiosInstance.get('/api/mileage/admins');
  const fetchData = res.data;

  return { props: { fetchData } };
};

쿠키 설정

export function setServerSideCookie(context) {
  let { cookie } = context.req.headers;

  cookie = getKeyFromPairString(cookie, 'accessToken');

  if (cookie !== '') {
    axiosInstance.defaults.headers.common.Authorization = `Bearer ${cookie}`;
  }
}

export function getKeyFromPairString(cookie, key) {
  const pairArr = cookie ? cookie?.split(';').map((pair) => pair.trim()) : [];

  for (const pair of pairArr) {
    const [pairKey, pairValue] = pair.split('=').map((c) => c.trim());

    if (pairKey === key) {
      return pairValue;
    }
  }

  return '';
}

[Next.js] 쉘 스크립트를 통한 배포 자동화

today_me — Sun, 28 Jan 2024 15:56:31 +0900

교수님의 서버에 배포한 서비스를 자동화 시키고 싶은데 깃허브 액션과 젠킨스 사용이 방화벽 이슈로 어려웠다.

그래서 생각한 방안이 배포 자동화 쉘 스크립트이다.

미리 작성한 쉘 스크립트를 실행 시키기만 하면 배포를 자동으로 해주는..

서버에 필요한 것

1. Node.js
2. pm2 (백 그라운드 실행)

이것만 있으면 됩니다.

쉘 스크립트 내용

중간 중간 ~/log/front-manager-deploy.log 파일에 로그를 찍습니다.

#!/bin/bash

# 마일리지 관리자 페이지 프론트앤드 pull -> build -> execute (pm2) 자동화

logFile="$HOME/log/front-manager-deploy.log"
SourceDir="SW-Milege-Front"


# 현재 날짜와 시간을 로그 파일에 기록
echo "Deployment 시작 시간: $(date)" > $logFile

cd ~


# 기존 레파지토리 삭제
echo "SW-Milege-Front 파일이 삭제됩니다..." && echo "SW-Milege-Front 파일이 삭제
됩니다..." >> $logFile
rm -rf $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# 레파지토리 다시 clone
echo "새로운 깃레포를 가져옵니다..." && echo "새로운 깃레포를 가져옵니다..." >> $logFile
git clone https://github.com/HGU-WALAB/SW-Milege-Front.git >> $logFile 2>&1


# 미리 작성해둔 환경 변수 파일 복사
echo "환경 변수를 추가합니다..." && echo "환경 변수를 추가합니다..." >> $logFile
cp $HOME/secret/manager/.env $HOME/secret/manager/.env.local $HOME/secret/manager/.env.production $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


cd $HOME/$SourceDir


# clone해 온 레파지토리의 패키지 설치
echo "패키지를 설치합니다..." && echo "패키지를 설치합니다..." >> $logFile
npm install --force >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# 레파지토리 빌드
echo "빌드 합니다..." && echo "빌드 합니다..." >> $logFile
npm run build >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# 현재 돌아 가고 있는 서버 종료 (pm2 delete)
echo "기존 서버를 끕니다..."  && echo "기존 서버를 끕니다..." >> $logFile
pm2 delete "sw-mileage-admin" >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# pm2로 nextJS 백그라운드 실행
echo "새로운 서버를 시작합니다..." && echo "새로운 서버를 시작합니다..." >> $logFile
pm2 start "npm run start" --name "sw-mileage-admin" >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

pm2 ps && pm2 ps >> $logFile 2>&1

echo "마일리지 관리자 프론트앤드 배포 스크립트 완료..." && echo "마일리지 관리자
 프론트앤드 배포 스크립트 완료..." >> $logFile 2>&1

진행 순서

기존 레파지 토리 삭제
-> 레파지토리 클론
-> 미리 작성해둔 환경 변수 파일 복사
-> npm install (패키지 설치)
-> npm build (빌드)
-> pm2 delete (기존 서비스 종료)
-> pm2로 next.js 백그라운드 실행

이제 작성을 완료했으니 실행만 시키면 됩니다.

실행 방법

1) 서버의 Host , Username , Password 를 이용해 ssh로 접속

ssh username@host

-> password 입력

2) 스크립트 실행 권한 부여

먼저 실행할 스크립트로 이동합니다.

저는 ~/sw_mileage/sh-script 에 위치 시켜 두었습니다.

front-manager-deploy.sh가 위의 스크립트 입니다.

chmod 750 front-manager-deploy.sh

실행 권한이 생겼습니다.

3) 실행

./front-manager-deploy.sh

+ 추가로 리액트 배포를 위한 쉘 스크립트도 작성한 것이 있습니다.

리액트의 경우는 정적 배포를 진행 했기에 node.js, pm2가 필요하지 않습니다.

~/sh-script/front-student-deploy.sh

                                                                                              1,1          모두
#!/bin/bash

# 마일리지 학생 시스템 프론트앤드 배포 자동화 스크립트

logFile="$HOME/log/front-student-deploy.log"
SourceDir="SW-Mileage-Student-Front"

cd ~

# 현재 날짜와 시간을 로그 파일에 기록
echo "Deployment 시작 시간: $(date)" > $logFile

echo "SW-Mileage-Student-Front 폴더를 삭제합니다..." && echo "SW-Mileage-Student-Front 폴더를 삭제합니다..." >> $logFile 2>&1
rm -rf $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "새로운 깃레포를 가져옵니다..." && echo "새로운 깃레포를 가져옵니다..." >> $logFile 2>&1
git clone https://github.com/HGU-WALAB/SW-Mileage-Student-Front.git >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "환경 변수를 가져옵니다..." && echo "환경 변수를 가져옵니다..." >> $logFile 2>&1
cp $HOME/secret/student/.env $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

cd $HOME/$SourceDir

echo "패키지를 가져옵니다..." && echo "패키지를 가져옵니다..." >> $logFile 2>&1
npm install >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "빌드를 진행합니다..." && echo "빌드를 진행합니다..." >> $logFile 2>&1
npm run build >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "빌드 파일을 html 폴더로 옮깁니다..." && echo "빌드 파일을 html 폴더로 옮깁니다..." >> $logFile 2>&1
rm -rf $HOME/html/* >> $logFile 2>&1
cp -R $HOME/$SourceDir/build/* $HOME/html >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "학생 시스템 스크립트 실행 완료..." && echo "학생 시스템 스크립트 실행 완료..." >> $logFile 2>&1

사용 방법은 Next.js와 같습니다.

[Data Frame] 많이 사용하는 함수 모음 ( DataFrame 생성 , Columns , head , tail , iloc , set_option 등 )

today_me — Sat, 27 Jan 2024 16:49:24 +0900

오늘은 파이썬 데이터 분석 라이브러리인 Pandas의 "Data Frame" 에서 많이 사용되는 함수에 대해 알아보겠습니다.

0. Import

import pandas as pd

1. DataFrame 생성

1) Dictionary로 Data Frame 생성

d = {'col1': [1, 2], 'col2': [3, 4]}
df = pd.DataFrame(data=d)

2) Array로 Data Frame 생성

d = [['Hayoon', 165, 53], ['Orim', 182, 64], ['Minsu', 172, 82]]
people_info = pd.DataFrame(data=d, columns = ['name', 'cm', 'kg'])

3) numpy 의 array로 Data Frame 생성

 df2 = pd.DataFrame(np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]),
                    columns=['a', 'b', 'c'])

2. columns

열의 이름 (헤더 정보) 가져 오기

df = pd.DataFrame({'A': [1, 2], 'B': [3, 4]})

// 열 헤더 출력
df.columns
Index(['A', 'B'], dtype='object')

3. head()

처음 ~ 지정된 값( 기본값: 5 )만큼의 갯수의 행을 보여 줌

df = pd.DataFrame({'A': [1, 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ]})

# 첫 5개의 행 출력
df.head()

   A
0  1
1  2
2  3
3  4
4  5

# 첫 3개의 행 출력
df.head(3)

   A
0  1
1  2
2  3

# 끝의 2개 제외한 모든 행 출력
 df.head(-2)
   A
0  1
1  2
2  3
3  4
4  5
5  6
6  7
7  8

4. tail()

끝부터 지정된 값( 기본값: 5 )만큼의 갯수의 행을 보여 줌

df = pd.DataFrame({'A': [1, 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 , 10 ]})

# 마지막 5개의 행 출력
df.tail()

	A
5   6
6   7
7   8
8   9
9  10

# 마지막 3개의 행 출력
df.tail(3)
    A
7   8
8   9
9  10

# 첫 2개 제외 한 모든 행 출력

df.tail(-2)
    A
2   3
3   4
4   5
5   6
6   7
7   8
8   9
9  10

5. iloc

Data Frame 자르기

[행 , 열]을 기준으로 자른다.

mydict = [{'a': 1, 'b': 2, 'c': 3, 'd': 4},
           {'a': 100, 'b': 200, 'c': 300, 'd': 400},
           {'a': 1000, 'b': 2000, 'c': 3000, 'd': 4000}]
df = pd.DataFrame(mydict)
df
      a     b     c     d
0     1     2     3     4
1   100   200   300   400
2  1000  2000  3000  4000



// 0 번째 행 뽑아 내기
>>> df.iloc[0]
a    1
b    2
c    3
d    4
Name: 0, dtype: int64

// 1 행(Row) , 2 열(Column) 뽑아 내기
df.iloc[1,2]
300

// 2행 ~ , 3열 ~ 뽑아내기

df.iloc[1: , 2:]
      c     d
1   300   400
2  3000  4000


// ~ 1행 , ~ 2열 뽑아내기

 df.iloc[:1, :2]
   a  b
0  1  2

6. set_option

set_option로 pandas의 옵션을 변경할 수 있습니다.

저는 모든 행과 열을 볼 수 있게 하는데 주로 사용합니다.

df = pd.DataFrame({'x': range(30)})

# 중간 행이 .. 으로 짤려서 출력
df
     x
0    0
1    1
2    2
3    3
4    4
..  ..
25  25
26  26
27  27
28  28
29  29

2) 모든 Row를 볼 수 있게 해줌

pd.set_option('display.max_rows',None)

df

# 모든 열 출력

2) 모든 열을 볼 수 있게 해줌

pd.set_option('display.max_columns', None)

df

# 모든 행 출력

Reference

https://pandas.pydata.org/docs/reference/frame.html

DataFrame — pandas 2.2.0 documentation

Warning DataFrame.attrs is considered experimental and may change without warning.

pandas.pydata.org

[Spring-boot] spring-boot 프로젝트 터미널에서 빌드하는 방법 (gradle)

today_me — Tue, 3 Jan 2023 14:57:07 +0900

터미널을 키고 프로젝트 파일로 이동한다.

./gradlew build

cd build/libs
java -jar jar파일이름

빌드완료

Localhost:8080

build 를 지우고 다시 생성하고 싶다면

gradlew가 있는 파일로 다시가서

./gradle clean
./gradle clean build

Build 파일이 삭제된 것을 볼 수 있다.

후에 다시 ./gradlew build 하면 된다.

[Spring-boot] 스프링 부트 간단한 페이지 만들기 (Welcome page , Controller)

today_me — Tue, 3 Jan 2023 14:44:00 +0900

오늘은 갓 만든 프로젝트를 가지고 간단한 페이지를 만들어 보겠습니다.

먼저 처음 실행시키면 뜨게 되는 Welcome page (index.html)을 만들어보고

Controller를 이용하여 아주 간단한 hello.html 페이지도 만들어보겠습니다.

Welcome Page 만들기

src / main / resources / static 경로에 index.html 파일 생성

index.html

<!DOCTYPE html>
<html>
	<head>
    	<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    	<title>Document</title>
	</head>
    <body>
    	<h1>Hello</h1>
    </body>
</html>

URL - localhost:8080

Controller 이용해서 간단한 동작하는 페이지 만들어 보기

Src/main/java/hello.hellospring 경로에 controller 폴더와 그 안에 HelloController 컨트롤러 파일 생성

HelloController.java

package hello.hellospring.controller;



import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("hello")

    public String hello(Model model){
        model.addAttribute("data","hello");
        return "hello";
    }

}

Src/main/resources/templates 경로에 hello.html 만들기

hello.html

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Document</title>
</head>
    <body>
	    <p th:text="'안녕하세요. ' + ${data}">안녕하세요 손님</p>
    </body>	
</html>

localhost:8080/hello

감사합니다...!

[Spring-Boot] Spring-boot 프로젝트 생성 / 빌드 / 실행

today_me — Tue, 3 Jan 2023 13:59:00 +0900

오늘은 스프링 부트(Spring Boot) 프로젝트를 만드는 법에 대해서 알아보겠습니다.

스프링 부트(Spring Boot)는 스프링(Spring)을 더 쉽게 이용할 수 있게 도와주는 툴입니다.

스프링은 세팅해야 할 것들이 정말 많습니다. 그래서 초보개발자 분들은 스프링 사용에 어려움을 많이 겪습니다. 스프링 부트는 매우 간단하게 프로젝트를 설정할 수 있게 도와줍니다. 이를 통해 Spring 개발을 더 원활하고 쉽게 할 수 있습니다.

사전 개발 환경 세팅

Required

1) JAVA 11
2) IntelliJ Idea

프로젝트 만들기

스프링 부트 스타터 사이트

이곳에서 스프링 프로젝트를 생성할 수 있습니다.

https://start.spring.io <- 링크

1) Gradle Project 선택

필요한 라이브러리들을 모두 땡겨 오고 build하는 싸이클을 관리해 주는 툴

Gradle로 많이 넘어가는 추세

2) Java language 선택

자바를 사용할 것이기에 자바를 선택한다.

3) Spring Boot 2.3.x

SNAPSHOT은 아직 만들고 있는 버전이라는 뜻

M1는 정식 released 된 것이 아니다.

그러므로 그 외의 것들 중 가장 버전이 높은 것 선택

4) Project Metadata

Group : 회사명 ( 없으면 아무거나 . 저는 Hello 라고 했습니다.)
Artifact : 프로젝트 명 (저는 HelloSpring이라고 했습니다.)
Name : Artifact와 동일 (저는 HelloSpring이라고 했습니다.)
Description : 유지
Package name : 자동 생성
Packaging : Jar
Java : 11

War jar 이란?

JAVA의 jar 툴을 이용하여 생성된 압축(아카이브) 파일이다.

어플리케이션을 쉽게 배포하고 동작시킬 수 있도록 있도록 관련 파일들을 패키징해주는 역할을 한다.

JAR(Java Archive)

- Java 프로젝트를 압축한 파일

- JRE( JAVA Runtime Environment) 만 있어도 실행 가능하다.

War (Web Application Archive)

- 웹 어플리케이션 압축파일 포맷

- 별도의 웹서버(WEB) or 웹컨테이너(WAS) 필요

War는 외장 WAS를 사용해야 하기 때문에 우리는 War말고 Jar를 선택한다.

왜냐하면 스프링 부트에는 WAS 톰캣이 내장되어 있어 있기 때문에 외장 WAS를 사용하지 않는 것이 표준이기 때문이다. 즉 , 스프링 부트는 Jar로 더 편리하게 배포하고 동작할 수 있다.

5) Dependencies

Spring Web
Thymeleaf ( html 템플릿 엔진 )

6) Generate 버튼 누르고 다운로드

다운로드 한 것을 원하는 경로에 둔다.

Intellij 에서 빌드 및 실행

1) 빌드 및 열기

먼저 Intellij 를 연다.

open or import를 누른다.

아까 다운로드 받은 프로젝트안에 build.gradle을 연다.

무슨 창이 뜨는데 open as project를 누른다..!

빌드 완료

2) 실행

HelloSpringApplication의 main에서

왼쪽에 초록색 화살표 누르시고 실행 누르시면

빌드가 됩니다.

크롬 키시고 localhost:8080 입력하시면

이 화면 뜨면 성공 입니다.

3) gradle 설정

상단에 intellij IDEA – Preferences

gradle 검색

빌드 및 실행 둘 다 intellij idea 로 변경하고 확인

이 설정을 해주는 이유는 gradle을 통해서 자바를 실행 시키는 대신 intellij에서 바로 자바를 실행 시키게 해주어서 속도가 훨씬 빨라지게 하기 위함입니다.

감사합니다..!

[JS] 자바스크립트 querySelector 함수 사용법 및 예제

today_me — Mon, 2 Jan 2023 15:45:32 +0900

오늘은 자바스크립트를 통해 html 태그를 다룰 수 있게 도와주는 함수인 querySelector 함수에 대해서 알아볼 것입니다.
querySelector는 getElementby~ 함수들과 비슷합니다.
하지만 id , class , 복합 태그 모두 가져올 수 있기 때문에 더 강력합니다.

querySelector()

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환
일치하는 요소가 없다면 null 반환

사용 예시

// javascript

const selected = document.querySelector("h1");

문서 내의 첫 번째 h1 태그를 찾아 selected에 반환해줍니다.

사용 방법 4가지

1) 태그 select
2) 클래스 select
3) id select
4) 복합 select

이렇게 4 가지에 대해서 알아 볼텐데

아래 html을 예제로 함께 확인 해보겠습니다.

// html

<body>
    <h1>h1</h1>
    <h2 class="h2">h2</h2>
    <h3 id="h3">h3</h3>
    <h3>h3_2</h3>
    <div>
        <span>Span1</span>
        <span>Span2</span>
    </div>
    
    <script src="app.js"></script>
</body>

1) 태그 select

괄호 속에 태그이름을 쓰면 된다.

// javascript

const selected = document.querySelector("h1");
selected.style.color = "red";

2) 클래스 select

괄호 속에 .클래스이름을 쓰면된다.

// javascript

const selected = document.querySelector(".h2");
selected.style.color = "red";

3) id select

괄호 속에 #id이름을 쓰면 된다.

// javascript

const selected = document.querySelector("#h3");
selected.style.color = "red";

4) 복합 select

괄호 속에 복합태그이름을 쓰면 된다.

const selected = document.querySelector("div span");
selected.style.color = "red";

보는 것처럼 잘 작동한다.

다만 앞에서 말했 듯이 첫 번째 element만 반환한다.

뒤쪽 span에 접근하려면 어떻게 해야 할까??

4-2) nth-child

이렇게 한 태그 안에 여러 개의 태그들이 들어 있을 때는 first-child , last-child , nth-child를 이용하면 된다.

first-child

//javascript

const selected = document.querySelector("div span:first-child");
selected.style.color = "red";

nth-child() , last-child

//javascript

//const selected = document.querySelector("div span:last-child"); 마지막 child 선택
const selected = document.querySelector("div span:nth-child(2)");
selected.style.color = "red";

감사합니다..!

[CSS] css 선택자 (selector) 정리

today_me — Mon, 2 Jan 2023 15:03:58 +0900

Css는 html에 스타일을 주기 위해서 사용 됩니다.

특정 html 태그에 원하는 스타일을 주기 위해서는 css 선택자를 이용 하여야 합니다.

CSS 선택자 (Selector)

h1{
	color : blue;
}

이 코드를 보시면 h1 태그에 글자색을 파란색으로 바꾸라는 css 문법입니다.

h1이 바로 css 선택자입니다.

글자 색상을 바꾼 것처럼 스타일을 줄 건데 어떤 태그에 적용 해야 하는 지를 알려 주는 역할을 합니다.

Selector 종류

1) 전체 선택자
2) 태그 선택자
3) 클래스 선택자
4) id 선택자
5) 복합 선택자

이 html을 예시로 보여드리겠습니다.

<body>
    <h1>Hello</h1>
    <h2 class="h2">Hello</h2>
    <h3 id="h3">Hello</h3>
    <div>
        <h3>Hello</h3>
    </div>
</body>

1) 전체 선택자

표기 : * { }

모든 태그에 css를 적용합니다.

*{
	color : blue;
}

2) 태그 선택자

표기 : 태그이름{ }

해당 태그에 해당하는 모든 태그에 css를 적용합니다.

h1{
	color:blue;
}

3) 클래스 선택자

표기 : .클래스이름{ }

해당 클래스에 속하는 모든 태그에 css를 적용합니다.

.h2{
    color: blue;
}

4) id 선택자

표기 : #id이름{ }

해당 id를 가진 모든 태그에 css를 적용합니다.

#h3{
    color: blue;
}

5) 복합 선택자

표기 : 바깥쪽태그이름 안쪽 태그이름{ }

태그 속의 태그를 선택할 때 사용합니다.

div h3{
    color: blue;
}

! div 속 h3를 선택하였기에 3번째 hello는 선택 되지 않았습니다

감사합니다..!

[HTML] <a> 태그 사용법

today_me — Sat, 31 Dec 2022 02:01:57 +0900

오늘은 html에서 많이 사용되는 태그 중 하나인 <a> 태그에 대해서 알아보려고 합니다.

href

하이퍼링크 기능

1) 절대 경로

<a href="http://www.naver.com">A태그</a>

왼쪽의 A태그를 클릭하면 href에 적혀있는 주소로 이동..!

2) 상대 경로

<a href="index.html">A태그</a>

같은 폴더 안에 있는 index.html로 이동

a.html -> index.html

3) 자바스크립트 호출

<a href=”javascript:alert(‘Hello’);”>A태그</a>

감사합니다.

[ 개발 환경 ] 웹서버에 파일 업로드 하기 (FileZila , Vscode)

today_me — Fri, 30 Dec 2022 23:02:56 +0900

오늘은 웹서버에 파일을 업로드 하는 방법에 대해서 알아 보겠습니다.

1. 파일 질라 ( File Zila )

서버에 파일을 업/다운로드 할 수 있게 해주는 프리웨어 (무료) 프로그램

1) 파일 질라 홈페이지 이동 및 다운로드

URL : https://filezilla-project.org/

왼쪽의 클라이언트 클릭!

자신의 운영 체제에 맞게 선택하여 다운로드 합니다.

하단을 보시면 파일이 다운로드 된 것을 확인할 수 있습니다.

클릭 후 다운로드

실행 화면

다운 완료!

2) 파일 질라 실행 방법

위쪽 화면을 보시면 호스트 , 사용자명 , 비밀번호 , 포트 그리고 빠른 연결 버튼이 있습니다.

각각 입력해주시면 됩니다.

호스트 : 접속할 곳의 아이피 혹은 주소 예) ohinhyuk13.dothome.co.kr

사용자명 : FTP 아이디 입력

비밀번호 : FTP 비밀번호 입력

포트 : FTP 접속 시 이용할 포트를 입력합니다. 입력하지 않을 시 기본포트(21)를 통해 연결합니다.

* 닷홈 웹호스팅은 기본포트(21)를 이용하여 연결합니다.

* sftp 접속 시 22 를 입력하시면 됩니다.

"확인" 누르시면 됩니다.

상태창

이렇게 뜨시면 연결 성공입니다..!

3) 파일 업로드 하는 법

업로드 하고자 하는 프로젝트를 리모트의 html 폴더 밑에 넣으시면 됩니다.

저는 html 폴더 밑에 momentum 이라는 프로젝트를 집어넣었습니다.

momentum 프로젝트 안에 index파일과 css , js 파일들이 들어있습니다.

html/momentum/index.html

이 프로젝트를 보기 위해서는

***.dothome.co.kr/momentum 이라고 주소를 입력하시면 업로드 된 프로젝트를 볼 수 있습니다.

( html 경로는 생략 됩니다. )

ohinhyuk13.dothome.co.kr/momentum/

만약 ***.dothome.co.kr/momentum 이 아니라 ***.dothome.co.kr/ 로 프로젝트를 열고 싶다면

file zila 에서 html 폴더에 momentum 폴더를 업로드 하지 않고

html 폴더 바로 아래에 momentum 폴더 안에 있는 index.html 과 js , css 파일이 들어가도록 업로드 하시면 됩니다..!

아래 사진과 함께 보시겠습니다.

html/index.html

html 폴더 밑에 index.html 파일이 들어있는 것이 보입니다.

ohinhyuk13.dothome.co.kr

ohinhyuk13.dothome.co.kr/ 로 index.html에 접근이 가능해졌습니다.

2. VS Code

sftp 확장 프로그램을 통해 웹 서버와 로컬을 연결

1) VS Code 다운로드

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

운영 체제에 맞게 설치하시면 됩니다.

VS code 실행 화면

다운 완료 후 실행 화면

2) SFTP 확장 프로그램 설치

install 누르기

3) 환경 설정 ( json 파일 만들기 )

f1 키를 누르고 ( Mac은 fn + f1 ) SFTP: Config 입력 후 엔터를 누르시면 .vscode 라는 폴더와 그 아래 sftp.json 파일이 생깁니다.

name : 원하는 이름 입력

host : 연결할 대상 (서버) 의 IP 주소

protocol : ftp

port : 21 ( protocol이 sftp 이면 22 )

username : 연결할 대상 (서버) 사용자의 이름

remotePath : 로컬과 연결할 서버의 파일 경로

uploadOnSave : True일 경우, 로컬에서 변경 사항을 저장할 때마다 서버 파일에 동기화됨

리모트 패쓰를 모르겠으면 파일 질라에서 확인하면 됩니다.

index.html의 위치 : /html/momentum

파일 질라에서 리모트 패쓰 확인

다 작성한 뒤 연결을 시도하면 됩니다.

연결 완료

감사합니다!

[Dothome] 닷홈 (dothome) 무료 호스팅 서비스 이용 방법

today_me — Fri, 30 Dec 2022 20:01:55 +0900

닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등등 다양한 호스팅 서비스를 제공하는 홈페이지입니다.

@호스팅이란??

"서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스"
를 말합니다.

쉽게 설명 드리자면 개인 홈페이지를 만들려고 하면 홈페이지가 들어설 수 있는 웹 상의 공간이 필요한데 이 공간을 닷홈 에서 제공해 준다는 것입니다. 닷홈은 무료로 호스팅 서비스를 제공 하기 때문에 많은 분들이 사용합니다.

오늘은 닷홈의 무료 호스팅 서비스 사용법에 대해서 알아볼 것입니다.

1. 닷홈 홈페이지 접속 후 회원 가입

닷홈 바로가기

https://www.dothome.co.kr/?gclid=Cj0KCQiAtbqdBhDvARIsAGYnXBNPiShH4rU26fdxQbgFl6yJ2XvqKuklkBLHNgCO3yxny6O7-lVZtucaAlA6EALw_wcB

닷홈 호스팅

닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.

www.dothome.co.kr

회원 가입 페이지

2. 웹 호스팅 (무료 호스팅) 신청 하기

상단 메뉴바 - 웹 호스팅 - 무료호스팅

신청하기 클릭

절차 따라서 정보 입력!!

! DB 암호 & FTP 암호는 다시 확인할 수 없습니다

! 기억해 두기

@ 확인 후 조금만 기다리면..!

3. 정보 확인

마이닷홈 - 상세보기 에서

- 도메인 정보

- 웹서버 / FTP 정보

- DB정보를 보실 수 있습니다

! 앞서 말씀드렸듯이 FTP암호 & DB암호는 조회가 불가능합니다

이렇게 해서 무료 호스팅을 서비스를 제공 받았습니다.

다음 게시글에서는 제공 받은 서버에 파일을 업로드 할 수 있는 방법

1. FTP 프로그램 FileZila (파일 질라)

2. VS code + stfp 확장 프로그램

에 대해 알아볼 것입니다.

감사합니다.

[ Mac OS / Java ] 맥북 자바 버전 변경

today_me — Mon, 26 Dec 2022 17:49:20 +0900

오늘은 자바 jdk를 변경하는 포스팅을 하려고 합니다.

저의 경우 이 포스팅에서 자바 1.8에서 자바 11로 변경하였습니다.

1) 원하는 jdk 버전 다운로드

https://www.oracle.com/java/technologies/downloads/

Download the Latest Java LTS Free

Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.

www.oracle.com

위의 사이트에서 원하는 jdk를 다운 받습니다.

이제 터미널을 키고 아래 커맨드들을 날리면 됩니다.

2) 현재 jdk 버전 확인

$ java -version

3) 설치된 모든 jdk 버전들 확인

$ /usr/libexec/java_home -V

4) 원하는 jdk로 변경

저의 경우 1.8 에서 11 로 변경하였습니다.

export JAVA_HOME=$(/usr/libexec/java_home -v 11.0.17)
source ~/.bash_profile

4.5) default jdk를 변경하고 싶을 때

위의 방법까지는 일시적으로 jdk를 바꾸어 줍니다.

커맨드를 껐다 키면 다시 default jdk 버전으로 돌아와 있는 것을 알 수 있습니다.

영구적으로 바꾸어 주고 싶으면 ~/.zshrc에도 추가해주어야 합니다.

$ vim ~/.zshrc

export JAVA_HOME=$(/usr/libexec/java_home -v 11.0.17)

를 추가

source ~/.zshrc

5) 변경된 jdk 버전 확인

$ java -version

11로 변경된 것을 확인할 수 있습니다.

감사합니다.

[Spring] MVC 란 무엇인가??

today_me — Tue, 20 Dec 2022 19:07:29 +0900

Spring은 Java 기반 프레임워크로 엄청 유명하기 때문에 다들 한번씩 들어보셨을 겁니다.

이 프레임워크는 어떤 식으로 구성이 되어 있을 까요??

오늘은 Spring framework의 Web architecture인 MVC Architecture에 대해서 공부해 볼 것입니다.

오늘날의 Web architecture에 대해 공부하기 전에 과거의 web architecture에 대해 공부해 봅시다.

과거에는 어떤 Web architecture를 썼을까요??

그리고 왜 지금 MVC를 사용 하는 걸까요??

과거 Web architecture의 모습 : JSP Model1 Architecture

- 1990 ~ 2000년 초 까지의 웹 개발 아키텍쳐이다.

- JSP와 Java Bean으로 구성되어 있다.

- JSP는 [Controller 와 View를 포함] 하고 Java Bean은 [Model 부분]을 담당한다.

- Controller와 View가 통합되어 있기 때문에 유지 보수에 어려움이 생긴다.

이 어려움을 극복하여 새로 나타나게 된 것이 오늘 날의 JSP Model2 Architecture 입니다.

다른말로 MVC Architecture 라고 부릅니다.

M( Model )

V( View )

C ( Controller ) Architecture는 Model , View , Controller로 분리되어 있어서

유지 보수에 있어 유리하다.

Spring Framework도 MVC 패턴을 통해 작업이 이루어진다.

Web architecture : MVC

MVC는 Model , View , Controller의 약자입니다.

Spring은 MVC가 각각 독립적으로 나누어져 구성 되어 있습니다.

하나씩 들여다 봅시다.

Model : DB와 직접 상호 작용하는 부분이다.

- DB에서 데이터를 가지고 와서 데이터를 처리한다.

- DB를 다루는 쿼리도 이 부분에 해당한다.

- 자바 개발자가 담당한다.

View : 사용자에게 보여줄 UI ( User Interface ) 이다.

- JSP Page로 구성되어 있다.

- View는 보통 웹 디자이너들이 담당한다.

Controller : 전체적인 화면의 로직을 처리한다.

- 사용자 입력 데이터 추출

- Model class의 DB 연동 함수 호출

- 화면 이동

- 자바 개발자 or framework가 담당한다.

MVC의 상호작용 과정

1. 사용자 (클라이언트)가 웹 서버에 Request를 보낸다.

2. 웹 서버가 요청을 전달해 준다.

3. 요청을 전달 받아 Controller가 요청에 맞게 Model을 이용하여 DB에서 적절한 데이터 처리를 한다.

4. 그리고 처리 된 데이터를 View에 전달해 주면 View는 알맞은 웹 페이지를 웹 서버로 보내 준다.

5. 웹 서버가 사용자에게 Response를 보낸다.

MVC는 이런 방식을 통해 작동하게 됩니다..!

[java] HashMap 사용법 및 예제 총정리

today_me — Mon, 19 Dec 2022 17:48:39 +0900

자바에서 많이 사용하는 자료 구조인 Hashmap에 대해서 알아보자

map의 주요 특징은 key 와 value를 한 쌍으로 사용한다는 것이다.

map에는 여러 가지가 있는 데 그 중 가장 많이 사용하는 Hashmap을 공부해보도록 하자

0) 선언

HashMap<Integer ,String> map = new HashMap<>();

1) 값 넣기 ( put 함수 )

map.put(key , value);

예제

map.put(1,"AAA");
map.put(2,"BBB");
map.put(3,"CCC");
map.put(4,"DDD");

2) 특정 key로 value 얻기 ( get 함수 , getOrDefault 함수 )

value = map.get(key);

key가 없으면 null 반환

key가 없을 때 null 아닌 Default 반환 ( Default는 String으로 아무거나 설정 가능 )

value = map.getOrDefault(key, default);

예제

System.out.println( map.get(1));
System.out.println( map.getOrDefault(5, "Nope"));

3) map의 원소 갯수 확인 ( size 함수 )

int size = map.size();

4) map의 value 값 바꾸기 ( replace 함수 )

map.replace(key , newValue);

5) map 안에 key / value 가 있는 지 확인 ( containsKey , containsValue 함수 )

boolean isKey = map.containsKey(key);

boolean isValue = map.containsValue(value);

6) map이 비어 있는 지 확인 ( isEmpty 함수 )

boolean is = map.isEmpty();

7) 원소 삭제 ( remove 함수 )

value = map.remove(key);

8) Key가 없거나 Value가 null일때만 삽입 ( putIfAbsent 함수 )

map.putIfAbsent(key, value);

9) 모든 Key 가져오기 ( map.keySet 함수 )

Set<Integer> keySet = map.keySet();

HashMap<Integer ,String> map = new HashMap<>();
        
map.put(1, "AAA");
map.put(2,"BBB");
map.put(3,"CCC");
map.put(4,"DDD");

Set<Integer> set = map.keySet();

System.out.println(set);

for(Integer key : set){
	System.out.println(key);
}

출력

[1, 2, 3, 4]
1
2
3
4

10) 모든 value 가져오기 ( map.values 함수 )

Collection<String> col = map.values();

HashMap<Integer ,String> map = new HashMap<>();
        
map.put(1, "AAA");
map.put(2,"BBB");
map.put(3,"CCC");
map.put(4,"DDD");

Collection<String> col = map.values();

System.out.println(col);

for(String key : col){
	System.out.println(key);
}

출력

[AAA, BBB, CCC, DDD]
AAA
BBB
CCC
DDD

11) 모든 key , value 쌍 가져오기 ( entrySet 함수 )

Set< Entry< Integer,String>> set = map.entrySet();

HashMap<Integer ,String> map = new HashMap<>();

map.put(1, "AAA");
map.put(2,"BBB");
map.put(3,"CCC");
map.put(4,"DDD");

Set< Entry< Integer,String>> set = map.entrySet();

for(Entry<Integer,String> entry : set){
    System.out.println(entry.getKey() + " " + entry.getValue());
}

출력

1 AAA
2 BBB
3 CCC
4 DDD

[java] Stack 클래스 사용법 및 예제 총정리

today_me — Mon, 19 Dec 2022 16:27:54 +0900

자바 언어를 좀 더 단단히 배우고 싶어서 자바 자료 구조에 대해서 정리하면서 공부해 보려고 한다.

오늘은 Stack에 대해서 정리를 해보려고 한다.

0) 선언

 Stack<자료형 타입> stk = new Stack<>();

예시

 Stack<Integer> stk = new Stack<>();
 Stack<String> stk2 = new Stack<>();

1) 스택에 값 추가 ( add , push 함수 )

stk.add(10);
stk.push(20);

두 가지 방법이 있다.

차이점은 반환 값이 add는 true / false , push는 집어 넣은 값이 리턴 된다.

        System.out.println(stk.add(30));    // true 출력
        System.out.println(stk.push(40));   // 40 출력

2) 스택에 값 제거 ( pop 함수 )

pop된 값을 출력 한다.

stk.pop();

System.out.println(stk.pop()); // 반환 값 출력

스택 비었는 지 확인 ( empty 함수 )

boolean isempty = stk.empty();

3) isempty , push , pop 사용 예제

public class stack {
    public static void main(String[] args) {
        Stack<Integer> stk = new Stack<>();
        
        stk.add(10);		// 10
        stk.push(20);		// 20 10
        stk.push(30);		// 30 20 10
        
        while(!stk.empty()){
            System.out.println(stk.pop());
        }
        
    }
}

4) 최 상단 노드 확인 ( peak 함수 )

최상단 노드 반환

stk.peak();

5) 노드의 갯수 ( size 함수 )

노드의 갯수 반환

stk.size();

6) 특정 노드를 가지고 있는 지 확인 ( contain 함수 )

stk.contain(value);

peak , size , contain 사용 예제

public class stack {
    public static void main(String[] args) {
        Stack<Integer> stk = new Stack<>();
        
        stk.push(10);
        stk.push(20);
        stk.push(30);
        
        System.out.println(stk.peek());
        System.out.println(stk.size());
        System.out.println(stk.contains(30));
        System.out.println(stk.contains(40));
    }
}

출력

30
3
true
false

7) stack 속 모든 값 삭제 ( clear 함수 )

stk.clear();

8) 차례로 출력 ( for문 사용 )

자료형 타입을 맞춰 주고 임의의변수 : 스택이름

stk.push(10);
stk.push(20);
stk.push(30);

for(Integer s : stk) {
    System.out.println(s);
}

9) 특정 노드 위치 반환 ( search 함수 )

 stk.search(value);

stk.push(10);
stk.push(20);
stk.push(30);

System.out.println(stk.search(10));
System.out.println(stk.search(20));
System.out.println(stk.search(30));

출력

3
2
1

10) 스택 정렬

stk.sort(null);				// 오름차순
stk.sort(Collections.reverseOrder());	// 내림차순

stk.push(30);
stk.push(10);
stk.push(20);

stk.sort(null);

for(Integer s : stk) {
    System.out.println(s);
}

[C++] [BFS / DFS] 백준 2331 번 문제 풀이

today_me — Fri, 19 Aug 2022 18:21:46 +0900

문제

DFS / BFS 와 그리디 두 가지 방법으로 풀었는데 DFS / BFS를 사람들이 일반적으로 많이 사용한다.

시간적으로는 DFS / BFS 가 효율적이고 , 메모리 사용량으로 보면 그리디가 좀 더 효율적이다.

첫 번째 풀이 : DFS / BFS

A 의 최대는 9999 , P의 최대는 5

나올 수 있는 가장 큰 값은 : 9의 5승 * 4 = 236196

Code

// BaekJoon 2331
// Title : 반복 수열
// URL : https://www.acmicpc.net/problem/2331

#include <iostream>
#include <cmath>

using namespace std;

#define MAX_NUM 236196

int visit[MAX_NUM];
int P;
int answer = 0;

void DFS(int A){
    int origin = A;
    int next = 0;

    visit[A-1]++;

    while(A > 0){
        next += (int)pow( A % 10 , P);
        A /= 10;
    }

    if(visit[next-1] == 2) return ;
     
    DFS(next);

    if(visit[origin-1] == 1) answer++;

}

int main(int argc, char** argv){
    int A , num;

    cin >> A >> P;

    DFS(A);

    cout << answer;
}

두 번째 풀이 : 그리디 알고리즘

Data structure로는 deque를 사용하였다.

반복 구간을 algorithm의 find 함수로 찾아서 iterator를 통해 갯수를 구했다.

Code

// BaekJoon 2331
// Title : 반복 수열
// URL : https://www.acmicpc.net/problem/2331

#include <iostream>
#include <cmath>
#include <deque>
#include <algorithm>

using namespace std;

int next_num(int D , int P){
    int total = 0;
    
    while(D > 0){ 
        total += pow( (D % 10) , P);
        D /= 10;
    }
    return total;
}

int main(int argc , char** argv){
    int A , P , num;
    deque<int> dq;
    deque<int> ::iterator iter;

    cin >> A >> P;

    dq.push_back(A);

    while(1){

        A = next_num(A , P);
        iter = find(dq.begin() , dq.end() , A);
        if(iter != dq.end()){
            num = iter - dq.begin();
            break;
        }

        dq.push_back(A);
    }

    cout << num;

}

https://www.acmicpc.net/problem/2331

2331번: 반복수열

첫째 줄에 반복되는 부분을 제외했을 때, 수열에 남게 되는 수들의 개수를 출력한다.

www.acmicpc.net

[C++][BFS / DFS] 백준 2606번 문제 풀이

today_me — Fri, 19 Aug 2022 15:50:50 +0900

간단한
BFS or DFS 문제

◎ Data structure는 Deque를 사용함

◎ adj_list 먼저 만들고 DFS Search로 답을 구함 (BFS 사용해도 됨)

◎ adj_list , check를 전역 변수로 선언 하지 않고 매개변수로 보내줌 ( 동적 할당을 위해 )

Code

// BaekJoon 2606
// Title : Virus
// URL : https://www.acmicpc.net/problem/2606

#include <iostream>
#include <deque>

using namespace std;

void DFS(deque<int> adj_list[] ,deque<bool> &check , int i , int &cnt){
    check[i-1] = true;

    for(int j = 0 ; j < adj_list[i-1].size() ; ++j){
        if(check[adj_list[i-1][j] - 1] == false){ DFS(adj_list,check , adj_list[i-1][j], cnt) ; cnt++; }
    }
}

int main(int argc , char** argv){

    int cmpr , num , first , second;
    int cnt = 0;

    cin >> cmpr >> num;

    deque<int> adj_list[cmpr];
    deque<bool> check(cmpr , false);
    
    // Making adj_list
    
    while(num--){
        
        cin >> first >> second;

        adj_list[first - 1].push_back(second);
        adj_list[second - 1].push_back(first);

    }
    
    // DFS search
    
    DFS(adj_list , check , 1 , cnt);
    
    cout << cnt;
}

https://www.acmicpc.net/problem/2606

2606번: 바이러스

첫째 줄에는 컴퓨터의 수가 주어진다. 컴퓨터의 수는 100 이하이고 각 컴퓨터에는 1번 부터 차례대로 번호가 매겨진다. 둘째 줄에는 네트워크 상에서 직접 연결되어 있는 컴퓨터 쌍의 수가 주어

www.acmicpc.net

[C++][BFS / DFS] 백준 10451번 문제 풀이

today_me — Thu, 18 Aug 2022 19:43:21 +0900

문제

◎ 저는 이 문제를 adjacent matrix를 만들고 DFS로 탐색하며 문제를 해결하였습니다.

Code

// BaekJoon 10451
// Title : 순열 사이클
// URL : https://www.acmicpc.net/problem/10451

#include <iostream>
#include <vector>

using namespace std;


// DFS recursion

void DFS(vector<vector<bool>> &arr ,vector<bool> &check ,int i){
    check[i-1] = true;
    for(int j = 1 ; j <= check.size(); ++j){
        if(arr[i-1][j-1] == true && check[j-1] == false) DFS(arr,check, j );
    }
}

int main(int argc , char** argv){

    int T , N , temp;
    
    cin >> T;

    while(T--){

        int cnt = 0;        // answer

        cin >> N;

        vector<vector<bool>> arr(N , vector<bool>(N , false));      // adj matrix
        vector<bool> check ( N , false );                           // check list
        
        for(int i = 1 ; i <= N ; ++i){

            cin >> temp;

            arr[i-1][temp - 1] = true;
            arr[temp-1][i-1] = true;

        }

        for(int i = 1 ; i <= N ; ++i){
            if(check[i-1] == false){
                DFS(arr , check, i );       // DFS or BFS
                cnt++;
            }
        }

        cout << cnt << endl;

    }

}

https://www.acmicpc.net/problem/10451

10451번: 순열 사이클

1부터 N까지 정수 N개로 이루어진 순열을 나타내는 방법은 여러 가지가 있다. 예를 들어, 8개의 수로 이루어진 순열 (3, 2, 7, 8, 1, 4, 5, 6)을 배열을 이용해 표현하면 \(\begin{pmatrix} 1 & 2 &3&4&5&6&7&8 \\ 3

www.acmicpc.net

[C++][자료구조 Stack] 백준 10828번 문제 풀이

today_me — Sun, 24 Jul 2022 21:14:14 +0900

백준 10828

문제

자료 구조 Stack 구현

Stack Class를 직접 구현하여 사용하였다.

Code

// BaekJun  10828
// Title : Stack
// URL : https://www.acmicpc.net/problem/10828

/*

문제

정수를 저장하는 스택을 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.

명령은 총 다섯 가지이다.

push X: 정수 X를 스택에 넣는 연산이다.
pop: 스택에서 가장 위에 있는 정수를 빼고, 그 수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.
size: 스택에 들어있는 정수의 개수를 출력한다.
empty: 스택이 비어있으면 1, 아니면 0을 출력한다.
top: 스택의 가장 위에 있는 정수를 출력한다. 만약 스택에 들어있는 정수가 없는 경우에는 -1을 출력한다.

*/

#include <iostream>

using namespace std;

class Stack{

private:
        int* arr;
        int index;
public:
    Stack(int N){
        arr = new int [N];
        index = -1;
    }
    ~Stack(){};

    void push(int num){
        arr[++index] = num;
    }
    int top(){
        if(index == -1) return -1;
        return arr[index];
    }
    int size(){
        return (index+1);
    }
    int empty(){
        if (index == -1) return 1;
        else return 0;
    }
    int pop(){
        if(index == -1) return -1;
        return arr[index--];
    }

};

int main(){
	
    // speed up function
    cin.tie(NULL); cout.tie(NULL);
    ios_base::sync_with_stdio(false);

    int N;
    int num;
    string input;

    cin >> N;

    Stack s(N);


    for(int i = 0 ; i < N ; ++i){
        
        cin >> input;

        if(input == "push"){
            cin >> num;
            s.push(num);
        }
        else if(input == "top") cout << s.top() << "\n";
        else if(input == "pop") cout << s.pop() << "\n";    
        else if(input == "size") cout << s.size() << "\n";    
        else if(input == "empty") cout << s.empty() << "\n";    
        
    }
}

[C++] 백준 5397번 풀이

today_me — Sun, 24 Jul 2022 21:04:29 +0900

백준 5397

문제

시간 제한은 1초
문자열의 길이는 최대 100만

시간 복잡도 O(N^2) 으로는 풀 수 없고

시간 복잡도 O(nlogn) or O(N) 으로 풀어야 한다.

Linear 만에 풀기 위해 list + iterator를 사용하였다.

Code

// BaekJoon 5397
// Title : 키로거
// URL : https://www.acmicpc.net/problem/5397

/*


문제


창영이는 강산이의 비밀번호를 훔치기 위해서 강산이가 사용하는 컴퓨터에 키로거를 설치했다. 
며칠을 기다린 끝에 창영이는 강산이가 비밀번호 창에 입력하는 글자를 얻어냈다.

키로거는 사용자가 키보드를 누른 명령을 모두 기록한다. 
따라서, 강산이가 비밀번호를 입력할 때, 화살표나 백스페이스를 입력해도 정확한 비밀번호를 알아낼 수 있다. 

강산이가 비밀번호 창에서 입력한 키가 주어졌을 때, 강산이의 비밀번호를 알아내는 프로그램을 작성하시오. 
강산이는 키보드로 입력한 키는 알파벳 대문자, 소문자, 숫자, 백스페이스, 화살표이다.


*/

#include <iostream>
#include <list>

using namespace std;

int main(){

    int N;
    string s;
 
    cin >> N;

    list<char>::iterator it;
    list<char> password;
    
    

    for(int i = 0 ; i < N ; ++i){
        
        cin >> s;    

        password.clear();
        it = password.begin();    
        
        
        for(int j = 0 ; j < s.length(); ++j){
            if(s[j] =='<') {
                if(it != password.begin()) it--;
            }
            else if(s[j]=='>'){
                if( it != password.end()) it++;
            }
            else if(s[j]=='-'){
                if(it != password.begin()) it = password.erase(--it);
            }
            else{
                it = password.insert(it,s[j]);
                it++;
            }   
        }

        for(char x : password) cout << x;
        cout << endl;
    }
    return 0;
}

[C++][Malloc] Implicit allocator 구조 및 구현

today_me — Sun, 24 Jul 2022 17:21:05 +0900

출처 : https://www.crunchbase.com/organization/allocator

오늘은 C 와 C++에서 사용되는 Malloc 의 구현 방식인 Implicit allocator에 대해서 공부해 보려고 한다.

그 전에 사전 지식을 조금 먼저 이야기를 해보겠다.

Dynamic Memory Allocation 이란??

@ 프로그램이 작동하는 도중 (런타임 동안) 필요한 메모리를 할당 받고자 할 때 사용 하는 할당 방법

@ 프로세스의 Heap 공간에 저장 -> 단편화(Fragmentation) 문제 발생 가능

@ 단편화 문제를 해결하고 효과적으로 메모리들을 저장하기 위한 Dynamic allocator로 Explicit Allocator , Implicit Allocator 등 이 존재한다.

사용 이유

: 효율적인 메모리 관리

Block 이란?

메모리를 관리하는 단위

< Block 구성 > ( Implicit allocator )

[Header , Payload , Padding , Footer]

Header , Footer : 각각 블록의 시작과 끝을 나타내는 부분, 블록의 사이즈와 할당 여부를 저장한다.

Payload : 실제 정보들이 들어가는 부분

Padding : 8Bytes 단위를 맞추기 위해 할당해야 할 메모리보다 많은 메모리를 할당해줌 (선택적으로 사용한다.)

※ Header , Footer 들은 각각 32 bit 운영 체제 기준 4 Bytes 이다.

Memory는 이런 블록들로 구성되어 Heap 속에 저장되어 있다.

블록 들을 저장하는 방법에 따라 Explicit Allocator , Implicit Allocator 두 가지 할당기로 나뉘게 된다.

여기에서는 Java / Lisp 에서 사용하는 Implicit Allocator에 대해서 배워 보겠다.

Implicit allocator

@ 순차적으로 모든 블록들을 검사하는 선형적인 방법

@ Free가 자동으로 진행 되기 때문에 garbage collection이라고도 불림

@ Java / Lisp 등 high-level 언어에서 사용

※ Java 에서는 C언어에서 처럼 일일이 할당된 메모리를 직접 Free를 통해 해제 해줄 필요가 없는데,

그 이유는 Java에는 garbage collection이 있어서 자동으로 불필요한 메모리를 해제해주기 때문이다.

가용 블록을 찾는 방법

First-fit : 할당 가능한 가용 블록을 앞에서 부터 찾는다.

Next-fit : 할당 요청된 메모리에 알맞은 메모리를 줬다면 그 다음 메모리 요청 때는 그 위치에서 부터 시작하여 찾는다.

Best-fit : 할당 가능한 가용 블록 중 가장 작은 블록을 할당해 준다.

Next-fit 이 가장 성능이 좋다.

하지만 쉬운 이해를 위해 First-fit으로 구현을 해보았다.

Heap 구조

출처 : https://velog.io/@emplam27/CS-%EA%B7%B8%EB%A6%BC%EC%9C%BC%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%8F%99%EC%A0%81%ED%95%A0%EB%8B%B9-Implicit-Explicit-Segregated-list-Allocator

가용 블록과 할당 블록이 함께 존재하는 Implicit allocator의 heap공간이다.

Implicit Allocator 구현

C++를 통해 구현하였다.

맴버 변수

char* heap ;        // Start point of Heap                      
char* brk;          // End point of Heap
char* max_addr;     // Max Address of Heap

매크로

/**
 * @brief Macros for Block Size & Alloc 
 */

// size + alloc bit
#define PACK(size, alloc) ((size) | (alloc))

// GET , SET Function block pointer
#define GET(p) (*(unsigned int *)(p))
#define PUT(p,val) (*(unsigned int*)(p) = (val))

#define GET_SIZE(p) (GET(p) & ~0x7)
#define GET_ALLOC(p) (GET(p) & 0x1)


/**
 * @brief Macros for Block
 */

#define HDRP(bp) ((char *)(bp) - WSIZE)
#define FTRP(bp) ((char *)(bp) + (GET_SIZE(HDRP(bp))) - DSIZE )

#define NEXT_BLKP(bp) ((char*)(bp) + GET_SIZE(HDRP(bp)))
#define PREV_BLRP(bp) ((char*)(bp) - GET_SIZE( (char *)(bp) - DSIZE ))

매크로가 정말 많다.

PACK : Header 와 Footer에 필요한 Size , Alloc여부를 합쳐주는 매크로

GET , PET : char* 가 인자로 주어지므로 int 값을 얻기 위해 형 변환 진행

GET_SIZE , GET_ALLOC : PACK에서 각각 size 와 alloc 여부를 뽑아냄

HDBP , FTBP : 각각 Header와 Footer를 가리키는 pointer를 반환

PREV_BLKP , NEXT_BLKP : 각각 이전 , 다음 블록으로 이동하는 매크로

서브 함수들

Extend_heap , Mem_sbrk 함수

Heap을 늘려 주는 함수

mem_sbrk : heap 크기를 늘려줌

extend_heap : heap이 늘어남에 따라 블록 조정을 해줌

/**
 * @brief The function that increases space of heap when it is lack
 * 
 * @param words : Number of words ( word : 4 Bytes ) 
 * @return void* : New Free block pointer
 */
char* Mymalloc::extend_heap (size_t words)
{
    char *bp;
    size_t size;

    size = (words % 2) ? (words +1) * WSIZE : words * WSIZE;

    if((long)(bp = mem_sbrk(size)) == -1) return NULL;

    PUT(HDRP(bp),PACK(size , 0));
    PUT(FTRP(bp) ,PACK(size , 0));
    PUT(HDRP(NEXT_BLKP(bp)) , PACK(0,1));

    return coalesce(bp);
}



/**
 * @brief The function that increases the size of the heap
 * 
 * @param incr : Amount of increasement of heap
 * @return void* : Brk pointer before increasement
 */
char* Mymalloc::mem_sbrk(int incr){
    char* old_brk = brk;

    if( (incr < 0) || ( (brk + incr) > max_addr) ){
        perror("mem_sbrk failed.");
        return (char *)-1;
    }
    
    brk += incr;
    return (char*)old_brk;
}

Coalesce 함수

Coalesce : 가용 블록이 생겼을 때 바로 옆에 가용 블록이 있다면 합치는 함수 ( 단편화를 줄이기 위함 )

/**
 * @brief The function that combines the free blocks
 * 
 * @param bp : Pointer which is pointing free block
 * @return void* : Pointer which is pointing combined free block
 */
char * Mymalloc::coalesce(char *bp){
    
    size_t size = GET_SIZE(HDRP(bp));
    size_t prev_alloc = GET_ALLOC(HDRP(PREV_BLRP(bp)));
    size_t next_alloc = GET_ALLOC(HDRP(NEXT_BLKP(bp)));

    if(prev_alloc && next_alloc){
        return bp;
    }

    else if( !prev_alloc  && next_alloc){
        size += GET_SIZE(HDRP(PREV_BLRP(bp)));
        PUT(HDRP(PREV_BLRP(bp)),PACK(size , 0));
        PUT(FTRP(bp), PACK(size,0));

        bp = PREV_BLRP(bp);
    }

    else if(prev_alloc && !next_alloc ) {
        size += GET_SIZE( HDRP(NEXT_BLKP(bp)));
        PUT(HDRP(bp), PACK(size,0));
        PUT(FTRP(bp) , PACK(size,0));

    }

    else{
        size += GET_SIZE(HDRP(PREV_BLRP(bp))) + GET_SIZE(HDRP(NEXT_BLKP(bp)));
        PUT( HDRP(PREV_BLRP(bp)) , PACK(size , 0));
        PUT( FTRP(NEXT_BLKP(bp)), PACK(size,0));

        bp = PREV_BLRP(bp);
    }

    return bp;
}

주석 참고!!

Find_Fit , Place 함수

메모리 할당을 도와주는 함수

Find_fit : 사용하기에 알맞은 가용 블록을 찾아 주는 함수

Place : 가용 블록 할당 후 블록의 남은 부분을 다시 가용 블록으로 만들어 주는 함수

/**
 * @brief The function that searches fit free block, in heap( First-Fit )
 * 
 * @param asize : Demanded size
 * @return void* : Pointer which is pointing fit free block. ( IF there isn't, return nullptr )
 */
char * Mymalloc::find_fit(size_t asize){
    char* bp;

    for(bp = heap ; GET_SIZE(HDRP(bp)) > 0; bp += GET_SIZE(HDRP(bp)) ){
        if(!GET_ALLOC(HDRP(bp)) && GET_SIZE(HDRP(bp)) >= asize) return bp;
    }

    return NULL;
}


/**
 * @brief The function that put the remaining block back in the heap again, when Free block is too large
 * 
 * @param bp : Pointer which is pointing large free block
 * @param asize : Size of large free block
 */
void Mymalloc::place(char *bp, size_t asize){

    size_t csize = GET_SIZE(HDRP(bp));

    if((csize - asize) >= 2 * DSIZE){
        PUT(HDRP(bp) , PACK(asize , 1));
        PUT(FTRP(bp) , PACK(asize , 1));
        
        PUT(HDRP(NEXT_BLKP(bp)),PACK(csize-asize , 0));
        PUT(FTRP(NEXT_BLKP(bp)) , PACK(csize-asize , 0));
    }   
    else{
        PUT(HDRP(bp) , PACK(csize , 1));
        PUT(FTRP(bp) , PACK(csize, 1));
    }

}

Malloc 함수들 ( Malloc , Calloc , Realloc , Free)

1) init 초기화

Malloc을 위한 준비

/**
 * @brief Heap initalization for allocation
 */
void Mymalloc::mm_init(){
    if( (heap = (char *)mem_sbrk(4 * WSIZE)) == (char* )-1 ) return ;

    PUT(heap , 0);                              // Padding
    PUT(heap + 1 * WSIZE , PACK(DSIZE , 1));    // Header
    PUT(heap + 2 * WSIZE , PACK(DSIZE , 1));    // Footer
    PUT(heap + 3 * WSIZE , PACK(0,1));          // Last Block
    heap += (2 * WSIZE);                       

    if(extend_heap(CHUNKSIZE / WSIZE) == NULL) return ;

    return ;
}

2) Malloc

Malloc : 메모리 할당

/**
 * @brief Malloc Implementation
 * 
 * @param size : Size of allocation
 * @return void* : Pointer which is pointing allocated memory
 */
void * Mymalloc::mm_malloc(size_t size)
{
    size_t asize;
    size_t extendsize;
    char *bp;

    if(size == 0) return NULL;

    // Alignment - Double word ( 8bytes )
    if(size <= DSIZE) asize = 2 * DSIZE;
    else asize = DSIZE + ((size + DSIZE -1) / DSIZE) * DSIZE ;
    
    // Finding Free block
    if((bp = find_fit(asize)) != NULL){
        
        place(bp,asize);
        return bp;
    }

    // If heap size is lack -> extend_heap
    if( (bp = extend_heap(asize / WSIZE)) == NULL) return NULL;
    
    place(bp,asize);
    return (void *)bp;
    
}

3) Calloc

메모리 할당 + 0으로 초기화

/**
 * @brief Calloc implementation
 * 
 * @param size : Calloc Size
 * @return void* : Pointer which is pointing Callocated memory
 */
void* Mymalloc::mm_calloc(size_t size)
{

    // Malloc
    char* bp;
    if( (bp = (char *)mm_malloc(size)) == NULL) return NULL;

    
    if(size <= DSIZE) size = DSIZE;
    else size = ((size + (DSIZE-1)) / DSIZE) * DSIZE;
    
    // Initialization to zero
    for(int i = 0 ; i < size ; ++i){
        *(bp+i) = (char)0x0;
    }

    return bp;
}

Malloc을 이용하여 구현 하였다.

Malloc을 해준 뒤 값들을 0으로 초기화 해준 것이 전부이다.

4) Realloc

할당된 메모리를 재할당 해주는 함수

의외로 해줄 것이 많다.

주어진 사이즈와 next 블록의 할당 여부에 따라 여러가지 case들이 나온다.

자세한 Case들은 주석에 적어 두었다.

주어진 사이즈가 작으면 Decrease하는 것도 구현 하였다.

/**
 * @brief Realloc implementation
 * 
 * @param bp : Pointer which is pointing allocated memory
 * @param size : Realloc Size
 * @return void* : Pointer which is pointing reallocated memory
 */
void * Mymalloc::mm_realloc(void* bp ,size_t size){
    
    // Can't reallocate
    if(GET_ALLOC(HDRP(bp)) == 0 || size <= 0) return NULL;

    size_t asize = DSIZE + ((size + (DSIZE - 1)) / DSIZE) * DSIZE;
    size_t before_asize = GET_SIZE(HDRP(bp));

    // Size Increasement
    if( asize > before_asize ){
        
        // Case 1
        // Next block is free Block & big enough
        if( GET_ALLOC(HDRP(NEXT_BLKP(bp))) == 0 && (GET_SIZE(HDRP(NEXT_BLKP(bp))) + before_asize >= asize) ){
            size_t next_size = GET_SIZE(HDRP(NEXT_BLKP(bp)));
            
            if(next_size + before_asize > asize + DSIZE){
                PUT(HDRP(bp) , PACK(asize , 1));
                PUT(FTRP(bp) , PACK(asize , 1));

                PUT(HDRP(NEXT_BLKP(bp)) ,PACK( (next_size + before_asize - asize),0 ) );
                PUT(FTRP(NEXT_BLKP(bp)) , PACK( (next_size + before_asize - asize),0 ) );

                coalesce(NEXT_BLKP(bp));
                
                return bp;
            }
            else{
                PUT(HDRP(bp) , PACK( (next_size + before_asize) , 1));
                PUT(FTRP(bp) , PACK( (next_size + before_asize) , 1));

                return bp;
            }
        }

        // Case 2
        // Finding free block which is big enough
        else{
            char * new_bp;
            mm_free(bp);

            new_bp = (char *)mm_malloc(size);

            for(int i = 0 ; i < ( asize - DSIZE) ; ++i){
                *(new_bp +i) = *((char*)bp+i);
            }

            return new_bp;
        }
    }
    // Size Decreasement
    else if(asize < before_asize){
        
        size_t next_size = before_asize - asize;

        // Case 1
        // Remaining memory is bigger than DSIZE * 2
        
        if(before_asize - asize > DSIZE){

            PUT(HDRP(bp) , PACK(asize , 1));
            PUT(FTRP(bp) , PACK(asize , 1));

            PUT(HDRP(NEXT_BLKP(bp)), PACK(next_size , 0));
            PUT(FTRP(NEXT_BLKP(bp)) , PACK(next_size , 0));

            coalesce(NEXT_BLKP(bp));
            return bp;
        }
    }
}

5) Free

Deallocation 함수

/**
 * @brief Free Implementation
 * 
 * @param bp : Pointer which is pointing allocated block
 */
void Mymalloc::mm_free(void* bp)
{
    size_t size = GET_SIZE(HDRP(bp));

    PUT(HDRP(bp),PACK(size,0));
    PUT(FTRP(bp),PACK(size,0));
    coalesce((char *)bp);

}

여기까지가 Implicit allocator 구현이었다.

전체 코드는 github에 올려두었다.

Github 주소 : https://github.com/ohinhyuk/MCNL-Study/blob/main/%EA%B3%A0%EC%9C%A4%EB%AF%BC%EA%B5%90%EC%88%98%EB%8B%98%20%EC%8A%A4%ED%84%B0%EB%94%94/week%203/Implicit_allocator.cpp