Claude Code v2.1.88+ 에 추가된 터미널 동반자 시스템

커서 인텔리제이에서도 pet을 쓰는 나는 참을 수가 없었습니다 🍄

Buddy란?

Buddy는 Claude Code에 내장된 다마고치 스타일의 가상 반려동물 시스템!! 터미널 입력창 옆에 ASCII 아트 캐릭터가 말풍선과 함께 상주하며, 대화를 지켜보다가 때때로 혼잣말을 합니다 🍄 캐릭터는 계정 UUID 기반으로 결정론적으로 배정된다 — 직접 고를 수 없고, 계정마다 고정된 버디가.. 있는 것 같아요 🐦 (가챠인 것 같기도 하고 🐛)

어떤 버전부터 되나?

claude --version   # 현재 버전 확인

클로드 코드 들어갔을 때 해당 버전 이상인지 확인할 것! 아니면 펫을 못 본다 🍄

18종의 종족 (Species)

duck     goose    blob     cat      dragon   octopus
owl      penguin  turtle   snail    ghost    axolotl
capybara cactus   robot    rabbit   mushroom chonk

저는 머쉬룸이에요 🍄 처음엔 정이 안 갔는데 나름 귀여운 것 같아요

희귀도 시스템

Shiny Legendary의 확률 = 0.01%

스탯 5종

외형 커스터마이징

• 눈 스타일: 6종
• 모자 타입: 7종 (crown, tophat, propeller, halo, wizard, beanie, tinyduck)
• 모자는 Uncommon 이상에서만 지급됨

사용 방법

기본 명령어

/buddy         # 버디 활성화 / 첫 부화
/buddy pet     # 버디 쓰다듬기 (하트 애니메이션)
/buddy mute    # 버디 숨기기

처음 실행 시

/buddy를 처음 입력하면 부화(hatch) 이벤트가 발생합니다.

• ASCII 스프라이트 애니메이션
• 떠오르는 하트 이펙트
• Claude가 이름과 성격 설명(soul description)을 생성

이름과 성격은 한 번 생성되면 계정에 영구적으로 고정된다고 ... 하는데 🐛

한 번 부화하면 계속 가지고 있어야 하나?

그렇다. 버디는 계정 UUID에 묶인 결정론적 시스템이래요.

요약: 다시 뽑을 수 없다. 운명처럼 정해진 버디와 계속 함께 간다.

아니 희귀도는 다시 뽑게 해줘라 !

참고

• 이 기능은 npm 패키지 소스맵을 통해 유출된 v2.1.88 소스코드에서 발견... 🍳
• 공식 문서에는 아직 미등재 상태고, 추후에 바뀔 수도 있을 것 같습니다용 🍄
• 터미널에서 움직이고, 쓰다듬어주면 하트 뿌리는 게 좀 귀엽습니닼ㅋㅋㅋ
• 클로드 코드 사용하시는 분들은 한 번씩 해보시는 것도 재밌을 것 같아유

많은 거 말고. 그냥 내가 필요한데 돈 내고 구독하고 싶지 않은 것들 위주로 ...

일단은 TODO list부터 만들어 손 풀기를 하기로 했다. 이번엔 AI 이미지도 넣어서, 내가 가진 todo를 쌓아서 일련의 기록으로 만들 수 있게끔 하는 계획만 잡고 있다. 디자인은 툴을 최대한 활용해서 할 예정이고, 내가 많이 사용할 법하게 만들 예정.

노션보다 자유도를 줄이는 대신 쉽게 계획할 수 있게 할 건데, 아직 프로젝트 이름을 못 정했다 🐴

야금야금 만들어야지 🥳

• 아무것도 모른 채로 aws의 s3
• 아무것도 모른 채로 aws의 iam 사용
• 아무것도 모른 채로 aws의 secrets manager 사용 . . .

쉬운 것들만 사용해오며 안 보이는 척... 하고 있었던 aws에 대해 알아보기로 했습니다... 😶

AWS

(멋드러진 버전) AWS는 글로벌 데이터 센터를 기반으로 한 클라우드 서비스로, IaaS, PaaS, SaaS를 포함합니다. 핵심 요소로 리전(Region: 지리적 위치별 데이터 센터 그룹, 현재 30개 이상), 가용 영역(AZ: 리전 내 독립된 데이터 센터, 3~4개), 엣지 로케이션(콘텐츠 전송 최적화)이 있습니다. Well-Architected Framework는 운영 우수성, 보안, 신뢰성, 성능 효율성, 비용 최적화, 지속 가능성 6개 기둥으로 시스템 설계를 안내합니다.

(쉬운 설명 버전) AWS는 ‘집 렌트’처럼 서버나 저장소를 빌려주는 서비스입니다. 직접 컴퓨터 사지 말고 필요할 때 쓰고 비용만 내며, 물리 서버 대신 인터넷으로 연결된 가상 공간을 씁니다. 핵심 구조 (집 비유)

• 리전(Region): 서울, 부산처럼 지역별 데이터 센터 묶음. 가까운 곳 선택해 지연 줄임.
• 가용 영역(AZ): 한 리전 안 ‘아파트 동’처럼 여러 건물. 한 동 고장 나도 다른 동 쓸 수 있음.
• 엣지 로케이션: 유튜브처럼 가까운 서버에서 영상 빠르게 보여줌.

클라우드란?

클라우드 컴퓨팅은 인터넷을 통해 온디맨드(on-demand)로 컴퓨팅 자원(서버, 스토리지, 데이터베이스 등)을 제공하고 사용량만큼 비용을 지불하는 기술

이번엔 해당 기능이 존재하고, 이번 글에서는 이 기능은 뭐다 정도까지만 알아볼 생각입니다... 🐴

Aurora and RDS

Aurora란?

Amazon Aurora는 RDS 패밀리 안에 있는 “AWS가 만든(MySQL/PostgreSQL 호환) 고성능 관계형 DB 엔진

RDS란?

관계형 데이터베이스(Relational DB)를 AWS가 대신 운영해주는 관리형 서비스

AWS의 고성능 관리형 관계형 데이터베이스 서비스로 MySQL과 PostgreSQL 호환. 서버리스 옵션으로 자동 스케일링, 읽기 복제본 최대 15개까지 지원하며 성능이 일반 RDS보다 5배 빠름. 글로벌 데이터베이스 기능으로 리전 간 데이터 동기화 가능.

용도: 트랜잭션 워크로드, 웹 앱 백엔드 DB.

“RDS”는 서비스 이름(관리형 DB 플랫폼)이고, “Aurora”는 그 안에서 선택할 수 있는 DB 엔진 중 하나(특별히 AWS가 만든 엔진)

EC2

EC2란?

AWS에서 “필요한 만큼 빌려 쓰는 가상 서버(컴퓨팅 용량)”입니다. 원하는 OS/스펙으로 인스턴스를 띄우고, 네트워크/보안그룹/디스크(EBS 등)를 붙여서 웹서버, 배치서버, 게임서버 등 범용으로 씁니다.

핵심 용어

• 인스턴스(Instance): EC2에서 실행되는 가상 머신 1대
• 보안 그룹(Security Group): 인바운드/아웃바운드 허용 규칙을 정하는 “가상 방화벽”
• EBS(디스크): 서버의 “영구 저장 디스크” 같은 개념으로, 인스턴스 스토어(임시)와 구별!

CloudFront (CDN/캐시)

CloudFront란?

CDN으로, 전 세계 엣지 로케이션에서 콘텐츠를 캐시해서 빠르게 제공하도록 돕습니다.캐시에 없으면 오리진(origin: S3나 EC2 같은 원본 서버)에서 가져와 응답하고, 이후 요청은 캐시로 더 빠르게 처리하는 구조가 기본입니다. 핵심 용어

• Origin: 원본이 있는 곳(S3 버킷, EC2 웹서버 등)
• Cache: 자주 요청되는 결과를 가까운 곳에 저장해 속도를 올리는 방식

CloudWatch

CloudWatch란?

CloudWatch는 AWS 리소스와 애플리케이션의 지표(metrics)와 로그(logs)를 모으고, 알람을 걸어 상태를 관찰하는 모니터링 서비스입니다.즉 “서버 CPU 사용량”, “에러 로그”, “요청 수 급증” 같은 걸 보고 알림을 받는 곳

AWS Global View

AWS Global View란?

모든 AWS 리전(Region)의 EC2/VPC 리소스를 한 곳에서 요약·검색·탐색할 수 있게 해줍니다. AWS는 기본 콘솔이 리전별로 나뉘어 있어서, 여러 리전 쓰는 사람이 “전체 리소스 파악”이 불편하여 한 번에 확인할 수 있게 도와줍니다...

Route 53

DNS Name Resolution 흐름

1. 브라우저 주소창에 example.com 입력
2. 브라우저/OS가 DNS에게 “example.com 어디야?” 물어봄
3. DNS가 “이 IP로 가” 또는 “이 서버로 가”라고 답함
4. 브라우저가 그 주소로 접속해서 웹페이지를 받음

Route53이란?

Route 53은 AWS가 제공하는 DNS 관리 서비스입니다.

⁇ 근데 왜 route 53일까?? DNS는 관례적으로(표준적으로) “목적지 포트는 53" 라고 정해져있다고 함니다. 🐴 마치... 프론트는 localhost3000... 이런 것 처럼 ... 거기서 유래된 것 같습니다...

IAM

IAM 이란?

IAM은 AWS 리소스에 대한 접근을 안전하게 제어하는 서비스로, 누가(인증) 무엇을(권한) 할 수 있는지 정의합니다.유저/역할(role)/정책(policy)을 조합해서 최소 권한으로 운영하는 게 핵심입니다.

S3

파일 저장소: 객체 스토리지, 원격 에셋

VPC (내 AWS 전용 네트워크)

VPC 란?

VPC(Virtual Private Cloud)는 사용자가 정의한 IP 범위로 논리적으로 격리된 네트워크를 만듭니다. 서브넷, 라우팅 테이블, 인터넷 게이트웨이 등을 설정해 보안과 네트워크를 제어합니다. EC2나 다른 리소스가 이 안에 배치됩니다.

즉, EC2보다 VPC가 더 큰 개념이며, AWS에서 가상의 사설 네트워크 공간을 의미합니다.

Lambda (서버리스 실행)

Lambda 란?

Lambda는 서버를 직접 만들고 관리하지 않고도 코드를 실행할 수 있는 “이벤트 기반 컴퓨트 서비스”입니다.
기본 단위는 “함수(function)”이고, 어떤 이벤트(예: HTTP 요청, S3 파일 업로드 등)가 들어오면 그 함수를 실행하는 방식으로 애플리케이션을 구성합니다.
또한 Lambda는 권한(실행 역할/permission), 이벤트 소스(trigger), 실행 환경(runtime) 같은 개념이 같이 따라오며, 로깅/모니터링은 CloudWatch와 함께 보는 경우가 많습니다.

• Serverless Serverless는 “서버가 없다”가 아니라 “서버 운영(패치, 스케일링, 프로비저닝)을 사용자가 직접 하지 않는다”에 가깝고, 코드는 필요할 때 실행되며 트래픽에 맞춰 자동으로 확장되는 모델을 말합니다

항상 켜있지 않고, 트리거시 자동 실행되며 비용은 실행 시간만큼 청구된다.

Amplify

Amplify 란?

웹/모바일 앱 개발·배포를 빠르게 하도록 돕는 도구/서비스 모음으로, 프론트엔드 호스팅과 백엔드 기능(Auth/Data/Storage 등) 연결을 쉽게 하는 방향으로 설계되어 있습니다.
즉 “프론트 개발자가 클라우드 지식이 많지 않아도” 인증/데이터/API/스토리지/배포 흐름을 빠르게 구성하는 용도로 자주 사용됩니다.

Secrets Manager

secretes manager란?

Secrets Manager를 사용하여 데이터베이스 자격 증명, API 키 및 OAuth 토큰 같은 보안 암호를 저장, 교체 및 모니터링하고 이러한 보안 암호에 대한 액세스를 제어할 수 있습니다. 백엔드에서 시크릿매니저를 바라보게 하면, 코드딴에 암호를 남길 필요가 없어 안전합니다.

Security Hub CSPM

Security Hub CSPM 란?

클라우드 설정을 실시간으로 스캔해서 보안 문제나 규정 위반을 찾아줘요. 마치 집 안을 자동으로 청소하고 이상 징후를 알려주는 로봇 청소기처럼 작동합니다.

Certificate Manager

Certificate Manager 란?

HTTPS로 사이트를 잠그는 인증서를 무료로 만들어주고, 만료되면 자동 갱신해줘요. 수동으로 인증서 관리할 때 생기는 골치 아픈 일을 대신 처리하는 간편 도우미입니다.

. . . 기본 개념 0.1 들어갔으니 다음은 EC2나 하나를 더 심도 있게 돌아오려고 한다!

지금 모습

한 번 깃꾸를 해서 있을 건 있는 듯한 모습...

깃애니멀은 살리고 싶어서 계속 하기로 했다!

1. 깃 애니멀 깃 애니멀 링크 커밋 30번을 하면 펫 입양이 가능 나는 꽤나 희귀 동물인 코틀린 돼지가 있다! '🔽'v

2. 뱃지 뱃지 링크

기존에 쓰던 뱃지들은 사실 좀 큼지막한 녀석들인데, 채울 게 없지만 뭔가 길게 늘여져있고 싶은 욕망으로....

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=white)

이런 식으로 style=for-the-badge를 써서 커다랗게 해놨는데,

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=white)

이번엔 조금 작게 변경하고, contact를 추가하기로 했다. 이때는 뱃지가 아니라 이미지 태그와 a 태그를 같이 쓰기로 했다

<div>
  <a href="mailto:내 메일 쓰기~">
    <img src="https://img.shields.io/badge/gmail-EA4335?style=flat-square&logo=gmail&logoColor=white" />
  </a>
  <a href="내 벨로그 주소 쓰기~">
    <img src="https://img.shields.io/badge/velog-20C997?style=flat-square&logo=velog&logoColor=white" />
  </a>
</div>

주소 없이 이렇게 나올 예정 '>'b

잔디도 꾸밀까 하다가............. 스탯도 넣을까 하다가 그냥 뒀다 ...... 깃꾸는 한계가 있는 듯 하다.

하지만? 필요한 사람도 있을 수 있으니 찾아본 것들...

나는 심심해서 포켓몬 세마리도 넣어줬다

4. 헤더 https://github.com/kyechan99/capsule-render 다양한 테마랑 다양한 커스텀 가능해서 쓰면 예쁠 듯 하다

5. 방문자 수 표기 https://myhits.vercel.app/ko

프로필은 뭘로 할까 하다가

좋아하는 돌로 바꿔줌 ^ㅁ^b

2025년은 1800개 정도로 마무리한다... 2026년엔 2000개 찍어보고 싶고, 퍼블릭에 더 많이 올려서 내 농장도 다른 동물들이 많아졌음 한다. 🐴

프론트엔드 에러 모니터링

프론트엔드에서 에러 관리하는 건 중요하다. 아니다. 에러는 어디나 중요한데, 오늘은 프론트엔드에서 에러 관리를 어떻게 할지!!! 알아보자 💡💡💡

프론트엔드의 에러 => 사용자가 직접적으로 느낀다. 에러 처리가 제대로 되어있지 않을 때 : 웹사이트가 생각대로 안 움직여서 사용자 이탈

그래서 프론트엔드는 에러 처리 빠릿빠릿하게 해줘야 한다.

뭔가 서버에서 파일이 커서 이거 엔티티에 저장 안 할 거예요!!!!!!!! 하면 -> 파일이 크대요 다른 파일 올려줘요 .... 라고 사용자한테 안내해줘야 한다. 아니면 영원히 멈춰있어서 사용자가 ? 🤷‍♀️ 뭐지 왜 안 돼? 하는 상황 발생. 사용자가 기분이 안 좋으면 3초만 밀려도 그냥 꺼버릴 것이다.

근데 이 에러를 잡는 건 너무 힘들다. 브라우저도 다 다를 거잖아 .... 😂😂

하지만 그래서 등장한 에러 모니터링 도구가 꽤~ 많다.

Sentry, Bugsnag, LogRocket, New Relic 같은 도구가 있다고 하는데,

오늘은 그 중에서도 Sentry를 소개해볼까 한다.

Sentry

Sentry는 실시간으로 에러를 추적하고, 바로바로 알려주는 도구다. 프론트엔드에서 일어나는 에러를 자동으로 잡아내고, 어떤 에러가 어디서 발생했는지 정확하게 알려줘서 개발자가 빠르게 문제를 해결할 수 있게 해준다!!!!!! 예를 들어, 버튼 클릭했을 때 발생한 오류나, API 호출 실패 같은 걸 실시간으로 모니터링 가능 🐞

Sentry 사이트 들어가서 깃허브로 회원 가입 진행하고 -> 해당 프로젝트에 맞는 기술 + 설정 몇 개 간단하게 체크하면 dsn이 나온다.

홈페이지에 진짜 자세하고, 아름답고, 예쁘게 나와있다..... 최근에 본 라이브러리 중에 제일 상호작용이 아름다움 .......

npm이나 yarn 으로 센트리 추가하는 것부터, 초기 세팅까지 초보자도 쉽게 적용할 수 있게 되어있다! 에러를 일부러 만드는 버튼 하나 만들고 테스트 해보는 것도 좋은 경험일 듯 💪

로그 데이터 수집

콘솔 로그, API 로그, 서버 로그, 클라이언트 로그 등 다양한 방식이 있다!

사실 이거저거 다 사용하는 입장에서 ... 개발할 때 테스트 하면서 로그 보고 알럿 띄워주는 경우가 많긴 한 것 같다. 이때는 알려줘야 좋겠다 -> 하면 바로바로 만드는 것도 방법이 될 수 있다. (아니면 진짜 높은 확률로 까먹음)

오늘의 정리 끝!

리액트에서 쓸 수 있는 라이브러리를 최대한 많이 써보려고 노력 중이다.

회원가입 / 로그인 / 프로필 수정 => 간단한 사이트에 적용할 수 있는 라이브러리는 뭐가 있을지 살펴보기

디자인 기획부터 하고 시작했으면 좋았겠지만 시간이 부족했다. 🐱‍🐉다 그러는 거잖아요.

이번엔 색 정도의 컨셉을 가지고 꾸려나갈 예정이기 때문에 디자인 관련은 스킵하고 썼던 것과 고려했던 것 등등 말해보려고 한다.

1) 스키마 유효성 검사_ zod

Zod

가장 최근에 알게 된 라이브러리로 스키마 유효성 검사 라이브러리다

유사품으로 yup 가 있다.

솔직히 말하면 내가 보기엔 둘 다 아주 비슷해 보였는데, yup이 먼저 있었고 -> 이후 zod가 나왔다고 해서 최신 라이브러리를 쓰고 싶어서 zod를 선택했다.

일단 좋은 점 에러 메시지가 출력이 기가 막혀서 좋았다.

라이브러리를 안 쓰고 프로젝트를 한다든가 하는 수가 없다면 계속 쓰고 싶다. ts에 호환도 잘 되는 것 같다.

2) zustand, tanstackQuery(reactQuery)_상태 관리

이번엔 주스탠드랑 탄스택을 섞어서 썼는데, 사실 둘을 언제 어디서 써야 하는지 감이 전~혀 안 잡혔다. 주스탠드로 싹 만들어놓고 몇 가지만 탄스택으로 리팩토링 했을 정도.

주스탠드의 장점은 진짜. 쉬운 거. 나는 프롭스 드릴링을 정말 싫어하는데 상태 관리 라이브러리르 좋아하냐고 하면 그렇지도 않음 .... 👀 쪼오끔 헷갈리잖아요 ...

그래도 RTK 에서 넘어가면 주스탠드는 선녀다. F5 하면 싹~ 날라가지만 ... 이번엔 persist를 안 쓰려고 이거저거 했는데, 사실 과용이 된 것 같아서 고민. 나중에 리팩토링 하면 몇 가지는 삭제하지 않을까...

(*홈페이지 왕 귀여움...)

탄스택 쿼리는 원래 내가 워낙 좋아해서... 훅으로 만들고 쓰긴 썼는데 또 mutate 쓸 땐 살짝 버벅인다. 이상하게 탄스택 쿼리 닥스는 뭔가 많이 써있는데 진짜 뭔가 이상함......... 뭔가 불편한데 이유를 찾을 수가 없다. 닥스 고마운데 묘하게 딱 긁어주는 게 없다.

솔직히 말하면 클로드한테 가서 useMutation 예시 코드 달라고 하는 게 쉬울 지경... 이건 내가 보라고 긁은 클로드 예시 코드. 개인적으로 이런 느낌의 탄스택 쿼리 코드를 좋아하는데 괜찮을라나 모르겠다.

// API 호출 함수
const postTodo = async (newTodo: Todo) => {
  const response = await fetch('https://api.example.com/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

// 컴포넌트 내부
import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoComponent() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: (data) => {
      // 성공 시 todos 쿼리 무효화
      queryClient.invalidateQueries({ queryKey: ['todos'] });
      console.log('Todo created:', data);
    },
    onError: (error) => {
      // 에러 처리
      console.error('Error creating todo:', error);
    },
    onSettled: () => {
      // 성공/실패 상관없이 실행
      console.log('Mutation completed');
    }
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const newTodo = {
      id: Date.now(),
      title: 'New Todo',
      completed: false
    };

    mutation.mutate(newTodo);
  };

  return (
    <div>
      <button 
        onClick={handleSubmit}
        disabled={mutation.isPending}
      >
        {mutation.isPending ? 'Creating...' : 'Create Todo'}
      </button>

      {mutation.isError && (
        <div>An error occurred: {mutation.error.message}</div>
      )}
    </div>
  );
}

export default TodoComponent;

3) tailwind

테일윈드는 그냥 마음의 고향이다 ...

제출 과제가 아니었으면 온갖 곳에 animate-spin 넣고 싶었는데 참았다. 라인이 좀 지저분해지긴 하는데 빠르게 꾸미기 좋다. 시간 부족하면 항상 테일 윈드...

4) react-spinners

파일 크기 때문에 종종 오류가 나는 것 같길래 막아두긴 했는데, 혹시 몰라서 로딩 스피너 적용 ... uiux 필수 같다. 시간이 많으면 만드는 것도 좋지만 시간 부족하면 항상 리액트 스피너~~!

5) 스윗알럿2

스윗알럿2 ... 귀여움

토스티파이를 쓰려다가 일단 스윗알럿 적용. 둘 다 그렇게 어렵진 않은데 스윗알럿2가 정말 쉽다. 프로바이더도 안 써도 되니까...

alert 쓰고 싶을 때 Swal.fire... 어쩌고 하면 되는데, 시간이 부족하면 항상 스윗알럿2 ...

전반적으로 시간이 부족해서 쓴 라이브러리가 많지만, 그건... 즉 쉽다는 것 ....................... 최고의 장점이라고 생각한다...

끝~!

1. 문법 : 함수 선언 방식

일반 함수

function sayHello() {
  return "Hello, world!";
}

function + 함수명 으로 시작한다.

화살표 함수

const sayHello = () => "Hello, world!";

function 대신 함수명과 => 기호를 써서 쓴다. 일반적으로 한 줄 정도라면 {} 나 return은 생략 가능 OK

2. this 키워드 차이

여기 별표 다섯개 🌟⭐🌟⭐⭐🌞🌞🌟⭐

const person = {
    name: "철수",
    //일반 함수
    sayHi: function() {
        console.log(`${this.name}가 인사합니다!`);
    },
    //화살표 함수
    sayHiArrow: () => {
        console.log(`${this.name}가 인사합니다!`);
    }
};

person.sayHi();        // 출력: "철수가 인사합니다!"
person.sayHiArrow();   // 출력: "undefined가 인사합니다!"

this 는 좀 재밌는 친구다. 일반 함수에서의 this는 약간 상식선에서 행동한다고 생각하면 좋다. 대충... 되겠지? 될 것 같은데? 하고, 상단의 코드를 보면 대충 철수가 나올 것 같다 싶을 때 철수가 나온다. 이거는 안 나오려나..? 하면 보통 undefined가 출력된다.

일반 함수에서의 this는 함수가 호출되는 시점에서 정의된다. 상황에 따르게 다르게 동작한다.

화살표 함수에서는 예외없이 함수의 상위 스코프를 가리킨다. (*상단 예시에서 또한 window.name or global.name 이어서 대부분 undefined 출력)

2-1. 클래스와 this

class Superhero {
    constructor(name) {
        this.name = name;
    }

    // 일반 함수를 메서드로 사용
    introduceSelf() {
        console.log(`안녕하세요, 저는 ${this.name}입니다!`);
    }

    // 화살표 함수를 클래스 필드로 사용
    flyAway = () => {
        console.log(`${this.name}이 날아갑니다!`);
    }
}

const superman = new Superhero("슈퍼맨");
superman.introduceSelf();  // 출력: "안녕하세요, 저는 슈퍼맨입니다!"
superman.flyAway();        // 출력: "슈퍼맨이 날아갑니다!"

const introduce = superman.introduceSelf;
const fly = superman.flyAway;

introduce();  // 출력: "안녕하세요, 저는 undefined입니다!"
fly();        // 출력: "슈퍼맨이 날아갑니다!"

따로 빼내서 호출하면 일반 함수의 경우 this가 undefined가 되는 모습을 확인할 수 있다. 화살표 함수는 멀쩡하다. (물론 화살표 함수의 경우에도 프로토 타입 매서드로 직접 정의하면 undefined가 나올 수도 있다고 한다.)

...2편에 계속 👀

작성 완료!

면접 강의)

과거의 행동과 대치되는 행동을 했을 때, "왜" 라는 질문으로 탐침을 한다.

실제로 어떤 경험을 하여, "무엇을" 문제 해결 과정에서는, "왜", "어떻게" 결과를 통해 배운 것은, "어디서"

=> 정말로 이 지원자가 실제 경험을 했는가? 를 탐색

모르는 질문이 나올 경우 신중하게 접근

1) 생각할 시간이 필요할 경우: 잠시 생각하고 말씀드려도 괜찮을까요? 2) 그냥 모르겠는 경우 2-1) (솔직함) 모르겠다고 답변 2-2) 최대한 답변 이후 : 제가 아는 대로 최대한 답변했지만, ........

면접 이후 키워드라도 꼭 기록하기 (*차후 면접에서도 나올 확률이 높음)

오늘의 후기

1. 모니터가 왕 커져서 어색하다!!!!!!!!!!!

리액트 아이콘 -> 디자이너님 메이드 뽀짝 아이콘 바꾸기

색은 또 따로 바꿔야 한다. 아니면 activeIcon으로 2개 해야 할 듯 하다.

*오늘의 오류 컴포넌트의 import 오류 Default Export vs Named Export

Default Export

// 컴포넌트 파일
const MyComponent = () => { /* ... */ };
export default MyComponent;

import MyComponent from './MyComponent';

vs

Named Export

// 컴포넌트 파일
export const MyComponent = () => { /* ... */ };

 import { MyComponent } from './MyComponent';

디폴트로 내보낼 때는 중괄호 없이! 그냥 맨 몸... 내보내는 게 많을 경우 중괄호 있게!

과연 프로젝트 관련해서 피드백이 많은데, 팀플 2개 넣었다가 그냥 팀프로젝트 1개, 개인 프로젝트 1개로 일단 바꾸는 중이다..!!

피곤하군 . !!!

인텔리픽 제출 완료~!

타입스크립트를 하나도 몰랐을 때, 이게 머야...... ....... ...라고 힘들었던 것과 달리 어느 정도 쪼오오끔 알게 되다 보니 끄덕끄덕 하게 된다...!!

1-5까지 완료

챗봇이 없어서 좀 아쉬워하는 중이라 관련 라이브러리, sdk 찾는 중인데 쓰기가 제법 까다롭다.

1. 실시간 유저 채팅 기능 유지 + ai 챗봇을 한 번에 가져가는 게 쉽지는 않아서 계속 고민해봐야 할 듯 하다.

GPT 활용 강의 완료~!

프로젝트 정리 중 ... 정리는 1차 완료!

이력서 사부작사부작 쓰는 중이다.

노션에 정리 중 ....

1. 나의 강점이 무엇인지
2. 나의 약점이 무엇인지

를 생각해보는 시간을 가졌다 ...

약점을 강점으로 전환할 수 있는 팁도 ...

이것과 함께 이제 내일 내가 뭘 했는지 코드 보면서 좀 전환하는 시간을 가지기로 했다.

벌써 까먹기 시작...

노션에 야금야금 정리해둔 게 있어서 거기 보충해서 정리하고, 코드 뜯어보면서 회고해보기로 한다...

1. 이력서 기초 다지기
2. 프로젝트 내용 완성
3. 자기소개서 작성
4. 이력서 다듬기
5. 개발자 취업 도전

=> 왜 지금 써야 하는가? 기억이 생생하다 => 빠른 시작은 빠른 취업과 연관되어 있음

나의 경험을 바탕으로 무엇을 할 수 있는지, 했던 일을 통해 문제 해결 역량을 보여주기 구체적인 경험의 사례와 무엇을 할 수 있는지 기재하기

--

1. 재료 수집하기

   e.g. 꾸준히 쓴 벨로그 글, 깃허브 커밋, 직접 찍은 시연 영상, 팀 회의록, gif, 팀 회의록 , 테스트 코드 커버리지, discord, 슬랙 채팅 메시지, 라이트 하우스 점수

=> "일단 모으기!"

2. 재료 분류하기 a. 간단한 구현 (서브 재료) b. 트러블 슈팅 (메인 재료)

   => 기능/개선 결과별 구분 혹은 페이지별 구분

3. 재료 다듬기

골든 서클의 핵심은 문제 정의에 대해 타인을 공감시키고 해결 방안에 대해 타당하다고 타인을 설득하는 것 a. 목적 : 구현 이유 b. 과정 : 목적 달성을 위한 구현 c. 결과 : 행동의 결과가 되는 성과

일반적으로 역순으로 결과 -> 과정 -> 목적으로 말을 한다.

(골든 서클 적용 x)
웹소켓을 활용한 실시간 채팅 서비스 구현
-유저간 소통을 위해 구현

왜, 무엇을, 어떻게 방향성을 넣는 방법

(골든 서클 적용 O)
유저간 소통을 위한 실시간 채팅 서비스 구현
-양방향 통신을 지원하는 웹소켓 활용
-텍스트 형태의 대화를 서버에 저장하여 확인할 수 있도록 채팅 방식 적합

간단한 구현, 기능을 수정했던 경험 특정 기능을 구현 라이브러리를 사용하여 구현

트러블 슈팅이나 기능, 성능을 개선했던 경험

1. 목적 : "왜" 문제라고 생각했는지, 가장 먼저 해결해야 한다고 생각했던 이유
2. 과정 : "어떻게" 구현했는지
3. 결과 : "무엇을" 구현했는지

--

이력서 중 가장 중요한 부분은 "설득력 있는 트러블 슈팅" "수치/정량화된 성과" "기술적 의사 결정"

=> 이력서는 구문 다이어트를 하여 가독성을 높이기 나는, 저는, 수동체, 구어체, 하나의 문장에 하나의 내용만, 시니어들이 알 수 있는 것이라면 삭제하기 "그리고 두괄식 제목 선정"

이력서 마무리... 경력과 연결 지어 하기

개발자 역량과 연관 지을 수 있는 부분만 간략히 작성. 배경 지식 / 특정 지식

=> 모든 항목이 개발자로서의 역량을 어필하는지 확인

이력서 취업 노트 작성 중 .... !

배포 하루 전 시연 영상 찍으시다가 와장창 오류 발견하셨다. "내 파트에서"

진짜 심장이 너무 떨렸는데 이게 최종 발표날이 아니라는 것에 지금은 감사.

대신 시연 영상이 너무 늦게 되어 너무 죄송했다ㅠㅠㅠㅠㅠㅠ.. 다시는 이런 일이 없도록 하게 하기 위해서 쓰는 오늘의 트러블 슈팅

실시간 채팅은 금방 기능을 완료 했는데, 리팩토링한다고 수를 쓰다가 난리남.

트러블 슈팅 1) 리팩토링 중 오판

 {
          event: '*',
          schema: 'public',
          table: 'chat',
          filter: `room_id=eq.${selectedChatRoom?.room_id}`
        },

채팅 최적화를 위해서 해당 event 부분을 'INSERT'로 바꾸었다. 우리 채팅의 경우 수정 / 삭제 기능이 없어서 썼던 것. 근데, 이렇게 되니 상대가 insert 할 때 추적을 못한다^^ ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 내 채팅은 업로드 되는데, 상대가 채팅을 치면 보이지가 않는 것 .... .....

다시 event를 * 로 바꾸었다.

트러블 슈팅 2) 알럿 .... ㅋㅋㅋㅋㅋㅋ

알럿을 제작해서 쓸 일이 있어서, div로 열심히 꼼지락꼼지락 만졌다 ....

그래서 alert, sweetalert2 대신 컴포넌트로 제작해서 만졌는데, 그 탓에 "어... 얘를 어떻게 호출하지 🧐" 하다가 너무 쉽게 접근해서 망했다.

트루 값으로 변하면 알럿 호출하려고 했는데 ... ... ...

=> 트루 일 때 알럿이 생기다 보니 맨 마지막으로 item 값이 전송되는 거 같다. => 맵 안에서 함수 호출하다 보니 함수 2010191개 됨

왠지~! 그림자 넣어놨는데 그림자가 왕 깊어 보이더라...

dev에서는 잘 됐는데, 이게 배포에서 소중한 모래성 무너졌다....

=> 알럿 호출을 맵 밖으로 빼내고, item.id 전송 받기로 했다! 해당 아이디는 넘버 값이어서 나는 초기값은 0으로 설정. item은 find해서 id랑 맞는 아이템 값을 쓰기로 함

뭔가뭔가 이상한 친구가 오늘 앞길을 막았다.

바로바로

    else if (event.key === 'ArrowDown') {
      event.preventDefault();
      setActiveIndex((prev) => (prev >= response.length - 1 ? prev : prev + 1));
    }

키보드 아래로 내려갔을 때 이 친구였다.

문제는 맨 처음 화살표 다운을 누르면 두 번 함수가 실행 되어 두 번 내려간다는 것.

근데 진짜 웃긴 건 해결한 지금까지도 이유가 명확하지 않다...^^ 좀 더 탐구해야 함

의혹 1) 인풋에서 div로 내려갈 때 리랜더링이 발생해서 의혹 2) onChange 랑 onKeyDown 이랑 같이 써서

의문1) 영어일 땐 안그럼 의문2) 마우스 커서 위치를 바꾸면 됨

왜인지는 진짜 모르겠는데 일단 마우스 커서 위치를 바꾸면 된다는 것을 착안해서 해결 완료했다.

해결방법

setTimeout(() => {
        if (inputRef.current) {
          inputRef.current.blur();
          inputRef.current.focus();
        }
      }, 100);

나는 지금 디바운스 걸어놓고 -> 서버에서 데이터 찾은 다음(response 있을 경우) -> 그것을 화살표 아래 방향으로 내려가는 중이니까, 서버에서 데이터를 담았을 때 이걸 실행시켜줬다.

ref에 담은 포커스를 없애면... 이상하게 된다.... ㅋㅋㅋㅋㅋㅋㅋ 진짜 이걸로 하루종일 괴로워한 듯 하다.

그 외에도 뽀시락뽀시락 알럿 div 제작, 약간의 리팩토링,

헤더 트러블 슈팅

디테일 페이지에서도 헤더의 색을 변하게 하기 위해서

    const targetNavIndex = HeaderNavPaths.findIndex((item) => {
      if (item === '/') {
        return pathName === '/';
      } else {
        return pathName.startsWith(item);
      }
    });

    setCurrentIndex(targetNavIndex);
    setActiveIndex(targetNavIndex);

셋 엑티브 인덱스를 스타트위드 값을 줘서 먹여놨는데, 문제는 하단

if (index === currentIndex) return;

인덱스 === currentㅑㅜㅇㄷㅌ 일 떄 return을 시켜놔서 안타깝게도 디테일 페이지에서 전체 보드로 못 넘어가는 사태 발 ... .. 생 .... ...

if 식 안에 또 다른 조건문을 주기로 했다. 이건 쉽게쉽게 라우터 푸쉬로 처리.