Web Programmer

AI 만으로 사이트 만들기? 가능할까?

S0PH1A — Mon, 26 Jan 2026 20:23:43 +0900

A-Z까지 전부 웹 사이트를 AI로 구현할 수 있을까?

요즘 화두는 AI이다.

"신입 개발자보다 AI 하나가 더 일을 잘한다."
"AI를 잘 사용하는 개발자 채용."

회사에서 AI로 코드 리뷰도 해보고, 기능 요구 정도는 해봤지만, 프로젝트 개발 처음부터 끝까지 AI만으로 가능할까?

이 궁금증으로 새해부터 간단한 웹 프로젝트를 시작해 보았다.

AI 선택

Gemini, ChatGPT, Cursor, Claude 등 많겠지만, 내가 선택한 AI는 Claude Code다.

Claude Code 유로이지만 프로그래밍에 강점이 있고, Terminal에서 명령할 수 있다는 장점으로 인해 선택했다.

(Cursor도 Cursor CLI가 있는데 이때는 있는지 몰랐다; )

게다가 플러그인을 추가하면 그에 맞는 역할로 더 잘 응답해준다고 한다.

- 플러그인은 이미 정의된 룰이다. (예, frontend-design)

개발 조건

내가 절대 손댈 수 없도록!

나의 프로젝트 진행 전제 조건은 딱 4가지 이다.

IDE은 절대로 열지 않을 것. = 코드를 절대 보지 말 것.
SQL 쿼리도 AI에게 맡길 것.
모든 것을 AI에게 질문할 것.
나는 *비 개발자*라고 생각할 것.

AI로만 모든 걸 해결하겠다는 의지이다.

그리고, 사용 언어 및 라이브러리와 툴들은 내가 사용해 본적 없는 것으로 선택하였다.

사용해본 적이 없는 것으로 개발을 시작한다면 그만큼 조사하고 사용하는데 많은 시간을 투자해야 한다.

하지만 AI만을 이용해 개발하기로 했기 때문에 일부러 잘 모르는 것을 선택해 보았다. 개발 중 오류가 나도 AI에게 질문할 것이다.

Next.js (React.js)
Supabase (SQL은 할 줄 알지만, Supabase사용은 처음이다.)

시작할 때, 개발 조건을 다음과 같이 설정했다.

디자인은 Shadcn이용해서 "Modern & Simple" 하게.
FSD(Feature-Sliced-Design) 패턴 구조에 맞게.
최대한 컴포넌트를 최소화. 분리.
supabase에 적용해야할 쿼리는 따로 파일로 작성. (fixup쿼리 포함)
`accept edits on` 모드로 해서 무조건 변경된 코드 자동 승인.

Claude Code가 Token을 소모해서 사용된다.

1개의 질문에 1토큰이 아니기 때문에 1시간 정도 사용 시 모든 토큰이 소모되고 4~5시간 후에 토큰이 초기화된다.

따라서, 퇴근 후 하루 1시간 개발을 목표로 진행하였다.

프로젝트 제목과 방향성만 제공하고 전체적인 틀(메뉴 및 구성)은 AI에게 맡겼고, 추가적으로 필요할 것 같은 기능은 그때 그때 개발되는 화면을 보면서 요청했다.

또한, 이게 토큰을 적게 사용하는 방법인지는 모르지만, 다시 질문하는 일이 없도록 질의는 최대한 내가 원하는 바를 상세하게 했다.

// 질의 예시
이체 내역을 엑셀로 내보낼수 있도록 기능을 추가해줘.
- 이체 내역 페이지에서 버튼 추가.
- xlsx, json 파일 형식 선택 가능.
- 내보낼 이체 내역 기간 선택.
  - 월 단위
  - yyyy-mm-dd ~ yyyy-mm-dd 기간 선택 (단, 최대 1개월)
- 내보내기 할 데이터: 날짜, 구분(지출/수입), 카테고리, 금액, 타이틀, 계좌, 메모
- 아이콘은 제외하고 생성.

번역 뿐만 아니라 Supabase 에 대한 설정 조차 `어디서 테이블을 추가할 수 있어?`, `패스워드 초기화 어떻게 해?` 등 다 AI에게 물어봐서 해결했다.

---

과연 결과는 어떻게 되었을까.

---

⛳ 결과

결과물 github : (현재 Private로 전환해두었습니다.)
결과물 : https://daily-money-neon.vercel.app/
- 이메일 인증 없습니다. 이메일 형식만 맞으면 회원가입 가능합니다.
- 구글 로그인은 기능 구현은 되어 있으나 Supabase에 설정을 안해서 동작 안합니다.

타이틀(Title) 은 내가 폰트 넣어서 직접 진행했다.

웹/앱 반응형으로 개발되었으며, 디자인은 AI의 취향에서 색상과 그라이데이션만 제거했다.

(자꾸 자주색 + 그라데이션으로 디자인해줘서, 하늘색으로 바꿨다.)

0123456

‍♀️ 느낀점

나보다 낫네

생각보다 결과물이 잘 나왔다.

번역, 기능, 디자인적으로 조금 부족한 부분은 있지만 내가 원하는 바 큰 동작은 정상적으로 한다.

(처음부터 120% 완벽하게 프로젝트를 만들고 런칭하는 회사가 어딨겠느냐)

유지 보수 또한 AI에게 맡긴다고 한다면 코드 결과물은 중요한 부분이 아닐테니, 웹 개발에 대한 지식이 없더라도 디자인AI + Claude 조합으로 충분히 원하는 바 구현이 가능할 것 같아 보인다.

또한, 기능에 대한 주석도 잘 적어주고, 테이블 구조가 변경되거나 트리거가 필요하면 그에 맞는 fix-up 쿼리도 작성해줘서 편리했다.

입사 후 처음으로 완성한 사이드 프로젝트?!

"사이드 프로젝트 한 번 해보고 싶다" 생각하고 몇 번 시도는 했지만, 리서칭하는데 시간이 너무 소모돼고 처음부터 완벽하게 구조를 잡고 개발하려는 의지가 강해 혼자 너무 고민하다 지쳐서 끝까지 마무리하지 못하고 흐지부지하게 멈춘 프로젝트가 수십 개이다. (시작이 반이라지만)

반면에 AI를 사용하니 내가 직접 검색해 보고 적용해보며 오류를 검사해 볼 필요 없이, AI에게 요구하고 확인만 하면 되기 때문에 개발 속도가 월등히 빨랐다.

코드에 대해 고민할 필요가 없기 때문에 개발하면서 머리가 아프거나 스트레스도 없었다.

무서운 AI

AI로 리뷰나 오류 검증하고 질문하는 건 구글링보다 빨라서 편리했는데, 이젠 프로젝트를 거의 완벽하게 만들어준다니,

개발자 중에 웹 프론트 개발자가 가장 AI에 의해 대체되기 쉬운 분야 같다. ( 아, 내 자리... ‍♀️)

보안과 디자인같은 부분을 제외하면 비 개발자도 AI로 사이트하나 뚝딱 가능할 것 같다.

이 프로젝트 끝나자마자, "재밌네 이거, 이참에 앱도 만들어볼까..?"라는 생각이 들었다.

‍♀️ 아쉬운 부분

대표 한가지 꼽자면...

컴포넌트의 분리

Form의 경우 하나의 파일로 나왔다. Shadcn을 사용했기에 input, button 등을 각각의 파일로 분리할 필요는 없으나,

sheet 파일에서는 각 요소의 조합만 했어도 좀더 구조가 간단해 보이지 않을까? 라는 생각을 한다.

Form-Header, Form-Footer와 같은 부분은 변경이 적으니 파일을 분리하고, React.memo로 랩핑하여 재랜더링되지 않도록 한다던지 말이다. 왜냐하면 하나의 파일에 모든 구현부가 있고, dom에 css나 id를 따로 선언하지 않기에 코드에서 해당 컴포넌트를 찾기가 어려웠다.

리팩토링하면서 컴포넌트를 최대한 쪼개달라고 했지만, 디테일하게 요구를 안해서 그런지 원하는 만큼의 코드 결과는 아니었다.

번외

Claude Code를 사용하면서 장단점 하나씩 뽑자면

장점
- "~를 하려고하는데 어떻게하면 좋을까?" 라고 질문을 하면 몇 가지 방안을 알려주면서 권장하는 방안과 각 방안별 장단점을 설명해주면서 사용자에게 선택하라고 했다.
  Cursor에서는 겪어보지 못했던 친절함이었다.(내가 Cursor사용을 잘 못하는 걸 수도 있다.)
- Plugin을 추가해서 질의하면 더 좋은 답변을 해준다. (예, frontend-design, server
단점
- 알다시피 Token 소모 속도다. Pro보다 더 높은 단계로 구매하면 되지만... 돈...
- 왜 자꾸 그라데이션을 넣어서 디자인해주는 건지 모르겠다...

⏱️ 총 개발 기간 및 시간

궁금해서 물어봤다. 총 27시간이다.

4.5h, 5h은 아마도 한번 다 쓰고 초기화되길 기다렸다가 11시쯤 초기화되면 한 번 더 한 것 같다.

[ReactNative] React Native Cli 프로젝트 시작하기

S0PH1A — Sat, 17 Aug 2024 03:08:10 +0900

들어가기에 앞서,

React Native Expo 가 아닌 React Native Cli 를 이용한 프로젝트 생성 방법에 대한 글 입니다.

갑자기 앱 한번 만들어 보고 싶어서, React 를 할 줄 알기에 React Native 를 다짜고짜 시작했지만 프로젝트 생성하고 실행하는데 이렇게 다사다난할 줄 꿈에도 몰랐습니다. (3일 걸렸... ㅋ)

전체적인 실행 방법은 React Native 공식 문서에 나와있습니다.

React Native 환경 설정 방법 : https://reactnative.dev/docs/set-up-your-environment
React Native Cli 실행 방법 : https://reactnative.dev/docs/getting-started-without-a-framework?package-manager=npm

또, 이 블로그 글에서 도움을 받았습니다.

React Native 설정 (IOS) : https://velog.io/@soyoungdl/React-native-settingiOS#-react-native-cli
맥(Mac)에 React Native 개발 환경 구축하기 : https://deku.posstree.com/ko/react-native/install-on-mac/#react-native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-%EB%B0%8F-%ED%99%95%EC%9D%B8

그리고 오류 발생시 해결 방법은 참고한 글 링크를 같이 첨부하였습니다.

( 2024.08.17 기준 버전입니다. )
MacOS 사용자이고, HomeBrew 가 설치되어 있어야 합니다.

1. Node 와 watchman 을 설치합니다.

$ brew install node
$ brew install watchman

2. Ruby 업그레이드

Ruby는 gem이라는 의존성 관리 도구를 통해 cocoapad 를 설치하기 위해 필요합니다.

기본적으로 MacOS 는 Ruby 가 설치되어 있습니다. 2.6 버전이 설치되어 있습니다. 다음 명령어로 버전을 확인해 볼 수 있습니다.

$ ruby -v

루비 버전 확인

하지만 최신 React Native 에서는 해당 버전으로는 실행이 불가능합니다.

정확하게는 Ruby로 최신 Bundler 설치할 때 Ruby 버전이 낮아서 오류가 발생합니다.

( 참고한 블로그에서 2.7 버전을 사용하시길래 다운받아서 실행해봤지만 Ruby 버전 3.0 이상을 요구했습니다. )

Ruby 버전이 낮아 발생한 오류

따라서 Ruby 를 업그레이드 해 줍니다. 찾아보니 Ruby 도 Npm 처럼 버전을 컨트롤할 수 있는 환경이 존재하더라구요. 바로 rbenv 입니다.

$ brew install rbenv

저는 Ruby 가장 마지막 버전을 확인하고 마지막 버전으로 다운 받았습니다.

# 설치 가능한 마지막 안정 버전 리스트 확인
$ rbenv install -l

# Ruby 버전 설치
$ rbenv install 3.3.4

# 다운 받은 버전을 전역으로 설정
$ rbenv global 3.3.4

Ruby 버전을 확인해 보시고 변경되지 않았다면 터미널을 껏다 켜시면 됩니다.

그리고 나서 gem 을 이용해서 bundler 를 설치해 줍니다.

$ gem install bundler

3. XCode 설치 및 설정

Mac App Store 에서 XCode 를 다운받습니다. (매우 오래 걸림)

Xcode → Settings... → Locations 에서 "Command Line Tools" 를 설정해 줍니다. 최신 버전으로 선택해 주면 됩니다.

Command Line Tools 설정

그리고 나서 IOS 시뮬레이터를 설치해줍니다.

Xcode → Settings... → Platforms 에서 IOS 를 설치해 줍니다. (이것도 오래 걸립니다...)

4. 프로젝트 생성

기존에 react-native-cli 를 전역(global)로 설치한 적이 있는 경우, 예기치 않은 오류가 발생할 수 있으니 제거해 줍니다.

$ npm uninstall -g react-native-cli @react-native-community/cli

이제 react-native-cli 를 이용해 프로젝트를 생성합니다.

$ npx @react-native-community/cli@latest init 프로젝트명

( 저는 FirstApp 로 프로젝트를 생성했습니다. )

생성되면서 터미널에 표시되는 로그를 확인해 보니 전 다음과 같이 오류가 발생했었습니다. 감사하게도 관련해서 "Run instructions for IOS"를 확인하라고 로그에 같이 적혀있었습니다.

React native Cli 프로젝트 설치 오류

링크를 타고 들어가서, 표시된 내용대로 IOS 폴더에 가서 bundle을 설치하고, cocoapod를 설치하라고 하네요. 그대로 해주면 됩니다!

React Native Cli 프로젝트 설치 오류 해결 방법

$ cd ios
$ bundle install
$ bundle exec pod install

하지만 여기서 전 cocoapod 를 설치하다가 오류가 또 발생하게 됩니다.

cocoapod 설치 오류

원인은 구글링을 통해 쉽게 찾을 수 있었습니다. bundle이 node_modules 를 설치하지 않고 pod 를 실행하려고 해서 오류가 발생했다고 합니다. 따라서 node_moduels 를 먼저 설치해주면 된다고 합니다. [참고]

ios 폴더를 빠져 나와 프로젝트 루트 폴더로 이동한 후에 npm install 을 하여 node_modules 를 생성해 줍니다.

$ npm install

# 설치 완료되면 다시 ios 폴더로 가서 cocoapod 설치
$ cd ios
$ bundle exec pod install

5. 프로젝트 실행

이제 모든 설정이 끝났습니다! 프로젝트 루트 폴더에서 생성한 프로젝트를 실행합니다.

$ npx react-native run-ios

프로젝트 실행

처음 실행하는 것이라 그런지, 아니면 제 노트북에 문제인지는 모르겠으나 Building the app... 여기서 엄청 오래 걸렸습니다. 따라서 멈춘줄 알고 껏다가 다시 실행했는데요. (이러지 말았어야 했습니다...) 그랬더니 다음과 같이 오류가 발생하더라구요?!

프로젝트 실행 오류

error Failed to build ios project.
ios project. "xcodebuild" exited
"xcodebuild" exited with error code '65'. To debug build logs further, consi
der building your app with Xcode.app, by opening
'FirstApp.xcworkspace.

에러 코드 65는 유명한 오류더라구요. 원인을 빠르게 찾을 수 있었습니다. Xcode 캐시를 삭제하고 다시 실행해 주면 됩니다. [참고]

# Xcode의 Derived Data를 삭제
$ rm -rf ~/Library/Developer/Xcode/DerivedData

# React Native 재 실행
$ npx react-native run-ios

React Native Cli 로 프로젝트 실행

5-1. 프로젝트 실행 시 시뮬레이터에서 발생한 오류

저는 React Native 프로젝트 실행하면서 IOS 시뮬레이터에서 다음과 같은 오류도 발생했었습니다.

시뮬레이터 오류

No bundle URL present.

Make sure you're running a packager server or have included a .jsbundle file in your application bundle.

React Native 프로젝트에서 JavaScript 번들(즉, 앱의 JS 코드)을 찾을 수 없을 때 발생한다고 합니다. 이 문제는 일반적으로 Metro 번들러가 실행되지 않거나, 앱이 JavaScript 번들을 찾을 수 없을 때 발생하게 됩니다. (chatgpt 발췌)

React Native 앱이 실행될 때, Metro 번들러가 JavaScript 코드를 제공해 주는데, 이 번들러가 실행되지 않았거나 중지되었을 경우 이 오류가 발생할 수 있다고 합니다. 따라서 Metro 번들러를 수동으로 실행해 오류를 해결할 수 있습니다.

$ npx react-native start

[LeetCode][JS] 테스트를 위한 TreeNode 인스턴스 생성

S0PH1A — Thu, 16 May 2024 18:13:10 +0900

저는 LeetCode 알고리즘 문제를 풀 때 문제를 로컬에서 코드 작성 후 테스트 케이스를 통과하는 경우 LeetCode 사이트에 붙여 넣어 확인하곤 했습니다. BinaryTree 문제 같은 경우, 테스트 케이스는 리스트로 주어지지만 코드를 작성할 때는 TreeNode 인스턴스를 이용해서 해결을 해야합니다.

리스트로 된 테스트 케이스[칼럼 1]를 TreeNode를 이용해서 [컬럼 2]처럼 인스턴스를 생성하고 [컬럼 3]처럼 되어야지 테스트가 가능합니다.

테스트 케이스	TreeNode 인스턴스 생성	TreeNode 인스턴스 결과
[2,1,3,null,null,0,1]	const tree = new TreeNode(2); tree.left = new TreeNode(1); tree.left.left = null; tree.left.right = null; tree.right = new TreeNode(3); tree.right.left = new TreeNode(0); tree.right.right = new TreeNode(1);	TreeNode { val: 2, left: TreeNode { val: 1, left: null, right: null }, right: TreeNode { val: 3, left: TreeNode { val: 0, left: null, right: null }, right: TreeNode { val: 1, left: null, right: null } } }

매번 리스트를 TreeNode로 변경함에 있어서 불편함을 느껴 LeetCode에서 코딩을 하곤 했는데, 문제의 난이도가 어려워질수록 LeetCode에서 직접 코드를 작성하고 테스트하는 것에 대한 불편함이 더 커져서 아예 TreeNode를 만드는 모듈을 생성하였습니다!

Binary Tree를 위한 Tree 생성 모듈 만들기

TreeNode 인스턴스 생성 함수

TreeNode 인스턴스를 생성하는 함수는 LeetCode에서 문제 화면 우측 코드 작성하는 부분 최상단에 주석으로 알려주고 있습니다.

function TreeNode(val, left, right) {
  this.val = val === undefined ? 0 : val;
  this.left = left === undefined ? null : left;
  this.right = right === undefined ? null : right;
}

Tree 생성 함수

TreeNode를 이용해서 전달받은 리스트를 원하는 형식으로 만들어야 합니다. 위에 테이블처럼 left, right에 TreeNode 인스턴스를 생성해서 넣어줘야 합니다. 트리의 깊이는 테스트 케이스마다 다르기 때문에 반복문을 통해서 동적으로 트리를 생성할 수 있도록 해야 했고, 이터레이터를 이용해서 리스트의 다음 값을 갖고 와서 TreeNode를 인스턴스를 생성하고 넣어줬습니다.

function createTreeNode(root) {
  if (!root) return null;

  const values = root[Symbol.iterator]();
  const tree = new TreeNode(values.next().value);
  const queue = new Set().add(tree);

  for (const node of queue) {
    for (const position of ["left", "right"]) {
      const value = values.next().value;
      if (value != null) queue.add((node[position] = new TreeNode(value)));
    }
  }

  return tree;
}

전체 코드

function TreeNode(val, left, right) {
  this.val = val === undefined ? 0 : val;
  this.left = left === undefined ? null : left;
  this.right = right === undefined ? null : right;
}

function createTreeNode(root) {
  if (!root) return null;

  const values = root[Symbol.iterator]();
  const tree = new TreeNode(values.next().value);
  const queue = new Set().add(tree);

  for (const node of queue) {
    for (const position of ["left", "right"]) {
      const value = values.next().value;
      if (value != null) queue.add((node[position] = new TreeNode(value)));
    }
  }

  return tree;
}

module.exports = { createTreeNode };

테스트 코드에서의 활용

만든 TreeNode 생성 모듈을 추가하여 테스트를 진행하도록 하였습니다. 아무래도 LeetCode에서 실행되어야 하는 설루션 함수에 직접 사용하기에는 LeetCode에서는 필요 없는 부분이기 때문에 테스트 코드 실행 시 설정하였습니다.

아래는 문제를 해결하는 솔루션 함수가 정의되었다는 가정하에 LeetCode 2331번 문제를 테스트하는 테스트 코드입니다.

// 문제 해결하는 솔루션 함수 추가
const solution = require("../../leetcode/2331");
// TreeNode 생성하는 모듈 추가
const { createTreeNode } = require("../../utils/TreeNode");

// 테스트
describe("Evaluate Boolean Binary Tree", () => {
  test("#1", () => {
    expect(solution(createTreeNode([2, 1, 3, null, null, 0, 1]))).toEqual(true);
  });
  test("#2", () => {
    expect(solution(createTreeNode([0]))).toEqual(false);
  });
});

결론

아무래도 매번 LeetCode에서 코드를 작성하고 해결하는데 중간 테스트해 보는 것에 불편함을 느꼈는데, TreeNode를 만드는 모듈을 생성함으로써 로컬에서도 코드를 작성하고 테스트해 볼 수 있어서 알고리즘을 해결하는데 좀 더 수월해졌습니다.

[참고] https://stackoverflow.com/questions/75473505/explanation-of-class-definition-for-binary-trees-in-leetcode

[Algorithm][JS] 프로그래머스 - 광물 캐기

S0PH1A — Fri, 19 Apr 2024 20:47:01 +0900

문제 설명

[소스코드]

[프로그래머스 - 광물 캐기]

마인은 곡괭이로 광산에서 광석을 캐려고 합니다. 마인은 다이아몬드 곡괭이, 철 곡괭이, 돌 곡괭이를 각각 0개에서 5개까지 가지고 있으며, 곡괭이로 광물을 캘 때는 피로도가 소모됩니다. 각 곡괭이로 광물을 캘 때의 피로도는 아래 표와 같습니다.

예를 들어, 철 곡괭이는 다이아몬드를 캘 때 피로도 5가 소모되며, 철과 돌을 캘때는 피로도가 1씩 소모됩니다. 각 곡괭이는 종류에 상관없이 광물 5개를 캔 후에는 더 이상 사용할 수 없습니다.

마인은 다음과 같은 규칙을 지키면서 최소한의 피로도로 광물을 캐려고 합니다.

사용할 수 있는 곡괭이중 아무거나 하나를 선택해 광물을 캡니다.
한 번 사용하기 시작한 곡괭이는 사용할 수 없을 때까지 사용합니다.
광물은 주어진 순서대로만 캘 수 있습니다.
광산에 있는 모든 광물을 캐거나, 더 사용할 곡괭이가 없을 때까지 광물을 캡니다.

즉, 곡괭이를 하나 선택해서 광물 5개를 연속으로 캐고, 다음 곡괭이를 선택해서 광물 5개를 연속으로 캐는 과정을 반복하며, 더 사용할 곡괭이가 없거나 광산에 있는 모든 광물을 캘 때까지 과정을 반복하면 됩니다.

마인이 갖고 있는 곡괭이의 개수를 나타내는 정수 배열 picks와 광물들의 순서를 나타내는 문자열 배열 minerals가 매개변수로 주어질 때, 마인이 작업을 끝내기까지 필요한 최소한의 피로도를 return 하는 solution 함수를 완성해주세요.

제한사항

picks는 [dia, iron, stone]과 같은 구조로 이루어져 있습니다.
- 0 ≤ dia, iron, stone ≤ 5
- dia는 다이아몬드 곡괭이의 수를 의미합니다.
- iron은 철 곡괭이의 수를 의미합니다.
- stone은 돌 곡괭이의 수를 의미합니다.
- 곡괭이는 최소 1개 이상 가지고 있습니다.
5 ≤ minerals의 길이 ≤ 50
- minerals는 다음 3개의 문자열로 이루어져 있으며 각각의 의미는 다음과 같습니다.
- diamond : 다이아몬드
- iron : 철
- stone : 돌

문제 풀이

힌트

광물을 5개씩 나눠서 광물 종류별 개수 확인
`곡괭이 수 < 광물 수` 인 경우에 대한 처리 필요 ( 곡괭이 사용 가능한 광물까지만 계산 )

◎ 도전 1

1) 광물을 5개씩 나눠서 광물 개수 확인
2) diamond > iron > stone 순으로 정렬 ( diamond가 많을수록 diamond 곡괭이를 사용하도록 하기 위해 )
3) 반복문을 돌면서 diamond > iron > stron 순으로 곡괭이 사용

function solution(picks, minerals) {
  // 1) 5개씩 나눠서 광물 계산
  const weightArr = [];
  for (let i = 0; i < minerals.length; i = i + 5) {
    const weight = { diamond: 0, iron: 0, stone: 0 };
    minerals.slice(i, i + 5).forEach((mineral) => {
      weight[mineral] += 1;
    });
    weightArr.push(weight);
  }

  // 2) 광물 diamond > iron > stone 순서로 정렬
  weightArr.sort((a, b) => {
    return (
      b["diamond"] - a["diamond"] ||
      b["iron"] - a["iron"] ||
      b["stone"] - a["stone"]
    );
  });

  // 3) 피로도 계산
  let answer = 0;
  while (Math.max(...picks, 0) !== 0 && weightArr.length) {
    const weight = weightArr.shift();  // 광물 리스트를 맨 앞부터 반환
    const pick = picks.findIndex((val) => val > 0);  // 선택한 곡괭이
	
    // 곡괭이 피로도 계산
    Object.entries(weight).forEach(([key, val]) => {
      if (key === "diamond")
        answer += val * (pick === 1 ? 5 : pick === 2 ? 25 : 1);
      else if (key === "iron") answer += val * (pick === 2 ? 5 : 1);
      else if (key === "stone") answer += val * 1;
    });
    
    // 곡괭이 다 사용한 경우 다음 곡괭이로 변경
    picks[pick] -= 1;
  }

  return answer;
}

테스트 케이스 8번을 제외한 모든 테스트 케이스가 성공하였습니다. 테스트 케이스 8번은 왜 안되었을까 고민을 해봐도 답을 모르겠어서 질문하기 부분을 확인해 보니 "곡괭이 수가 광물 묶음 수보다 적은 경우"에 대한 처리가 필요했습니다.

예제 2번 코드도 곡괭이 수 가 광물 묶음 수보다 더 적은 경우였지만, 이 예제는 diamond - iron - stone 순으로 정렬을 해도 정렬 전과 후가 똑같기 때문에 오류를 발견하지 못했었습니다. 따라서 이 부분에 대한 처리를 추가하였습니다.

◎ 도전 2

곡괭이 수보다 광물의 묶음 수가 더 많은 경우에 대한 예외 처리를 추가하였습니다.

1) 광물을 5개씩 나눠서 광물 개수 확인
1-1) 곡괭이 전체 개수와 광물 묶음 수가 동일한 경우 반복문 정지(break)하여 더 이상 광물을 확인하지 않도록 설정
2) diamond > iron > stone 순으로 정렬 ( diamond가 많을수록 diamond 곡괭이를 사용하도록 하기 위해 )
3) 반복문을 돌면서 diamond > iron > stron 순으로 곡괭이 사용

function solution(picks, minerals) {
  // 전체 곡괭이 수
  const pickCnt = picks.reduce((acc, cur) => acc + cur, 0);
  
  // 1) 5개씩 나눠서 광물 계산
  const weightArr = [];
  for (let i = 0; i < minerals.length; i = i + 5) {
    const weight = { diamond: 0, iron: 0, stone: 0 };
    minerals.slice(i, i + 5).forEach((mineral) => {
      weight[mineral] += 1;
    });
    weightArr.push(weight);
    
    // 1-1) 전체 곡괭이 수와 광물 묶음 수 동일한 경우 종료
    if (weightArr.length === pickCnt) break;
  }

  // 2) 광물 diamond > iron > stone 순서로 정렬
  weightArr.sort((a, b) => {
    return (
      b["diamond"] - a["diamond"] ||
      b["iron"] - a["iron"] ||
      b["stone"] - a["stone"]
    );
  });

  // 3) 피로도 계산
  let answer = 0;
  while (weightArr.length) {
    const weight = weightArr.shift();  // 광물 리스트를 맨 앞부터 반환
    const pick = picks.findIndex((val) => val > 0);  // 선택한 곡괭이
	
    // 곡괭이 피로도 계산
    Object.entries(weight).forEach(([key, val]) => {
      if (key === "diamond")
        answer += val * (pick === 1 ? 5 : pick === 2 ? 25 : 1);
      else if (key === "iron") answer += val * (pick === 2 ? 5 : 1);
      else if (key === "stone") answer += val * 1;
    });
    
    // 곡괭이 다 사용한 경우 다음 곡괭이로 변경
    picks[pick] -= 1;
  }

  return answer;
}

전체 곡괭이 수와 비교하는 if 문을 추가하고, while에서는 반복 조건문에서 곡괭이에 대한 조건을 제거하였습니다. 이렇게 해서 모든 테스트를 통과하였습니다.

아래는 8번에 대해 성공하는지 테스트해볼 수 있는 예제입니다.

picks	metarials	result
[0, 1, 1]	["diamond", "diamond", "diamond", "stone", "stone", "stone", "iron", "iron", "iron", "iron", "diamond", "diamond", "diamond", "diamond", "diamond"]	38

[JavaScript] 실행 컨텍스트

S0PH1A — Sat, 13 Apr 2024 02:58:54 +0900

실행 컨텍스트의 동작 원리에 대해 간단히 알아봅시다. 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 실행 컨텍스트를 이해하게 되면 다음 3가지에 대 해 알 수 있게 됩니다.

호이스팅이 발생하는 이유
클로저 동작 방식. 스코프
비동기 처리 방식

실행 컨텍스트란?

실행 컨텍스트는 "실행할 코드에 대한 환경 정보들을 모아둔 객체"입니다. 즉, 함수가 실행되는 환경에 대한 정보를 갖고 있다고 생각하면 됩니다. 함수는 변수, 매개변수, 내장 함수, this에 대한 정보를 갖고 있죠? 이 정보를 갖고 있는 객체라고 생각하면 됩니다.

실행 컨텍스트 동작 방식

자바스크립트는 싱글 스레드로 되어 있으며, 해야 할 작업들을 하나의 스택에 쌓아 보관합니다. 이 스택을 자바스크립트에서는 콜 스택이라 말합니다. 자바스크립트는 함수의 호출이 발생(실행)하게 되면 콜 스택에 이 함수에 대한 정보를 갖는 객체(=실행 컨텍스트)를 생성하여 푸시(push)합니다. 그리고 함수 실행이 완료가 되면 해당 실행 컨텍스트를 팝(pop)하게 됩니다. 가장 위에 있는 코드부터 실행되기 때문에 전체 코드의 환경과 순서를 보장하게 됩니다. 하지만 이로 인해 블로킹(blocking)이 발생합니다. 블로킹이란 앞 함수가 실행되는 동안 뒤에 다른 함수들을 실행하지 못해 멈춰있는 상태를 말합니다. (동기 방식)

실행 컨텍스트에 저장되는 정보

3가지 정보가 저장됩니다.

Variable Environment
Lexical Environment
this binding

Variable Environment

함수에 대한 최초 스냅샷 정보 ( 변경되지 않음 )
현재 컨텍스트 내의 식별자들에 대한 정보, 외부 환경 정보를 갖고 있음.

Lexical Environment ⭐️

Variable Environment를 복사해서 생성됨.
변경 사항이 계속 적용됨.
현재 컨텍스트 내의 식별자들에 대한 정보, 외부 환경 정보를 갖고 있음.

이름	저장 정보	키워드
Environment Record	매개 변수의 이름, 함수 선언, 변수명 등	호이스팅
Outer Environment Reference	현재 호출된 함수가 선언될 당시의 Lexical Environment를 참조. ( 부모 정보가 담긴다고 생각하면 쉬움 )	클로저 / 스코프

This binding

this 식별자가 바라보는 객체
지정되지 않은 경우 전역 객체(Window)를 가리킴.

호이스팅

Lexical Environment의 Environment Record는 변수를 호이스팅 할 때 변수 명만 끌어올리고 할당 과정은 원래 자리에 그대로 둡니다. 따라서 호이스팅이 발생하는 겁니다.

변수의 선언 / 초기화 / 할당
- 선언 : 변수를 생성. 해당 식별자를 등록하여 스코프가 참조할 대상을 만듦.
- 초기화 : 메모리에 변수를 저장하기 위한 공간 확보. 기본값으로 undefined가 할당됨.
- 할당 : = 연산자로 값을 할당.

따라서 함수의 선언문은 호이스팅 돼서 함수 선언 전에 호출이 가능하지만, 함수의 표현식은 함수 선언 전에 호출되지 않게 됩니다.

console.log(b);      // undefined
console.log(func);   // f func() { ... }
console.log(func2);  // undefined

var b = bbb;

// 함수의 선언문
function func() {
	console.log("a");
};

// 함수의 표현식
var func2 = function () {
	console.log("b");
}

아래와 같이 함수의 선언문은 함수 전체를 끌어올리지만 함수의 표현식은 변수 명만 끌어올리기 때문입니다.

var b;              // 변수는 선언부만 끌어올림
function func() {}  // 함수 선언은 전체를 끌어올림
var func2;

b = bbb;

// 함수의 표현식
func2 = function () {
	console.log("b");
}

스코프와 스코프 체인

스코프(Scope)는 식별자에 대한 유효범위를 말합니다. A 함수 내에 선언한 변수, 함수는 A 내에서만 접근 가능할 수 있게 됩니다. A 함수 외부에 선언한 변수, 함수는 외부뿐만 아니라 A 함수 내에서도 접근이 가능합니다. 식별자 유효범위를 안에서부터 바깥으로 차례대로 검색하는 것을 스코프 체인이라고 합니다. 이를 가능하게 하는 것은 LexicalEnvironment의 outerEnvironmentReference 때문입니다.

함수가 선언될 당시의 LexicalEnvironment를 참조하고 있는 outerEnvironmentReference는 연결리스트(Linked List) 형태를 띱니다. 예를 들어 A 함수 안에 B 함수안에 C 함수로 구성되어 있다면 C 함수의 outerEnvironmentReference에는 B의 LexicalEnvironment, B의 outerEnvironmentReference에 A의 LexcicalEnvironment를 참조하고 있기 때문에 C함수에서는 가장 가까운 순서대로 B함수 → A 함수로 접근이 가능하게 됩니다. 따라서 여러 스코프에서 동일한 식별자를 선언하는 경우 스코프 체인 상에서 가장 가까운 식별자에만 접근 가능하게 됩니다.

var a = 1;
var outer = function () {
  var inner = function () {
    console.log(a);  // 3
    
    // 호이스팅되어 inner에서는 a 호출 시 전역이 아닌 가장 가까운 스코프안에 있는 이 값을 바라봄
    var a = 3;
  }  // outerEnvironmentReference에 outer 함수의 LexicalEnvironment 저장
  inner();
  console.log(a);  // 1
};  // outerEnvironmentReference에 전역 LexicalEnvironment 저장
outer();
console.log(a);  // 1

클로저

[링크]

클로저란 이미 생명주기가 끝난 외부 함수(실행 컨텍스트가 종료된 함수)의 변수를 참조하는 함수를 말합니다. 어떻게 접근이 가능할까요? 바로 LexcialEnvrionment의 outerEnvironmentReference에 외부 함수의 정보가 담겨 있기 때문입니다. outerEnvironmentReference에는 함수가 선언될 당시의 LexicalEnvrionment 가 담긴다고 말했습니다. 따라서 이를 이용해 접근이 가능하게 됩니다.

클로저 활용 사례

이벤트 리스너
정보 은닉
부분 적용 함수

메모리 누수

가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있으면 그 값은 수집 대상에 포함하지 않아 메모리상에 계속 남아 있게 됩니다. 외부 함수의 변수를 클로저가 참조하고 있기 때문에 메모리상에 계속 남아 있게 되어 메모리 누수가 발생하게 됩니다. ( 2019년부터는 V8엔진의 경우 내부 함수에서 실행되는 변수를 제외하고는 GC 하도록 되었다고 합니다. )

자바스크립트는 강제로 가비지 컬렉터를 수동으로 조작할 수 없습니다. 따라서 식별자에 기본형 데이터 null 또는 undefined를 할당하여 이 식별자는 더 이상 사용하지 않으니 GC가 메모리를 해제하도록 할 수 있습니다.

참고

* 코어 자바스크립트 - 정재남

* 모던 자바스크립트 Deep Dive - 이웅모

[Algorithm][JS] 프로그래머스 - 두 원 사이의 정수 쌍

S0PH1A — Mon, 8 Apr 2024 23:22:16 +0900

문제 설명

[프로그래머스 - 두 원 사이의 정수 쌍]

x축과 y축으로 이루어진 2차원 직교 좌표계에 중심이 원점인 서로 다른 크기의 원이 두 개 주어집니다. 반지름을 나타내는 두 정수 r1, r2가 매개변수로 주어질 때, 두 원 사이의 공간에 x좌표와 y좌표가 모두 정수인 점의 개수를 return 하도록 solution 함수를 완성해 주세요.
※ 각 원 위의 점도 포함하여 셉니다.

예제

문제 풀이

힌트

원의 방정식 x^2 + y^2 = r^2
1 사분면만 계산 후 * 4

◎ 도전 1

처음 생각한 방법은 아래와 같았습니다.

x, y 축을 반복문을 돌면서 x^2 + y^2 이 r1^2 보다 같거나 크고 r2^2 보다 같거나 작으면 count 증가

function solution(r1, r2) {
  let count = 0;
  for (let x = 1; x < r2; x++) {
    for (let y = 0; y < r2; y++) {
      let dot = x ** 2 + y ** 2;
      if (r1 ** 2 <= dot && dot <= r2 ** 2) {
        count++;
      }
    }
  }
  return count * 4 + 4;
}

풀이법은 맞지만, 이중 반복문이다 보니 O(n^2)으로 인해 7~10 테스트 케이스에서 시간초과가 발생했습니다.

◎ 도전 2

기존 풀이 보다 더 빠른 알고리즘을 이용했어야 했습니다. 그래서 반복문 하나로만 해결할 수는 없을까 생각해 보았습니다. 해결 방법은 생각보다 간단했습니다. 두 원 사이의 Y축의 높이만 더하면 됩니다.

X축을 돌면서 y축의 최대 높이(maxH) - 최소 높이(minH)를 뺀 길이을 count에 추가

그림으로 보면 다음과 같습니다. r1 = 2, r2 = 6일 때 x축을 돌면서 초록색 높이의 값만 더해주면 됩니다.

그림 해설

그러면 y축의 최대 높이와 최소 높이는 어떻게 구할까요?

y축의 높이는 원의 방정식을 이용해서 y = sqrt(r^2 - x^2)로 구할 수 있습니다. 최대 높이의 경우 해당 값보다 작거나 같아야 하기 때문에 버림을 사용하고, 최소 높이의 경우 해당 값보다 크거나 같아야 하므로 올림을 해줍니다. 그리고 최소 높이의 경우 x 가 r1 보다 커지는 경우 마이너스가 되어 NaN 값이 나오게 되므로 음수가 되는 경우 0이 되도록 해줍니다.

이를 코드로 작성하면 다음과 같습니다.

function solution(r1, r2) {
  let count = 0;
  for (let x = 1; x <= r2; x++) {
    const maxH = Math.floor(Math.sqrt(r2 ** 2 - x ** 2));
    const minH = Math.ceil(Math.sqrt(r1 ** 2 - x ** 2)) || 0;   
    count += maxH - minH + 1;
  }
  return count * 4;
}

이렇게 되면, 시간복잡도가 O(n)이 되므로 모든 테스트에서 성공하게 됩니다.

걸린 시간 : 2시간
Y 축의 길이만 계산하면 된다는 방법을 찾아내는데 오래 걸렸다 :(

[React] Children Props 와 렌더링 최적화

S0PH1A — Mon, 18 Mar 2024 23:47:47 +0900

요즘 최대 관심사는 [성능]이다. 그래서 최근 Reflow와 Repaint 관련 글을 보다가 브라우저 렌더링으로 관심사가 넘어가게 되었고 더 나아가 리엑트 렌더링과 최적화 관련해 글을 보던 중 한 가지 궁금한 점을 발견했다.

내 궁금증은 [10분 테코톡] 앨버의 리액트 렌더링 최적화]로부터 시작되었다.

렌더링 최적화 하는 방법으로는 `useMemo`, `React.memo`, `useCallback`을 사용할 수 있다. 다만, 이 작업은 값비싼 비용이 발생 하기 때문에 많이 사용하게되면 성능에 오히려 좋지 않다.
Childrend Props를 이용해서 리렌더링을 최적화할 수 있다.
불필요한 렌더링이 발생하지 않도록 처음부터 코드를 잘 작성하자. 근본적인 코드를 개선하자.

그 중, 가장 궁금했던 내용은 부모 컴포넌트가 변경되더라도 children props로 전달된 자식 컴포넌트는 리렌더링 되지 않는다는 것이다.

컴포넌트가 리렌더링 되는 조건은 다음과 같다.

상태(State)가 변경된 경우
부모로 부터 전달받은 속성(Props)이 변경된 경우

그런데, children도 props인데 왜 리렌더링 되지 않을까?

Children Props로 자식 컴포넌트 전달해보기

코드를 통해 확인해보자. ParentComponent의 Children Props로 ChildComponent를 전달하는 테스트 코드이다.

// 메인
function TestPage() {
  return (
    <ParentComponent>
      <ChildComponent value='string' />
    </ParentComponent>
  );
}

// 자식 컴포넌트
function ChildComponent({ value }: Value) {
  console.log("[Child Component] render");
  return <p>{value}</p>;
}

// 부모 컴포넌트
function ParentComponent({ children }) {
  console.log("[Parent Component] render");
  const [state, setState] = useState(false);

  const changeState = () => {
    setState(!state);
  };

  return (
    <>
      <button onClick={changeState}>update state</button>
      {children}
    </>
  );
}

위 코드를 실행한 후 update state 버튼을 눌러 상태를 변경해 보면, 콘솔에는 Parent Component만 메시지가 나타난다. 즉, Parent Component만 리렌더링 되고 Child Component는 리렌더링 되지 않았다.

실행 결과

나는 왜 자식 컴포넌트도 렌더링 된다고 생각했을까?

나는 다음과 같은 이유로 Parent Component가 리렌더링되면 Child Component도 리렌더링 될 것이라 생각했다.

Children은 Props 속성 중 하나이다.
현재, 부모 컴포넌트의 상태나 props가 자식 컴포넌트에 전달되지 않고, 자식 컴포넌트가 그 정보에 의존하지 않다.
하지만, JSX 코드는 Babel 로 컴파일하면 React.createElement로 변환되고 React.createElement는 결국 React Element 객체(Object)를 반환한다.
객체는 변경 가능(mutable)한 값이기 때문에 Parent Component가 리렌더링 되면서 참조 값이 변경되어 새로 Child 컴포넌트를 생성할 것이다.

JavaScript로 변경해서 원인을 찾아보자

JSX는 결국 CreateElement로 변환되기 때문에 변경해서 확인해보기로 했다. 특정 JSX가 어떻게 변경되는지 확인해보고 싶다면 온라인 Babel 컴파일러를 통해 쉽게 확인할 수 있다.

온라인 Babel 컴파일러에서 실행한 화면

컴파일된 코드에서 자질구래한 코드가 많아 확인하기 좀 어렵다면, 직접 CreateElement를 이용해 컴포넌트를 생성하는 방식으로 변경해 보면 좀더 이해하기 쉽다. 다음 코드는 TestPage 컴포넌트만 CreateElement로 변경한 코드이다.

좀 더 간략히 작성한 코드

찾았다! 이유!

변경해보니 child component는 변경이 안 되는 이유를 확실히 알 수 있었다. 자식 컴포넌트 생성은 ParentComponent가 아닌 TestPage에서 생성 후 전달해 주고 있었다. 왼쪽은 내가 생각했던 컴포넌트 생성 구조였고, 실제로는 오른쪽과 같았다.

컴포넌트 생성 구조

이렇게 보면 더 알아보기 쉽다. 아래 두 함수는 결국 같다. 확실히 TestPage에서 자식 컴포넌트도 생성되는 것을 확인할 수 있다.

// 1.
function TestPage() {
  const child = ChildComponent({ value: "string" });
  return <ParentComponent children={child} />;
}

// 2.
function TestPage() {
  return (
    <ParentComponent>
      <ChildComponent value='string' />
    </ParentComponent>
  );
}

결국 Child Component의 참조 값을 갖고 있는 ParentComponent는 변경되더라도 다음과 같은 이유로 변경되지 않았다.

Child Component를 생성한 부모 컴포넌트인 Test Page 컴포넌트는 리렌더링되지 않았다.
Child Component는 상수다.
Child Component는 Parent Component의 상태와 속성에 의존적이지 않기 때문에 변경되지 않는다.

Children Props 관련된 자세한 내용은 아래 글들을 통해 좀더 자세히 확인해볼 수 있다.

결론

나는 ChildComponent는 ParentComponent에서 생성되지도 않는데 그 사실을 잊고 Children Props는 속성(props)인데 객체 값이니깐 무조건 변경되겠다는 착각을 했었다.

이유를 찾아보니, ChildComponent를 생성하는 위치가 달랐던... 생각보다 너무 간단했고, children 속성은 어려운 친구 ‍♀️였다. 덕분에 리액트 렌더링 과정에 대해서도 다시 공부하게되는 시간을 갖게 되어서 좋았다.

더 이상 토이 프로젝트를 만들지 않는 이유 (부제. 좋은 컴포넌트 만들기)

S0PH1A — Mon, 18 Mar 2024 01:33:43 +0900

# 고민

나는 4번째 토이 프로젝트를 끝내고, 회고를 작성하면서 프로젝트에 대해 다시 생각해 보았다.

"무엇을 잘했고 무엇을 못했을까?"

가장 먼저 생각난 것은 내 코드의 유지보수의 불편함이었다. 그만큼 내가 결과물에 집착해서 개발을 했다는 것이다.

토이 프로젝트는 나를 성장시키기 위한 도구일 뿐이다. 나는 현재 프론트 엔드 분야로 취업에 목말라 공장처럼 프로젝트를 찍어 내고 있었고, 그 결과 "좋은" 코드를 만드는 것보다 "구현"에만 집중한 코드를 만들고 있었다.

그렇게 내 코드는 똥 이 되었다.

( 아... 이래서 지금, 모든 회사에서 서류 탈락하고 있구나? ㅋ )

나는 "재사용 가능한", "유지보수가 편리한" 컴포넌트를 만들어야 한다는 것을 안다. 하지만 코딩을 할 때는 이 이론은 머릿속에서 점점 잊혀 가고 결과에만 집중한 코드를 생산하게 되고, 결국 이 코드는 나중엔 큰 쓰레기 로 나에게 다시 돌아온다.

이 고민을 하고 난 후 나는 더 많은 프로젝트를 생성하는 대신, 기존 프로젝트를 개선해 나가기로 결심했다. 그리고 컴포넌트에 대한 다양한 영상을 찾아보았다.

# 핑계 - 망할 유튜브

내가 본 영상들이 나쁘다는 것은 아니며, 내가 봤던 강의들(강사들)이 별로다라는 것도 아니다.
영상들을 통해 프로젝트 구조, 다양한 라이브러리들, 다양한 훅들을 사용해보면서 다양한 접근 방법을 배웠 고 성장했다고 말할 수 있다.

나는 사실상 리액트를 유튜브로 배웠다고 말할 수 있다. 나는 Vue를 알고 있기 때문에 유튜브로 프로젝트를 만드는 영상들을 보면서 리액트를 배웠다. 일반적인 리액트 책들에서는 TODO 리스트, 게시판 같이 간단한 것만 예제로 나오지만, 유튜브에는 노션, Trello, 쇼핑몰 등 더 큰 규모의 사이트들을 만들기 때문에 "회사에서도 이런 구조로, 이런 방식으로 코딩하겠구나" 생각했다.

겉으로 보이는 것과 안은 다르다. 유튜브에 나오는 프로젝트 만드는 영상은 실제 회사에서 만드는 프로젝트들과는 다르다는 점을 인지하고 봤어야 했다. 분명히 실제 사이트는 훨씬 더 복잡한 코드로 구현되어 있을 것이다. 하지만 난 그 틀에 갇혀버렸다. 나는 유튜브 선생님을 믿고, 찬양했다. 그게 곧 답이다라고 생각했다.

# 성장 - 사랑해요 유튜브

가장 먼저 컴포넌트에 대해 고민했고, 어느 한 영상이 나를 이끌었다. 배민 유튜브 [10분 테코톡]이였다. 그 후 5~8개 정도의 컴포넌트 관련 영상을 봤다.

영상들 중에서 가장 와닿는 말은 이것이었다.

사용자가 제품을 어려움 없이 잘 사용해야 한다. 하지만 실제론 그렇지 않다. 그렇기 때문에 많은 변화를 겪는다.
제품은 변화를 겪으면서 올바른 방향으로 성장한다. 변경은 정해져 있는 것이 아니기 때문에 변경을 예측하지 말고 대응해야 한다.
- SLASH 22 Effective component 지속 가능한 성장과 컴포넌트

결국엔, 그러기 위해서는 "컴포넌트를 잘 활용해야 한다."는 것이다.

# 컴포넌트의 분리

컴포넌트를 분리하는 이유는 코드의 복잡도를 낮추고 모듈화하여 재사용이 가능하도록 하는 것에 있다. 컴포넌트가 중복되거나 적당히 커지면 분리하는 것이 아닌 컴포넌트를 분리하는 데는 이유가 있어야 한다.

# 변경에 유현한 컴포넌트

- SLASH 22 Effective component 지속 가능한 성장과 컴포넌트

Headless 기반의 추상화하기 ( 변하는 것 VS 변하지 않는 것 )
- 스타일(UI)은 없는 컴포넌트
- 변하는 것 = UI / 변하지 않는 것 = Data
- 동작(상호작용)을 Hooks으로 추상화하기
한 가지 역할만 하기 또는 한 가지 역할만 하는 컴포넌트의 조합(Composition)으로 구성하기
도메인 분리하기 (도메인을 포함하는 컴포넌트와 그렇지 않은 컴포넌트 분리하기 )
- 일반적인 인터페이스로 분리하기 → 이유? 컴포넌트의 역할을 이해하기 쉽다.
- 사람들은 일반적으로 기존에 알고 있는 지식(배경지식)을 바탕으로 파악한다. 그래서 사람마다 배경지식이 다르기 때문에 일반적인 단어로 표현해야 의도를 들어내기 쉽다.

그리고 대부분의 영상이 관심사가 분리된, 재사용성이 높고 유지보수가 용이한 컴포넌트를 만드는 방법으로 크게 세가지 였다.

Headless Component Pattern
Composition Component Pattern
Custom Hooks 이용

영상은 봤지만, 범용적인 예제를 확인해 보고 싶었다. 그리고 그 예시는 생각보다 쉽게 찾을 수 있었 다. 바로 내가 모든 프로젝트에서 사용했던 Shadcn/ui이다. 공식 홈페이지를 보면 "이건 라이브러리가 아니고, 재사용 가능한 컴포넌트이기 때문에 원하는 곳에 복붙 해서 입맛에 맞게 설정해서 사용하라"라고 설명되어 있다.

shadcn/ui 홈페이지

예를 들어 shadcn/ui에서 제공하는 tabs ui를 만드는 방법을 보면, 제공하는 컴포넌트들을 조합해서 입맛에 맞게 다양하게 탭을 만들 수 있도록 한다.

shadcn/ui tabs 파일

shadcn/ui tabs 사용

그리고 Shadcn/ui는 Radix ui위에 스타일을 입힌 ui이다. 따라서 따로 스타일을 적용하지 않아도 UI가 아름답게 꾸며져 있다. 그렇기 때문에 shadcn/ui에서 스타일을 수정하긴 쉽지 않다.

즉, 아래와 같은 패턴으로 만들어졌다고 볼 수 있다고 생각이 들었다.

Radix UI → Headless Pattern
Shadcn/ui → Composition Pattern

결국 나는 Headless와 Composition 패턴을 모두 보았고, 그게 이 방식인지 몰랐었을 뿐이었다.

# 결론 - 리팩토링

새로운 프로젝트를 만들어 보면서 다양한 에러/문제를 경험하고 헤쳐나가는 것도 좋은 성장 방법 중 하나이지만, 이번에는 더 이상 새로운 프로젝트를 만드는 것이 아닌 기존 프로젝트를 바꿔나가는 것이 좋을 것 같다는 생각이 들었다. 회사에 입사해서도 매번 새로운 프로젝트를 하는 것이 아닌 기존 레거시 프로젝트에 기능을 추가하거나 리팩토링 하는 작업이 대부분이기 때문이다.

물론 이 코딩 패턴이 정답은 아니다. 컴포넌트만 바꾼다고 완벽한 코드가 될 순 없다. 가장 간단한 프로젝트였던 내가 가장 처음 시작한 프로젝트부터 하나씩 바꿔보면서 너무 결과물에만 집중하지 말고 다양한 방식을 보며 다양한 것을 배우고 성장해 나가는 것에 목표를 두고 싶기에 시도해 보는 것이다.

그래서 당분간은 새로운 프로젝트 개발보다는 리액트라는 라이브러리에 또는 프런트엔드에 대해 좀 더 깊게 공부하는 시간을 갖도록 공부 방향을 바꿔볼 것이다.

토이 프로젝트 [File Drive] 회고

S0PH1A — Thu, 14 Mar 2024 23:51:53 +0900

이번에는 파일 드라이브라는 클라우드 웹을 만들었다. 지난 토이 프로젝트 회고때 말한 것 처럼 이번 토이 프로젝트는 스프링 부트를 이용해 백엔드 서버를 만들고 리액트로 프론트를 만들었다.

"파일 드라이브" 라는 걸 만들기로 결심한 이유는, 여느때와 같이 유튜브를 보다가 Next.js로 FileDrive라는 웹 사이트를 만드는 영상을 보았다.

https://www.youtube.com/watch?v=27hMNWcsa-Y&t=541s

맨 앞에 완성된 프로젝트가 어떻게 돌아가는 지 조금 보다가 만들어보면 재밌겠다 생각이 들었고, 바로 프로젝트 구상을 했다. 저분의 기능에 폴더 관리 기능을 추가하기로 했다. 그리고, 저 영상 은, 다 보게 되면 왠지 저 분의 코드 구조를 따라하고 따라 칠 것만 같아서 영상은 더 이상 보지 않았다.

구성은 스프링 부트와 MySQL를 백엔드로 하고 업로드할 파일들은 파일 스토리지 서버에 저장하는 게 파일 URL이 반환되어 파일 관리 및 개발에 용이하기에 FireBase의 Storage를 사용하기로 했다.

이번 프로젝트는 개발 기간이 좀 오래걸렸다. 아니 다시 말하면, 그냥 완료까지 시간이 걸렸다. 검지 손가락을 다치는 바람에 2주간은 손가락을 접을 수가 없어 중간에 커밋을 안하는 기간이 많이 있었다. 게다가 마지막에는 주먹구구식으로 날코딩을 하면서 프로젝트를 마무리 지었다. 그래서 처음~마지막 커밋은 2주 정도지만 실 개발 일 수는 얼마 되지 않는다.

( 지금도 붕대 못풀었지만... 손 끝 마디는 구부릴수 있다. )

# 구상

위에 유튜브 영상 화면 캡쳐된 것을 보고 UI를 구상했다.

# 라이브러리

프론트엔드

Typescript
Shadcn/ui
TailwindCSS
Zustand
TanStack (React Query)
Blocknote ✍️ : 노션처럼 생긴 깔끔한 에디터이다. 아직 베타버전이지만 사용하는데 문제없다.
Zod : 타입스크립트 스키마 정의. CUD 작업 시 전달 타입 스키마 정의할 때 사용.
Sonner : toast 메시지 표시.
React-hook-form: form hook
FireBase Store

백엔드

Java17
Spring Boot 3.2.3
JPA + MySQL
Spring Security
JWT (jjwt): Java Json Web Token
FireBase Store
Swagger(openapi): API 명세서

# 고충

크게 기억나는 몇 가지만 적어보았다.

V Vite

1) Cors

수년의 경험?!으로 Proxy를 설정하면 된다는 건 알고 있었다. 그래서 React에서 Proxy를 설정하는 방법을 찾아보니 여러 가지가 나왔다.

방법 1 : package.json에 proxy 설정
방법 2 : http-proxy-middleware 라이브러리 설치 후 src/setupProxy.js 에서 proxy 설정

진짜 적어도 2시간 넘게 서버 API 포트도 바꿔보고, GET URL 바꿔보고 별의별 짓을 다해봤는데 안됬다. 테스트 컨트롤러 만들어서 그냥 검색창에서 URL 호출도 해보고 curl로도 해보고 다 잘 나오는데 프론트에서 하면 안됬다. 문제의 원인도 아는데 찾아도 답이 안나오는 이 답답함...

알고보니 Vite에서는 프록시 설정 방법이 달랐던 것이었다. ( ) Vite는 vite.config.ts 에서 설정을 해줘야 한다! [공식문서]

// vite.config.ts
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": "http://localhost:8080",
    },
  },
  // ...
}

package.json 에서 하던 host, port 변경이나 proxy 설정 등은 다 vite.config.ts 에서 한다는 점 꼭 기억해야겠다.

Spring boot

1) Firebase Storage 에 File 업로드는 잘 했지만 파일 다운로드 URL을 못 갖고 온다구요?

파일 객체를 서버에 넘겨주면 스프링에서는 아래 코드와 같이 해당 파일을 Storage에 올리고 생성된 파일 링크를 반환하여 디비에 넣어주도록 코드를 설계했다.

Firebase Storage 파일 업로드 코드

파일 링크를 반환하도록 한 이유는 전체 파일 리스트를 조회할 때 이미지의 경우 미리보기를 해줘야 하는데 그때마다 매번 FireBase 를 조회헤서 URL을 갖고 오는 건 리소스 낭비라고 생각했기 때문이었다. 그런데 getMediaLink는 내가 알고 있는 파일 다운로드 링크가 아니었다. 반환되는 URL로 접속해보면 접근 금지 메세지가 뜬다.

Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).

getMediaLink에서 반환되는 URL과 실제로 내가 알아야하는 다운로드 링크의 경로는 다음과 같다.

getMediaLink시 반환되는 경로: https://storage.googleapis.com/download/storage/v1/b/[스토리지 버킷 주소]/o/file?generation=[생성시간]&alt=media
다운로드 파일 경로: https://firebasestorage.googleapis.com/v0/b/[스토리지 버킷 주소]/o/file?alt=media&token=[액세스 토큰]

하지만 자바에서는 Storage에 있는 이미지(파일)의 URL을 갖고 올 수 없다! 다운로드 링크는 Client-side에서만 제공되고 Server-side에서는 제공이 안된다고 한다. signUrl로 갖고 올 수는 있으나 다운 받을 수 있는 기간을 정해놓고 URL을 생성하게 된다. 즉, 파일을 서버에 올린 후 URL을 디비에 저장해봤자 시간이 지나면 URL이 만료되었기 때문에 못쓴다.( ‍♀️) 생각지도 못한 문제였다.

결국 파일을 저장하는 디비 구조를 바꿨다. 스토리지 다운로드 링크를 저장하는 방식이 아닌 스토리지에 저장된 파일의 경로를 저장하도록 하고, 프론트(React)에서 해당 경로로 스토리지를 조회해 이미지를 불러오는 형식으로 바꿨다.

React

1) JWT 토큰 정보 저장하기

사실 토큰 정보 전체를 세션에 저장하는 건 위험한 짓일 수도 있다. 대부분 로컬 스토리지와 세션에 나눠서 저장하거나 쿠키에 저장하는 방식을 많이 구현한다.

쿠키에 저장
- 일반적인 쿠키 저장 방식은 XSS, CSRF 공격에 모두 취약하다.
- 하지만 httpOnly, secure, SameSite옵션을 이용하면 자바스크립트 코드 상에서 접근이 불가능하기 때문에 XSS공격에 안전하고(localStorage에 비해 안전해진다), HTTP 요청에만 포함되어 보내지므로 안전해진다.
- 자동으로 http request에 담아서 보내기 때문에 CSRF 공격에는 취약하다.
LocalStorage + Session에 저장
- LocalStorage: 자바스크립트 코드상에서 접근이 가능하기 때문에 XSS 공격에 취약하지만, 자바스크립트 코드에 의해 헤더에 담기므로 CSRF 공격에는 안전하다.
- Session : 안전하지만 탭을 닫으면 정보가 사라진다. XSS 공격에 취약하지만 CSRF 공격에 대해서는 쿠키보다 안전하다.

하지만, 나중에 수정하기 쉽도록 토큰 갖고오는 부분을 모듈화했고 일단 세션에 다 저장해버렸다.

import { Token, TokenType } from "@/types";

const AuthToken = {
  /**
   * 토큰 저장
   * @param data 토큰
   */
  setToken: (data: Token) => {
    AuthToken.removeTokenAll();
    sessionStorage.setItem(TokenType.ACCESS, data.accessToken);
    sessionStorage.setItem(TokenType.REFRESH, data.refreshToken);
  },
  /**
   * 특정 토큰 조회
   * @param key 토큰 키
   * @returns {string} 토큰 값
   */
  getToken: (key: TokenType): string => {
    return sessionStorage.getItem(key) || "";
  },
  /**
   * 토큰 전제 조회
   * @returns {Token} 토큰 값
   */
  getTokenAll: (): Token => {
    return {
      [TokenType.ACCESS]: sessionStorage.getItem(TokenType.ACCESS) || "",
      [TokenType.REFRESH]: sessionStorage.getItem(TokenType.REFRESH) || "",
    };
  },
  /**
   * 토큰 전체 삭제
   */
  removeTokenAll: () => {
    sessionStorage.removeItem(TokenType.ACCESS);
    sessionStorage.removeItem(TokenType.REFRESH);
  },
};

export default AuthToken;

나중에 쿠키 저장방식으로 변경해야지 생각만하고 안바꿨다. (이 글 쓰다가 알아챘다.)

2) JWT 토큰이 만료시 Refresh 토큰으로 서버에서 정보 다시 갖고 오기

로그인시 서버에서는 Refresh, AccessToken을 프론트로 전달해 줬다. 그리고 AccessToken이 만료되면 Refresh 토큰으로 다시 서버로 부터 정보를 갱신해 오는 것으로 구성했다.

만약 A 라는 API를 호출할 때 인증이 필요한 경우 Header에 AccessToken 정보를 같이 보내고, 서버에서는 해당 Token을 확인한 후 인증 정보가 만료가 되면 인증이 만료되었고 프론트에 보내고, 프론트는 서버에 AccessToken과 Refresh Token을 같이 서버로 보내 갱신된 토큰을 세션에 저장 후 다시 A API를 호출하고 싶었다.

전체적인 흐름

프론트에서 헤더에 Token을 넣고 토큰 만료시 신규 토큰 발급 후 재 조회하는 부분을 모듈로 빼는 것이 효과적일 것 같아서 "authFetch"라는 모듈을 만들었고, 인증정보가 필요한 API를 호출시 이 모듈을 호출하도록 했다.

export const authFetch = async (
  url: string,
  options: RequestInit,
  retry?: boolean // 재귀호출인지 체크
): Promise<globalThis.Response | null> => {
  // 헤더에 토큰 정보 추가
  const authOptions = setAuthToken(options);
  // API 호출
  const response = await fetch(url, authOptions);

  // 토큰 만료 및 토큰 에러 발생 → 리프레시 토큰으로 토큰 재 조회
  if (!retry && response.status === 403) {
    const result = await getNewToken();  // 토큰 재 조회
    if (result) authFetch(url, options, true); // 다시 호출
  }

  // 인증 오류가 아닌 알수 없는 오류가 발생한 경우
  if (!response.ok) {
    toast.error(MESSAGE.E01, { id: "auth-fetch" });
    return null;
  }

  return response;
};

인증 만료라 표시될 경우 같은 함수를 재호출(재귀호출)하도록 했다. 만일 서버쪽 문제로 계속 토큰이 만료되어 잘못하면 무한 루프에 빠질 수 있기 때문에 retry 옵션을 추가하여 한 번만 재귀호출 되도록 설정하였다.

이렇게 모듈화하면서 인증이 필요한 API 는 이 모듈을 호출하도록하였기 때문에 API 방식이 변경될 때 수정이 용이해졌기 때문에 유지보수가 편해졌다.

# 새로 알게된 점

React

1) useSearchParams 의 활용

파일명 검색을 하거나 파일 타입을 변경하는 경우 새로고침을 해도 검색어나 파일 타입을 그대로 표시하고 싶었기 때문에 상태 값으로 저장하기 보단 get parameter로 검색 정보를 표시하도록 구현하기로 했다. 현재 URL이 "/files?type=pdf" 인 경우 a가 포함된 파일명 검색을 하면 "/files?type=pdf&searchTerm=a" 이렇게 변경되길 원했다. get parameter에 타입 값과 검색어 키는 조건에 따라 있을 수도, 없을 수도 있기 때문에 동적으로 추가 해줄 필요가 있었다.

처음에는 아래와 같이 react-router-dom에 있는 useLocation과 useNavigate훅을 이용해서 구현했었다.

// 검색어 조회하는 경우
const location = useLocation();
const navigate = useNavigate();

const onSubmit = (values) => {
  // 현재 URL 에서 get parameter 정보
  const currentSearch = new URLSearchParams(location.search);
  // 새로운 검색어 추가
  currentSearch.set("searchTerm", values.searchTerm);
  // 페이지 이동
  navigate(`${location.pathname}?${currentSearch.toString()});
}

다른 곳에서 react-router-dom의 useSearchParams훅을 이용해서 get parameter 정보를 갖고 올 일이 있었는데, 그 때 사용하는 방식이 다음과 같았다.

const [searchParams] = useSearchParams();

이때, "이거 useState 같은 상태 관리 훅 같은데 ?" 라는 느낌이 들어서 관련 문서를 찾아보았다. 아니나 다를까, 공식문서에도 useState와 같이 setSearchParams를 이용해서 업데이트 할 수 있다라고 명시되어 있었다.

공식 문서

그래서 바로 코드에 적용했다. 문서 하단에 setSearchParams 함수는 navigate와 같은 역할을 한다고 적혀 있었기 때문에 따로 navigate를 호출할 필요도 없 어 코드도 더 간결해졌다.

const [searchParams, setSearchParams] = useSearchParams();

const onSubmit = (values) => {
    searchParams.set("searchTerm", values.searchTerm);
    setSearchParams(searchParams);
}

# 해결 못한 부분

MySQL에서 Like 를 이용한 한글 검색

파일 명 검색 시 파일 명 일부만 입력하더라도 파일들이 조회도록 구현하고 싶었다. 따라서 Like를 이용해 구현했다.

// JPA Repository
Page<File> findAllByTypeAndNameContainingIgnoreCase(FileType type, String name, Pageable pageable);

SELECT * FROM 테이블명 WHERE name Like '%파일%';

영어 문자열은 잘 검색되었지만 한글은 검색이 안되었다.

방안 모색1. JPA 와 MySQL에서 찾아보기

처음엔 JPA 쪽 문제인것 같아서 인코딩 관련하여 이것저것 찾아봤지만, MYSQL에는 한글로 정상적으로 삽입은 되어 있었다. 따라서 JPA 문제는 아니라 보고, MySQL Workbench를 열어서 직접 쿼리를 날려보았다. 그 결과 MySQL 에서도 검색이 안된다.

MySQL 인코딩이 문제인가? 싶어서 character_set을 조회해봤지만 utf8mb4로 되어 있었다.

한 번, 동등(=)비교 연산자로 조회해보았는데 이건 또 검색이 잘 되었다.

SELECT * FROM file_drive.file WHERE name = "파일.pdf";

방안 모색2. GPT 에게 물어보기

혹시나 도움이 될까 싶어서 ChatGPT에 물어봤다. 그랬더니 Collcation을 utfmb4_unicode_ci 로 변경하라는 답변 을 받았고, 현재 내 collection은 utf8mb4_0900_ai_ci이라서 알려준 쿼리로 변경을 실행해 보았다.

ALTER TABLE [테이블명] MODIFY COLUMN [컬럼명] VARCHAR(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

그 결과, Like 뿐만아니라 이젠 비교 연산자도 검색이 안되었다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그래서 다시 원상 복구 했다.

방안 모색3. Brew로 MySQL 서버 버전 다운그레이드해보기

최근에는 MySQL을 사용해 본적이 없었기에 혹시나 버전이 올라가면서 문제가 생겼나싶어 버전을 내려보았다. 기존에 brew를 이용해서 설치했었기 때문에 삭제한 후 brew에 존재하는 버전인 8.0을 설치해보았다. 역시나 안되었다.

그래서 또 삭제하고 더 이전 버전인 5.7 버전도 설치해 보았고, 이것도 역시 안되었다. my.cnf에 인코딩 설정을 안해줘서 그런가 싶어서 5.7 버전일 때 character_set 을 조회해 보니 설정을 안해줘도 다 utf8로 되어 있었다.

지금까지 한 6시간은 고민한 것 같다.

방안 모색4. MySQL 홈페이지에서 다운받아서 설치해보기

마지막으로 brew 가 아닌 MySQL 홈페이지에 가서 직접 Community Server를 다운 받아 설치해보기로 했다. 8.0.32 버전을 다운 받아보았고 역시나 안되었다...

도무지 감을 잡지 못했 고, 일단 포기했다

이 글을 읽는 누군가가 방법을 알아내신다면 꼭 댓글이나 메일 부탁드립니다.

# 느낀 점

Junit5와 Swagger

이전 회사에서 Junit을 사용하긴 했으나 대부분 Junit4였다. Junit5를 사용해 본 적이 거의 없었다. 게다가 문법이 많이 바뀌었다보니 정말 Service 테스트하는데 어떻게 Mock 데이터를 만들고 테스트를 해야할지 멘붕의 연속이었다. 테스트 코드 작성하다가 피똥싸는 줄 알았다. 결국엔 몇개 만들다가 포기하고 Swagger에서 API 테스트할 수 있도록 설정해버렸다. ( Swagger도 openapi로 바뀌면서 약간 문법이 바뀌었다. 이건 변수 명이 바뀐 정도라 어렵진 않아서 다행이었다. 휴 )

React-Hook-Form

이전 프로젝트때는 직접 비슷한 모듈을 만들어 사용했고, 처음으로 form hook을 사용해봤는데 편리했다. 다음 프로젝트에서는 직접 폼 훅을 만들어 보는 것도 재밌을 것 같다 : )

# 결론

손가락이 다쳐서 중간에 쉬는 기간이 길어지다보니 점점 이 프로젝트에 대한 흥미를 잃었다. 게다가 취업을 준비하면서 계속해서 서류탈락하다보니 자괴감과 점점 자신감을 잃고 있어, 더욱더 개발에 흥미를 잃었다. 그래서 끝으로 갈수록 완성에 목표를 두고 코드를 깨끗하지 못하게 작성했다. ( 비슷한 컴포넌트 반복해서 생성... ) 그래도 스프링부트를 이용해서 백엔드까지 개발했다는 점은 칭찬해주고 싶다.

그리고 일단 잠시 신규 프로젝트 개발에 집중하지 않고 언어 자체에 대해, CS에 대한 공부를 이어가려고 한다. 이번 프로젝트를 하면서 계속해서 구글링하는 내 자신을 발견했다. 정확한 매커니즘을 모른 채 개발하는 무의미한 개발은 더 이상 필요 없다고 생각한다.

다만, 이 프로젝트의 프론트엔드는 추후 짬짬이 소리소문없이 리팩토링해 나갈 것이다. ( 손가락이 근질근질할 때마다 수정해 나가야지ㅎ )

잘한 점 3가지

스프링부트를 이용한 API 서버를 만들었다.
JWT 를 이용한 인증을 적용했다.
Zod와 React-hook-form을 이용해서 API 전송 전 데이터 검증 ️을 했다.

아쉬운 점 2가지

Junit를 제대로 활용하지 못했다.
프론트엔드 코드가 아주 개판이다. 코드 리팩토링이 정말로 필요하다.

제가 작성한 코드에 코드 리뷰(평가)도 받고 싶은데 언제든지 제 깃헙에 남겨주세요! 환영입니다!

[Spring] 환경변수로 yml 중요 정보 숨기기

S0PH1A — Sat, 2 Mar 2024 04:29:45 +0900

개인 Spring Boot 프로젝트 중 Github에 yml, properties 파일에 있는 중요한 정보(예, 데이터베이스 계정 정보)와 같은 것들은 어떻게 숨겨야하는지 찾아 보았고, 저는 환경변수(.env)를 이용해서 정보를 숨기기로 했습니다.

TMI

왜 이 방법을 선택했냐면, 엄청 중요한 이야기는 아니구요...

찾아보니 가장 많이 사용하시는 방법이 Jasypt를 이용한 방법이었습니다. 제 생각엔 이 방법의 단점이 암호화 키를 갖고 있어야 한다는 점인데, 그 암호화 키는 어디다 저장해서 갖고 있어야 할까요? ( 어떤 분들은 Github Secrets 에 보관하시더라구요. ) 그리고 자바에 코드를 또 작성해야하구요. 사실 개인 프로젝트라 정보 털려도 괜찮은데 정보 노출되면 깃헙에서는 보안 알림오니...이렇게 까지하 긴 귀찮았습니다 ‍♀️

그래서 환경변수에 담기로 했습니다. 이 방법의 단점은 .env를 갖고 있어야 한다는 점일 것 같아요. 파일을 백업 안해서 잃어버리면 절대 찾을 수 없으니 난리나겠죠 ? 그리고 장점은 설정이 간단한 것도 있지만 docker 같은 곳에 배포 때도 쉽게 .env 를 사용 가능하다고 하네요.

⚙️ 환경변수로 정보 숨기기

# 설정 방법

1) env 파일 생성

프로젝트 루트에 ".env" 파일을 만들고, 숨길 정보를 입력했습니다.

// .env
MYSQL_USERNAME=계정
MYSQL_PASSWORD=비밀번호
MYSQL_PORT=포트

2) .gitignore 수정

하단에 .env 파일은 github에 올리지 않겠다고 선언합니다.

### env ###
.env

3) application.yml 수정

.env에 선언한 변수 명에 맞게 ${변수명} 형태로 변경해주면 됩니다.

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:${MYSQL_PORT}/file_drive
    username: ${MYSQL_USERNAME}
    password: ${MYSQL_PASSWORD}

이제 Github에 전체 소스 코드를 올리셔도 환경변수 정보는 같이 배포되지 않습니다.

# 환경변수로 바꾼 후 IntelliJ에서 실행방법

정보를 환경변수에 선언했기 때문에 평소와 같이 IntelliJ에서 실행하면 스프링이 숨겨진 값을 알 수 없기 때문에 실행이 안됩니다. 실행 설정을 변경해야 합니다.

Run/Debug Configurations를 열고, Modify options를 누른 후 Environment variables를 선택해 줍니다.

Environment variables 입력 창에 .env에 선언했던 정보들을 키=값;키=값 형태로 입력하시거나, 우측 버튼을 눌러 표에서 좀더 편하게 입력이 가능합니다.

이제 실행하시면 됩니다!

토이 프로젝트 [Ducky] 회고

S0PH1A — Wed, 28 Feb 2024 02:02:20 +0900

지난번 단어장 웹에 이어서 이번에는 더키라는 블로그 웹을 만들었다.

더 큰 프로젝트다 보니 많은 리액트 라이브러리를 사용했다. 물론 별도의 라이브러리 없이 직접 만들면 좋겠지만 나는 편리하고 좋은 라이브러리를 찾아서 사용하는 것도 좋은 방법이라 생각한다. 미천한 나의 실력으로 직접 만든 불안정한 라이브러리를 사용하여 사이드 이슈를 많이 발생시키는 것보다 많은 사용 하며 업데이트고 관리되는 라이브러리를 찾아 사용하는 것도 프로젝트를 구현하는 데 있어서 좋은 방법이라 생각한다. (구차한 변명 같네ㅎ)

이번 프로젝트 개발 기간은 ( 라이브러리를 많이 써서 그런가 ) 이전보다 짧은 총 6일 걸렸다(첫 커밋 ~ 마지막 커밋). 아무래도 이전 프로젝트에서 파이어베이스 인증을 제외한 간단한 쿼리 사용법에 대해 배웠다 보니 이번에는 좀 더 수월히 개발할 수 있었다.

# 구상

이번에도 종이에 큰 그림만 끄적였다. 처음 메인 화면과 생성할 메뉴 "저장소", "글감" 두 가지만 만들기로 결정했다. 나중에 "글감"은 Post 게시물로 이름을 변경했다. 그리고 메인화면은 사실 트위터나 Reddit 같은 화면으로 구현하려고 했는데, 모든 페이지가 글(게시물)을 작성하는 페이지다 보니 굳이 넣어야 하나 싶어서 제외했다. ( 사진은... 커피를 쏟아서 없다... )

# 라이브러리

Typescript
Shadcn/ui
TailwindCSS
Zustand
TanStack (React Query)
Blocknote ✍️ : 노션처럼 생긴 깔끔한 에디터이다. 아직 베타버전이지만 사용하는데 문제없다.
Zod : 타입스크립트 스키마 정의. CUD 작업 시 전달 타입 스키마 정의할 때 사용.
Sonner : toast 메시지 표시.
hello-pangea/dnd : 드래그 앤 드롭 라이브러리. 칸반보드에서 카드나 리스트 옮길 때 사용.
usehooks-ts : outside 클릭 이벤트 훅(useOnClickOutside)을 사용.

# 고충

크게 기억나는 몇 가지만 적어보았다.

Firebase

하위 컬렉션은 조회가 안된다는 것을 알았기 때문에 디비 구조를 정하는 데 있어서 많은 고민은 없었다.

1) 사용자 인증 정보 조회 문제

사용자 인증 부분은 경험이 없어서 firebase authentication 부분 정보를 많이 찾아봤다. 로그인한 후 유저 정보를 갖고 올 때 `auth.currentUser` 로 로그인한 유저 정보를 갖고 올 수 있는데 파이어베이스 매서드 를 이용하는 것이라 매번 firebase에 조회를 하면 파이어베이스 조회 수가 증가하여 금전적으로 문제가 생길 것 같았다. (물론 아무도 접속 안하겠지만^^)

유저 정보를 zustand와 같은 상태 관리 라이브러리에 저장할까 생각했지만, 리랜더링될 때 정보가 사라지기 때문에 이는 맞지 않았다. 더 찾아보니 파이어베이스는 로그인을 하면 인증 정보를 사용자의 캐시에 저장하고 그 정보를 갖고 오는 것이라고 한다. 그래서 auth.currentUser를 사용했다.

2) 사용자 탈퇴

문서 : 사용자 삭제하기

삭제하려는 사용자가 작성한 코멘트나 게시물들을 모두 다른 이름으로 바꾸고, 계정을 삭제하려고 아래 명령어를 입력하니 오류가 발생했다. (auth/requires-recent-login)

const user = auth.currentUser;
await user?.delete();

사용자 계정 삭제, 비밀번호 변경과 같은 민간한 작업을 하려면 로그인한 적이 있어야 한다고 한다. (공식문서)

하지만 사용자 삭제 는 대부분 로그인한 유저만 탈퇴(삭제)가 가능하기 때문에 이미 로그인되어 있는데 왜 안되지?싶다. 공식문서상에는 재인증을 하라고 했기 때문에 재인증 기능을 로그인할 때 넣어줬다.

사용자 재인증

왜 이곳에 넣었냐면, auth.currentUser에는 사용자의 패스워드 정보가 없기 때문에 인증정보를 갖고 올 수 없다. 그래서 이미 로그인 이후에는 재인증이 불가능하기 때문에 로그인할 때 바로 재인증하도록 하였다.

3) 배열 필드 요소 변경

저장소 페이지에서 리스트와 카드의 관계를 어떻게 구현할 지 가장 큰 고민이었다. 파이어베이스에서 하위 컬렉션 접근이 안된다는 것을 알았기 때문에 리스트(kanban)에 cards라는 배열 필드를 추가하고, 카드가 추가되면 cards에 추가하는 형식으로 구현했다.

칸반에서 리스트와 카드 관계 구조화

근데 이 방식의 단점이 있었다. 배열 update 기능을 지원하지 않기 때문에 카드 정보가 변경되면 해당 카드만 찾아서 변경이 불가능했다. 문서에서는 기존 데이터를 삭제하고 추가하는 방식으로 하라고 설명되어 있었다. (공식문서) 게다가 배열에서의 삭제는 값이 정확히 일치해야만 삭제가 되기 때문에 트랙젝션을 걸고 리스트에서 변경하려는 카드 정보를 조회한 후 카드를 삭제하고 새 카드를 추가하는 방식으로 카드를 업데이트했다.

await runTransaction(db, async (transaction) => {
  // 리스트 조회
  const listRef = doc(db, "kanban", listId);
  const listDoc = await transaction.get(listRef);

  // 현재 카드 정보 조회
  const curCard = listDoc.get("cards").find((card: Card) => card.id === id);

  // 변경된 새 카드
  const newCard = { ...curCard, ...values };

  transaction.update(listRef, { cards: arrayRemove(curCard) }); // 현재 카드 삭제
  transaction.update(listRef, { cards: arrayUnion(newCard) }); // 현재 카드 추가

  card = newCard;
});

실시간으로 변경된 정보 갖고 오기

내가 만든 저장소 페이지는 여러 명의 사람이 동시에 작업할 수 있기 때문에 실시간으로 변경되는 정보를 갖고 올 수 있어야 했다. 파이어베이스에는 감사하게도 `onSnapshot`이라는 메서드를 이용해서 실시간으로 변경되는 정보를 갖고 올 수 있다. 그래서 아래와 같이 구현을했다.

const [lists, setLists] = useState<List[]>([]);

// 변경된 리스트/카드 정보 갖고오기
const fetchData = useCallback(() => {
  const q = query(
    collection(db, "kanban"),
    where("boardId", "==", "ducky"),
    orderBy("order", "asc")
  );
  const unsubscribe = onSnapshot(q, (doc) => {
    const data = doc.docs.map(
      (item) => ({ ...item.data(), id: item.id } as List)
    );
    setLists(data);
  });
  return unsubscribe;
}, []);

useEffect(() => {
  const unsubscribe = fetchData();
  return () => unsubscribe();
}, []);

하지만, 일반적인 회사에서는 파이어베이스보단 자체적인 백엔드 서버에 디비를 두고 REST API를 통한 통신을 많이 하기 때문에 이 방법이 아닌 다른 방법으로는 어떻게 할까 고민을 해봤다.

폴링(polling)

주기적으로 서버에 API를 호출하는 것이다. 예전에 회사에서 새로운 메세지가 왔을 때 표시하기 위해 setInterval로 3초마다 서버에서 데이터를 갖고 오도록 구현한 적이 있다. TanStack 에서는 어떻게 구현하는지 궁금해서 찾아보니 useQuery에 `refetchInterval`이라고 있었다. 이걸 사용하면 될것 같다.

추가로, 웹 소켓 방식도 이용할 수 있을 것 같다. 네트워크 소켓 통신에 대한 내 지식이 짧아서 잘 모르겠다.

⌨️ Input에 한글 입력 시 두 번 전송되는 오류

코멘트 작성 시 Enter 키를 입력하면 자동으로 코멘트가 생성되도록 구현했다. 하지만 아래 영상을 보면 한글을 입력하면 두 번 전송된다.

한글 입력 오류

Save 버튼을 눌러 코멘트를 전송하는 것은 문제 없이 한번만 생성되지만 Input 안에서 Keydown Enter로 전송하면 두 번 전송되었다. 그것도 영어는 말고 한글만. 잠시 이 오류는 Save 버튼으로만 코멘트를 생성할 수 있도록 막아두고(눈감고 ) 다른 페이지 작업을 하고 있었는데 InputTags컴포넌트에서도 한글 입력 시 마지막 글자로 태그가 또 생성되는 문제가 발생했다! "이거 같은 원인이겠구나 고쳐야 겠다"라고 다짐했다.

태그 한글 입력 오류

원인을 찾아보니 React만의 문제는 아니고 자바스크립트의 문제였다. [관련 기사] 한글은 영어와는 다르게 한 글자가 자음과 모음 조합으로 구성되어 있다. 그래서 우리가 한글를 입력했을 때 글자가 끝난 건지 컴퓨터는 알 수 없기 때문에 IsComposing (조합중)이라는 속성 값이 true로 표시된다. 따라서 keydown 이벤트 발생했을 때 조합 중인 경우 아무것도 처리 하지 말라고 아래와 같이 조건을 추가하면 된다.

target.addEventListener("keydown", event => { 
  if (event.isComposing || event.keyCode === 229) return;
  // do something...
});

리액트에서는 event 객체 안에 isComposing 이라는 값이 없다. 왜 인지 찾아보니, 우리가 JSX 에서 컴포넌트에 on[이벤트]로 등록한 이벤트 핸들러는 실제 브라우저의 고유 이벤트와 동일한 동작을 하지만 조금 다르다. 리액트에서의 이벤트는 합성 이벤트(SynthethicEvent)라고 불리며 이 이벤트들은 이벤트 버블링 단계에서 호출된다. (관련 문서) 즉, SynthethicEvent는 동일한 인터페이스를 갖고 있을 뿐 같은 브라우저 DOM 이벤트와 같은 객체가 아니다! 그래서 브라우저의 돔 이벤트를 막기 위해서는 event.nativeEvent를 이용하면 된다.

export default function CommentInput() {
  const onTextareaKeyDown = (e: React.KeyboardEvent) => {
    if (e.nativeEvent.isComposing) return;
    // do something...
  }
  
  return (
    <textarea onKeyDown={onTextareaKeyDown} />
  )
}

# 느낀 점

ȸ TanStack

리스트나 상세 페이지와 같이 서버에서 갖고 온 데이터를 캐싱하여 사용하면 좋을 곳은 TanStack 쿼리를 이용해서 데이터를 갖고 오도록 했다.

그리고 게시물 쪽에는 리스트는 이번에도 useInfiniteQuery를 이용해서 무한 스크롤 방식으로 구현했고, 게시물 생성/수정 시 useMutation를 처음 사용해보았다. 나는 다른 페이지에서는 useMutation이 내가 만든 useAction 커스텀 훅과 같은 기능이기 때문에 useMutation 을 쉽게 적용해서 사용할 수 있었다.

리액트 최적화

이 부분은 사실, 현재 코드에서 더 최적화가 가능한지 모르겠다. 모든 개발자가 고민하는 부분이 아닌가 싶다. 추후에 진짜 프로젝트에 사용해보면서 코드 리뷰 받아보면 좀 더 좋아지지 않을까?

로딩화면 같은 경우 API 호출할 때 마다 보여지기 때문에 계속 재사용되기에 루트 페이지(레이아웃)에 넣고 zustand로 전역에서 show/hide 할까 고민 했고, 로딩 컴포넌트를 createPortal을 이용해서 div#root 밑에 넣어줬다. 그러면서 로딩이 필요한 컴포넌트에서는 로딩 컴포넌트를 추가해서 조작하도록 했다.

{isLoading && <LoadingSpinner />}

createPortal은 위치만 분리되어 있을 뿐 부모 컴포넌트에 영향을 받지만, 내 로딩 컴포넌트는 상태나 Prop이 따로 없기에 부모 컴포넌트가 리랜더링 되더라도 리렌더링되지 않기에 괜찮다고 생각했다. 물론 리랜더링 방지로 React.memo도 있지만 createPortal로 선언하면 DOM 구조에서 항상 밑에 보여지므로 더 좋은 선택인 것 같다.

타입스크립트

이번에는 CUD(생성,수정,삭제)시 zod를 통해 타입을 검증하도록 구현해보았다. 유튜브 보다가 알게된 라이브러리인데, 이걸 사용하면 전달되는 데이터의 유효성 검증도 가능하기 때문에 API에 전달하기 전 데이터가 올바른지 체크할 수 있어서 좋았다.

스타일

이번에도 shadcn/ui 와 tailwindCSS 를 이용하였다. 반응형, 테마에 따른 설정도 해야하기 때문에 클래스가 매우 많이 길어서 JSX 코드를 보기에는 많이 불편하지만 스타일 클래스들에 익숙해지니 크게 신경은 안 쓰였다.(안쓰였다고 생각하자... )

지난 프로젝트에서는 css moudle도 사용해서 세세한 작업을 진행하였지만 이번에는 TailwindCSS만으로 해결했다.

# 결론

지난번 프로젝트에 비해 좀 많이 커진 블로그 웹사이트다 보니 시간이 오래 걸릴 줄 알았는데, 라이브러리를 많이 사용해서 그런지 생각보다 시간이 많이 투자되진 않았다. 웹에 대한 경험은 있기에 "이렇게 구현하면 될 것 같은데, 무슨 메소드를 사용하면 되지?", "이 명령어 쓰면 될 것 같은데 어떻게 썼었지?" 하고 구글링을 많이 해보는 편이지만 해법을 찾는데 시간이 그리 많이 소요되는 편은 아닌 것 같다. 물론 방법을 못찾아서 우회하기도 한다. 그러면서 커가는게 아닐까...?

또 다른 프로젝트를 한다면 그때는 Spring Boot 를 이용해서 REST API를 만들고 프론트로는 React를 사용하는 형식의 프로젝트를 진행해 봐야겠다. 리액트를 배워가면서 점점 자바가 머릿속에서 잊혀져가는 중이다...

잘한 점 3가지

파이어베이스 인증부분까지 경험 해봤다.
구현 방식에 대해 좀 더 다양하게 생각해보려고 노력했다.
Theme 변경 기능을 위해 next/useTheme 훅을 분석 후 useTheme 커스텀 훅을 만들어서 적용한 점.
- 시스템 테마를 기본으로 적용하고 LocalStorage에 저장하도록 했다.

아쉬운 점 2가지

테스트 코드를 작성하면서 개발하지 않은 점. ( 아 이번에도 못했다 )
한 메서드에 너무 많은 기능을 넣은 것 같다. if-else 너무 사용한 것 같아 복잡해 보인다. 변수/메서드 명 잘 짓자! - 너무 클린하지 못한 코드

제가 작성한 코드에 코드 리뷰(평가)도 받고 싶은데 언제든지 제 깃헙에 남겨주세요! 환영입니다!

토이 프로젝트 [Vocab] 회고

S0PH1A — Tue, 20 Feb 2024 04:10:58 +0900

프론트엔드 개발자로 전향하기 위해 최근 리액트를 배우고 있다. [리액트를 다루는 기술]이라는 책 한권을 완독했고, 게시판 만들기보다 더 재미난걸 만들어 보고 싶어 고민하다가 단어장이라는 웹을 만들어 보았다.

자바스크립트는 알지만 리액트뿐만 아니라 처음 접하는 라이브러리가 많았기 때문에 원하는 걸 구현하려면 어떻게 사용하면 되는지 문서를 찾느라 고생했다. 그래서 코딩하는 시간보다 구글링하는 시간이 더 많았다.

개발 기간은 총 7일 걸렸다(첫 커밋 ~ 마지막 커밋). 순수 개발시간은 아마 30시간정도 되지 않을까 싶다.

# 구상

게시판처럼 리스트 조회/수정/삭제가 있으면서 간단한 걸 만들어 보고 싶었다. 초기 UI 구상은 피그마를 사용하면 참 좋겠지만 할 줄 모르니... 아래와 같이 종이에 끄적거렸다. 처음엔 이랬다는 것을 기록에 남기고자 종이를 버리기 전에 찍어 두었다. 다시 보니 결과물이랑 완전히 다르진 않은 것 같다.

# 고충

크게 기억나는 몇 가지만 적어보았다.

Firebase

워낙 간단한 프로젝트라서 SpringBoot로 REST-API를 금방 만들 수는 있지만 프론트에 집중을 한 프로젝트이기 때문에 이번에 파이어베이스를 처음 사용해보기로 했다. 덕분에 파이어베스 사용방법 찾느라 전체 개발시간의 50%는 쓴 것 같다 ㅋㅋㅋㅋㅋ

총평: 백엔드 서버/디비 개발 없이 개발을 쉽게 해주기 때문에 API는 고민할 필요가 없어 거부감 없고 간단하긴 했지만, 웹에서는 지원안하는 기능이 많았다. 그래서 많이 아쉬웠다.

1) Firestore 생성 문제

시작부터 대 난관이었다. Firestore Database를 생성하려는데 자꾸 알수 없는 오류가 생겼다면서 생성이 안되었다.

구글링해보니 계속 "만들기" 누르면 된다던데 저는 안되고... 새로고침하고 다시 시도해도 안되고...

진짜 무슨 신 이 그냥 프론트 개발자 하지 말라고 계시를 주는줄 알았다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 몇분째 난리 치다가 크롬 캐시 삭제해볼까 했는데 떠 있는 탭들을 닫으면 다시 찾기 힘드니 그냥 사파리로 접속해보니 생성되어 있었다.

2) Firestore 하위 컬랙션 문제

내가 처음 파이어베이스를 사용해보는 것이기 때문에 하위 컬랙션을 다루는 방법을 몰라서 발생한 문제이다.

구상한 모델은 매우 간단한 구조였다.

그래서 category안에 chapter 컬랙션을 생성하고, chapter 컬랙션 안에 vocabulary 컬랙션을 추가해서 관리하면 되겠다 싶었고, 아래와 같이 초기 데이터를 넣어줬다.

그런데 이게 조회나 트랜잭션같은 작업이 필요했는데 구글링을 해도 정보가 많이 안나왔다. 트랜잭션으로 한번에 생성하거나 삭제하고 싶었는데 트랜잭션을 하위 컬랙션에 거는 방법도 모르겠고, 가장 중요한건 하위 컬랙션 조회는 웹에서는 지원을 안한다!

이미지 클릭시 해당 문서로 이동합니다.

그래서 결국엔 각각의 컬랙션을 따로 생성하는 방식으로 변경해서 해결했다.

3) Firestore 조건 검색과 정렬

데이터 정렬 및 제한

조회할 때 조건 검색하고 결과에 대한 정렬(orderBy)도 하고 싶었는데, 이와같이 orderBy를 두 번 써봤지만 이것도 안된다. (where절을 두번 써도 안된다... ㅎ)

const q = query(
  collection(db, "chapter"),
  where("categoryId", "==", categoryId),
  orderBy("categoryId", "asc"),
  orderBy("order", "asc")
);

그래서 반환되는 양이 많거나 무겁지는 않으니 데이터를 where절로 조건 검색 후 따로 sort()를 이용해서 정렬하는 방식으로 해결했다.

( 2/25 추가 글 > 색인을 사용하면 된다... ㅎ )

리액트 상태 관리

Vue2 를 사용해본 사람으로써, 자식에서 부모컴포넌트로 데이터를 전송할 때 진짜 참 쉬웠는데... 리액트는 부모에서 자식으로만 속성 값을 전달할 수 있다보니 처음엔 어떻게 해야하나 고민이 많았었다.

헤더에 있는 메뉴나 다크모드와 같은 props로 넘기기 불편하거나 광범위하게 사용하는 데이터들은 저장소를 사용했다. 이번 프로젝트에서는 Context API를 이용했다. Main 파일에 Context 등록이 여러 개 되어 있어 컨텍스트 안에 컨텍스트 안에... 반복되다보니 Redux와 비슷한데 사용이 간단한 Zustand로 바꾸려고 했다. 하지만 두가지 이유로 변경하지 않았다.

FireStore만으로도 벅찬데 Zustand를 검색하면서 하려니 벅참.
상태값 바꾸니 구독하고 있는 모든 컴포넌트가 다 재랜더링되는 문제가 발생. → 이건 나중에 Selector를 이용하면 해결 된다는 걸 알았다.

가장 친숙한 걸로 만들었다는 점이 아쉽긴하다. 그래서 다음 토이 프로젝트때는 Zustand를 사용해보아야겠다.

리액트 최적화

총평: 최적화관련해서는 그 라이브러리(또는 언어)에 대해 좀더 깊게 공부해야하기 때문에 어느 언어든지 간에 어려운 것 같다.

1) useEffect

라이프사이클은 이해했고, useEffect 를 통해 마운트된 후 작업을 할 수 있으며, 두 번째 인자를 이용해서 언제 실행될지 설정가능하다는 것까지 알았다. 하지만 useEffect 를 사용하는게 공짜가 아닐 뿐더러 잘못 구독하고 있는 경우 불필요한 랜더링을 발생하기 때문에 useEffect 사용하는데 고민이 많았다. "이 기능을 구현하는데 useEffect를 사용하지 않고 구현할 수 있는 방법이 있을까?"를 먼저 고민하고 사용하도록 했다.

2) useCallback, useMemo, React.memo

이것들 또한 남용 시 오히려 성능을 저하시키고 메모리를 잡아먹기 때문에 고민이 많았다. "과도한 남용"이 어디까지인지를 모르겠어서 고민이 많았다. 물론 매우 작은 프로젝트라 사용하든지 말든지 성능의 차이는 크게 차이나진 않지만 사용해보고 싶었고, 이 프로젝트에 useMemo 한 번 사용했다. 그리고 useCallback 사용하기보다 굳이 재랜더링이 필요 없는 함수들은 컴포넌트 함수 밖에 선언했다.

타입스크립트

타입스크립트도 처음 사용해 본 것이었는데, 리액트에 타입스크립트 함께 많이 사용하기 때문에 간단하게 영상 몇 개랑 문서를 보고 프로젝트를 시작했다. 전달되는 값이나 리턴되는 값의 타입이 무엇인지는 알긴 하는데 리액트 함수들이나 firestore 메소드들에 대한 리턴 값을 잘 모르겠어서 힘들었다. 물론 any로 다 때려박으면 되지만 그러면 타입스크립트를 하는 이유가 없어지기에 타입을 찾기 위해 노력했다.

타입스크립트를 쓰니 잘못 선언하면 빌드 시 오류나서 귀찮긴 했지만 특히 객체 같은 경우 안에 속한 키들이 자동으로 보이기 때문에 좋긴 했다.

이 프로젝트에 타입스크립트가 완벽히 타입을 잘 맞춰했다고는 장담하지 못한다. 그렇기 때문에 다음 프로젝트도 계속해서 타입스크립트를 사용해보도록 할 것이다.

스타일

나는 (다행히...) CSS(SCSS)에 대한 어느 정도 기본 지식은 있었고 styled-Components와 tailwindCSS 둘 중 고민했는데, 작년에 인기있었던 shadcn/ui를 사용해보고 싶어서 tailwindCSS를 사용했다. 그런데 생각보다 단점도 꽤 있었다.

클래스가 무진장 길어짐. → 그래서 ui 컴포넌트로 따로 분리하게 됨.
상세(세세)한 설정이 어렵다. → 원하는 크기로 수정이 불편하다. 애니메이션도 불편했다.
속성 찾느라 시간 다감. → 다행히 어떤 css를 사용하면 된다는 건 알았기 때문에 검색은 쉬웠다.

그래서, 중간에 styledComponent도 같이 사용할까 고민 많이 했지만... 몇 개만 css module로 해결하고 나머지는 tailwindCSS로 다 했다. (만세)

# 결론

리액트라는 라이브러리는 처음이지만 나는 풀스택으로 개발해왔기 때문에 프론트도 조금은 다룰 줄 알았다. 그래서 책 한권 대~충 훑고 프로젝트를 시작했는데 역시 책과 실전은 완전히 다르다는 것을 다시 한 번 느꼈다

아쉬운 점이 더 많지만 처음이기 때문이라고 자기 위안하기로 했다. 다음 토이 프로젝트엔 더 다양하게 적용보고 더 깊게 배울 수 있도록 해야겠다.

잘한 점 2가지

새로운 라이브러리를 많이 사용했는데 원하는 대로 구현을 다 한 점. ( 물론 결과보다 과정이 중요하긴 하지만... )
반응형으로 작업한 점.

아쉬운 점 4가지

테스트 코드를 작성하면서 개발하지 않은 점. ( 테스트 코드 작성하는 법은 배우긴 했는데 실제 적용하기가 너무 어려웠다. )
react-router-dom과 tanstack(react-query)를 좀 더 활용해보고 싶었는데 못했다. ( loader, action, mutate 등 )
context API 만 사용한 점...
firebase 인증 기능을 사용하지 않은 점 ( 로그인 기능을 구현하지 않았기 때문에 사용하지 않았다. )

제가 작성한 코드에 코드 리뷰(평가)도 받고 싶은데 언제든지 제 깃헙에 남겨주세요! 환영입니다!

[MySQL] MacOS ventura 13 에서 MySQL Workbench 가 실행되지 않을때 해결 방법

S0PH1A — Thu, 19 Jan 2023 11:58:22 +0900

[MySQL] MacOS ventura 13 에서 MySQL Workbench 가 실행되지 않을때 해결 방법

기존에 workbench 는 몇 버전이었는지 기억은 안납니다.
원래 업데이트 같은거 잘 안하는 스타일인데,,,,,
테스트를 위해 ios 시뮬레이터 돌릴려고, xcode 설치를 위해 mac os 업데이트 했다가
workbench 실행 안되서 2시간 날린...

Ventura 13 으로 macOS 업데이트 후 기존에 설치되어 있던 Workbench 를 실행하면 "MySQLWorkbench 응용 프로그램이 예기치 않게 종료되었습니다." 메세지가 나오면서 Workbench 가 실행되지 않았습니다. 무시해도 계속 무한반복으로 떴습니다...

오류 메세지를 구글링해보니 2021년 글 기준 MySQL 8.0.20 또는 MySQL 8.0.22 버전을 다운받으면 된다고 하던데 전 안되더라구요.

그래서 이건 mac os 버전의 문제인 것 같아서 macOS 버전과 함께 구글링을 해보니 해당 버전에 맞는 MySQL 를 설치하는게 답이더라구요! 그래서 진행과정을 공유합니다.

기존 워크 벤치 삭제

이전 mac 버전이었을 때 설치했던 workbench 를 삭제해 줍니다.

$ rm -rf ~/Library/Application Support/MySQL/Workbench

[참고] https://dev.mysql.com/doc/workbench/en/wb-mac-uninstalling.html

MySQL Community 설치

다운로드 경로 : https://dev.mysql.com/downloads/mysql/

MySQL Community Server 를 설치합니다. 현재 macOS 버전에 맞는 MySQL Community 를 설치해주면 됩니다.

Ventura 13 이기 때문에 macOS 13 버전을 다운받아주면 됩니다.

MySQL Community Server 8.0.32

MySQL Community Server 설치 페이지에 보면 macOS 버전을 선택하는 옵션이 따로 있는 것을 보면,
MacOS 에 맞춰서 Community Server 재설치만 했다면, Workbench 를 삭제하지 않아도 실행이 가능했을 수도 있습니다.
( 이미 기존 Workbench 를 삭제한 후라서 확인은 안해봤기 때문에 추측입니다. ㅎ )

Download 누르면 로그인하거나 회원가입하라고 나오는데, 하단에 "No thanks, just start my download" 누르면 가입 및 로그인 없이 다운가능합니다.

No thanks,

MySQL Workbench 설치

다운로드 경로 : https://downloads.mysql.com/archives/workbench/

MySQL Workbench 를 설치합니다. 현재(2023.01.19)기준 8.0.32 버전이 가장 최신 버전인데, 해당 버전으로 설치했더니 workbench 를 열거나 접속등은 잘 되는데, 가장 중요한 SELECT 를 실행하면 Workbench가 강제 종료되어 버립니다

그래서, 8.0.30 버전을 설치 했습니다. ( 해당 버전은 아직까진 정상적으로 잘 작동합니다. )

MySQL Workbench 8.0.30

이제 다운 받은 dmg 파일 열면, "'MySQLWorkbench'은(는) Apple에서 악성 소프트웨어가 있는지 확인할 수 없기 때문에 열 수 없습니다" 라는 메세지가 나옵니다.

`시스템 설정 → 개인정보 보호 및 보안` 에서 스크롤 내리다 보면 MySQL~ 쓰여있는 부분이 있습니다. Open Anyway 누르고 비밀번호 입력하면됩니다. ( 이미지는 제가 깜빡하고 캡쳐를 못해서, 다른 곳에서 캡쳐했습니다. )

이미지 출처: https://www.youtube.com/watch?v=kXz3aWqMFtE

(2024.03.01 추가 작성)

이제 최신 버전도 실행됩니다.

제 고물 맥북은 Ventura 버전이고, MySQL 쓸 일이 없어 삭제했다가, 오늘, 가장 최신 버전인 8.0.36을 다운 받아봤는데, 되요!!!!

혹시나 안되시는 분들은 mysql server는 설치했는 지 확인해 보시고 안하셨으면 추가로 설치하시면 됩니다!

// 터미널에서 mysql 입력하여 mysql server 설치되어 있는지 확인
$ mysql

설치가 되어 있다면 "ERROR 1045 (28000): Access denied for user '사용자 아이디'@'localhost' (using password: NO)" 로 표시 됩니다. 만약, 설치가 안되어 있다면 공식 홈페이지에서도 설치 가능하지만 brew로도 간단하게 설치 가능합니다.

( 다만 워크벤치와 MySQL Server 버전이 안맞아서 워크벤치에서 경고 메세지가 나타날 수 있습니다. )

$ brew install mysql

만약, 분명히 실행되던게 다음날 보니 또 튕기면서 안된다? ( 예... 맞아요... 멍청한 저의 이야기구요... )

저는 원인이 컴퓨터 껏다 키면 mysql 서버가 죽어서, mysql workbench 실행해서 서버 접속하려 하면 튕기더라구요!

mysql 서버를 재실행해주세요. 아래 둘 중 하나 명령어 입력하시면 됩니다.

// mysql 서버 시작
$ mysql.server start

// mysql 서버 재시작
$ mysql.server restart

# 여담

이 글이 조회수가 정말 많아요.

설치하면서 관련해서 구글링해봤는데 오라클 포럼에도 계속해서 이슈가 올라오고 있었네요 ㅎㅎ

[Vue.js] Vue-cli 와 webpack-bundle-analyzer

S0PH1A — Wed, 23 Jun 2021 01:24:50 +0900

[Vue.js] Vue-cli 와 webpack-bundle-analyzer

‍ webpack-bundle-analyzer

webpack-bundle-analyzer는 웹팩을 통해 번들링되는 모듈의 크기를 시각적으로 보여준다.

번들 파일의 용량을 확인함으로써 번들 크기에 문제가 있는 번들을 확인하고 줄일 수 있도록 하여 속도 향상시킬 수 있도록 도움을 준다.

webpack-bundle-analyzer

⛏️ 설정하기

기본적으로 build 를 하게되면 자동으로 실행되며, pluginOptions.webpackBundleAnalyzer에 옵션을 추가할 수 있다.

// vue.config.js
pluginOptions: {
    webpackBundleAnalyzer: {
        // 이곳에 webpack-bundle-analyzer 옵션을 추가하면 된다.
        analyzerMode: "static"  // 결과를 파일로 저장
    }
},

파일은 기본적으로 dist/report.html 로 저장된다.

vue-cli-service build 옵션 중 --report 옵션을 사용하면 analyzerMode: "static" 옵션을 사용하지 않고도 결과를 파일로 저장할 수 있다.

$ npm run build --report

[참고: vue-cli-service-build] https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build

[참고: webpack-bundle-analyzer 옵션] https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin

나는 analyzerMode를 disabled 하여 프로덕션 빌드시에는 분석을 실행하지 않고, build-report 옵션을 이용했을 때에만 실행하도록 설정해서 사용했다.

// package.json
{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:report": "vue-cli-service build --report"  // 추가
  },
}

$ npm run build:report

[Vue.js] Vue.js 에서 css variable 사용하기

S0PH1A — Tue, 22 Jun 2021 20:51:15 +0900

[Vue.js] Vue.js 에서 css variable 사용하기

들어가기에 앞서

단순히 공통 속성을 사용하기 위해서는 css variable이 아닌 IE에서도 사용 가능한 scss(sass)를 통한 공통 속성을 정의하여 재사용하는 것이 좋으며,

vue class 또는 style 바인딩을 통해서도 충분히 구현 가능한 부분이기에 vue style binding에 css variable 연결하는 방식은 그냥 이런 방법도 있다는 것을 인지만 하는 것이 좋을 것 같다.

CSS Variable

css variable은 style css 내에 사용자 속성을 지정하여 재사용 가능하도록 하는 객체를 의미한다.

현재, IE는 지원하지 않기 때문에 IE를 지원하는 사이트를 개발 중이라면 사용에 주의해야한다.

`css-vars-ponyfill` 라이브러리를 이용하면 IE에서도 사용 가능하다.

css variable 브라우저 호환성

[참고] https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

⛏️ 사용방법

:root 안에 사용할 속성을 선언하여 HTML의 루트인 <html>태그 내 어디서든 사용 가능하도록 한다.

꼭 :root(루트)에 선언 안해도 되며, 속성 이름은 대소문자를 구분한다.

:root {
  --primary-color: blue;
}

사용을 할 때는 var() 함수 안에 사용자 속성 값을 넣어주면 된다.

span {
  background-color: var(--primary-color);
}

⭐ Vue 에서 Style 바인딩 방법

vue에서 style을 바인딩하는 방법은 클래스 바인딩과 마찬가지로 `v-bind`에 객체 또는 배열 형태로 지정할 수 있다.

1) 객체(Object) 방식

<div :style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2) 배열(Array) 방식 ( ⇒ 대부분 사용 안함)

<div :style="[baseStyles]"></div>

data: {
  baseStyles: {
    color: 'red',
    fontSize: '13px'
  }
}

[참고] https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles

⭐ Vue 에서 Css Variable 사용하기

처음 소개한 css variable 방식을 사용할 수도 있지만, vue style bind를 이용하면 사용자 속성을 style스크립트 안이 아닌 vue script 안에서 선언한 값을 style 에서 사용 할 수 있다!!

<div :style="cssVariable"></div>

사용자 속성 이름은 `--`을 붙이지 않아도 되지만, 이름을 css 명령어로 명명한 경우 vue style을 바인딩도 해버리기 때문에 조심해야한다.

computed: {
    cssVariable() {
      return {
        "--color": "blue",
        "font-weight": "bold",  // css 명령어를 속성명으로 지정한 경우
        fontSize: "20px",
      };
    },
},

사용자 속성명 중간에 대문자 있는 경우 하이픈(-)으로 변경 가능하다.

div {
  color: var(--color);
  font-size: var(fontsize);  /* 또는 var(font-size); */
  
  /* 선언하지 않아도 css 명령어기 때문에 vue style 바인딩된다. */
  /* font-weight: var(font-weight); */ 
}

예제 코드

장점

계산된 결과 값 적용하는 경우

레이아웃을 계산하기 위해 수학을 사용하는 경우 css 변수에서 숨기는 것이 좋다고 한다.

또한, 스타일에서 고정 수치 값을 사용하는 것이 아닌 주위의 요소에 영향을 많이 받는(동적) 스타일을 지정한다면 자바스크립트 내에서 document.getElementById 와 같은 요소 선택자를 통한 스타일 지정이 아닌, css-variable + vue style 바인딩을 이용해서 계산 값을 지정해 주는 방법이 훨씬 효율 적일 것이라 생각한다.

[참고] https://shayneo.com/blog/binding-css-variables-with-vue/

[Vue.js] Vue-cli 빌드 후 로컬에서 실행하기

S0PH1A — Mon, 14 Jun 2021 23:40:36 +0900

[Vue.js] Vue-cli 빌드 후 로컬에서 실행하기

vue-cli spa 프로젝트를 웹팩, 빌드 시간 단축, 성능 측정 등 테스트하기 위해 로컬에서 실행하는 방법이다.

1. 프로젝트 빌드

$ npm run build

2. 프로젝트 실행

$ npm install -g serve

$ serve -s dist

[참고] https://cli.vuejs.org/guide/deployment.html#previewing-locally

ERROR 발생시 해결

1. error Unexpected console statement no-console

// vue.config.js
module.exports = {
  devServer: {
    overlay: false // remove `error  Unexpected console statement  no-console`
  }
};

[참고] https://www.inflearn.com/questions/15993

[Vue.js] Global Component 만들기 (컴포넌트 전역 등록하기)

S0PH1A — Thu, 10 Jun 2021 19:53:56 +0900

[Vue.js] Global Component 만들기 (컴포넌트 전역 등록하기)

들어가기에 앞서...

매번 자주 사용하는 컴포넌트를 만들고, 매번 해당 컴포넌트를 사용하는 곳마다 import 하여 사용하는 것은 불편할 뿐더러 컴포넌트의 파일 위치가 바뀐다면 해당 컴포넌트를 사용하는 모든 파일마다 수정을 해줘야 하기 때문에 좋지 않다.

그렇기 때문에 자주 사용하는 컴포넌트를 전역(Global)로 등록하여 사용한다.

간단한 글로벌 버튼 컴포넌트 만들기

`버튼` 컴포넌트를 이용해서 전역 컴포넌트 생성 방법에 대해 설명한다.

Vuetify 라는 UI Framework를 이용해서 버튼(v-btn)을 생성하였다.

1. 버튼 컴포넌트 생성

`버튼`을 컴포넌트로 만들었다.

$attrs는 부모로 부터 전달받은 props 를 모두 담고 있으며, $listeners는 부모로 부터 전달받은 이벤트 리스너들을 모두 담고 있다.

- [참고] $listeners 관련 문서

// @/components/GlobalButton.vue
<template>
  <v-btn depressed v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </v-btn>
</template>

<script>
export default {
  name: "GlobalButton",
};
</script>

2. 컴포넌트 정의

@/plugins/global-components.js 파일을 만들어서 그 안에 정의한 후 main.js에 등록한다.

파일을 분리하지 않고 처음부터 main.js 에 바로 등록해도 상관 없지만, 전역으로 등록하려는 컴포넌트가 많아 질 경우 main.js 파일이 복잡해 질 수 있으므로 분리하는 것이 좋다.
꼭 plugins 폴더 내에 생성해줄 필요는 없다.

Vue.component

첫번째 인자: 컴포넌트 이름
두번째 인자: 컴포넌트

- [참고] Vue.component 관련 문서

// @/plugins/global-components.js
import Vue from "vue";
import GlobalButton from "@/components/GlobalButton.vue";

Vue.component("g-button", GlobalButton);

main.js 에 플러그인 추가

// main.js
import Vue from "vue";
import App from "./App.vue";
import "@/plugins/global-components";  // 추가

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

3. 컴포넌트 사용

(1)은 전역에 등록했기 때문에 따로 파일 내에서 import 하고 components에 등록할 필요 없이 사용하면 된다.

(2)는 전역 컴포넌트가 아니기 때문에 스크립트 내에서 component 등록을 해줘야 한다.

// App.vue
<template>
  <div id="app">
    <g-button outlined>Global Button</g-button>  // (1)
    <my-button>My Button</my-button>             // (2)
  </div>
</template>

<script>
import MyButton from "@/components/MyButton.vue";

export default {
  name: "App",
  components: { MyButton },
};
</script>

<style>
button {
  margin: 5px;
}
</style>

4. 결과

전체적인 코드 https://codesandbox.io/s/small-architecture-7o4cn?file=/src/App.vue

[참고] https://kr.vuejs.org/v2/guide/components-registration.html

[Vue.js] Vue 관련 문서 모음

S0PH1A — Thu, 27 May 2021 20:03:17 +0900

[Vue.js] Vue 관련 문서 모음

Vue.js (Nuxt.js) 를 공부하는데 도움될 만 한 사이트 모음

[ 공식 사이트 ]

Vue.js 공식 사이트 (한글)
- (2.0) https://kr.vuejs.org/v2/guide/index.html
- (3.0) https://v3.ko.vuejs.org/guide/introduction.html

Vue API (한글)
- https://kr.vuejs.org/v2/api/index.html

Vuex 공식 문서 (한글)
- https://vuex.vuejs.org/kr/

Vue-loader
- https://vue-loader-v14.vuejs.org/kr/ (한글)
- https://vue-loader.vuejs.org/ (영문)

Vue Style-guide (영문)
- https://vuejs.org/v2/style-guide/

Vue Forum (영문)
- https://forum.vuejs.org/

Nuxt.js 공식 사이트 (한글)
- https://ko.nuxtjs.org/

[Vue.js] vscode 에서 vue 디버깅

S0PH1A — Thu, 27 May 2021 11:27:19 +0900

[Vue.js] vscode 에서 vue 디버깅

1. vscode 에서 디버깅 모드 설정

가장 먼저 vscode에서 DEBUG 화면에 들어가서 [톱니바퀴모양]을 누른다.

launch.json 파일이 자동으로 열리게 되며, 여기서 디버깅 모드 설정을 할 수 있다.

vscode debugging 화면

launch.json 파일

// launch.json
{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		// chrome
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome against localhost",
			"url": "http://localhost:8080",
			"webRoot": "${workspaceFolder}/src",
			"sourceMapPathOverrides": {
				"webpack:///src/*.vue": "${webRoot}/*.vue",
				"webpack:///./src/*.ts": "${webRoot}/*.ts",   // typescript 인 경우
				"webpack:///./src/*.js": "${webRoot}/*.js"    // javascript 인 경우
			}
		},
	]
}

type : chrome, firefox 등 테스트할 장소라고 생각하면 쉽다.
name : configurations에 여러 개의 구성이 추가될 수 있는데 이를 구분하기 위한 이름이다.
- 이곳에 이름이 표시된다.

configuation name

url : 웹 서버 URL을 적어주면 된다.
webRoot : 현재 프로젝트 소스 코드 경로이다. 기본적으로 Vue는 `/src` 폴더에 존재한다.
sourceMapPathOverrides : 파일들을 webRoot 경로로 변경해준다.

2. 디버깅 모드 실행

원하는 구성을 선택해 주고, 초록색 ▶️ 버튼을 눌러 실행해준다.

select configuration

3. 서버 실행

마지막으로, 웹을 실행시켜주면 된다.

// nuxt
$ npm run dev

// vue-cli
$ npm run serve

[참고] https://code.visualstudio.com/docs/editor/debugging#_launch-configurations

[참고] https://stackoverflow.com/questions/63972838/debugging-in-vs-code-does-not-work-for-typescript-vue-app

[참고] https://kr.vuejs.org/v2/cookbook/debugging-in-vscode.html

오류

여기까지만 작업을 하면, Nuxt.js 에서는 원하는대로 디버깅이 되었는데,

@vue-cli에서 디버깅을 하려고 하니 breakpoint를 잡았지만 point가 작동되지 않았다.

다음과 같이 추가 작업을 해주면 해결이 가능하다.

1. vue config 파일에 webpack 옵션 추가

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: "source-map"
  }
};

2. launch.json 파일에서 sourceMapPathOverrides 옵션 수정

{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"type": "chrome",
			"request": "launch",
			"name": "Launch Chrome against localhost",
			"url": "http://localhost:8080",
			"webRoot": "${workspaceFolder}/src",
			"sourceMapPathOverrides": {
				"webpack:///./src/*": "${webRoot}/*",
				"webpack:///src/*": "${webRoot}/*",
				"webpack:///*": "*",
				"webpack:///./~/*": "${webRoot}/node_modules/*"
			}
		}
	]
}

[참고] https://github.com/microsoft/vscode-recipes/issues/201

[참고] https://stackoverflow.com/questions/50765353/visual-studio-code-breakpoint-appearing-in-wrong-place/50826961#50826961

[Vue.js] Eslint + Prettier 오류 (⏎·······)

S0PH1A — Wed, 26 May 2021 23:31:41 +0900

[Vue.js] Eslint + Prettier ⏎······· 오류

1. 오류

vue-cli 로 프로젝트를 만들고 실행하니 다음과 같은 줄바꿈을 하라는 오류가 나왔다.

source code 상 오류

console 오류

2. 해결

.eslintrc.js 에 prettier 규칙 추가

[참고] [Prettier] htmlWhitespaceSensitivity 속성

// .eslintrc.js
rules: {
  "prettier/prettier": [
    "error",
    {
      htmlWhitespaceSensitivity: "ignore",
    }
  }
}

그리고, vscode eslint 설정에 autoFixOnSave 옵션을 true로 변경

변경한 파일을 저장할 때마다 자동으로 eslint를 실행시켜 문제(오류)가 있으면 수정후 저장해주는 기능이다.

[참고] https://www.python2.net/questions-536098.htm

[참고] vscode eslint autoFixOnSave 옵션 사용법

// settings.json
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

만약, 자동 저장하는 것이 싫다면?! 수동으로 바꿔주거나, 커맨드(콘솔)창에 lint --fix 명령어를 실행하면 된다.

$ yarn vue-cli-service lint --fix