오늘의 CODE

Shortest Unique Prefixes 와 Trie 자료구조

Bittersweet- — Mon, 28 Apr 2025 10:42:04 +0900

거 참 오늘 문제 풀기 딱 좋은 날씨네~☀️

월요일 아침 아주 따끈한 문제가 도착했다.

사실 알고리즘이니 뭐니 별 관심이 없었는데 말야... 이게 참 한번 쳐다만 보게되도 뭐 거의 홀리는 수준으로 하루 종일 파고들게 된단 말이지.... 흠...요망한 것( ).

문제: Shortest Unique Prefixes
Given a list of words, return the shortest unique prefix of each word.

주어진 단어 목록에서 각 단어의 **최단 유일 접두사(Shortest unique prefix)를 찾아서 반환하시오.

예시:

[given the list]
dog
cat
apple
apricot
fish

[Return the list]
d
c
app
apr
f

우선 이 문제를 풀기 위해 알아둬야할 기본 개념!! Trie 자료구조(원래 알고 있었던 것처럼 자연스럽게 말하기!!! )

Trie 자료구조

**Trie(트라이)**는 문자열을 효율적으로 다루는 자료구조로, 특히 접두사(prefix) 검색에 아주 강력한 성능을 자랑한다고 함.
여러 단어들이 같은 접두사를 공유할 때 유용하게 사용할 수 있다고 함.

Trie의 특징:

중복되는 접두사를 효율적으로 관리
단어의 삽입과 검색이 빠름
주로 자동완성, 사전에서 많이 활용

사실 처음 문제를 봤을 때 unique prefix라는 부분에 꽂혀서 "내가 그걸 어떻게 알어"라고 황당했었다.

아니~ 걔가 고유한지 안한지 내가 어케 암? 영문학적으로 뭐 접근해야 함? 이라는 생각을 했었지 ㅎㅎ

근데 주어진 단어 리스트에서 각 단어의 고유 접두사를 찾아내라는 말이었다.(고 내 친구 gpt가 친절하게 알려줬다~ 내 짱친~ )

아니 왠지 영어로 문제를 읽으면 단순한게 단순해보이지 않는다는 말이지.. 나만 그래???

자, 위의 단어 리스트에서 각 단어의 고유한 접두사를 찾아보자면:

"apple"과 "apricot"은 app까지 겹치므로, "apple"의 고유한 접두사는 app
"cat"과 "dog"는 첫 글자가 다르므로, 각각 c와 d가 고유한 접두사
"fish"는 앞에 다른 단어가 없으므로, 고유한 접두사는 f

이런 결론이 나온다.

Trie 구현(클래스 방식)

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

class Trie {
  constructor() {
    this.root = new TrieNode();
  }

  insert(word) {
    let node = this.root;
    for (let char of word) {
      if (!node.children[char]) {
        node.children[char] = new TrieNode();
      }
      node = node.children[char];
      node.count++;
    }
  }

  getUniquePrefix(word) {
    let node = this.root;
    let prefix = "";
    for (let char of word) {
      prefix += char;
      if (node.children[char].count === 1) {
        return prefix;
      }
      node = node.children[char];
    }
    return prefix;
  }
}

const words = ["dog", "cat", "apple", "apricot", "fish"];
const trie = new Trie();
words.forEach(word => trie.insert(word));

const result = words.map(word => trie.getUniquePrefix(word));
console.log(result);  // ["d", "c", "app", "apr", "f"]

설명:

각 단어를 Trie에 삽입하면서 각 노드의 count를 증가시킴
고유한 접두사를 찾을 때, 해당 접두사의 count가 1일 경우, 고유한 접두사로 판단하여 반환

즉, inset("dog")를 하면:

root에서 'd' 없으면 {d: {}} 추가
'd'안에서 'o' 없으면 {o:{}} 추가
'o'안에서 'g' 없으면 {g:{}} 추가

{
  d: {
    count: 1,
    o: {
      count: 1,
      g: {
        count: 1
      }
    }
  }
}

이런 구조가 됨. 흠... 너무 복잡하지 않나...??

이 방식은 효율적이지만, 구현이 다소 복잡하고 메모리 사용량이 많을 수 있다.

정렬과 비교로 해결!!

Trie 대신 정렬과 비교로도 찾을 수가 있다.

function shortestUniquePrefixes(words) {
  words.sort(); // 단어 리스트 정렬

  const result = [];

  for (let i = 0; i < words.length; i++) {
    const word = words[i];
    const prev = words[i - 1] || ""; // 이전 단어
    const next = words[i + 1] || ""; // 다음 단어

    let prefix = "";

	// 접두사 확인
    for (let j = 0; j < word.length; j++) {
      prefix += word[j];

      // 앞 단어, 뒷 단어 둘 다 현재 prefix로 시작하지 않으면 유일한 접두사
      if (!prev.startsWith(prefix) && !next.startsWith(prefix)) {
        break;
      }
    }

    result.push(prefix);
  }

  return result;
}

// 예시 단어 리스트
const words = ["dog", "cat", "apple", "apricot", "fish"];
console.log(shortestUniquePrefixes(words)); // ["d", "c", "app", "apr", "f"]

헤헷~ 코드가 좀 깔끔해진 것같은 느낌적인 느낌

설명:

단어 리스트를 정렬한 후, 각 단어를 앞과 뒤의 단어와 비교하여 고유한 접두사를 찾는다.
정렬된 리스트에서 각 단어는 앞뒤 단어와 비교하여 고유한 접두사를 쉽게 확인할 수있다.

방법	장점	단점
Trie	- 빠른 검색 - 메모리 효율적 - 자동완성 등 실시간 검색에 유리	- 구현이 복잡함 - 메모리 많이 사용
정렬+비교	- 간단하고 빠르게 구현 가능 - 소규모 데이터에 적합	- 데이터 양이 많을 때 비효율적

결론

Trie는 접두사를 빠르게 검색하고 중복되는 부분을 효율적으로 처리하는 강력한 자료구조이다.
작고 간단한 문제라면 정렬과 비교 방법도 좋은 해결책이 될 수 있다.
상황에 맞는 자료 구조를 선택하는 것이 중요하다.

하핫~ 오늘은 월요일이어서 마무리 멘트가 생각이 안남.

그럼 이만

연속된 부분 배열의 최대합 (Kadane's Algorithm)

Bittersweet- — Wed, 16 Apr 2025 15:17:21 +0900

네!! 저는 요즘 ai랑 코드 테스트하는 재미에 푹 빠져있습니다!!!(누구한테 말하냐..?)

카다인 알고리즘으로 푸는 연속 부분 배열 최대 합

문제 설명

정수로 이루어진 배열 nums가 주어졌을 때, 연속된 부분 배열 중 가장 큰 합을 구하세요.

예시

Input: [-2, 1, -3, 4, -1, 2, 1, -5, 4]
Output: 6

"연속된 부분 배열 중 가장 큰 합을 구하시오."

— 아니 나만 헷갈려? 연속된 부분 배열이라니… 연속된 숫자를 찾으라는 건가? 도대체 배열을 만들어야 하나?

문제 설명이 좀 모호한거 같다고 그래서 ai한테 따져 물었더니 이렇게 말했다.

사실 문제의 진짜 의도는 이거야:
“주어진 배열 안에서, 숫자들이 연속해서 붙어 있는 모든 구간 중에서, 합이 제일 큰 구간을 찾아라.”
예를 들면, 길이가 1짜리인 [4] 같은 것도 가능하고, 전체 배열이 될 수도 있고, 중간 어딘가 끊긴 구간일 수도 있어.

1. 순진한 접근: 다 해보자!

"그냥 모든 조합 다 해보면 되지 않을까?" 맞긴 맞다. 하지만 이건 O(n^2) 이상 걸리는 방법이다. 배열 길이가 길어지면 또 컴퓨터가 숨을 참기 시작한다.

function maxSubArray(nums) {
  let maxSum = -Infinity;
  
  for (let i = 0; i < nums.length; i++) {
    let sum = 0;
    for (let j = i; j < nums.length; j++) {
      sum += nums[j];
      maxSum = Math.max(maxSum, sum);
    }
  }
  
  return maxSum;
}

시간 복잡도: O(n²)
공간 복잡도: O(1)

❌ 단점: 입력 배열이 길어지면 시간 초과가 날 수 있음.

2. 진짜(?) 개발자는 이렇게 푼다: 카다인(Kadane’s) 알고리즘

여기서 필요한 건 바로 카다인 알고리즘. 핵심은 간단하다. 지금까지 합친 결과가 음수가 되면 끊고 새로 시작하는 것!

연속된 배열이어야 하니까 중간에 합이 음수가 되면 전체 합에 독이 된다.

그래서 아예 끊어버리고 새롭게 시작! 이게 바로 카다인 알고리즘의 묘미다.(라고 ai 걔가 그러더라.. 걔는 참 말 잘해..얄밉게...)

function maxSubArray(nums) {
  let currentSum = 0;
  let maxSum = -Infinity;
  
  for (let i = 0; i < nums.length; i++) {
    currentSum = Math.max(nums[i], currentSum + nums[i]); // 지금까지의 합. 음수로 떨어지면 끊고 nums[i]부터 새로 시작
    maxSum = Math.max(maxSum, currentSum); // 지금까지 본 최대 합. 계속 업데이트
  }

  return maxSum;
}

console.log(maxSubArray([-2,1,-3,4,-1,2,1,-5,4])); // 6

시간 복잡도 O(n)
공간도 O(1)
추가 자료구조 불필요

!!! 여기서 갑자기 드는 의문

currentSum = Math.max(nums[i], currentSum + nums[i]);

이 코드를 그냥 음수가 아닐때 currentSum + nums[i]를 하는 건 어때?

그것도 어느 정도는 맞다. 이게 내가 진짜 진짜 헷갈렸던 부분인데 다시 문제로 들어가면 연속된 부분 배열이라는 명확한 명세가 있다.

그렇기 때문에 음수를 if 조건으로 구분하고 나머지 값만 더한다면 이 문제의 정확한 답이 될 수 없다는 것

다시 초반에 제시되었던 예시를 확인해보면

nums = [-3, -1, 2, -1, 4, -5, 2]

음수 빼고 양수만 더한다면:

양수만 뽑으면: 2 + 4 + 2 = 8

카다인 알고리즘은?

[2, -1, 4] → 합: 5

이라는 말씀..

즉!! 중간에 끊기면 안된다는 말...

참고) 카다인 알고리즘의 흐름

-3: currentSum = -3 → maxSum = -3
-1: currentSum = max(-1, -3 + -1) = -1 → maxSum = -1
2: currentSum = max(2, -1 + 2) = 2 → maxSum = 2 ✅ 여기서 새 출발!
-1: currentSum = max(-1, 2 + -1) = 1
4: currentSum = max(4, 1 + 4) = 5 → maxSum = 5
-5: currentSum = 0
2: currentSum = max(2, 0 + 2) = 2

결론!! 최대 부분합은 [2, -1, 4] → 합 = 5

정리!

연속된 부분 배열? 카다인 알고리즘을 기억하자!
핵심은 지금까지의 합이 음수가 되는 순간, 새로 시작하는 것
시간 복잡도는 O(n) — 한 번만 순회하면 끝!

이제 이런 문제 나오면 당황하지 말고 카다인으로 시원하게 긁어주자! 힌트는 "연속된 부분배열의 합"!! (제발... 뇌야 기억 좀 해... 이젠 기억할 때도 됐어...)

코딩 테스트 자주 나오는 문제: 두 수의 합 (Two Sum)

Bittersweet- — Tue, 15 Apr 2025 09:56:01 +0900

코딩 테스트 단골손님: 두 수의 합 (Two Sum)

면접관이 좋아하는 문제 Top 3 안에 반드시 들어가는 두 수의 합!(근거 없음.)

심지어 파이썬, 자바스크립트, 자바, C++ 가리지 않고 나오는 무적의 인기 문제다. 이걸 몰라? 그럼 면접관이 속으로 "이 친구는 기본기가 부족하구만..." 할지도 모른다 (이 또한 근거없음.)

문제 설명

정수 배열 nums와 정수 target이 주어졌을 때, 배열에서 두 수의 합이 target이 되는 인덱스를 찾아 반환하시오.
단, 딱 한 쌍만 존재한다는 전제가 있다 (즉, 여러 쌍 없음!).

입력 예시

nums = [2, 7, 11, 15], target = 9
// 출력: [0, 1] (2 + 7 = 9)

1. 순수 근성 풀이: 이중 for문

음...... 그냥 for 두 개 돌려서 다 더해보자!

물론 맞긴 한다. 다만 면접 끝나고 "왜 최적화 안 했는지" 물어볼 수도 있음


function twoSum(nums, target) {
  let arr = [];

  for (let i = 0; i < nums.length; i++) {
    for (let j = i + 1; j < nums.length; j++) {
      if (nums[i] + nums[j] === target) {
        arr.push([i, j]);
      }
    }
  }

  return arr;
}

장점: 무지성으로라도 풀 수 있음
단점: 시간 복잡도 O(n²) → 배열 길어지면 컴퓨터가 숨 참음

2. 머리 좀 쓴 풀이 : 해시맵으로 최적화!

자, 이제 진짜 개발자처럼 풀어보자.
한 번만 순회하면서 필요한 수가 이미 등장했는지 저장해두면? O(n)으로 해결 가능! "아 이게 그 유명한 해시맵(hashMap) 풀이구나!" 하고 면접관 눈이 반짝일지도✨(안 반짝일지도..쩝)


function twoSum(nums, target) {
  const map = {};

  for (let i = 0; i < nums.length; i++) {
    const num = nums[i];
    const complement = target - num;

    if (Object.prototype.hasOwnProperty.call(map, complement))) {
      return [map[complement], i];
    }

    map[num] = i;
  }

  return [];
}

장점: O(n) 시간 복잡도
단점: hasOwnProperty()를 사용해야 하는데, 조금 더 복잡할 수 있음

잠깐, 자바스크립트에 해시맵이 있어?

엄밀히 말해 HashMap은 없어. 하지만 {} 또는 new Map()을 쓰면 그게 바로 우리가 말하는 "해시맵"!


const map = {};
map[' '] = '피자';
console.log(map[' ']); // 피자
console.log(map.hasOwnProperty(' ')); // true

그럼 키에 이모지 써도 되냐고?
돼. 하지만 그러지 말자

`3. Map` 객체로 더 깔끔하게 리팩토링

그럼, 이제 Map을 사용해서 더 직관적이고 깔끔한 코드로 바꿔보자! Map은 내부적으로 더 최적화된 자료구조로, 더 안전하고 효율적인 방식으로 데이터를 관리할 수 있음.


function twoSum(nums, target) {
  const map = new Map();

  for (let i = 0; i < nums.length; i++) {
    const num = nums[i];
    const complement = target - num;

    if (map.has(complement)) {
      return [map.get(complement), i];
    }

    map.set(num, i);
  }

  return [];
}

장점: has와 get 메서드를 사용해 객체처럼 키-값을 빠르게 다룰 수 있음
단점: 사실상 단점이라고 할 건 없지만, Map 객체를 지원하지 않는 구형 브라우저나 환경에서는 사용할 수 없을 수도 있음

보너스: 문자열 순회할 때 꼭 배열로 바꿔야 할까?

아니다! for...of는 문자열도 바로 순회 가능하다. 몰랐다면 이 기회에 손에 붙이자!


for (const char of "banana") {
  console.log(char); // 'b', 'a', 'n', ...
}

문자 카운트도 이렇게 깔끔하게 쓸 수 있음:


const countMap = {};
for (const char of str) {
  countMap[char] = (countMap[char] || 0) + 1;
}

마무리 정리

"두 수의 합"은 진짜 잘 나오고
브루트포스 vs 해시맵 풀이 비교로 문제 해결 방식도 보여주고
심지어 객체 활용법까지 자연스럽게 익힐 수 있는

그야말로 면접 단골이자 실무 감성 문제. 한 번 확실히 익혀두면 다른 배열 문제도 수월하게 풀 수 있다!

다음 글은 "세 수의 합"? (미래의 내가 욕하는 소리가 들린다...)

[DB] 로컬에 DB 설치하기(Mac)

Bittersweet- — Thu, 10 Apr 2025 15:05:27 +0900

부제 : 두 번째 백엔드 서버 개발기: 프론트개발자의 도전

회사에서 AI 관련 프로젝트가 우수수(?) 생기기 시작했다.

사실... 우수수까지는 아니고.. 이번이 세번째 프로젝트.. 헷

하나 빼고(그건 다른 팀에서 진행) 어쩌다보니 내 두번째 백엔드 서버 개발 도전기

(아니 나 진짜 프론트개발자인데...? 근데 이게 ...

...이게... 뭐지...? 근데 재밌네...? 새로와... 새로운거 조와....아이고 머리야... 뭐지 이 기분... )

프로젝트 시작!

프로젝트 생성
가상환경 만들고, 기본 세팅하면서 신나게 시작!
코드 작성 중...
- 스페이스 때문에 에러 한번 내주고
- DB 연결 로직 작성
- 세션 관리 코드 작성
- CRUD 관련 파일도 생성
- 필요한 유틸 함수도 만들고...
그 다음은...? 또 들여쓰기 에러 한 번 내주고

프로젝트를 다 만들었으니 이제 테스트를 해봐야 하는뎅... 쩝

DB는 다른 팀에서 구축 중?

스키마는 전달받았지만, 아직 실제 서버에 반영된 상태는 아님.
테스트하고 싶은데 DB가 없어서 코드를 돌려볼 수가 없다!
게다가 서버에서 백그라운드로 프로젝트 실행했더니, DB 저장 부분에서 에러 발생!

동료 백엔드 개발자 오씨에게 SOS

나: "더미데이터 만드는 것도 귀찮고, DB 따로 파는 것도 귀찮은데 보통 어떻게 해?"
오씨: "로컬용 DB 만들어서 테스트 하죠?"

나: (…뭐야 왜 이렇게 간단하게 말해..)

오씨 추천: Docker로 로컬 DB 만들기 (on Mac)

1. Docker Desktop 설치

사이트: https://www.docker.com/
메인 페이지에 있는 "Download Docker Desktop" 버튼 클릭
내 OS에 맞는 dmg 파일 다운로드 → 실행 → 앱 복사
설치 후, 상단 메뉴 막대에 귀여운 고래 아이콘 등장

설치 확인

docker --version

2. MySQL 이미지 다운로드

docker pull mysql

특정 버전을 다운로드하고 싶다면 mysql:8.0 이런형식으로!

3. 도커 이미지 확인

docker images

4. 컨테이너 실행

docker run -d -p 3306:3306 --name=my-local-mysql -e MYSQL_ROOT_PASSWORD=1234 mysql

-d: 백그라운드 실행
-p 3306:3306: 포트 매핑
--name: 컨테이너 이름(my-local-mysql)
-e MYSQL_ROOT_PASSWORD: root 비밀번호 설정(1234)

5. 컨테이너 확인 및 실행

Docker Desktop 실행 → Containers 탭 → 생성된 컨테이너 확인
▶️ 버튼 (Action) 클릭해서 실행!

DB 연결 테스트 (with DataGrip)

Host: localhost
Port: 3306
User: root (아까 user를 따로 설정하지 않았으므로 default root)
Password: 1234 (아까 설정한 값)

해당 정보로 DB 툴(DataGrip 등)에서 연결 확인 → 프로젝트에 연결할 때는 이 정보 기반으로 설정하면 OK!

※ 이 글은 DB 설치까지의 흐름만 설명! 테이블 생성이나 데이터 삽입은 각자 필요에 맞게 진행하면 됨.

마무리

귀찮아도 로컬 DB는 만들자! (테스트가 가능해진다!)
Docker는 은근히 간단하고, 의외로 고래가 귀엽다.
Special thanks to 오씨!!

[인증 Framework] NextAuth야 너 뭐니?

Bittersweet- — Thu, 19 Dec 2024 13:50:02 +0900

2FA 도입 배경과 NextAuth 선정

최초 계획은 이러했다.

소셜 로그인 구현
2FA 보안 강화

이에 Next.js와의 통합성과 세션 관리 기능, 커스텀 인증 플로우 지원 등의 이유로 기능 구현에 있어 NextAuth를 선택(당)했다.

NextAuth는 로그인 인증 및 세션 관리에 중점을 둔 인증 프레임워크로, 2FA와 같은 특정 인증 방식을 직접 제공하지는 않지만, 이를 기반으로 커스텀 구현이 가능하여 프로젝트 요구사항에 잘 부합한다고 보였다.

이미 구현을 위한 모든 준비를 끝냈을 때!! 소셜 로그인 기능을 제외시키고 이메일 로그인을 사용하기로 변경(당)했다.

2FA 구현 방법

OTP(One-Time Password)
- 시간 기반 일회용 비밀번호(TOTP)를 사용하여 사용자에게 동적 비밀번호를 제공.
- Google Authenticator와 같은 앱과 연동 가능.
이메일/SMS 인증
- 인증 코드를 이메일이나 SMS를 통해 사용자에게 전송하여 본인 확인.
하드웨어 키
- USB 보안 키 또는 생체 인증(지문, 얼굴 인식 등)과 같은 물리적 인증 수단을 활용.

NextAuth 주요 인증 방식

1. OAuth 인증

Google, Github, Facebook 등의 소셜 미디어 및 타사 서비스와 연동하여 사용자 인증 처리

providers: [
  GoogleProvider({
    clientId: process.env.GOOGLE_ID,
    clientSecret: process.env.GOOGLE_SECRET,
  }),
  GitHubProvider({
    clientId: process.env.GITHUB_ID,
    clientSecret: process.env.GITHUB_SECRET,
  }),
]

2. Credentials 인증

이메일/비밀번호와 같은 자격 증명을 사용한 커스텀 인증을 구현 가능

providers: [
  CredentialsProvider({
    name: 'Credentials',
    credentials: {
      email: { label: "Email", type: "text" },
      password: { label: "Password", type: "password" }
    },
    async authorize(credentials) {
      // 사용자 검증 로직
      const user = await validateUser(credentials)
      return user || null
    }
  })
]

3. Email 인증

이메일을 통한 비밀번호 없는 인증을 제공. 매직 링크나 OTP를 이메일로 전송하여 인증 수행

providers: [
  EmailProvider({
    server: process.env.EMAIL_SERVER,
    from: process.env.EMAIL_FROM,
    maxAge: 24 * 60 * 60, // 24시간 유효
  })
]

주요 특징

다양한 인증 제공자 지원: OAuth(Google, GitHub 등), Credentials(이메일/비밀번호), Email.
JWT와 세션 기반 인증 지원: 서버리스 환경 및 데이터베이스 통합에 적합.
자동 CSRF 보호: 보안성을 높이기 위한 기본 기능.
TypeScript 지원: 타입 안정성을 제공하여 개발 생산성 향상.

NextAuth의 데이터 흐름

authorize(): 사용자가 로그인 시도를 하면 호출되어 인증을 처리.
JWT callback: 인증 성공 시 JWT를 생성하거나 수정.
Session callback: 클라이언트로 전달할 세션 데이터를 구성.

주요 설정 옵션 샘플.

export const authOptions = {
  providers: [], // 인증 제공자 설정
  pages: {
	  signIn: '/auth/signin' // signin, signout 커스텀 페이지 라우팅 설정**필수값 아님
	},
  session: {
    strategy: "jwt", // 'jwt' 또는 'database'
    maxAge: 30 * 24 * 60 * 60, // 세션 유효기간
  },
  callbacks: {
    async jwt({ token, user }) {
      // JWT 토큰 커스터마이징
      return token
    },
    async session({ session, token }) {
      // 세션 데이터 커스터마이징
      return session
    }
  }
}

보안 고려사항

JWT 토큰의 만료 시간을 적절히 설정
중요한 정보는 토큰에 저장하지 않기
HTTPS 사용 권장
환경변수로 비밀키 관리

위 예시 코드에서는 OTP 인증과 함께 JWT 토큰의 만료 시간을 관리하는 방법을 보여주고 있다.

[NextAuth.js의 데이터 흐름]

authorize() => JWT callback => session callback

예시

import { authenticator } from 'otplab';

// 상수로 관리
const MAX_AGE = 1800; // 30분
// session maxAge 설정
  session: {
    strategy: "jwt",
    maxAge: MAX_AGE
  },
callbacks: {
  // 1. JWT 콜백에서 먼저 토큰에 저장
  async jwt({ token, user }) {
      // 명시적으로 토큰 만료 시간 설정
	    token.exp = Math.floor(Date.now() / 1000) + MAX_AGE;
	    
	    // 로그인 시 토큰 생성시간 기록
      if (trigger === "signIn") {
        // 로그인 경우에만 토큰 생성시간 업데이트
        token.create = Math.floor(new Date().getTime() / 1000);
      }
      // OTP 검증(update 트리거 시)
      if (trigger === "update") {
        try {
          // client에서 받은 passcode를 check
          const isValid = authenticator.check(
          session.passcode, // 사용자가 입력한 6자리
          token.passcode // 최초 생성 시 저장된 비밀키
          );
          if (isValid) {
            token.is_valid_otp = true;
          } else {
            token.is_valid_otp = false;
          }
        } catch (error) {
          token.is_valid_otp = false;
          console.error("OTP Verification Error:", error);
        }
      }
      return { ...user, ...token };
  },

  // 2. Session 콜백에서 토큰의 데이터를 세션으로 복사
  async session({ session, token }) {
    session.user.custom_field = token.custom_field;
    return session;
  }
}

trigger는 NextAuth 내부 동작을 위한 것으로 추가할 수 없다.(signIn, signUp, update, signOut) 대신 jwt callback에서 필요한 조건을 추가할 수 있다.

// authOptions.ts
callbacks: {
  async jwt({ token, trigger, session }) {
    // 기본 trigger 처리
    if (trigger === "update") {
      // 기본 업데이트 로직
    }

    // 커스텀 조건 추가
    if (session?.customField) {
      token.customField = session.customField;
    }

    return token;
  }
}

NextAuth.js의 기본 엔드포인트 설명

/api/auth/signin: 로그인 페이지 제공 (커스텀 가능).
/api/auth/signout: 로그아웃 처리.
/api/auth/session: 현재 세션 상태 확인/갱신.
/api/auth/providers: 설정된 인증 제공자 목록 반환.
/api/auth/csrf: CSRF 토큰 제공.
/api/auth/callback/:provider: OAuth 콜백 처리.

NextAuth와 라우팅

NextAuth 클라이언트 사이드 보호 메커니즘으로 클라이언트 사이드에서 라우팅을 시도할 때 session의 status를 체크하지 않으면 라우팅을 차단한다.

즉, NextAuth는 클라이언트 사이드에서 보호된 라우트로의 이동을 시도할 때 status 체크를 강제하는 보안 메커니즘을 가지고 있다는 말이다.

단, Link 컴포넌트를 통한 라우팅은 Next.js의 라우팅 시스템을 이용하며, 미들웨어와 자동으로 연동되어 세션 체크를 처리하기 때문에 추가 세션 체크가 필요 없다.

*** 세션이 있더라도 status 체크가 없으면 nextAuth의 클라이언트 보안 메커니즘이 라우팅을 차단한다.*

NextAuth와 라우팅 동작 방식

Link 컴포넌트 동작:
- Next.js의 기본 컴포넌트
- 내부적으로 세션/인증 상태 추적
- 미들웨어와 자동 연동
- protected route 접근 시 자동으로 세션 체크
router.push() 동작:
- 프로그래매틱 네비게이션 방식
- 수동으로 세션 상태 체크 필요
- NextAuth의 보안 메커니즘으로 인해 세션 체크 없이는 차단

session 없음	A[버튼 클릭] => B[NextAuth 클라이언트 체크] => C[라우팅 시도] => D[미들웨어 세션 체크] => E[리다이렉트]
session 있음	A[버튼 클릭] => B[NextAuth 클라이언트 체크] => C[라우팅 차단] => D[동작 없음]

클라이언트 체크 예시)

'use client'

import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useSession } from 'next-auth/react'

function ExampleComponent() {
  const router = useRouter()
  const { status } = useSession()

  return (
    <>
      {/* 자동으로 세션 체크 + 미들웨어 동작 */}
      <Link href="/protected">Protected Page</Link>

      {/* 수동으로 세션 체크 필요 */}
      <button onClick={() => {
        // status 체크 없으면 NextAuth가 라우팅 차단
        if (status === 'authenticated') {
          router.push('/protected')
        }
      }}>
        Go to Protected
      </button>
    </>
  )
}

한줄 요약!!

Link를 이용하지 않는데 클라이언트 라우팅을 이용할 경우, 세션 체크를 수동으로 체크 처리 해야 한다!!

[Next.js] 로컬은 폰트 로드되는데 프로덕션은 로드 안됨(Development VS Production 간단 설명)

Bittersweet- — Mon, 14 Oct 2024 15:33:24 +0900

프로젝트 진행 중 한번은 개발(이하 로컬)에서는 멀쩡히 가져오던 font 소스가 Production(이하 프로덕션)에서는 제대로 가져오지도 적용하지도 못한 이슈를 확인해 본 적이 있다.

프로젝트 구성

Next.js 14
React 18(page router)
font: Pretendard, Montserrat

신규 배포가 아니라 이미 3개월 동안은 font가 제대로 사용되고 있었던 지라 당최 이유가 뭔지 알 수 없었다.

적용 코드.

font를 global.scss 파일에서 cdn import 함. 로컬에서 실행 시에는 network를 통해 font 다운로드가 확인됨.

사용 CDN

https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css

https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swape

프로덕션 적용 코드.

cdn이 적용되지 않음. network를 통해 다운되는 font가 없음.

확인 사항

cdn의 경로가 절대 경로인지 check - yes!
빌드된 css, html 확인 및 실제 정적 파일 유무 확인 - yes!
cors 설정과 같은 외부 cdn 관련 문제를 확인하여 폰트가 제대로 로드되는지 확인 - cors 에러 안나고 아예 font가 로드되지 않음

결론.

_document.tsx 파일의 특성을 활용하여 <link> 태그를 이용해서 font를 런타임 시점에 로드하거나 public 폴더 내부에 font 파일을 저장해서 빌드 시점에 프로젝트에 font를 이미 가져가도록 설정하는 방법 중 전자의 방법을 택!!

Next.js는 _document.tsx파일을 사용하여 HTML 문서의 기본 구조를 설정한다.

_document.tsx는 서버에서 한 번만 렌더링 되며, 모든 페이지에 대해 공통으로 적용되어 font와 같은 리소스를 가져오면, Next.js가 서버에서 HTML을 생성할 때 해당 <link> 태그를 포함한다.

하지만 실제로 font는 HTML을 수신한 후 클라이언트 측 런타임(브라우저가 페이지를 로드할 때) 다운로드 된다.

rel="preload"를 사용하면 브라우저가 페이지 로드 중에 폰트를 미리 다운로드하게 되어 font 로딩 시간을 줄일 수 있다.

외부 CDN에서 font를 로드하는 경우, CORS 설정이 제대로 되어 있어야 font가 제대로 로드되므로,

crossOrigin="anonymous"를 사용할 수 있다.

이는 CORS(Cross-Origin Resource Sharing) 설정과 관련된 속성으로, 브라우저가 외부 리소스(예: 폰트, 이미지, 비디오 등)를 다른 도메인에서 가져올 때 **자격 증명(쿠키, 인증 헤더 등)**을 포함하지 않고 요청하도록 설정하는 옵션이다.

_document.tsx 코드를 수정했더니 로컬도 프로덕션도 폰트 적용이 잘 됐다.

나중에 알게된 사실은 next.js는 google font를 지원하기 때문에 최적화로 적용하는 방식이 따로 있었고, 그 외 폰트는 로컬 적용(즉, 폰트 파일을 프로젝트에 포함시켜 빌드 시 가지고 있음)이 공식문서에 기재되어 있었다. 하핫..

그렇게 하면 되지 뭐. 수정하면 되지 뭐~ 헤헷

다시 수정하는 story는 다음 기회에.. 헤헤

Next.js font 최적화 적용하기

음.. 근데 왜 로컬이랑 prod랑 왜 달라??? (왜 나를 힘들게 해...)

그래서 알아봤다!!! 개발 모드랑 프로덕션 모드랑 뭐가 다르냐!!!!

<h1> 개발 모드 vs 프로덕션 모드 </h1>

로컬 실행 (개발 모드)

Next.js는 빠른 피드백을 제공하기 위해 개발 모드에서 소스 코드가 실시간으로 컴파일되고, 핫 리로딩(Fast Refresh)이 활성화되어 저장할 때마다 자동으로 페이지가 새로고침된다.
또한, 코드 타입 안정성을 확보하고, 코드 스타일 및 품질 검사를 실시간으로 수행하여 오류를 빨리 찾아 수정할 수 있게 해준다.(TypeScript, ESLint integeration 등)
개발 모드에서는 오류 메시지가 더 상세히 표시되어 디버깅에 최적화되어 있으며, 성능 최적화는 크게 고려되지 않는다.
즉, Next.js는 개발 모드에서 개발을 위한 최적화된 빌드를 제공한다.

빌드 및 배포(프로덕션 모드)

build 명령어를 사용하여 프로젝트의 소스 코드를 프로덕션 모드로 컴파일 한다. 이 과정에서 코드가 최적화되고, 불필요한 부분은 제거(minigying) 되며, React는 디버깅을 위한 개발용 코드 대신 최적화된 코드로 교체된다.
이 때, 코드 스플리팅, 트리 쉐이킹 등 성능 최적화가 적용되어 최종 번들의 크기가 줄어든다.
프로덕션 모드는 애플리케이션을 사용할 유저와 유저의 경험을 최적화 해준다. 이때 성능과 접근성을 향상시키기 위해 코드를 변환하는 것을 목표로 한다.

구분	로컬 실행(개발 모드)	빌드 및 배포(프로덕션 모드)
정적 최적화	* Next.js가 동적 페이지도 실시간으로 렌더링하여 서버 측에서 매번 데이터를 가져와 페이지를 그린다.	* 빌드 시 정적 사이트 생성(SSG)나 서버 사이드 렌더링(SSR)이 설정된 페이지는 미리 렌더링된다. * 정적 페이지는 배포 후에도 그대로 사용되며, 필요에 따라 API 요청으로 데이터를 가져온다. * 정적 최적화로 인해 배포된 웹사이트는 더 빠르게 로드될 수 있다.
성능 최적화	* 개발 모드에서 성능 최적화는 거의 적용되지 않고, 주로 디버깅과 빠른 개발을 위한 설정이 반영된다.	* 프로덕션 빌드에서는 성능 최적화가 핵심으로 React에서 불필요한 코드가 제거되고, 번들 크기가 줄어들며, CSS와 JavaScript 파일들이 압출된다. * 또한, 이미지 최적화도 자동으로 수행된다.
소스맵(Source Map)	* 소스맵이 기본적으로 포함되어 있어 디버깅 시 원본 소스 코를 쉽게 추적할 수 있다.	* 프로덕션 환경에서는 소스맵을 포함하지 않거나 외부로 공개되지 않도록 설정하여 보안을 유지한다.

내용이 더 길어지면 (나의) 집중력 저하와 졸음을 유발하므로 이쯤에서 THE END - 끗!!

그럼 이만.. 총총총

:empty 가상 클래스

Bittersweet- — Mon, 10 Apr 2023 10:46:22 +0900

긴 설명은 필요 없다.

:empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자이다. 요소 안에 주석이 있어도 가능하다.

하지만, 공백이 있으면 적용되지 않으므로 주의해야 한다.

<p></p>
<p><!-- test --></p>

p:empty { color: red; }

[번역] Strategies for Cache-Busting CSS

Bittersweet- — Thu, 16 Mar 2023 16:43:58 +0900

** 번역에 의역과 오역이 충분히 있을 수 있으므로, 가능하신 분들은 그냥 아래의 링크로 가셔서 원문을 읽어보시길 추천합니다~

https://css-tricks.com/strategies-for-cache-busting-css/

Strategies for Cache-Busting CSS | CSS-Tricks

Major performance gains are to be had from browser caching CSS. You ensure your server is set up to send headers that tell the browser to hang onto the CSS

css-tricks.com

CSS 브라우저 캐싱에서 주요 성능을 향상 시킬 수 있다. 주어진 시간동안 CSS 파일을 파악하도록 브라우저에게 알리는 헤더를 보내도록 서버가 설정되어있는지 확인한다. 대부분의 사이트는 아니더라도 많은 사이트에서 이미 실행하고 있는 모범 사례이다.

캐시 버스팅은 브라우저 캐싱와 관련 있다. 브라우저에 1년된 CSS 파일의 캐시가 있다고 가정하자.(흔하지 않음) 그런데 CSS를 바꾸길 원한다면 기존의 캐시를 버리고 새로운 CSS파일을 무조건 받도록 만들어야 한다.

아래에 몇가지 방법이 있다.

CSS가 캐시에 저장되는 것을 활용한다.

확인을 위해 아래 CSS파일이 정상적으로 캐시된 headers를 볼 수 있다.

Cache-Control과 Expires를 찾아보자. 나는 server 구성의 전문가가 아니다. H5BP server 구성을 살펴보자. 하지만 이를 수행하기 위한 몇가지 고전적인 Apache/HTAccess 방법이 있다.

<FilesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\\.gz)?$">
  Header set Expires "Thu, 15 Apr 2020 20:00:00 GMT"
</FilesMatch>

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
</IfModule>

H5BP(HTML5 BoilerPlate)

필수적인 스타일과 폴리필, 모더나이저 같은 툴을 포함하여 HTML5를 사용함에 있어 크로스 브라우징을 좀 더 쉽게 도와주는 템플릿

H5BP/server-configs-apache

github

Apache Server Configs는 서버가 웹 사이트의 성능과 보안을 개선하는데 도움이 되는 구성 스니펫 모음으로 리소스가 올바른 콘텐츠 유형으로 제공되고 필요한 경우, 도메인 간 엑세스가 가능하도록 한다.

Query Strings

요즘 대부분의 브라우저는 다른 query string이 있는 url을 다른 파일로 보고 새 사본을 다운로드 한다.

대부분의 CDN은 이를 지원하고 권장하기도 한다.

<link rel="stylesheet" href="style.css?v=3.4.1">

수정 한 후 함께 수정한다.

<link rel="stylesheet" href="style.css?v=3.4.2">

여러 곳에서 사용할 서버 측 변수를 설정하여 잠재적으로 더 쉽게 만들 수 있다. 따라서 한번에 수정이 가능하다.

<?php $cssVersion = "3.4.2"; ?>

<link rel="stylesheet" href="global.css?v=<?php echo $cssVersion; ?>">

Semantic Versioning(major.minor.patch)방식을 사용할 수도 있고 상수를 정의할 수도 있다.

파일 이름 바꾸기

query string이 언제나 먹히진 않는다. 어떤 브라우저들은 각기 다른 query string을 다른 파일이라고 보지 않는다. 그리고 일부 소프트웨어(들은바로는 Squid)는 query string이 있는 파일은 캐시하지 않는다.

Steve Souders는 이 방법을 반대했다.

비슷한 방법으로는 아래와 같이 HTML에서 파일이름을 바꾸는 것이 있다.

<link rel="stylesheet" href="style.232124.css">

말 그대로 프로젝트 내의 파일명을 변경하는 것이 아니라 프로그래밍 방식으로 처리할 수 있다. 파일이 서버에 실제로 존재하지 않기 때문에 올바른 파일로 라우팅하려면 몇가지 트릭을 수행해야 한다. Jeremy Keith는 최근 이에 대한 자신의 기술을 다루었다.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+).(\\d+).(js|css)$ $1.$3 [L]

이것은 서버로 하여금 javascript와 css 파일에 있는 숫자를 무시하도록 지시하지만 브라우저는 해당 번호를 업데이트할 때마다 여전히 새 파일로 해석한다.

그는 Twig를 사용해, 그가 쓰는 템플릿은 대충 아래와 같다.

{% set cssupdate = '20150310' %}

<link rel="stylesheet" href="/css/main.{{ cssupdate }}.css">

ASP같은 백엔드 언어에서 그 버전을 상상할 수 있다고 확신한다. 빌드 툴 또는 배포 스크립트가 변수 자체를 업데이트 하도록 레벨을 올려야 한다.

파일 업데이트 날짜를 기준으로 캐시 무효화 “숫자” 지정

캐시 무효화를 찾아보는 동안, 서버를 이용해서 파일이 언제 업데이트되어 캐시파일이 생성되었는지 숫자를 사용하라는 글을 많이 보았을 것이다. (숫자, 의미, 버스트 캐시로 변경하는 모든 것)

function autoversion($url) {
  $path = pathinfo($url);
  $ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
  return $path['dirname'].'/'.str_replace('.', $ver, $path['basename']);
}

<link href="<?php autoversion('/path/to/theme.css'); ?>" rel="stylesheet">

나는 이 방법을 추천하지 않는다. 모든 페이지뷰에서 이 정보를 파헤치도록 서버에 요청하는 것은 프로덕션에 매우 집약적이고 위험할 것 같다.

과거에는 “데이터 속성에 있는 이미지 치수를 PHP가 출력하도록 하겠다”와 같은 작업을 수행했다. 그것을 찾기 위해서만 서버가 중단된다. 조심하길 바란다.

ETags

ETags는 좋은 생각으로 보여진다. 왜냐하면 모든 것의 포인트는 만약 브라우저가 이미 파일의 복사본을 가지고 있는지 없는지에 대한 정보를 체크하는 것이기 때문이다.

하지만 대부분이 이렇게 충고했다. “ETags headers를 꺼라”. yahoo를 보면

ETags의 문제점은 일반적으로 사이트를 호스팅하는 특정 서버에 고유하게 만드는 속성을 사용하여 생성된다는 것이다. 브라우저가 한 서버에서 원래 구성 요소를 가져오고 나중에 다른 서버에서 해당 구성 요소의 유효성을 검사하려고 하면 ETags가 일치하지 않는다. 이러한 상황은 서버 클러스터를 사용하여 요청을 처리하는 웹사이트에서 너무 일반적이다.

또 다른 이슈는 그것은 실제 캐싱하는 것처럼 효율적이지 않다는 점이다. ETags를 체크하기 위해서는 네트워크 요청이 여전히 필요하다. 성능에 영향을 미치는 것은 파일 다운로드 뿐만 아니라 모든 네트워크 협상 및 대기 시간 문제이다.

다시한번 말하지만 나는 전문가가 아니다. 하지만 여기 아파치에서 이 부분 일반적으로 끄기를 추천된다.

<IfModule mod_headers.c>
  Header unset ETag
</IfModule>
FileETag None

프레임워크가 대신 해줌

나는 Rail Asset Pipeline과 Sprockets을 살짝 경험해 본적 있다. 누가 내게 묻는다면, 이것은 꿈같은 시스템이었다. 템플릿에서 스타일 시트를 연결했다.

<%= stylesheet_link_tag "about/about" %>

그리고 HTML은 아래와 같다.

<link href="http://assets.codepen.io/assets/about/about-7ca9d3db0013f3ea9ba05b9dcda5ede0.css" media="screen" rel="stylesheet" type="text/css" />

캐시 버스팅 숫자는 파일이 수정되었을 때만 변경된다. 따라서 캐싱하고자 하는 파일만 캐싱할 수 있게 된다. 이것은 이미지 및 JavaScript에 대한 메서드도 있다.

워드 프레스

W3 Total Cache와 같은 워드프레스의 페이지 캐싱 도구를 사용하는 경우, 해당 filemtime 비즈니스가 너무 서버 집약적인 것을 두려워해야 한다.

워드프레스의 특별한 테크닉에 대해 포스팅 한 Gilbert Pellegrom 가 이것을 사용한다.

wp_register_style( 'screen', get_template_directory_uri().'/style.css', array(), filemtime( get_template_directory().'/style.css' ) );
wp_enqueue_style( 'screen' );

// Example Output: /style.css?ver=1384432580

워드프레스 플러그인으로 똑같은 일을 수행하는데 모든것이 자동이다.

Codekit

CodeKit은 파일이름 변경 메서드는 가지고 있지 않지만 설정해 놓은 환경 밑에 쉘 스크립트를 실행시킬 수 있는 방법을 가지고 있다.

Michael Russell은 블로그에 timestamp를 파일에 주입시키는 방법에 대해 포스팅한 적이 있다. 그 방법으로 파일명을 수정할 수 있을 꺼라고 생각한다.

Build Tools

모든 인기 있는 task runner나 build tool은 파일명을 변경하는 플러그인을 가지고 있다. Sufian Rhazi는 블로그에 Node.js로 파일명을 변경하는 방법에 대해 포스팅했다.

Grunt
- grunt-cache-bust
Gulp
- gulp-cache-bust
- gulp-buster
Broccoli
- Broccoli-rev
Within Preprocessors

다른 asset에 나의 asset을 연결하는 경우(예를 들어 less 파일에서 연결한 이미지 등) 우리는 전처리기를 둘 수 있다. Ben Nadel 블로그에 방법을 포스팅 했다.

Async CSS

치명적인 CSS가 더 중요해짐에 따라 CSS의 지연 로딩 문제가 더 중요해지고 있다. CSS의 로딩이 지연되는 다른 이유들도 있다.(print CSS 또는 priming cache)

<aside> ⏰ priming(점화) - 나의 자극에 노출됨으로써 의식적인 지침이나 의도 없이 후속 자극에 대한 반응에 영향을 미치는 현상

</aside>

만약 loadCSS로 CSS를 로딩(또는 링크 태그를 삽입하는 경우) 하고 있다면, 자바스크립트 자체에서 파일 이름을 업데이트 해야 한다. 파일 이름 변경과 다르지만 또 결과적으론 다르지 않다.

So

빼먹은 것은 없나? 당신의 캐시 무효화 전략은?

[알고리즘] 시간 복잡도(Time Complexity)

Bittersweet- — Mon, 20 Feb 2023 13:45:10 +0900

알고리즘?

컴퓨터에게 내리는 지시사항을 나열한 것

시간 복잡도?

시간 복잡도는 n개의 입력 데이터에 대해 알고리즘이 문제를 해결하는데에 얼만큼의 시간(걸리는 절차 수)이 걸리는지를 나타내는 것을 말한다.

일반적으로 시간 복잡도를 나타내기 위해 점근적 표기법(asymptotic notation)을 사용한다.

점근적 표기법 - 중요하지 않은 상수와 계수들을 제거해 알고리즘의 실행 시간에서 중요한 성장률에 집중하는 방법을 의미함
점근적이라는 의미는 가장 큰 영향을 주는 요소만 계산한다는 의미

점근적 표기법에는 다음과 같은 세가지가 존재한다.

오메가 표기법(Big-Ω notation)
세타 포기법(Big-θ notation)
빅오 표기법(Big-O notation)

효율적인 방법을 고민한다는 것은 시간 복잡도를 고민하는 것과 같다.

Big-O 표기법

빅오 표기법은 알고리즘의 시간 복잡도와 공간 복잡도를 나타내는데 사용된다.

시간복잡도는 입력된 N의 크기에 따라 실행되는 알고리즘 단계의 수를 나타낸다.
공간복잡도는 알고리즘이 실행될 때 사용하는 메모리의 양을 나타낸다.

시간 복잡도를 각각 최악, 최선, 중간(평균)의 경우에 표기하는 방법으로 불필요한 연산을 제거하고 알고리즘 분석을 쉽게한 목적으로 사용된다.

최상	Big-Ω(빅-오메가)	하한 점근
평균	Big-θ(빅-세타)	최상과 최악의 평균
최악	Big-O(빅-오)	상한 점근

대표적인 Big-O의 복잡도를 나타내는 표

시간복잡도는 다른 의미로 알고리즘을 수행하기 위해 프로세스가 수행해야만 하는 연산을 수치화한 것이다.

시간복잡도에서 가장 중요하게 보는 것은 가장 큰 영향을 미치는 n의 단위이다.

복잡도	1	10	100
O(1)	1	1	1
O(log N)	0	2	5
O(N)	1	10	100
O(N log N)	0	20	461
O(N^2)	1	100	10000
O(2^N)	1	1024	1267650600228229401496703205376
O(!N)	1	3628800	화면에 표현할 수 없음!

O(1) : 상수

알고리즘이 문제를 해결하는 데에 필요한 단계의 수가 오직 한단계인 경우

즉, 입력 데이터의 개수와 관계없이 처리 시간 또는 메모리 사용량이 일정하다.

O(N) : 선형

알고리즘이 문제를 해결하는 데에 필요한 단계의 수가 입력 데이터의 개수 N에 비례하는 경우

즉, 입력 데이터의 개수에 따라 처리 시간 또는 메모리 사용량이 선형적으로 증가

O(N*N)

알고리즘이 문제를 해결하기 위해 필요한 단계의 수가 입력 데이터의 개수 N의 제곱인 경우

이진 검색 : 정렬 알고리즘

O(log N) : 로그 시간

알고리즘이 문제를 해결하기 위해 필요한 단계의 수가 연산마다 특정 요인에 의해 감소하는 경우

O(N log N)

이진 검색 : 정렬 알고리즘

O(Cⁿ): 지수 시간

알고리즘이 문제를 해결하는데에 피요한 단계의 수가 주어진 상수 값 C의 n 제곱인 경우

$O (1)$	1	10	100
$O (1)$	1	1	1
$O (\log n)$	0	2	5
$O (n)$	1	10	100
$O (n \log n)$	0	20	461
$O (n^{2})$	1	100	10000
$O (2^{n})$	1	1024	1267650600228229401496703205376
$O (n!)$	1	3628800	화면에 표시 불가

정렬 알고리즘 별 Big-O 비교

Sorting Algorithm	최선	평균	최악
Bubble Sort(버블 정렬)	$O (n)$	O(n²)	O(n²)
Heap Sort(힙 정렬)	$O (n \log n)$	O(n log n)	O(n log n)
Insertion Sort(삽입 정렬)	$O (n)$	$O (n^{2})$	$O (n^{2})$
Merge Sort(합병 정렬)	$O (n \log n)$	O(n log n)	O(n log n)
Quick Sort(퀵 정렬)	$O (n \log n)$	O(n log n)	$O (n^{2})$
Selection Sort(선택 정렬)	$O (n^{2})$	$O (n^{2})$	$O (n^{2})$
Shell Sort(셸 정렬)	$O (n)$	$O (n \log n^{2})$	$O (n \log n^{2})$
Smooth Sort(부드러운 정렬)	$O (n)$	$O (n \log n)$	$O (n \log n)$

** Bubble Sort(버블 정렬) - 매번 연속된 두 개의 인덱스를 비교하여, 정한 기준의 값을 뒤로 넘겨 정렬하는 방식(1,2번을 비교해 큰 값을 뒤로 넘김)

** Heap Sort(힙 정렬) - 내림 차순 정렬을 위해서 최대 힙을 구성하고 오름 차순 정렬을 위해서 최소 힙을 구성한다. (힙? 이진 트리의 일종으로 우선순위 큐를 위하여 만들어진 자료구조로 최대값 최소값을 쉽게 추출할 수 있는 자료구조)

** Merge Sort(합병 정렬) - 큰 문제를 반으로 쪼개서 해결해 나가는 분할 방식으로 배열의 크기가 1보다 작거나 같을 때까지 반복

** Quick Sort(퀵 정렬) - 퀵 정렬, 분할 정복을 이용하여 정렬을 수행하는 알고리즘으로 기준이 되는 값을 정하고 그 값보다 작은 값은 왼쪽 큰 값은 오른쪽으로 정렬한다. 배열의 크기가 1보다 작거나 같을 때까지 반복

** Shell Sort(셸 정렬) - 삽입 정렬을 보완한 알고리즘으로 삽입 정렬과 다르게 전체의 리스트를 한번에 정리하지 않고 대신 먼저 정렬해야할 리스트를 일정한 기준에 따라 분류하여 연속적이지 않은 여러개의 부분 리스트를 만들고 각 부분 리스트에 삽입 정렬을 이용하여 정렬

** Smooth Sort(부드러운 정렬) - 힙 정렬의 변형 중 하나로 입력을 우선 순위 대기열로 구성한 다음 반복적으로 최대값을 추출한다.

자료 구조별 Big-O 비교

Data Structure	$O (\log n)$	$O (n)$	$O (n)$	$O (\log n)$	$O (n)$	$O (n)$
Sorted Array	$O (\log n)$	$O (n)$	$O (n)$	$O (\log n)$	$O (n)$	$O (n)$
Array	$O (n)$	N/A	N/A	$O (n)$	N/A	N/A
Linked List	$O (n)$	$O (1)$	$O (1)$	$O (n)$	$O (1)$	$O (1)$
Doubly Linked List	$O (n)$	$O (1)$	$O (1)$	$O (n)$	$O (1)$	$O (1)$
Stack	$O (n)$	$O (1)$	$O (1)$	$O (n)$	$O (1)$	$O (1)$
Hash Table	$O (1)$	$O (1)$	$O (1)$	$O (n)$	$O (n)$	$O (n)$
Binary Search Tree	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (n)$	$O (n)$	$O (n)$
B-Tree	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$
Red-Black Tree	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$
AVL Tree	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$	$O (\log n)$

시간 복잡도를 구하는 요령

하나의 루프를 사용하여 단일 요소 집합을 반복 하는 경우 : O (n)
컬렉션의 절반 이상을 반복 하는 경우 : O (n / 2) -> O (n)
두 개의 다른 루프를 사용하여 두 개의 개별 콜렉션을 반복 할 경우 : O (n + m) -> O (n)
두 개의 중첩 루프를 사용하여 단일 컬렉션을 반복하는 경우 : O (n²)
두 개의 중첩 루프를 사용하여 두 개의 다른 콜렉션을 반복 할 경우 : O (n * m) -> O (n²)
컬렉션 정렬을 사용하는 경우 : O(n*log(n))

[git] git pull 시 발생하는 warning(Need to specify how to reconcile divergent branches)

Bittersweet- — Tue, 6 Dec 2022 10:37:22 +0900

위와 같은 에러가 떴을 경우, 힌트로 제공된 세가지 옵션 중 하나로 상황을 해결한 적이 있을 것이다.

종종 마주치게 되는 에러인데 이번 기회에 정확히 알고 넘어가야겠다!

우선 먼저 위의 상황은 local과 remote의 싱크가 맞지 않아 브랜치가 갈라졌다는 것이다.

1. git config pull.rebase false #merge (the default strategy)

기존의 git pull 방식과 동일하다. pull을 받으면 불필요한 merge commit 이 생성된다. 3-way merge로 새로운 커밋을 만들어낸다.

2. git pull.rebase true # rebase

* rebase란?

로컬에서 변경된 사항을 patch로 만들고 이를 다시 remote에 적용시키는 것을 말한다. rebase 명령으로 한 브랜치에서 변경된 사항을 다른 브랜치에 적용할 수 있다.

local의 시작점을 remote의 마지막 commit으로 옮기는 개념으로 볼 수 있다. 그 과정에서 생기는 Conflict는 알아서 잘 해결해주면 될 듯 하다.

git history가 깔끔해진다는 장점이 있으나, 부주의하게 사용할 경우 별도의 알림 없이 git history를 영구적으로 변경할 수 있기 때문에 ff-only 방식을 더 권장한다고 한다.

3. git config pull.ff only #fast-forward

pull 하려는 원격 저장소의 브랜치와 로컬 저장소의 브랜치가 fast-forward 관계일 때만 pull을 허용한다.

두 브랜치가 fast-forward 관계라는 것은 갈라진 commit을 기준으로 아래의 둘 중 하나를 의미한다.

로컬 저장소에만 새로운 commit이 있고, 원격 저장소에는 없다.
원격 저장소에만 새로운 commit이 있고, 로컬 저장소에는 없다.

첫번째의 상황이라면 pull을 받아올 필요가 없으므로 두번째 상황일 때에만 pull이 가능하다.

이 말은 원격 저장소의 새로운 commit이 존재하는데 git pull을 하지 않은 상태에서 로컬 저장소에 새로운 commit을 했다면, git은 pull을 허용하지 않는다는 말이다.

간단히 생각하면 ff 방식을 권장하지만 상황에 따라 옵션을 잘 골라서 적용하면 되지 않을까 싶다.

또한, 이런 에러가 생기는 이유가 pull 당시 브랜치가 갈라졌기 때문이니, 수정 사항을 잠시 stash 해뒀다가 원격 저장소에 있는 수정사항을 pull하는 것도 하나의 방법일 듯 하다.

[references]

오늘의 CODE

Shortest Unique Prefixes 와 Trie 자료구조

문제: Shortest Unique PrefixesGiven a list of words, return the shortest unique prefix of each word.

예시:

Trie 자료구조

Trie의 특징:

Trie 구현(클래스 방식)

설명:

정렬과 비교로 해결!!

설명:

결론

연속된 부분 배열의 최대합 (Kadane's Algorithm)

네!! 저는 요즘 ai랑 코드 테스트하는 재미에 푹 빠져있습니다!!!(누구한테 말하냐..?)

카다인 알고리즘으로 푸는 연속 부분 배열 최대 합

문제 설명

예시

1. 순진한 접근: 다 해보자!

2. 진짜(?) 개발자는 이렇게 푼다: 카다인(Kadane’s) 알고리즘

!!! 여기서 갑자기 드는 의문

음수 빼고 양수만 더한다면:

카다인 알고리즘은?

정리!

코딩 테스트 자주 나오는 문제: 두 수의 합 (Two Sum)

코딩 테스트 단골손님: 두 수의 합 (Two Sum)

문제 설명

입력 예시

1. 순수 근성 풀이: 이중 for문

2. 머리 좀 쓴 풀이 : 해시맵으로 최적화!

잠깐, 자바스크립트에 해시맵이 있어?

3. Map 객체로 더 깔끔하게 리팩토링

보너스: 문자열 순회할 때 꼭 배열로 바꿔야 할까?

마무리 정리

[DB] 로컬에 DB 설치하기(Mac)

부제 : 두 번째 백엔드 서버 개발기: 프론트개발자의 도전

프로젝트 시작!

DB는 다른 팀에서 구축 중?

동료 백엔드 개발자 오씨에게 SOS

오씨 추천: Docker로 로컬 DB 만들기 (on Mac)

1. Docker Desktop 설치

설치 확인

2. MySQL 이미지 다운로드

3. 도커 이미지 확인

4. 컨테이너 실행

5. 컨테이너 확인 및 실행

DB 연결 테스트 (with DataGrip)

마무리

[인증 Framework] NextAuth야 너 뭐니?

2FA 도입 배경과 NextAuth 선정

2FA 구현 방법

NextAuth 주요 인증 방식

1. OAuth 인증

2. Credentials 인증

3. Email 인증

주요 특징

NextAuth의 데이터 흐름

주요 설정 옵션 샘플.

보안 고려사항

NextAuth.js의 기본 엔드포인트 설명

NextAuth와 라우팅

*** 세션이 있더라도 status 체크가 없으면 nextAuth의 클라이언트 보안 메커니즘이 라우팅을 차단한다.*

NextAuth와 라우팅 동작 방식

한줄 요약!!

[Next.js] 로컬은 폰트 로드되는데 프로덕션은 로드 안됨(Development VS Production 간단 설명)

프로젝트 구성

적용 코드.

사용 CDN

프로덕션 적용 코드.

확인 사항

결론.

<h1> 개발 모드 vs 프로덕션 모드 </h1>

로컬 실행 (개발 모드)

빌드 및 배포(프로덕션 모드)

:empty 가상 클래스

[번역] Strategies for Cache-Busting CSS

CSS가 캐시에 저장되는 것을 활용한다.

Query Strings

파일 이름 바꾸기

파일 업데이트 날짜를 기준으로 캐시 무효화 “숫자” 지정

ETags

프레임워크가 대신 해줌

문제: Shortest Unique Prefixes
Given a list of words, return the shortest unique prefix of each word.

`3. Map` 객체로 더 깔끔하게 리팩토링

O(Cⁿ): 지수 시간