koo-rogie.log

2026년 7월, 프론트엔드 업데이트 모음

Thu, 23 Jul 2026 13:28:12 GMT

1. TypeScript 7.0 (2026.7.8)

1-1. 먼저, "컴파일러"가 뭘 하는 건지부터

우리가 .tsx 파일에 타입을 붙여서 코드를 짜면, 그걸 실제로 검사하고 브라우저가 이해할 수 있는 JS로 바꿔주는 프로그램이 필요해요. 이게 TypeScript 컴파일러(tsc) 예요. 예를 들어 const age: number = "스물" 처럼 잘못 쓰면, 이 컴파일러가 "어? number라면서 문자열 넣었네" 하고 에러를 잡아주는 거죠.

문제는 프로젝트가 커질수록 이 검사 작업이 점점 오래 걸린다는 거예요. 큰 회사 프로젝트에서는 코드 한 줄 고치고 저장했는데 에디터가 빨간 줄(에러) 표시해주는 데까지 몇십 초씩 걸리는 경우도 있었어요.

1-2. 핵심 한 줄

Microsoft가 이 컴파일러 자체를 완전히 다른 언어(Go)로 새로 만들어서 훨씬 빠르게 만들었어요.

1-3. 왜 굳이 언어를 바꿨나

지금까지 TypeScript 컴파일러는 원래 TypeScript/JavaScript로 짜여져 있었고, 그걸 Node.js 위에서 돌리는 구조였어요. 비유하자면 "번역기를 만드는데, 그 번역기 자체를 느린 언어로 짜놓은" 셈이죠. 이 구조에는 세 가지 태생적 한계가 있었어요.

한 번에 파일 하나씩만 검사 가능 (싱글 스레드) — 파일이 100개면 순서대로 하나씩 봐야 함
처음 실행할 때 워밍업 시간이 필요함 (JIT 컴파일 방식이라 그럼)
메모리 정리(가비지 컬렉션) 방식이 코드 구조(트리 형태)랑 잘 안 맞음

Go라는 언어로 완전히 옮기면서 이 세 가지가 한 번에 해결됐어요. 특히 Go는 여러 파일을 동시에 검사할 수 있게 해줘서, 코어가 여러 개인 컴퓨터의 성능을 제대로 활용할 수 있게 됐습니다.

잠깐, Go가 뭐예요?

Go(Golang)는 구글이 만든 프로그래밍 언어예요.

JavaScript/TypeScript처럼 브라우저에서 돌아가는 언어가 아니라, C++이나 Rust처럼 컴퓨터가 바로 실행할 수 있는 네이티브 코드로 컴파일되는 언어예요.

실행 속도가 빠르고, 특히 여러 작업을 동시에 처리하는(동시성) 데 강한 것으로 유명해서 도커(Docker), 쿠버네티스(Kubernetes) 같은 인프라 도구들도 Go로 만들어졌어요.

한마디로 "웹 프론트엔드용 언어"가 아니라 "빠르고 튼튼한 시스템/백엔드 도구를 만들 때 쓰는 언어"라고 생각하면 됩니다.

오해하기 쉬운 부분: 이건 TypeScript를 처음부터 다시 설계한 게 아니에요. 로직과 검사 규칙은 그대로 옮기기만 했어요(포팅). 그래서 예전 버전에서 통과하던 코드는 새 버전에서도 똑같이 통과합니다. "언어(도구)만 바뀌고 규칙은 그대로"라고 생각하면 됩니다.

1-4. 체감 성능 (숫자로 보면 확 와닿아요)

!7-0-speedup-chart-2.png

항목	TypeScript 6	TypeScript 7	얼마나 빨라졌나
vscode	125.7s	10.6s	11.9x
sentry	139.8s	15.7s	8.9x
bluesky	24.3s	2.8s	8.7x
playwright	12.8s	1.47s	8.7x
tldraw	11.2s	1.46s	7.7x

쉽게 말하면, 예전엔 커피 한 잔 타올 시간(2분)에 될까 말까 하던 검사가 이제는 숨 한 번 쉬는 사이에 끝난다는 거예요.

!7-0-mem-chart-2.png

Codebase	TypeScript 6	TypeScript 7	Memory Delta
vscode	5.2GB	4.2GB	-18%
sentry	4.9GB	4.6GB	-6%
bluesky	1.8GB	1.3GB	-26%
playwright	1.0GB	0.9GB	-11%
tldraw	0.6GB	0.5GB	-15%

1-5. 아직 다 못 쓰는 이유 — "속도 vs 호환성" 트레이드오프

TypeScript 7.0은 속도를 얻은 대신, 아직 다른 프로그램들이 이 컴파일러를 "연결"해서 쓸 수 있는 창구(프로그래매틱 API) 가 완성되지 않았어요. 이 API가 있어야 Vue, Svelte, Astro 같은 프레임워크들이 자기네 에디터 기능(자동완성, 실시간 에러 표시)에 TypeScript 7을 끼워 넣을 수 있는데, 지금은 그 창구 자체가 없는 상태예요.

지금 당장 못 올라타는 곳: Vue, Svelte, Astro, MDX, Angular 템플릿 타입체킹
이 API는 TypeScript 7.1에서 제공될 예정 (대략 2026년 10월경 예상)
그때까지는 저 프레임워크들 프로젝트에서 억지로 업그레이드하면 에디터 자동완성이나 에러 표시가 오작동할 수 있어요

1-6. 우리(React/Next.js) 프로젝트는 어떨까?

다행히 React나 Next.js는 이 프로그래매틱 API에 크게 의존하지 않는 구조라, 지금 바로 업그레이드해도 되는 그룹에 속해요.

npm install -D typescript@latest

업그레이드 전에 확인하면 좋은 것들:

tsconfig.json에서 없어진 옵션들(target: es5, moduleResolution: node, baseUrl 등) 쓰고 있는지 확인
업그레이드 후 npx tsc --noEmit으로 타입 에러만 먼저 한번 검사해보기 (빌드는 안 하고 검사만)

2. Next.js 16.3 & 보안 패치 (2026.7)

2-1. 배경: Next.js와 Turbopack이 뭔지

Next.js는 우리가 쓰는 React 프레임워크고, Turbopack은 그 안에서 코드를 묶어주는(번들링하는) 도구예요. 코드를 저장할 때마다 "이 파일들을 모아서 브라우저가 읽을 수 있는 하나의 묶음으로 만드는" 작업을 하는데, 이 속도가 개발 경험을 크게 좌우해요. 예전엔 Webpack이라는 도구를 썼는데, Next.js가 최근 자체적으로 훨씬 빠른 Rust 기반 도구인 Turbopack으로 갈아탔어요.

2-2. Turbopack 개선 사항

① Memory Eviction (메모리 회수)

!image.png

문제: 개발 서버를 오래 켜놓고 작업하다 보면(하루 종일 켜놓는 경우도 많죠) 메모리 사용량이 계속 쌓여서 컴퓨터가 느려지는 경우가 있었어요
개선: 이제 필요 없어진 컴파일 결과를 알아서 메모리에서 정리해줘서, 오래 켜놔도 무거워지지 않아요

② Persistent Cache for Builds (영구 캐시)

!image.png

문제: 예전엔 빌드할 때마다(예: 배포 전 next build 실행할 때마다) 처음부터 다시 다 컴파일했어요
개선: 이전 빌드 결과를 저장해뒀다가 재사용해서, 두 번째 빌드부터는 훨씬 빨라져요

③ Rust로 짜여진 React Compiler 지원

React 19부터 나온 "React Compiler"라는 도구(코드 최적화를 자동으로 해주는 도구)가 있는데, 이걸 더 빠른 언어(Rust)로 다시 짠 버전을 쓸 수 있게 됐어요

④ import.meta.glob 추가

여러 파일을 한 번에 패턴으로 불러오는 문법인데, Vite라는 다른 도구에서 쓰던 문법을 Next.js에서도 쓸 수 있게 지원 추가됨 (당장 급한 건 아니고, 알아두면 좋은 정도)

2-3. 보안 패치 — 이번 달 중요한 부분

"캐시 포이즈닝(Cache Poisoning)"이 뭔지부터 설명하면: Next.js는 성능을 위해 페이지나 데이터를 캐시(임시 저장)해뒀다가 재사용해요. 그런데 이 캐시 시스템에 허점이 있으면, 공격자가 악의적인 내용을 캐시에 슬쩍 끼워 넣어서, 이후 그 페이지에 접속하는 다른 정상 사용자들에게 그 악성 내용이 보이게 만들 수 있어요. 내 서버가 자기도 모르게 공격자의 콘텐츠를 다른 사람들에게 뿌려주는 셈이죠.

이번 패치에서 고친 것들:

RSC(서버 컴포넌트) 응답 캐시 포이즈닝 — 서버에서 렌더링한 컴포넌트 응답이 잘못된 캐시에 섞여 들어갈 수 있던 문제 2건
미들웨어/프록시 리다이렉트 캐시 포이즈닝 — 페이지 이동(리다이렉트) 처리 과정에서 발생할 수 있던 캐시 오염 문제
미들웨어 우회 취약점 — 특정 방식으로 요청을 보내면 보안 검사(미들웨어)를 건너뛸 수 있던 허점
DoS(서비스 거부 공격) 취약점 — 특정 캐시 기능을 악용해 서버 연결을 고갈시켜서 서비스를 마비시킬 수 있던 문제
그 외 App Router, 이미지 최적화, URL 파싱 관련 자잘한 버그들도 함께 수정됨

2-4. 우리 프로젝트에 적용하려면

npm install next@latest

버전을 올리기만 하면 대부분 자동으로 적용돼요. 특별히 뭔가 새로 설정할 건 없고, "패치니까 올려두면 안전하다" 정도로 이해하면 됩니다.

3. npm 12.0.0 (2026.7.10 릴리즈)

3-1. 먼저, "공급망 공격"이 뭔지부터

npm install을 실행하면 우리가 직접 짠 코드뿐 아니라, 그 패키지가 의존하는 또 다른 패키지들(의존성의 의존성...)까지 줄줄이 내 컴퓨터에 설치됩니다. 문제는 npm 패키지들이 설치되는 순간 자동으로 스크립트를 실행할 수 있다는 점이에요. (postinstall 스크립트 같은 것들)

만약 누군가 인기 있는 패키지의 계정을 해킹하거나, 이름을 살짝 비슷하게 지은 가짜 패키지를 올려놓으면 → 개발자가 npm install 한 번 실행하는 순간, 그 악성 스크립트가 자동으로 실행돼서 내 컴퓨터의 파일이나 환경변수(비밀번호, API 키 등)를 훔쳐갈 수 있습니다. 이게 바로 "공급망 공격(supply chain attack)"이에요. 실제로 최근 몇 년간 npm 생태계에서 이런 사고가 여러 번 있었고요.

npm 12.0.0은 이 문제에 정면으로 대응하는 업데이트입니다.

3-2. 무엇이 바뀌었나

① 설치 스크립트가 이제 기본적으로 안 돌아감

예전: npm install 하면 패키지에 딸려온 스크립트가 자동으로 실행됐음
이제: 기본값이 "실행 안 함"으로 바뀜. 스크립트를 돌리고 싶으면 개발자가 직접 허용(allowScripts)해줘야 함
쉽게 말해 "낯선 소포가 오면 일단 뜯어보지 않고, 안전하다고 확인된 것만 뜯는다"는 정책으로 바뀐 것

② git이나 외부 링크로 받는 패키지도 기본 차단

package.json에 "이 패키지는 깃허브 저장소에서 바로 받아와" 또는 "이 URL의 압축파일을 받아와" 같은 식으로 지정할 수 있는데, 이런 출처가 npm 공식 레지스트리보다 훨씬 위험함 (검증이 덜 되니까)
이제 이런 설치도 기본적으로 막혀 있고, 필요할 때만 명시적으로 허용해야 함

③ 오타나 잘못된 설정을 봐주지 않음

예전엔 .npmrc 설정 파일에 오타가 있거나 없는 옵션을 써도 그냥 "경고"만 뜨고 넘어갔음
이제는 이런 게 에러로 처리돼서 설치 자체가 멈춤 → 잘못된 설정을 방치한 채 넘어가는 일이 줄어듦

요약하면: "일단 되게 하고 문제 생기면 그때 막자"에서 → "기본적으로 다 막아두고, 필요한 것만 허용하자"로 npm의 기본 철학이 바뀐 릴리즈예요.

3-3. 그 외 정리된 기능들 (참고용)

항목	내용
`npm shrinkwrap`	완전 제거 (지금은 다들 `package-lock.json`만 씀)
`npm adduser`	제거 — 웹사이트에서 계정 만들고 `npm login`으로 로그인
`star`, `stars`, `unstar`	예전에 패키지에 별표 주던 기능, 제거됨
Node.js 지원 범위	너무 오래된 Node.js 버전은 이제 지원 안 함

3-4. 참고: pnpm(npm의 대체 도구)도 같은 흐름

npm 말고 pnpm이라는 패키지 매니저를 쓰는 팀들도 있는데, pnpm도 지난 4월 v11에서 "새로 올라온 패키지는 하루 지나야 설치 가능", "전역 설치도 프로젝트별로 격리" 같은 비슷한 보안 강화를 이미 적용했어요
→ npm과 pnpm 둘 다 비슷한 시기에 "일단 의심하고 본다"는 방향으로 움직였다는 건, 그만큼 요즘 공급망 공격이 업계 전체의 진짜 골칫거리라는 뜻으로 읽을 수 있음

4. 정리

도구	이번 달 핵심 변화	키워드
TypeScript 7.0	컴파일러 Go 네이티브 포팅, 최대 12배 성능 향상	속도
Next.js 16.3	Turbopack 캐싱/메모리 개선 + 다수 CVE 보안 패치	속도 + 보안
npm 12.0.0	설치 스크립트 기본 차단, 공급망 보안 강화	보안

결론: 2026년 7월 한 달 사이, 프론트엔드 툴체인 전반이 "더 빠르게"와 "더 안전하게"라는 두 축을 동시에 밀어붙이고 있습니다. 특히 npm과 pnpm이 약속이라도 한 듯 같은 시기에 공급망 보안을 강화한 건, 최근 반복된 npm 패키지 해킹 사고들이 생태계 전체의 기본값을 바꿔놓고 있다는 신호로 읽을 수 있습니다.

참고 자료

TypeScript 7.0 공식 발표 (Microsoft DevBlogs, 2026.7.8): https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/
Next.js 16.3 Turbopack 개선 공식 블로그: https://nextjs.org/blog/next-16-3-turbopack
Next.js 16.3 Instant Navigations 공식 블로그: https://nextjs.org/blog/next-16-3-instant-navigations
npm 12.0.0 릴리즈 노트 (GitHub): https://github.com/npm/cli/releases/tag/v12.0.0
npm v12 주요 변경사항 사전 공지 (GitHub Changelog): https://github.blog/changelog/2026-06-09-upcoming-breaking-changes-for-npm-v12/
pnpm 11.0 릴리즈 블로그: https://pnpm.io/blog/releases/11.0

디지털 이미지 - 픽셀과 해상도

Thu, 25 Jun 2026 12:03:09 GMT

픽셀(Pixel)이란?

픽셀은 디지털 이미지의 최소 단위입니다. 'Picture Element'의 합성어로, 컴퓨터 화면에 표시되는 모든 이미지는 실제로 매우 작은 사각형 점들로 구성되어 있습니다.

디지털 이미지를 계속 확대하면 정사각형 모양의 픽셀들이 모자이크처럼 배열된 것을 볼 수 있습니다
각 픽셀은 고유한 색상 정보를 가지고 있습니다
수많은 픽셀이 모여서 실물과 비슷한 이미지를 만들어냅니다

픽셀의 주요 특징

최소 단위: 디지털 이미지를 이루는 가장 작은 점입니다. 화면을 확대하면 모자이크처럼 보이는 사각형들이 픽셀입니다.
색상 정보: 각 픽셀은 R(빨강), G(초록), B(파랑) 등의 빛 정보를 조합하여 다양한 색을 표현합니다.
해상도와 관련: 화면의 해상도(예: 1920x1080)는 가로, 세로 픽셀 수를 나타내며, 픽셀이 많을수록 해상도가 높고 이미지가 선명해집니다

해상도(Resolution)의 두 가지 개념

해상도는 이미지의 크기와 품질을 결정하는 핵심 요소입니다. 해상도라는 용어는 두 가지 의미로 사용됩니다.

1. 픽셀의 총량 (이미지 크기)

전체 픽셀 개수를 나타내는 개념

카메라 화소수: 800만 화소 = 800만 개의 픽셀
모니터 해상도: 1920×1080, 2560×1440 등 (가로×세로 픽셀 수)
디지털 카메라는 메가픽셀(MP) 단위로 표현 (1MP = 100만 픽셀)

2. 픽셀의 밀도 (이미지 품질)

단위 면적당 픽셀 개수를 나타내는 개념

PPI (Pixels Per Inch)

1인치×1인치 면적에 들어가는 픽셀 수
예: 72ppi = 1인치당 72×72 = 5,184개의 픽셀
디지털 화면에 주로 사용

같은 이미지의 72 ppi와 300 ppi의 100% 화면

해상도의 상관관계

해상도는 픽셀 수, 픽셀 밀도, 이미지 크기 세 가지가 서로 연결되어 있습니다.

실제 예시

72ppi, 10×10인치 이미지의 경우:

총 픽셀 수: 518,400개 (720×720)
필요한 저장 공간을 계산 가능

이를 300ppi 인쇄용으로 변환하면:

같은 크기 유지 → 약 900만 개의 픽셀 필요
픽셀 수 유지 → 이미지 크기가 2.4×2.4인치로 축소

핵심 원리

픽셀이 많을수록 더 많은 이미지 정보를 담을 수 있습니다. 이 픽셀들을 얼마나 조밀하게, 어떤 크기로 표현할 것인가가 해상도의 핵심입니다.

이미지 용량 계산 (참고)

픽셀 수가 많을수록 파일 용량도 커집니다.

계산 예시: RGB 8bit, 720×720 픽셀 이미지

1픽셀 용량: 24bit (8bit × RGB 3채널) = 3byte
총 픽셀: 720 × 720 = 518,400픽셀
총 용량: 518,400 × 3 = 1,555,200byte
변환:
- 1,555,200byte ÷ 1,024 = 1,518.75KB
- 1,518.75KB ÷ 1,024 = 약 1.48MB

주요 용도별 권장 해상도

웹용 이미지: 72ppi
인쇄용 이미지: 300ppi 이상
전문 인쇄: 600ppi 이상

모두를 위한 웹: 접근성(A11y) 가이드

Thu, 25 Jun 2026 11:59:56 GMT

1. 웹 접근성이란?

장애 유무나 사용 환경에 관계없이 모든 사람이 웹 콘텐츠를 이용할 수 있도록 보장하는 것

대상 사용자

시각 장애 (전맹, 저시력, 색각 이상)
청각 장애 (난청, 농)
운동 장애 (마우스 사용 불가)
인지 장애 (난독증, 학습 장애)

2. 웹 접근성, 왜 우리가 신경 써야 할까요?

단순히 '착한 일'을 하려는 것이 아닙니다. 웹 접근성은 제품의 품질과 비즈니스에 직결됩니다.

잠재적 고객 확보: 전 세계 인구의 15%는 크고 작은 장애를 가지고 있습니다. 접근성을 지키지 않는 것은 이 시장을 포기하는 것과 같습니다.
법적 리스크 방지: 2013년부터 민간 사이트까지 '장애인차별금지법' 적용 대상이 확대되었습니다.
검색 엔진 최적화(SEO): 구글의 검색 로봇은 눈이 없습니다. 스크린 리더처럼 텍스트를 읽기 때문에, 접근성이 좋은 사이트가 검색 결과 상단에 노출됩니다.
상황적 장애의 해결: 햇빛이 강한 야외에서 화면을 볼 때, 한 손에 짐을 들고 마우스를 쓸 수 없을 때 등 우리 모두에게 도움이 됩니다.

3. 이것만은 꼭! 핵심 4원칙 (POUR)

3.1 Perceivable (인식 가능)

"눈으로 보지 못해도 정보를 얻을 수 있는가?”

대체 텍스트: 이미지에 alt 속성을 넣는 것은 기본 중의 기본입니다.
색 대비: 저시력자나 노안이 온 사용자도 읽기 쉽도록 배경과 글자색 대비를 4.5:1 이상으로 유지하세요.
자막: 영상 콘텐츠에 소리가 없어도 내용을 알 수 있게 자막을 제공합니다.

3.2 Operable (운용 가능)

"마우스 없이 모든 기능을 쓸 수 있는가?"

키보드 친화적: Tab 키만으로 모든 버튼과 링크에 접근할 수 있어야 합니다.
충분한 시간: 팝업이 너무 빨리 사라지거나, 타임아웃이 너무 짧으면 안 됩니다.

3.3 Understandable (이해 가능)

"내용이 쉽고 예측 가능한가?"

일관성: 메뉴 위치가 페이지마다 바뀌면 안 됩니다.
친절한 에러 메시지: "잘못된 접근입니다" 대신 "비밀번호는 8자리 이상이어야 합니다"처럼 해결 방법을 알려주세요.

3.4 Robust (견고함)

"어떤 환경에서도 잘 작동하는가?"

표준 준수: 최신 브라우저는 물론, 스크린 리더 같은 보조 공학 기기에서도 깨지지 않도록 표준 HTML을 사용합니다.

5. 개발/디자인 실전 사례 (Bad vs Good)

나쁜 예 vs 좋은 예

이미지 대체 텍스트

Bad: (스크린 리더는 "이미지"라고만 읽고 지나갑니다.)
Good:
Deco: 장식용 이미지는 alt=""로 비워두어야 스크린 리더가 무시합니다.

버튼


저장

Bad: 저장 (키보드 탭 키로 이동이 안 됩니다.)
Good: (가장 완벽한 방법입니다.)

링크 텍스트


여기를 클릭하세요


제품 상세 정보 보기

Bad: 여기를 클릭하세요 (맥락을 알 수 없습니다.)
Good: 제품 상세 정보 보기

6. WAI-ARIA: 꼭 필요할 때만 쓰는 치트키

ARIA는 HTML의 부족한 부분을 채워주지만, 잘못 쓰면 독이 됩니다.

제1원칙: "HTML5 태그(nav, button, section 등)로 할 수 있다면 ARIA를 쓰지 마세요."
사용 예시: 커스텀 탭 메뉴, 모달 창의 역할 정의 등 HTML만으로 설명이 부족한 동적 UI에만 적용합니다.

7. 우리 팀을 위한 접근성 체크리스트

모든 이미지에 alt 속성이 있는가? (의미 없는 건 alt="")
마우스 없이 Tab 키로만 로그인이 가능한가?
텍스트와 배경색의 대비가 명확한가?
모든 입력창(input)에 이름표(label)가 붙어 있는가?
페이지의 제목(title)이 페이지 내용을 잘 설명하는가?

🔗참고사이트

접근성 | MDN [https://developer.mozilla.org/ko/docs/Web/Accessibility]
NULI [https://nuli.navercorp.com/]
AOA11Y (Academy Of Accessibility) [https://www.youtube.com/@AOA11Y/playlists]

변수 이름을 어떻게 하면 잘 지을까?

Tue, 23 Dec 2025 12:57:43 GMT

0. 들어가기 앞서서

❓ 다 아는 건데 왜 이 주제를 왜 가지고 왔냐

🅰️ 최근 인스타를 보다가 변수 명 관련해서 영상이 하나가 떴는데 처음 안 사실들이 있어서 신기해서 파고 있어서 이런 주제를 꺼내게 됐다.

❗주의할점

js기준으로 문서가 정의되어있음.
다른언어를 공부하고 있는 사람에게는 2.1~2.10 방법 중 몇 개는 패스해도 좋다.

1. 변수란?

‘변수’는 어떤 공간에 어떤 값을 저장하기 위한 이름을 가진 공간이다.

2. 변수 이름을 잘 짓는 방법

2.1 명확한 이름 사용하기

영어 약어 사용 자제

이름만 봐도 어떤 역할을 하는지 확인 할 수 있어야 한다.

// 잘못된 예제: 축약어와 모호한 변수명 사용
const it = [];  // it가 뭐지?
let tp = 0.0;   // tp는 무슨 의미?

function al(i: string, p: number) {  // al? 무슨 함수?
  it.push(i);
  tp += p;
}

function rl(i: string, p: number) {  // rl? 무슨 동작?
  // remove 로직
  tp -= p;
}

// 올바른 예제: 명확한 변수명 활용
const items: string[] = [];
let totalPrice = 0.0;

function addItem(item: string, price: number) {
  items.push(item);
  totalPrice += price;
}

function removeItem(item: string, price: number) {
  const index = items.indexOf(item);
  items.splice(index, 1);
  totalPrice -= price;
}

2.2 키워드에서 제공해주는 정보 중복으로 사용하지 않기

타입스크립트로 예를 들어보자

// 잘못된 예제: 타입 정보를 변수명에 중복
interface IUser {
  name: string;
  age: number;
}

let sUserName: string = "구성연";
let nUserAge: number = 25;

// 올바른 예제: 타입 시스템이 이미 정보 제공
interface User {
  name: string;
  age: number;
}

let userName: string = "구성연";
let userAge: number = 25;

이미 앞에 인터페이스를 적었는데 변수 앞에 I 를 붙일 이유가 없고, 문자열로 타입정의를 했다면 앞에 S를 붙이지 않아도 된다.

2.3 정확한 상속 관계를 보여주는 명칭 사용하기

// 잘못된 예제: 도대체 기본 값이 왜 필요함?
class BaseDog {}

class Dog extends BaseDog {}

// 올바른 예제: 실제적인 상속 관계의 이름을 사용
class Dog {}

// 부모 클래스에 Base같은 애매한 명칭을 사용하지말고 차라리 자식 클래스를 상세히 정의
class Puddle extends Dog {}

클래스 명만 봤을 때 BaseDog와 Dog 가 뭐하는건지 알 수가 없음.

부모 클래스는 간단하게 하고 자식 클래스를 상세하게 정의하자.

2.4 단위를 알 수 있는 변수 명 사용하기

// 잘못된 예제: 단위를 알 수 없음
let length: number = 100;
let width: number = 50.0;
let time: number = 50;
let speed: number = 99;

// 올바른 예제: 정확한 단위를 알 수 있음
let lengthMeters: number = 100;
let widthPixels: number = 50.0;
let timeSeconds: number = 50;
let speedKph: number = 99;

타입에서 정의할 수 없는 단위들 pixels , Meters 등 알 수 있게 정의하자.

2.5 일관된 네이밍 규칙 사용하기.

개발을 처음하는 사람들이 자주하는 실수

❓ 왜 실수하나요?

🅰️ 코드는 잘 돌아가니까…

// 잘못된 예제: 네이밍 규칙이 일관되지 않음
function user_manager(user_name: string, UserAge: number) {  
    // snake_case와 PascalCase 섞임
  return {
    user_name,
    UserAge
  };
}

function UpdateUserProfile(NewName: string, new_age: number) {  
    // 파라미터도 섞여있음
  return {
    user_name: NewName,
    UserAge: new_age
  };
}

const user = user_manager("Minji", 21);
UpdateUserProfile("Alice", 22);

// 올바른 예제: 일관된 camelCase 사용
function createUser(userName: string, userAge: number) {  // camelCase
  return {
    userName,
    userAge
  };
}

function updateUserProfile(newName: string, newAge: number) {  // camelCase
  return {
    userName: newName,
    userAge: newAge
  };
}

const user = createUser("Minji", 21);
updateUserProfile("Alice", 22);

2.6 함수 명에서는 동사 사용하기

영어가 약하신 분들이 자주 하는 실수

// 잘못된 예제: 함수명에 명사만 사용
function user(id: number) {
  return database.find(id);
}

function profile(userId: number) {
  return api.request(userId);
}

// 올바른 예제: 함수명에 동사 사용
function getUser(id: number) {
  return database.find(id);
}

function fetchProfile(userId: number) {
  return api.request(userId);
}

2.7 같은 개념에 여러 용어 혼동해 사용하지 않기

데이터를 가지고 오는 get, fetch

데이터를 지우는 delete, remove

데이터를 생성하는 create, add

이 중에 하나로 통일해서 사용하기.

// 잘못된 예제: 같은 동작에 다른 용어 혼용
function fetchUserData(userId: number) {
  return database.query(userId);
}

function getUserPosts(userId: number) {
  return database.query(userId);
}

function removeComment(commentId: number) {
  database.delete(commentId);
}

function deletePost(postId: number) {
  database.delete(postId);
}

// 올바른 예제: 일관된 네이밍 사용
function getUserData(userId: number) {
  return database.query(userId);
}

function getUserPosts(userId: number) {
  return database.query(userId);
}

function deleteComment(commentId: number) {
  database.delete(commentId);
}

function deletePost(postId: number) {
  database.delete(postId);
}

2.8 발음하기 쉬운 이름 사용하기

내가 영어 발음이 약하다 싶으면 약어를 사용하지 말자

예를들면 isAvailable 을 어떻게 발음해야할지도 모르겠는데 약어로 써놓으면 더 모르니까 영어를 모르겠다 싶으면 약어 말고 영어 원문 그대로 써놓는게 좋다

// 잘못된 예제: 축약어 사용
function chkUsrAge(usrAge: number): boolean {
  return usrAge >= 18;
}

const isVld = chkUsrAge(20);  // Valid 축약

// 올바른 예제: 읽기 쉬운 변수명
function checkUserAge(userAge: number): boolean {
  return userAge >= 18;
}

const isValid = checkUserAge(20);

2.9 검색 가능한 이름 사용하기

예를 들어보자

시간이라는 이름을 영어로 검색하고 싶은데 어떤 블로그에서는 시간을 t로 줄여서 말하면 검색하기 까다로울 것이다. 그러면 블로그를 작성한 사람도 t가 어떤걸 말하는지 햇갈릴것이다.

// 잘못된 예제: 의미 없는 짧은 변수명
function calculateDuration(t: number): number {
  return t * 60;  // t가 뭐지? 초? 분? 시간?
}

// 올바른 예제: 검색하기 쉬운 명확한 변수명
function calculateDuration(timeMinutes: number): number {
  return timeMinutes * 60;  // IDE에서 'time' 검색하면 바로 찾을 수 있음
}

2.10 언어별 스타일 가이드 준수하기

언어별 가이드 라인이 있으면 가이드라인을 준수하는게 좋다.

A언어에서 사용하는 가이드라인을 B라는 언어에 접목시키지 말라는 소리이다.

JS/TS/Java/C++/C#: camelCase
Python/C: snake_case

// JavaScript
const userName = "Alice";
const isActive = true;
const userAge = 25;

// TypeScript
const userName: string = "Alice";
const isActive: boolean = true;
const userAge: number = 25;

// Java
String userName = "Alice";
boolean isActive = true;
int userAge = 25;

// C++
string userName = "Alice";
bool isActive = true;
int userAge = 25;

// C#
string userName = "Alice";
bool isActive = true;
int userAge = 25;

# Python
user_name = "Alice"
is_active = True
user_age = 25

// C
char user_name[] = "Alice";
int is_active = 1;
int user_age = 25;

💡 참고사이트

Asfar Ali on Instagram: "Your code is read by humans, so make it sound like human language #cleancode #code #programming"

사수한테 칭찬받는 읽기 좋은 함수, 변수명 잘 짓는 법

변수 이름 작명 마스터클래스

변수명을 잘 짓기 위한 몸부림

프론트엔드 개발자인데 SQL을 배워야할까?

Tue, 23 Dec 2025 12:56:57 GMT

Q. SQL발표를 왜 하게 되었느냐?

A. 아이스 브레이킹 시간에 빠지지 않고 SQL이야기가 나오는 것을 느꼈고 그래서 SQL이 뭔데? 라는 궁금증에서 출발했습니다.

1. SQL이란

SQL(Structured Query Language)은 데이터베이스와 대화하는 언어입니다.

웹사이트에 있는 거의 모든 데이터는 데이터베이스에 저장되어 있습니다.

유저 정보 (이름, 이메일, 비밀번호)
게시글 (제목, 내용, 작성자)
댓글, 좋아요, 주문 내역...

SQL은 이런 데이터를 가져오거나 저장하거나 수정할 때 사용합니다.

쉽게 말하면:

"users 테이블에서 나이가 20살 이상인 사람들 보여줘" "posts 테이블에 새 게시글 저장해줘"

이런 명령을 데이터베이스에게 내리는 언어입니다.

2. 프론트엔드는 SQL을 직접 안 쓰는데 왜?

맞습니다. 프론트엔드는 SQL을 직접 쓰지 않습니다.

프론트엔드 개발자가 하는 일:

API를 호출해서 데이터 받아오기
받은 데이터를 화면에 예쁘게 보여주기

백엔드 개발자가 하는 일:

API를 만들고
SQL로 데이터베이스에서 데이터를 가져와서
프론트엔드에게 전달하기

그럼 왜 프론트엔드가 SQL을 알아야 하냐고요?

백엔드 개발자와 협업할 때 소통이 안 되는 문제가 생깁니다.

예시:

프론트: "유저 목록이랑 각 유저가 쓴 글 개수 주세요"
백엔드: "JOIN 해야 하는데 N+1 문제가..."
프론트: "...???"

이런 상황이 반복되면 답답합니다.

3. 프론트엔드가 SQL 개념과 마주치는 순간

상황 1: 사이드 프로젝트 할 때

혼자 간단한 웹사이트 만들다가 데이터 저장이 필요해집니다. "어... 데이터를 어디에 어떻게 저장하지?" 결국 유튜브 보면서 따라하는데 테이블을 어떻게 만들어야 하는지 감이 안 옵니다.

상황 2: AI 도구(Cursor, ChatGPT) 쓸 때

Cursor한테 "데이터베이스 설계해줘"라고 물어봅니다. 답변이 SQL로 주르륵 나오는데, 이게 맞는지 틀린지 판단을 못 합니다. SQL을 알면 AI 답변을 제대로 활용할 수 있습니다.

상황 3: API 응답 데이터 순서가 이상할 때

API로 게시글 목록을 받았는데 순서가 1-3-4-2-5 이렇게 뒤죽박죽입니다. 백엔드: "데이터는 다 줬는데요?" 프론트: "근데 순서가 이상해요..."

SQL을 알면: "ORDER BY id DESC 빠진 것 같은데 추가해주세요" → 바로 해결

SQL을 모르면: 프론트에서 sort() 써서 임시방편... (근본 해결 안 됨)

4. SQL을 알면 좋은 점

백엔드와 말이 통함

예: 백엔드가 "인덱스 없어서 이 필드로는 정렬 못 해요"라고 하면 → "아 그럼 created_at 같은 다른 필드로 정렬하면 되겠네요" 바로 대안 제시 SQL 모르면: "...왜요? 그냥 정렬 하면 안돼요?" (답답)

API를 똑똑하게 요청할 수 있음

막연하게: "유저 목록이랑 게시글 개수 주세요" 구체적으로: "users랑 posts JOIN해서 COUNT 집계한 결과 주세요" 백엔드도 바로 이해하고 개발 속도 빨라집니다.

속도가 왜 느린지 알 수 있음

페이지 느릴 때 "프론트 렌더링 문제인가? 백엔드 쿼리 문제인가?" 구분할 수 있어서 문제를 빨리 찾습니다.

예: "API 100번 호출하고 있네? N+1 문제다" → JOIN으로 한 번에 해결 요청

혼자서도 뭔가 만들 수 있음

간단한 앱 만들 때 백엔드 없이도 직접 데이터 저장하고 가져올 수 있습니다. Supabase 같은 도구 쓸 때도 SQL 알면 훨씬 쉽습니다. 풀스택 개발자로 갈 수 있는 길이 열립니다.

5. 현실적인 이야기

프론트는 이미 배울 게 너무 많습니다

Next.js, React, TypeScript, 상태관리, CSS, 성능 최적화, 웹 접근성... 프론트엔드만 해도 평생 배워야 합니다. SQL까지 깊게 파면 정작 중요한 프론트 기술이 부족해질 수 있습니다.

실무에서 쿼리 짤 일은 거의 없습니다

대부분 회사는 백엔드와 프론트가 명확히 분리되어 있습니다. 프론트엔드가 직접 데이터베이스를 건드리는 일은 없습니다.

6. 결론

프론트엔드도 SQL을 배워야 할까?

무조건 배워야 한다 ❌

알면 분명히 도움된다 ✅

❗출처

[Project] 백엔드와 협업하기

프론트엔드 신입개발자가 sql도 다루나요? | OKKY

프론트엔드 개발자가 SQL을 공부하는 이유

git branch

Tue, 23 Dec 2025 12:56:09 GMT

0. 들어가기 앞서서 용어 정리

용어	설명	이번 발표 사용
저장소 (repository)	프로젝트 파일과 해당 파일의 변경 이력이 저장되는 곳이다. 로컬 저장소, 원격 저장소 두 종류가 있다.	✅
커밋 (commit)	파일 또는 디렉토리의 변경 사항을 로컬 저장소에 기록한다. 커밋은 변경 내용, 작성자, 날짜 같은 정보와 함께 고유한 ID를 가진다. ID를 통해 특정 시점의 프로젝트 상태로 돌아갈 수 있다.	✅
브랜치 (Branch)	작업을 분리하기 위한 수단이다. 주로 “master” 또는 “main” 브랜치가 주 브랜치로 사용된다. 기능 추가, 버그 수정 등을 위해서 새로운 브랜치를 생성하여 작업한다.	✅
병합 (Merge)	두 브랜치의 변경 사항을 하나로 합치는 과정이다.	✅
충돌 (Conflict)	두 브랜치를 병합할 때 같은 파일의 같은 부분이 다르게 수정되어 Git이 병합할 수 없는 상황이다	❌
풀 (Pull)	원격 저장소의 변경 사항을 로컬 저장소로 가져오고 자동으로 현재 브랜치와 병합하는 과정이다.	✅
푸시 (Push)	로컬 저장소의 변경 사항을 원격 저장소로 업로드하는 과정이다.	✅
패치 (Fetch)	원격 저장소의 최신 history를 로컬 저장소로 가져오지만, 현재 작업 중인 브랜치와는 병합하지 않는다.	❌
스태이징 (Staging)	커밋 전 변경 사항을 준비하는 단계이다.	❌
태그 (Tag)	특정 커밋을 참조하기 위한 레이블이다.	❌
체크아웃 (Checkout)	다른 브랜치로 전환하거나 특정 버전의 파일을 작업 디렉토리로 가져오는 과정이다.	✅
클론 (clone)	원격 저장소의 복사본을 로컬 저장소에 생성한다.	❌
포크 (Fork)	다른 사용자의 원격 저장소를 자신의 원격 저장소로 복사하는 과정이다.	❌
풀 리퀘스트 (Pull Request)	PR은 하나의 브랜치에서 다른 브랜치로 변경사항을 병합하기 위한 요청이다.	✅

1. git branch 전략

여러 개발자가 하나의 저장소에서 작업을 할 때 협업을 좀 더 효과적으로 하기 위해

git branch 에 대한 규칙을 정하고 저장소를 잘 활용하기 위한 workflow 를 정의하는 것을 바로 git branch 전략이라고 합니다.

❓ 이러한 Git Branch 전략은 왜 필요한가

여러 명의 개발자가 동시에 작업할 때 가장 빛을 발하는데요, 각자 다른 기능을 담당하는 브랜치를 사용하여 작업하면,

개발 중인 기능이나 수정사항이 서로 독립적이게 되며 영향을 주지 않고 동시에 진행될 수 있습니다.

또한, 각각의 브랜치가 특정 기능, 이슈에 대응하여 특정 작업을 추적하고, 필요한 경우 작업 단위의 Rollback 이 가능하여 프로젝트 관리의 유연성을 향상시켜줍니다.

각각의 태그는 Release 를 원하는 버전 단위로 관리할 수 있도록 하여, 배포 안정성을 향상시켜줍니다.

❓브랜치 전략이 없으면 어떤 일이 발생하는가

어떤 브랜치가 최신 브랜치지?
어떤 브랜치를 끌어와서 개발을 시작해야 하지?
어디에 Push를 보내야 하지?
핫픽스를 해야하는데 어떤 브랜치를 기준으로 수정해야할까?
배포 버전은 어떤 걸 골라야하지?

Git Branch 전략은 여러가지가 있지만, 대표적으로 여러 프로젝트에서 널리 사용되고 있는 두가지 대표 브랜치 전략인 Git Flow 와 GitHub Flow 에 대해서 알아보도록 하겠습니다.

1.1 Git Flow

가장 전통적으로 많이 사용되는 방식이다.

기본적인 가지의 이름은 아래의 5가지로 구분하곤 한다.
feature > develop > release > hotfix > master
위 순서들은 왼쪽으로 갈수록 포괄적인 가지이며 master branch를 병합할 경우 그 왼쪽에 있는 hotfix 등 모든 가지들에 있는 커밋들도 병합하도록 구성하게 된다.
5가지 중, 항시 유지되는 메인 브랜치 master, develop 2가지와 merge 되면 사라지는 보조 브랜치 feature, release, hotfix 3가지로 구성된다.

1.1.1 브랜치 별 설명

1.1.1.1 메인 브랜치(`master`, `develop`)

master는 배포 가능한 상태만을 관리하는 브랜치를 말하며

develop은 다음에 배포할 것을 개발하는 브랜치이다.

즉 develop은 통합 브랜치의 역할을 하며, 평소에는 이 브랜치를 기반으로 개발을 진행한다.

1.1.1.2 보조 브랜치

보조 브랜치는 피처 브랜치(feature branch) 또는 토픽 브랜치(topic branch)를 말한다.

가지가 뻗어나오는 곳 : develop
뻗어나갔던 가지가 다시 합쳐지는 곳 : develop
이름 설정 : master, develop, release-, hotfix-를 제외하기만 하면 자유롭게 이름 설정이 가능하다. 새로운 기능을 추가할 때 주로 사용하는 가지이다.

develop 브랜치에는 기존에 잘 작동하는 개발코드가 담겨있으며,

보조 브랜치는 새로 변경될 개발코드를 분리하고 각각 보존하는 역할을 한다.

즉, 보조 브랜치는 기능을 다 완성할 때까지 유지하고, 다 완성되면 develop 브랜치로 merge 하고 결과가 좋지 못하면 버리는 방향을 취한다.

1.1.1.3 릴리즈 브랜치(release branch)

릴리즈 브랜치는 배포를 위한 최종적인 버그 수정 등의 개발을 수행하는 브랜치를 말한다.

가지가 뻗어나오는 곳 : develop
뻗어나갔던 가지가 다시 합쳐지는 곳 : develop, master
이름 설정 : release-*
새로운 제품을 배포하고자 할 때 사용하는 가지이다.

develop 브랜치에 버전에 포함되는 기능이 merge 되었다면 QA를 위해 develop 브랜치에서부터 release 브랜치를 생성한다.

배포 가능한 상태가 되면 master 브랜치로 병합시키고, 출시된 master 브랜치에 버전 태그(ex, v1.0, v0.2)를 추가한다.

release 브랜치에서 기능을 점검하며 발견한 버그 수정 사항은 develop 브랜치에도 적용해줘야 한다. 그러므로 배포 완료 후 develop 브랜치에 대해서도 merge 작업을 수행해야 한다.

1.1.1.4 핫픽스 브랜치(hotfix branch)

핫픽스 브랜치는 배포한 버전에서 긴급하게 수정할 필요가 있을 때 master 브랜치에서 분리하는 브랜치를 말한다.

가지가 뻗어나오는 곳 : master
뻗어나갔던 가지가 다시 합쳐지는 곳 : develop, master
이름 설정 : hotfix-*
제품에서 버그가 발생했을 경우에는 처리를 위해 이 가지로 해당 정보들을 모아준다. 버그에 대한 수정이 완료된 후에는 develop, master에 곧장 반영해주며 tag를 통해 관련 정보를 기록해둔다.

버그를 잡는 사람이 일하는 동안에도 다른 사람들은 develop 브랜치에서 하던 일을 계속할 수 있다.

이 때 만든 hotfix 브랜치에서의 변경 사항은 develop 브랜치에도 merge 하여 문제가 되는 부분을 처리해줘야 한다.

release 가지가 생성되어 관리되고 있는 상태라면 해당 가지에 hotfix정보를 병합시켜 다음번 배포 시 반영이 정상적으로 이루어질 수 있도록 해준다.

Hotfix는 보통 다급하게 버그를 고치기 위해 생성되는 가지이기 때문에 버그를 해결하면 보통 제거하는 일회성 가지다.

1.1.2 Git Flow 정리

1.1.2.1 신규 기능 개발

개발자는 develop 브랜치로부터 본인이 신규 개발할 기능을 위한 feature 브랜치를 생성한다.
feature 브랜치에서 기능을 완성하면 develop 브랜치에 merge를 진행하게 된다.

1.1.2.2 라이브 서버로 배포

feature 브랜치들이 모두 develop 브랜치에 merge 되었다면 QA를 위해 release 브랜치를 생성한다.
release 브랜치를 통해 오류가 확인된다면 release 브랜치 내에서 수정을 진행한다.
QA와 테스트를 모두 통과했다면, 배포를 위해 release 브랜치를 master 브랜치 쪽으로 merge하며,
만일 release 브랜치 내부에서 오류 수정이 진행되었을 경우 동기화를 위해 develop 브랜치 쪽에도 merge를 진행한다.

1.1.2.3 배포 후 관리

만일 배포된 라이브 서버(master)에서 버그가 발생된다면, hotfix 브랜치를 생성하여 버그 픽스를 진행한다.
그리고 종료된 버그 픽스를 master와 develop 양 쪽에 merge하여 동기화 시킨다.

1.2 GitHub Flow

release branch가 명확하게 구분되지 않은 시스템에서의 사용이 유용하다.

GitHub 자체의 서비스 특성상 배포의 개념이 없는 시스템으로 되어있기 때문에 이 flow가 유용하다.

웹 서비스들에 배포의 개념이 없어지고 있는 추세이기 때문에 앞으로도 Git flow에 비해 사용하기에 더 수월할 것이다.

hotfix와 가장 작은 기능을 구분하지 않는다. 모든 구분사항들도 결국 개발자가 전부 수정하는 일들 중 하나이기 때문이다. 이 대신 구분하는 것은 우선 순위가 어떤 것이 더 높은지에 대한 것이다.

1.2.1 흐름

1.2.1.1 브랜치 생성

Github-flow 전략은 기능 개발, 버그 픽스 등 어떤 이유로든 새로운 브랜치를 생성하는 것으로 시작된다.

단, 이때 체계적인 분류 없이 브랜치 하나에 의존하게 되기 때문에 브랜치 이름을 통해 의도를 명확하게 드러내는 것이 매우 중요하다.

master 브랜치는 항상 최신 상태며, stable 상태로 product에 배포되는 브랜치다. 이 브랜치에 대해서는 엄격한 role과 함께 사용한다
새로운 브랜치는 항상 master 브랜치에서 만든다
Git-flow와는 다르게 feature 브랜치나 develop 브랜치가 존재하지 않는다.
그렇지만, 새로운 기능을 추가하거나 버그를 해결하기 위한 브랜치 이름은 자세하게 어떤 일을 하고 있는지에 대해서 작성해주도록 하자

1.2.1.2 개발, 커밋, 푸쉬

개발을 진행하면서 커밋을 남긴다.이때도 브랜치와 같이 커밋 메세지에 의존해야 하기 때문에, 커밋 메세지를 최대한 상세하게 적어주는 것이 중요하다.

커밋메시지를 명확하게 작성하자
원격지 브랜치로 수시로 push 하자
Git-flow와 상반되는 방식
항상 원격지에 자신이 하고 있는 일들을 올려 다른 사람들도 확인할 수 있도록 해준다
이는 하드웨어에 문제가 발생해 작업하던 부분이 없어지더라도, 원격지에 있는 소스를 받아서 작업할 수 있도록 해준다

1.2.1.3 PR 생성

피드백이나 도움이 필요할 때, 그리고 merge 준비가 완료되었을 때는 pull request를 생성한다

pull request는 코드 리뷰를 도와주는 시스템
이것을 이용해 자신의 코드를 공유하고, 리뷰받는다.
merge 준비가 완료되었다면 master 브랜치로 반영을 요구한다.

1.2.1.4 리뷰, 토의

Pull-Request가 master 브랜치 쪽에 합쳐진다면 곧장 라이브 서버에 배포되는 것과 다름 없으므로, 상세한 리뷰와 토의가 이루어져야 한다.

1.2.1.5 테스트

리뷰와 토의가 끝났다면 해당 내용을 라이브 서버(혹은 테스트 환경)에 배포해본다.

배포시 문제가 발생한다면 곧장 master 브랜치의 내용을 다시 배포하여 초기화 시킨다.

1.2.1.6 최종 Merge

라이브 서버(혹은 테스트 환경)에 배포했음에도 문제가 발견되지 않았다면 그대로 master 브랜치에 푸시를 하고, 즉시 배포를 진행한다.

대부분의 Github-flow 에선 master 브랜치를 최신 브랜치라고 가정하기 때문에 배포 자동화 도구를 이용해서 Merge 즉시 배포를 시킨다.

master로 merge되고 push 되었을 때는, 즉시 배포되어야한다

GitHub-flow의 핵심
master로 merge가 일어나면 자동으로 배포가 되도록 설정해놓는다. (CI / CD)

1.3 ❗ Git Flow 와 GitHub Flow 중 어떤 전략을 사용해야 할까?

Git Flow 와 GitHub Flow 중 어떤 전략을 사용하는게 좋을까요? 다양한 관점에서 두 전략을 비교해보겠습니다.

브랜치 수: Git Flow는 다양한 종류의 브랜치를 사용하는 반면, GitHub Flow는 단일 브랜치 (master) 를 사용합니다.
배포 방식: Git Flow는 release 와 hotfix 브랜치를 통해 명확한 배포 절차를 갖추고 있습니다.

반면에, GitHub Flow는 단순하며 지속적인 배포를 강조하며, master 브랜치에서 배포를 수행합니다.
복잡성: Git Flow는 복잡한 프로젝트나 대규모 팀에서 사용하기 좋습니다.

그러나 이는 작은 팀이나 개인 프로젝트에 적용하기에는 많은 브랜치와 과정이 불필요하고 부담스러울 수 있습니다.

GitHub Flow 는 단순하며 빠른 개발 및 배포를 위해 사용됩니다.

각각의 전략은 장, 단점이 존재하기에 프로젝트의 규모, 요구 사항 및 팀의 작업 방식에 맞추어 적절하게 채택하는 것이 좋습니다.

Git Flow는 더 많은 제어와 복잡성을 가지고 있어 특정 기능이나 수정을 빠르게 배포해야 할 경우 등에서 유연성이 다소 떨어집니다.

그러나 그만큼 배포 안정성과 버전 관리 및 롤백 등 체계적인 운영이 가능합니다.

GitHub Flow 는 테스트와 검증 절차를 거치지 않고 바로 master 브랜치로 Merge 되므로 위험성을 가지고 있습니다.

하지만 그만큼 단순하고 빠르게 기능을 테스트하고 Agile 하게 배포할 수 있기 때문에, 주로 각 환경의 구분이 명확하지 않고 작은 규모의 프로젝트에 적합한 전략입니다.

💡 참고 자료

우린 Git-flow를 사용하고 있어요 | 우아한형제들 기술블로그

[GitHub] 기본 용어 정리

[GIT] 📈 깃 브랜치 전략 정리 - Github Flow / Git Flow

Git Branch 전략 비교 - Git Flow vs GitHub Flow

Git branch 전략(Git-Flow, Github-Flow, Gitlab-Flow)

next.js page 라우터 vs app 라우터

Tue, 23 Dec 2025 12:54:27 GMT

1. Pages Router

Pages Router는 Next.js의 전통적인 라우팅 시스템입니다.

이 시스템은 파일 시스템 기반 라우팅을 사용하며, pages 디렉토리 내의 파일 구조가 곧 애플리케이션의 라우트 구조가 됩니다.

많은 기업에서 사용되고 있는 안정적인 라우터

주요 특징

pages 디렉토리 사용
파일 이름 기반의 라우팅
getStaticProps, getServerSideProps 등을 통한 데이터 페칭
간단하고 직관적인 구조

1.1 router

1.1.1 파일명 기준

pages라는 폴더안에 기능을 제공함.

pages폴더 안 컨포넌트파일명 기반의 페이지 라우팅을 자동으로 제공함.

ex)

index.js → ~/
about.js → ~/about
item.js → ~/item

1.1.2 폴더 명기준

about.js 파일이 없으니 폴더안에 있는 index.js 컨포넌트를 찾아 랜더링함.

1.1.3 동적 경로(Dynamic Rotes)

동적 경로란 경로 상의 어떠한 변할 수 있는 가변적인 값을 포함하고 있는 경로를 말함

예시) 블로그의 게시글, 쇼핑물의 상품별 상세페이지

동적 라우팅을 만들고 싶으면 파일명, 폴더명에 대괄호를 묶어서 사용한다

ex) [id], [bookid]

매핑된다.

1.2 getServerSideProps 활용

import { useState } from "react";

const URL =
  "https://www.7timer.info/bin/astro.php?lon=113.2&lat=23.1&ac=0&unit=metric&output=json&tzshift=0" as const;

export default function Home({ product }: any) {
  const [count, setCount] = useState(0);

  return (
    
      {product}
      {count}
      
    
  );
}

export async function getServerSideProps() {
  const res = await fetch(URL);
  const data = await res.json();
  return {
    props: {
      product: data.product,
    },
  };
}

2. App Router

App Router는 Next.js 13에서 도입된 새로운 라우팅 시스템입니다. React 18의 새로운 기능들을 활용하며, 특히 React Server Components를 기본적으로 지원합니다.

주요 특징

app 디렉토리 사용
폴더 구조 기반의 라우팅
레이아웃, 로딩 상태, 에러 처리 등을 위한 특수 파일들
서버 컴포넌트 기본 지원
향상된 성능과 유연성

app router로 변하면서 파일명 router는 지원하지 않음.

그래서 폴더 기준으로 변함

검색 페이지인 search 페이지를 사용하려면 폴더를 만들어서 사용해야함.

3. 차이점 정리

구분	Pages Router	App Router
디렉토리 구조	`pages` 디렉토리	`app` 디렉토리
라우트 정의	파일 이름으로 라우트 정의	폴더 이름으로 라우트 정의, `page.js` 파일이 해당 라우트의 UI를 담당
레이아웃	`_app.js`와 `_document.js`로 전역 레이아웃 관리	각 폴더에 `layout.js` 파일을 두어 중첩 레이아웃 쉽게 구현
데이터 페칭	`getStaticProps`, `getServerSideProps` 등의 특수 함수 사용	컴포넌트 내에서 직접 `async`/`await` 사용 가능
서버컨포넌트	클라이언트 컴포넌트만 사용	서버 컴포넌트 기본 지원, `'use client'` 지시어로 클라이언트 컴포넌트 지정
동적 라우트	`[param].js` 파일로 동적 라우트 생성	`[param]` 폴더로 동적 라우트 생성

3.1 폴더 구조

pages router

pages
├── _app.js
├── _document.js
├── index.js
├── about.js
└── posts
    └── [id].js

App router

app
├── layout.js
├── page.js
├── about
│   └── page.js
└── posts
    └── [id]
        └── page.js

3. 3 실제 사용 경험과 추세

Pages Router 선호 이유:
- 익숙함: 많은 개발자들이 이미 Pages Router에 익숙합니다.
- 단순성: 간단한 프로젝트에서는 Pages Router가 더 직관적일 수 있습니다.
- 안정성: Pages Router는 오랜 기간 사용되어 안정적입니다.
- 학습 곡선: App Router는 새로운 개념 학습이 필요합니다.
App Router 불편 사항:
- 복잡성: 일부 개발자들은 App Router의 구조가 더 복잡하다고 느낍니다.
- 호환성 문제: 일부 라이브러리가 App Router와 완벽히 호환되지 않을 수 있습니다.
- 변화 속도: Next.js의 빠른 변화로 인한 학습 부담이 있습니다.
실제 사용 추세:
- 점진적 도입: 많은 팀들이 새 프로젝트에서 App Router를 시도하고 있습니다.
- 혼합 사용: 일부는 두 라우터를 혼합해서 사용하며 점진적으로 전환합니다.
- 기업 환경: 대규모 기업에서는 안정성 때문에 Pages Router를 선호하는 경향이 있습니다.

🔗 출처

Next.js의 Pages Router vs App Router: 상세 비교 가이드

Why Do You Still Prefer Page Router Over App Router?

한입 Next.js 섹션 3 2.1, 섹션 4 3.2 강의

https://hackids.tistory.com/148

2025-05-09 count, todolist

Thu, 29 May 2025 12:39:22 GMT

🧠 배운 점 & 정리

COUNT

`counter/06/` 와 `counter/07` 차이점

index.js

항목	`counter/06/index.js`	`counter/07/index.js`
console.log	없음	Header, Counter, App 함수 호출 시 로그 출력
상태 관리 방식	지역 변수 `count` 사용 후, 이벤트 핸들러 내에서 `document.querySelector(...).textContent`로 DOM 직접 업데이트	`Reaction.useState` 훅으로 상태 저장, `setCount` 호출 시 내부적으로 자동 리렌더링
이벤트 핸들러	`handleDown`/`handleUp`/`handleReset`에서 직접 `count` 조작 후 수동으로 텍스트 갱신	동일한 핸들러 이름 사용하나, 내부에서는 `setCount`만 호출해 리렌더링에 위임
렌더링 동작	최초 렌더링 이후 상태 변경 시 수동 업데이트 필요	상태 변경 시 컴포넌트 전체가 자동으로 재 렌더링

reaction.js

항목	`counter/06/reaction.js`	`counter/06/reaction.js`
전역 변수 선언	전역 상태 변수 없음	`_root`, `_stateValue` 전역으로 선언
createRoot 구현	`render(appFn)` 호출 시 단순히 `appendChild(appFn())` 실행	컴포넌트 함수 캐싱 (`_appComponent = _appComponent ?? appFn`)기존 자식 제거 (`firstChild?.remove()`) 후 재렌더
상태 관리 (useState)	없음	`useState(initialValue)` 구현`_stateValue` 보관 및 `setValue` 호출 시 `render()` 트리거
상태 초기화 방식	해당 없음	`_stateValue = _stateValue ?? initialValue`
렌더링 동작	최초 렌더만 지원	상태 변경 감지 시 (`Object.is` 비교 후) `render()` 재호출

?? vs || 연산자

📆 2025.04.28 ‐ TypeScript type, intersection, interface, optional property, readonly

Mon, 28 Apr 2025 13:27:27 GMT

🧠 배운 점 & 정리

타입(ex06-02.ts)
- 주요 타입
  - 기본 타입
    - string: 문자열 타입
    - number: 숫자 타입
    - boolean: true/false 논리 타입
    - null: 값이 비어있음을 명시하는 타입
    - undefined: 값이 할당되지 않은 상태
    - bigint: 매우 큰 정수를 다룰 수 있는 타입
    - symbol: 고유한 식별자를 만들 때 사용하는 타입
  - 참조 타입
    - object: 객체 타입 (key-value 구조)
    - Array: 특정 타입을 요소로 갖는 배열
    - tuple: 고정된 타입과 순서를 가지는 배열
  - 특수 타입
    - any: 모든 타입을 허용 (비추천, 타입 안정성 떨어짐)
    - unknown: 모든 타입을 허용하지만 사용 전 타입 검사가 필요하여 any보다 안전
- 선택적 파라미터 (ex06-04.ts)
  
  함수의 매개 변수를 선택적으로 전달 받고 싶을때 매개 변수명 뒤에 ?를 추가
```
(()=>{
  function user(name /*1️⃣*/: string, age?/*1️⃣2️⃣*/: number) {
    console.log(name, age);
  }

  user('하루', 5);
  user('나무'); // 3️⃣

})();
```
  - 1️⃣ 타입지정
  - 2️⃣ 선택적 파라미터 선언법: 뒤에 물음표 적기
  - 3️⃣ 매개변수를 전달하지 않으면 undefined
- 유니언 타입
  - 여러 종류의 타입을 허용하기 위해 | (OR 연산자) 로 연결한 타입
  - any 타입은 모든 타입을 허용하지만 유니언 타입은 | 연산자로 연결된 타입중 하나를 허용
  - 연산자의 앞뒤가 바뀌어도 상관이 없다
  - 코드(ex06-05.ts)
```
(() => {
  function logString(msg: string) {
    console.log(msg);
  }

  logString("hello"); // 1️⃣
  logString(123); // 2️⃣
  // --------

  function logNumber(msg: number) {
    console.log(msg);
  }
  logNumber(235); // 1️⃣
  logNumber("235");// 2️⃣
  // --------

  function log(msg: number | string) {
    console.log(msg);
  }
  log(123); // 3️⃣
  log("123"); // 3️⃣
})();
```
    - 1️⃣ 정상 작동 ⇒ 매개변수에 할당한 타입이 일치함, 정상 출력
    - 2️⃣ 타입 에러 ⇒ 매개변수에 할당한 타입이 불일치함
    - 3️⃣ 매개변수로 정의한 number, string 이 있음,
    - 4️⃣ 타입가드: 조건문 안에서 `타입범위를 한정`시켜줄 수 있는 방법
  - 코드(ex06-05-02.ts)
```
(() => {
    function print(msg: number | string | boolean /*1️⃣*/) {
    if (typeof msg === "string") { // 2️⃣ 
      // string일 경우
      console.log(`${msg} 글자수: ${msg.length}`);
    }
    if (typeof msg === "number") { // 2️⃣ 
      // number일 경우
      console.log(`${msg} + 10 = ${msg + 10}`);
    }

    if (typeof msg === "boolean") { // 2️⃣ 
      // boolean일 경우
      console.log(`${msg}: ${msg ? "참" : "거짓"}`);
    }
  }

  print("world"); // 3️⃣
  print(200); // 3️⃣
  print(false);// 3️⃣
})();
```
    - 1️⃣ 타입 설정
    - 2️⃣ 타입가드
    - 3️⃣ 정상 작동 ⇒ 2️⃣ 타입가드가 입력값의 타입(number, string, boolean)을 하나하나 검사하여, 일치하는 경우에만 해당 조건문 안의 코드를 실행하고 출력하기 때문이다. 타입이 정확히 구분되므로 각각 알맞은 방식으로 처리되어 정상 출력된다.
- 타입 별칭(ex06-06.ts)
  - 값을 변수에 저장하듯, 타입을 변수에 저장해서 사용
  - 유니언 타입 같은 복잡한 타입에 의미 있는 이름을 붙여서 사용 (별칭)
  - type 키워드로 선언하는 사용자 정의 타입
  - 동일한 이름으로 중복 선언 불가
  - JS로 컴파일되면 제거됨
  - 관련적인 명명 규칙
    - PascalCase
    - 명사형
  - 코드
```
(() => {
    function logMessage(msg: string | number) {
    console.log(msg);
  }

  function warnMessage(msg: number | string) {
    // 스타일 적용
    console.log(`%c${msg}`, "color: yellow; font-size: 20px;");
  }

  logMessage("hello");
  logMessage(100);
  warnMessage("bye");
  warnMessage(200);
})();
```
```
(() => {
  **type Massge = string | number; // 1️⃣
  function logMessage(msg: Massge /* 2️⃣ */) {
    console.log(msg);
  }

  function warnMessage(msg: Massge) {
    // 스타일 적용
    console.log(`%c${msg}`, "color: yellow; font-size: 20px;");
  }

  logMessage("hello");
  logMessage(100);
  warnMessage("bye");
  warnMessage(200);
})();
```

타입 별칭으로 객체의 타입 선언
- 객체의 속성명과 속성값의 타입을 지정
- 속성은 , 또는 ; 으로 구분할 수 있지만 공식 스타일 가이드에서는 ;을 권장
- 타입 별칭을 타입으로 지정한 객체는 타입 별칭에 정의된 속성명과 속성의 타입을 준수해야 함
- 코드(ex06-07.ts)
```
(() => {
  type user = { // 1️⃣
    name: string;
    age: number;
  };
  const u1: user = { // 2️⃣
    name: "하루",
    age: 1,
  };
  const u2: user = { // 2️⃣
    name: "나무",
    age: 5,
  };

  console.log(u1.name); // 3️⃣
  console.log(u2.age); // 3️⃣
})();
```
  - 1️⃣ type 키워드를 이용해 user라는 타입 별칭을 생성하고, name(string)과 age(number)의 타입 구조를 정의함
  - 2️⃣ u1, u2는 user 타입을 명시적으로 지정하여 객체를 생성했음. 이를 통해 타입 안정성을 확보함
  - 3️⃣ u1.name은 문자열(string)로, u2.age는 숫자(number)로 타입이 보장되어 각각 정상 출력됨

인터섹션 타입

타입 여러개를 하나로 합치기 위해 &(AND 연산자) 로 연결한 타입
- 타입 별칭을 확장할 때 주로 사용
동일한 속성을 인터섹션 타입으로 추가할때 타입이 다르면 never 타입이 되면서 해당 속성은 사용이 불가함

코드(ex06-08.ts)

(() => {
  // 할일 등록시 사용
  type TodoRegist = { // 1️⃣
    title: string;
    content: string;
  };

  // 할일 조회시 사용
  type TodoInfo = TodoRegist & { // 2️⃣
    id: number;
    done: boolean;
  };

  const todo1: TodoRegist = { // 3️⃣
    title: "타입스크립트 공부",
    content: "타입스크립트 수업 대비해서 미리 책 읽어보기.",
  };
  const todo2: TodoInfo = { // 3️⃣
    id: 13,
    title: "타입스크립트 공부",
    content: "타입스크립트 수업 대비해서 미리 책 읽어보기.",
    done: false,
  };

  console.log(todo1.title, ":", todo1.content);
  console.log("todo2 합본!: ", todo2.id, todo2.title, 
  todo2.content, todo2.done);
})();

1️⃣ TodoRegist 타입을 만들어 title과 content 속성에 각각 string 타입을 지정
2️⃣ TodoInfo 타입은 TodoRegist 타입을 상속받고(& 사용), 추가로 id(number), done(boolean) 속성을 확장해서 정의
3️⃣ todo1은 TodoRegist 타입을 따르는 객체이고, todo2는 확장된 TodoInfo 타입을 따르는 객체

인터페이스

객체의 타입을 정의하기 위해 사용(객체의 속성명과 속성값의 타입을 지정)
속성은 ,또는 ;으로 구분
interface 키워드로 선언하는 사용자 정의 타입
인터페이스를 타입으로 지정한 객체는 해당 인터페이스에 정의된 속성명과 속성의 타입을 준수해야 함
JS로 컴파일 하면 제거됨

코드(ex06-07.ts, ex06-09.ts)

// ex06-07.ts
(() => {
  type user = { // 1️⃣
    name: string;
    age: number;
  };
  const u1: user = {
    name: "하루",
    age: 1,
  };
  const u2: user = {
    name: "나무",
    age: 5,
  };

  console.log(u1.name);
  console.log(u2.age);
})();

// ex06-09.ts
(() => {
  interface User { // 1️⃣
    name: string;
    age: number;
  }
  const u1: User = {
    name: "하루",
    age: 1,
  };
  const u2: User = {
    name: "나무",
    age: 5,
  };

  console.log(u1.name);
  console.log(u2.age);
})();

1️⃣ ex06-07.ts은 type, ex06-09.ts은 interface를 사용해 user 타입을 정의함. 둘 다 name(string)과 age(number) 속성을 가짐

기본 인터섹션 사용(ex06-10.ts): 변수, 함수의 매개 변수, 함수의리턴 타입에 사용

(() => {
  interface User { // 1️⃣
    name: string;
    age: number;
  }

  const u1: User = { // 2️⃣
    name: "하루",
    age: 1,
  };
  const u2: User = { // 2️⃣
    name: "나무",
    age: 5,
  };
  console.log(u1.name);
  console.log(u2.age);

  const createUser = function (name: string, age: number): User {
    return { name, age };
  }; // 3️⃣

  const u3: User = createUser("유저핑", 9);
  console.log(u3.name);

  function getAge(user: User): number { // 4️⃣
    return user.age;
  }

  console.log(getAge(u1));
  console.log(getAge(u2));
})();

1️⃣ User라는 이름으로 name(string)과 age(number)를 갖는 인터페이스를 생성
2️⃣ u1, u2 객체를 User 타입으로 지정하여 타입 안정성을 확보
3️⃣ createUser 함수가 User 타입 객체를 반환하도록 리턴 타입을 지정
4️⃣ getAge 함수가 매개변수로 User 타입 객체를 받고, 그 객체의 age 값을 반환

클래스 인터페이스 사용
- 클래스의 타입 지정에 사용
- 클래스명 뒤에 implements 키워드 추가
- 인터페이스를 타입으로 지정한 클래스의 멤버 변수와 메서드는 인터페이스에 정의된 속성과 속성의 타입을 준수해야 함
- 코드(ex06-11.ts)
```
(() => {
  interface Score { // 1️⃣
    kor: number;
    eng: number;
    sum(): number;
    avg(): number;
  }

  class HighSchool implements Score { // 2️⃣
    kor: number;
    eng: number;
    constructor(kor: number, eng: number) {
      this.kor = kor;
      this.eng = eng;
    }
    sum() {
      return this.kor + this.eng;
    }
    avg() {
      return this.sum() / 2;
    }
  }

  function printScore(score: Score) { // 3️⃣
    console.log(score.sum(), score.avg());
  }

  const haru = new HighSchool(100, 90); // 4️⃣
  printScore(haru); // 5️⃣
})();
```
  - 1️⃣ Score라는 인터페이스를 생성해서 kor, eng (number 타입)과 sum(), avg() 메서드를 정의함
  - 2️⃣ HighSchool 클래스가 Score 인터페이스를 implements(구현)하여 kor, eng 속성과 sum(), avg() 메서드를 구현함
  - 3️⃣ printScore 함수는 매개변수로 Score 타입을 받고, sum()과 avg() 결과를 출력함
  - 4️⃣ haru라는 이름으로 HighSchool 인스턴스를 생성하고, kor=100, eng=90 값을 전달함
  - 5️⃣ printScore(haru)를 호출해서 haru 객체의 총점(sum())과 평균(avg())을 출력함

  ```markdown
  Score 인터페이스
  ├─ kor: number
  ├─ eng: number
  ├─ sum(): number
  └─ avg(): number

  HighSchool 클래스 (implements Score)
  ├─ kor
  ├─ eng
  ├─ sum()
  │  └─ return this.kor + this.eng
  └─ avg()
      └─ return this.sum() / 2

  printScore(score: Score) 함수
  ├─ console.log(score.sum())
  └─ console.log(score.avg())

  haru 객체 생성
  └─ new HighSchool(100, 90)

  printScore(haru) 호출
  ├─ haru.sum() 실행
  └─ haru.avg() 실행

  ```

optional property
- 객체의 속성을 선택적으로 부여하고 싶을때 인터페이스 속성명 뒤에 ?를 추가

readonly

인터페이스의 속성명앞에 readonly키워드 추가
객체 생성시에만 값 할당이 가능하고 생성된 이후에는 수정할 수 없는 속성을 만들때 사용

코드

(() => {
  interface Todo {
    readonly id: number;
    title: string;
    content: string;
    done?: boolean;
  }

  const todo1: Todo = {
    id: 1,
    title: "TypeScript 학습하기",
    content: "학습하기",
    done: false,
  };
  console.log(todo1);
  const todo2: Todo = {
    id: 2,
    title: "TypeScript 학습하기",
    content: "학습하기",
  };

  console.log("변경 전", todo2);
  todo2.id = 3;
  todo2.content = "학습 끝";
  console.log("변경 후", todo2);
})();

1️⃣ Todo라는 타입(설계도)을 정의했다. (readonly/optional 특징 있음)
2️⃣ Todo 타입을 이용해서 todo1 객체를 만들었다. (설계도에 맞춰 생성)
3️⃣ todo2 객체를 만들고 수정하려 했는데, readonly id는 수정 못하고, content는 수정 가능했다

인터페이스 상속
- 부모 인터페이스의 속성과 메서드 정의를 자식 인터페이스가 물려 받고 확장
- interface선언부의 extends키워드 뒤에 상속 받을 부모 인터페이스 지정
- 코드(ex06-13.ts)
```
(() => {
  interface TodoRegist { //  1️⃣
    title: string;
    content: string;
  }

  interface TodoInfo extends TodoRegist { // 2️⃣
    id: number;
    done: boolean;
  }

  const todo1: TodoRegist = { // 3️⃣
    title: "TypeScript",
    content: "학습하기",
  };
  console.log("할일 상세 조회", todo1);

  const todo2: TodoInfo = { // 4️⃣
    id: 1,
    title: "TS",
    content: "학습하기",
    done: false,
  };

  console.log("할일 상세 조회", todo2); // 5️⃣
})();
```
  - 1️⃣ TodoRegist라는 인터페이스를 만들어 title과 content 속성(string 타입)을 정의함
  - 2️⃣ TodoInfo라는 인터페이스를 생성하고, TodoRegist를 extends(상속)하여 id, done 속성을 추가함
    - title, content는 상속받아서 자동 포함됨
  - 3️⃣ todo1 객체를 TodoRegist 타입으로 생성하고, title과 content 값을 할당함
  - 4️⃣ todo2 객체를 TodoInfo 타입으로 생성하고, id, title, content, done 값을 모두 할당함
  - 5️⃣ 각각의 todo1, todo2 객체를 console.log로 출력하여 내용 확인

🔗 배웠던 파일

ex06
- 02.ts 기본 타입
- 02.js 기본 타입
- 03.ts 함수에 타입 지정
- 03.js 함수에 타입 지정
- 04.ts 선택적 파라미터(optional parameter)
- 04.js 선택적 파라미터(optional parameter)
- 05.ts 유니언 타입
- 05.js 유니언 타입
- 05-02.ts 유니언 타입과 타입 가드
- 05-02.js 유니언 타입과 타입 가드
- 06.ts 유니언 타입
- 06.js 유니언 타입
- 06-02.ts 유니언 타입에 타입 별칭 지정
- 06-02.js 유니언 타입에 타입 별칭 지정
- 07.ts 타입 별칭으로 객체의 타입 선언
- 07.js 타입 별칭으로 객체의 타입 선언
- 08.ts 인터섹션 타입(intersection type)
- 08.js 인터섹션 타입(intersection type)
- 09.ts 인터페이스로 객체의 타입 선언
- 09.js 인터페이스로 객체의 타입 선언
- 10.ts 인터페이스 사용 - 변수, 함수의 매개변수, 리턴타입
- 10.js 인터페이스 사용 - 변수, 함수의 매개변수, 리턴타입
- 11.ts 인터페이스 사용 - 클래스의 타입 지정
- 11.js 인터페이스 사용 - 클래스의 타입 지정
- 12.ts 인터페이스 정의 - 선택적 속성, 읽기 전용 속성
- 12.js 인터페이스 정의 - 선택적 속성, 읽기 전용 속성
- 13.ts 인터페이스 상속
- 13.js 인터페이스 상속

❓ 생긴 질문 / 더 알아볼 것

익숙한거랑 모르는게 있어서 좋았다
sass는 컴파일링 하는 과정에서 에러가 있으면 컴파일링 자체가 안되는데 TypeScript는 에러가 있어도 무시하고 컴파일링하는 과정이 신기했다.

🔗 참고 자료

📆 2025.04.24 ‐ Advanced JavaScript: Functions, Prototypes, Closures, and Classes

Thu, 24 Apr 2025 12:54:39 GMT

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

프로토타입 체인을 이용한 상속 기능

하위 생성자의 프로토타입을 상위 생성자의 객체로 지정
상위 생성자의 모든 속성을 물려받아 사용할 수 있음

상속 ex03-04.js

중복속성

/**
 * 고등학교 성적관리 생성자 함수(총점과 평균 계산)
* @param {number} kor 국어 점수
* @param {number} eng 영어 점수
*/
function HighSchool(kor, eng) {
  // 속성 초기 화
  this.kor = kor;
  this.eng = eng;
}

HighSchool.prototype.sum = function () {
  return this.kor + this.eng;
};

HighSchool.prototype.avg = function () {
  return this.sum() / 2;
};

const s1 = new HighSchool(100, 91);
console.log("고등학교 총점", s1.sum());
console.log("고등학교 평균", s1.avg());

/**
 * 대학교 성적관리 생성자 함수(총점, 평균과 학점 계산)
* @param {number} kor 국어 점수
* @param {number} eng 영어 점수
*/
function College(kor, eng) {
  this.kor = kor;
  this.eng = eng;
}

College.prototype.sum = function () {
  return this.kor + this.eng;
};

College.prototype.avg = function () {
  return this.sum() / 2;
};
College.prototype.grade = function () {
  const avg = this.avg();
  if (avg >= 90) {
    return "A";
  } else if (avg >= 80) {
    return "B";
  } else if (avg >= 70) {
    return "C";
  } else if (avg >= 60) {
    return "D";
  } else {
    return "F";
  }
};

const c1 = new College(80, 91);
console.log("대학교 총점", c1.sum());
console.log("대학교 평균", c1.avg());
console.log("대학교 학점", c1.grade());

상속 받는 코드

/**
 * 고등학교 성적관리 생성자 함수(총점과 평균 계산)
* @param {number} kor 국어 점수
* @param {number} eng 영어 점수
*/
function HighSchool(kor, eng) {
  // 속성 초기 화
  this.kor = kor;
  this.eng = eng;
}

HighSchool.prototype.sum = function () {
  return this.kor + this.eng;
};

HighSchool.prototype.avg = function () {
  // 소수 첫째자리에서 반올림한다
  return Math.round(this.sum() / 2);
};

const s1 = new HighSchool(100, 91);
console.log("고등학교 총점", s1.sum());
console.log("고등학교 평균", s1.avg());

/**
 * 대학교 성적관리 생성자 함수(총점, 평균과 학점 계산)
* @param {number} kor 국어 점수
* @param {number} eng 영어 점수
*/
function College(kor, eng) {
  this.kor = kor;
  this.eng = eng;
}

// College가 HighSchool을 상속 받는다
College.prototype = new HighSchool();
College.prototype.**constructor** = College;

College.prototype.grade = function () {
  const avg = this.avg();
  if (avg >= 90) {
    return "A";
  } else if (avg >= 80) {
    return "B";
  } else if (avg >= 70) {
    return "C";
  } else if (avg >= 60) {
    return "D";
  } else {
    return "F";
  }
};

const c1 = new College(80, 91);
console.log("대학교 총점", c1.sum());
console.log("대학교 평균", c1.avg());
console.log("대학교 학점", c1.grade());

constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다.

gpt 설명
- HighSchool: 점수 → sum(), avg() 계산만 담당
- College: HighSchool 기능 + grade() 확장
- College.prototype = new HighSchool() 를 통해 상속 구현
- constructor는 다시 College로 되돌려줘야 정확함
constructor란?
- 🔧 constructor란?
  - constructor는 객체의 프로토타입(prototype) 객체에 기본으로 포함된 속성이야.
  - 이 속성은 해당 객체가 어떤 생성자 함수에 의해 생성되었는지를 가리켜.
  - 모든 함수는 기본적으로 .prototype.constructor 속성을 가지고 있어.
  예시:
```
function HighSchool(kor, eng) {
  this.kor = kor;
  this.eng = eng;
}

console.log(HighSchool.prototype.constructor === HighSchool); // ✅ true
```
  이 말은 즉,
```
const s1 = new HighSchool(100, 90);
```
  를 했을 때, s1.constructor === HighSchool 이 성립해.
  
  왜냐면 s1.__proto__ === HighSchool.prototype 이고, 그 안에 있는 .constructor가 HighSchool을 가리키니까!
- 🔁 근데 상속할 때 문제가 생겨!
```
College.prototype = new HighSchool();
```
  이렇게 상속하면 College.prototype은 이제 HighSchool의 인스턴스가 되니까,
  
  College.prototype.constructor는 HighSchool을 가리키게 돼.
```
console.log(College.prototype.constructor === HighSchool); // ❌ 우리가 원하는 게 아님
```
  그래서 원래의 생성자 정보가 꼬이게 되고, 이걸 명시적으로 다시 설정해줘야 해:
```
College.prototype.constructor = College;
```
  이렇게 하면:
```
const c1 = new College(80, 91);
console.log(c1.constructor === College); // ✅ true
```
- 🔍 왜 constructor를 바르게 지정해야 할까?
  1. 디버깅/로깅할 때 어떤 생성자로 만들어졌는지 알 수 있음
  2. 클래스 체계를 흉내 낼 때 정확한 정보 제공
  3. 어떤 프레임워크/라이브러리는 constructor 값을 보고 타입 분기 처리하기도 함
- 📌 요약
  - .constructor는 어떤 생성자 함수로 만들어졌는지 알려주는 속성
  - 상속할 때 prototype = new Parent() 하면 .constructor가 꼬이므로 constructor를 직접 재지정해줘야 함
  - 바르게 지정해두면 디버깅이나 타입 확인에서 유리함

상속 ex03-04.js를 ex03-05.js로 HighSchool → College 상속 흐름 시각 정리

/* ex03-04 */
/**
 * 고등학교 성적관리 생성자 함수(총점과 평균 계산)
  * @param {number} kor 국어 점수
  * @param {number} eng 영어 점수
  */
function HighSchool(kor, eng) {
  // 속성 초기 화
  this.kor = kor;
  this.eng = eng;
}

HighSchool.prototype.sum = function () {
  return this.kor + this.eng;
};

HighSchool.prototype.avg = function () {
  // 소수 첫째자리에서 반올림한다
  return Math.round(this.sum() / 2);
};

const s1 = new HighSchool(100, 91);
console.log("고등학교 총점", s1.sum());
console.log("고등학교 평균", s1.avg());

{...}
console.log(College.prototype);
// College의 프로토타입 출력

/* ex03-05 */
{...}
/**
 * 대학교 성적관리 생성자 함수(총점, 평균과 학점 계산)
  * @param {number} kor 국어 점수
  * @param {number} eng 영어 점수
  */
function College(kor, eng) {
  this.kor = kor;
  this.eng = eng;
}

// College가 HighSchool을 상속 받는다

function inherite(Parent, Child) {
  // 첫번째 방법
  const F = new Function();
  F.prototype = HighSchool.prototype; // F의 프로토타입을 HighSchool의 프로토타입으로 변경
  College.prototype = new F(); // F인스턴스 생성후 College의 프로토타입으로 대입한다
  College.prototype.constructor = College;

  // 2번째 방법
  Child.prototype = Object.create(Parent.prototype);
  //create함수는 지정한 prototype 객체를 참조하는 인스턴스 생성
  Child.prototype.constructor = Child; 
  // 자식 생성자의 constructor 프로퍼티 복원
}

inherite(HighSchool, College);

College.prototype.grade = function () {
  const avg = this.avg();
  if (avg >= 90) {
    return "A";
  } else if (avg >= 80) {
    return "B";
  } else if (avg >= 70) {
    return "C";
  } else if (avg >= 60) {
    return "D";
  } else {
    return "F";
  }
};

const c1 = new College(80, 91);
console.log("대학교 총점", c1.sum());
console.log("대학교 평균", c1.avg());
console.log("대학교 학점", c1.grade());

console.log(College.prototype);
// College의 프로토타입 출력

Class 사용
- ECMAScript6(2015)에 추가된 키워드
- 객체지향 언어의 class와 비슷한 방식으로 생성자 함수를 기술
- 객체를 생성하고 prototype 기반의 상속을 보다 명료하게 표현
- class는 사실 **함수**이며 class 선언문과 class 표현식 방식으로 사용
- class 선언문
```
// 기본 타입
class 클래스명 {...}
// 예시
class hi {...}
```
  - class 표현식
```
// 기본 타입
const 변수 = class {...}
// 예시
const hi = class {...}
```
- Class body와 메서드 정의
  
  클래스의 바디에 클래스 멤버변수(속성)와 메서드 정의
  
  멤버변수의 초기화는 Constructor 메서드에 정의
- Constructor 메서드(생성자)
  - 객체를 생성하고 초기화 하는 메서드(생략 가능)
  - 주로 클래스 멤버변수를 초기화하는 작업
  - constructor라는 이름으로 작성
  - 하나만 작성 가능
  - super()로 부모의 생성자 호출 가능
```
// ✅ Class 문법 (ES6)
class HighSchool {
  constructor(kor, eng) {
    this.kor = kor;
    this.eng = eng;
  }
}

const s1 = new HighSchool(100, 90);
console.log(s1.kor, s1.eng);
```
```
// ✅ Function 생성자 방식
function HighSchool(kor, eng) {
  this.kor = kor;
  this.eng = eng;
}

const s1 = new HighSchool(100, 90);
console.log(s1.kor, s1.eng);
```

클로저

클로저란
- 실행이 끝난 외부 함수의 변수에 접근할 수 있는 내부 함수
- 함수가 생성되는 시점을 기준으로 접근 가능한 변수는, 그 유효범위가 사라진 후에도 접근 가능
- 클로저로 인해 유효 범위가 사라진 변수와 함수를 사용할 수 있고, 변수의 경우 그 값을 변경할 수도 있다.
- ex04-01.js
```
const topLevel = "최상위 변수";

function outer() {
  const innerVal = "outer의 지역변수";
  console.log(topLevel); //=> 1️⃣
  console.log(innerVal); //=> 2️⃣
}

outer();
console.log(topLevel); //=> 3️⃣
console.log(innerVal); //=> 4️⃣
/* 출력 순서
  1️⃣ 2️⃣ 3️⃣ (4️⃣는 에러) 
*/
```
  - 1️⃣ 전역 변수 topLevel은 함수 내부에서도 접근 가능하다. 스코프 체인에 따라 하위 스코프에서 상위 스코프 변수를 찾는다.
  - 2️⃣ innerVal은 outer 함수 내부에서 선언된 지역 변수이다. 함수 안에서는 자유롭게 참조 가능하지만 함수 밖에서는 불가하다.
  - 3️⃣ topLevel은 전역 변수이므로 함수 외부에서도 문제 없이 접근됨. 전역 스코프에서 선언된 변수는 어디서든 참조가 가능하기 때문이다.
  - 4️⃣ innerVal은 outer 함수가 종료되면 사라지는 지역 변수이다. 함수 밖에서 접근하면 ReferenceError가 발생하게 된다.
```
const topLevel = "최상위 변수";

function outer() {
  const innerVal = "outer의 지역변수";
  console.log(topLevel); // 1️⃣
  console.log(innerVal); // 2️⃣
  return innerVal;
}

outer();
console.log(topLevel); // 3️⃣
console.log(innerVal); // 4️⃣

/* 출력순서
  1️⃣ 2️⃣ 3️⃣ (4️⃣는 에러)
*/
```
  - 1️⃣ topLevel은 함수 외부에서 선언된 전역 변수이며, 함수 내부에서 자동으로 참조된다. 자바스크립트의 스코프 체인 덕분에 하위 스코프 에서는 상위 스코프에 있는 변수에 접근할 수 있게 된다.
  - 2️⃣ innerVal은 outer 함수 안에서 선언된 지역 변수이기 때문에 해당 함수 내부에서만 유효하다. 지역 스코프는 함수 실행 시 생기며 함수 종료와 함께 메모리에서 제거된다.
  - 3️⃣ topLevel은 전역에 선언되어 있기 때문에 어디서든 접근 가능하다. 함수 밖의 console.log(topLevel)도 전혀 문제 없이 실행된다. 전역 변수는 전체 코드에서 공유 가능한 값이다.
  - 4️⃣ innerVal은 outer 내부에서 선언되었기 때문에 외부에서는 참조할 수 없다. 함수 밖에서 접근하려고 하면 ReferenceError 발생.
    이는 함수 스코프에 따른 정상적인 동작이다.
```
const topLevel = "최상위 변수";

function outer() {
  const innerVal = "outer의 지역변수";
  console.log(topLevel); // => 1️⃣
  console.log(innerVal); // => 2️⃣
  const innerFn = function () {
    console.log(innerVal); // => 3️⃣
  };
  innerFn();
}

outer();
console.log(topLevel); // => 4️⃣
console.log(innerVal); // => 5️⃣
/* 출력 순서
1️⃣ 2️⃣ 3️⃣ 4️⃣ (5️⃣는 에러)
*/
```
  - 1️⃣ 전역 변수는 함수 내부에서도 참조할 수 있는 스코프 체인을 가진다.
  - 2️⃣ 지역 변수는 선언된 함수 내부에서만 유효하며 외부에서는 불가하다.
  - 3️⃣ 중첩 함수는 상위 함수의 지역 변수까지 접근할 수 있는 클로저다.
  - 4️⃣ 전역 변수는 어디에서든 접근 가능하여 오류 없이 출력된다.
  - 5️⃣ innerVal 은 outer함수가 종료되면 메모리에서 제거되므로 오류.
```
const topLevel = "최상위 변수";

function outer() {
  const innerVal = "outer의 지역변수";
  console.log(topLevel); // => 1️⃣
  console.log(innerVal); // => 2️⃣
  const innerFn = function () {
    console.log(innerVal); // => 3️⃣
  };
  return innerFn;
}

const innerFn = outer();
console.log(topLevel); // => 4️⃣
// console.log(innerVal); // => 5️⃣
innerFn(); // => 6️⃣
/* 출력 순서
1️⃣ 2️⃣ 4️⃣ 6️⃣ (5️⃣는 주석 처리)
*/
```
  - 1️⃣ 전역 변수는 하위 함수에서도 접근 가능하다. 스코프 체인 덕분이다.
  - 2️⃣ 지역 변수는 선언된 함수 내부에서만 접근 가능하다. 정상 출력된다.
  - 3️⃣ 내부 함수는 부모 함수의 지역 변수를 참조할 수 있다. (클로저)
  - 4️⃣ 전역 변수는 어디에서든 접근 가능하여 오류 없이 출력된다.
  - 5️⃣ innerVal 은 외부에선 접근할 수 없어 주석 해제 시 오류 발생한다.
  - 6️⃣ innerFn은 outer의 지역변수를 기억하는 클로저로 동작한다.

커링(currying)
- 여러개의 인자를 받는 함수를 단일 인자를 받는 함수의 체인으로 호출하도록 바꾸는 함수형 프로그래밍 기법 중 하나
  - sum(x, y) -> sum(x)(y)
- 함수형 프로그래밍 언어에 많은 공헌을 한 미국의 수학자, 논리학자인 하스켈 커리의 이름에서 따옴
- 함수의 가독성, 재사용이 좋아짐.
- 마지막 인자가 입력될 때까지 함수의 실행 타이밍을 조절할 수 있음.
- ex04-03.js
```
function sum(a, b, c) {
  return a + b + c;
}
console.log(sum(10, 20, 30));

// 함수 선언식
let currySum = function (a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
};

// 화살표 함수
currySum = (a) => (b) => (c) => a + b + c; 
// 실행 할 코드가 a, b, c 각각 하나이기 때문에
// 중괄호 생략 가능함

console.log(currySum(10)(20)(30));
```
  📌 정리된 호출 구조
```
  currySum(10)
     └──> returns (b) => (c) => a + b + c

  currySum(10)(20)
     └──> returns (c) => a + b + c

  currySum(10)(20)(30)
     └──> returns 60
```
- ex04-04.js, index.html
```
  
```
  lodash 라이브러리의 유틸 함수들을 웹에서 바로 사용하기 위해 추가한다. ✅
```
const sum = function (x, y) {
  return x + y;
};

const currySum = _.curry(sum);

console.log(sum(10, 20));

console.log(currySum(30)(40));
```
  앞서 03에서 열심히 함수를 리턴하는 방식으로 커링을 직접 만들었지만, lodash의 _.curry를 쓰면 이런 코드를 자동으로 커링 함수로 변환해준다.

캡슐화
- 객체 내부에서만 접근 가능한 속성을 만들어 사용하고 외부에서는 해당 속성을 직접 접근하지 못하도록 만드는 객체지향 언어의 특징(C++, Java에서는 private 키워드로 지정가능)
- 함수 내부에서 선언한 지역변수는 외부에서 접근하지 못하는 반면 내부 메서드인 클로저에서는 접근 가능하다는 특징을 이용해서 구현
- ES2019에서 class 정의시 속성명이나 메서드명 앞에 #을 붙이면 해당 class 내부에서만 접근 가능한 private 속성과 메서드 정의 기능이 추가됨
- ex04-02.js
```
// count 속성과 ride(), getCount() 메서드 작성
const Counter = function () {
  this.count = 0;
  this.getCount = function () {
    return this.count;
  };
  this.ride = function () {
    this.count++;
  };
};

const c = new Counter();
c.ride();
c.ride();

c.count += 40;

console.log("전체 탑승자", c.getCount()); 
```
  - ✅ 현재 코드의 주요 문제점
    1. count를 외부에서 직접 수정 가능함 (캡슐화 위반)
      - 아래 코드처럼 외부에서 count를 직접 조작할 수 있어:
        c.count += 40;
      - 이렇게 되면 ride() 메서드를 우회해서 값을 변경하는 게 가능하니까,내부 로직의 신뢰성을 깨뜨리게 돼.
      - 예를 들어 누군가 실수로 c.count = -999처럼 바꾸면 전체 로직이 무너짐.
    2. 객체의 상태 관리가 허술함
      - ride() 메서드는 count를 1씩 증가시키는 역할인데,외부에서 직접 count를 바꿔버리면 ride() 호출 여부와 무관해짐.
      - 즉, 내부 동작 추적이나 디버깅이 어려워지고, "진짜 몇 번 탔는가?"를 보장할 수 없음.
```
  // 계선점
  // count 속성과 ride(), getCount() 메서드 작성
  const Counter = function () {
    let count = 0;
    this.getCount = function () {
      return count;
    };
    this.ride = function () {
      if (count < 40) {
        count++;
      } else {
        console.log("정원이 초과되었습니다.!");
      }
    };
  };

  const c = new Counter();
  c.ride();
  c.ride();

  for (let i = 0; i < 40; i++) {
    c.ride();
  }

  console.log("전체 탑승자", c.getCount());
```
  - ✅ 개선된 점
    1. count가 클로저로 보호됨 (은닉화 성공)
      - let count = 0;이 생성자 함수 내부에 선언되어,외부에서는 count에 직접 접근하거나 수정할 수 없음.
      - 이제 c.count += 40 같은 조작은 불가능하고, 오직 메서드로만 조작 가능함.
    2. 불필요한 전역 변수 사용 제거됨
      - for문에서 let i = 0을 사용해, i가 블록 스코프 변수가 되었음.
      - 이전에는 i가 전역 변수로 암묵 선언되어 다른 코드에 영향을 줄 수 있었지만,이젠 안전하게 해당 블록 안에서만 동작함.
    3. 정원 제한 기능 추가로 안정성 향상
      - ride() 메서드에 count < 40 조건이 생겨, 최대 탑승 인원 제한 가능.
      - 초과 탑승 시 "정원이 초과되었습니다.!" 메시지를 출력하고 증가하지 않음.
      - 실세계 조건(예: 엘리베이터 인원제한 등)과 유사하게 제어 가능함.
    4. 캡슐화 + 로직 제어 동시 적용
      - 내부 상태는 외부에서 숨기면서, 탑승 조건까지 논리적으로 제어함.
      - 코드의 일관성, 안정성, 유지보수성 모두 향상됨.

Partial application

기존 함수의 매개변수 중 일부를 미리 채워둔 상태의 함수
커링된 함수를 일부 단계까지만 호출한 후 반환받은 함수를 나중에 나머지 인자를 전달해서 실행

ex02-17-05.js

// 기존 ex02-17-05.js
var count = 0;
const myObj = {
  count: 0,
  visit: function(){
    // 방문자를 한명 증가시킨다.
    this.count++; // this = myObj
    const visit2 = function(){
      this.count++; // this = window
    };
    visit2();
  },
};

myObj.visit(); // this = myObj
myObj.visit();
console.log('방문자수', myObj.count); // 2

// 변경된 ex02-17-05.js
var count = 0;
const myObj = {
  count: 0,
  visit: function () {
    // 방문자를 한명 증가시킨다.
    this.count++; // this = myObj
    const visitN = function (n) {
      this.count += n; // this = window
    };
    visitN.call(this, 2); // count를 2명 증가 => 1 + 2 = 3
    visitN.call(this, 2); // count를 2명 증가 => 3 + 2 = 5

    const visit3 = visitN.bind(this, 3);
    visit3(); // conut를 3명 증가 => 5 + 3 = 8 
    visit3(); // conut를 3명 증가 => 8 + 3 => 11 
  },
};

myObj.visit(); // this = myObj => 11
myObj.visit(); 
// 11 → 12(11 + 1) → 14(12 + 2) → 16(14 + 2) → 19(16 + 3) → 22(19 +3) 
console.log("방문자수", myObj.count); // 22

✅ 어떻게 바뀌었는가?

항목	왼쪽 코드	오른쪽 코드
내부 함수 이름	`visit2` (매개변수 없음)	`visitN` (매개변수 `n` 사용 가능)
호출 방식	그냥 호출 (`visit2()`)	`call`, `bind` 사용해 `this` 명확하게 설정
this 바인딩 문제	내부 함수에서 `this`는 `window` (또는 `undefined`)	`call`, `bind`로 `this`를 명시적으로 `myObj`로 설정
유연성	방문자 1명씩 증가만 가능	`n`명씩 유동적으로 증가 가능
재사용성	없음	있음 → 함수 재사용 가능 (`visitN`, `visit3`)

💡 어떤 점이 좋은가?
1. this 바인딩 문제 해결
  - 왼쪽에서는 visit2()를 일반 함수처럼 호출해서 this가 myObj가 아님
  - 오른쪽에서는 call, bind를 사용해 this를 myObj로 고정시켜 문제 해결됨
2. 유연한 매개변수 처리
  - 왼쪽은 무조건 1씩 증가
  - 오른쪽은 n을 전달할 수 있어, 1명, 2명, 3명 등 자유롭게 설정 가능 → visitN(this, 2) → 방문자 2명 증가
3. 재사용성 향상
  - 오른쪽의 visitN은 범용 함수로 여러 상황에서 재사용 가능
  - bind로 미리 this 고정해 만든 visit3은 나중에 반복 호출하기도 쉬움
4. 코드 확장성 향상
  - 함수 하나만 바꾸면 여러 상황에 적용 가능 → 유지보수 쉬워짐
  - 이후 방문 수를 로그에 저장하거나 조건부로 제한할 때도 유용함

📌 한줄 요약 👉 this 바인딩 문제를 해결하고, 매개변수를 받아 유연하고 재사용 가능한 함수 구조로 개선한 점이 핵심!

  ---

  - ✅ `bind()`란?
    `bind()`는 **함수의 `this` 값을 고정**해서 **새로운 함수를 반환**하는 메서드야.
    단, **바로 실행되지는 않고** 고정된 `this`를 가진 **새 함수만 리턴**해!

    ---

    - **🧠 핵심 개념 정리**

    - `bind()`는 기존 함수를 **복제**하면서 `this`를 지정한 함수로 만듦
    - 원본 함수는 변하지 않음
    - **언제 쓰냐면?**
        - 나중에 호출할 때 `this`가 바뀌지 않도록 미리 고정하고 싶을 때
        - 이벤트 핸들러나 콜백 함수에 넘길 때 `this`가 꼬이는 걸 막기 위해

    - **📌 한줄 요약 (강화 버전)**
    > bind()는 함수의 this를 특정 객체로 고정한 새로운 함수를 반환해, 나중에 호출할 때도 this가 바뀌지 않도록 보장한다.

메모이제이션

클로저가 필요 없음
메모이제이션 예제

ex02-23.js, ex04-05.js

// ex02-23.js
const isPrime = function (num) {
  isPrime._cache = isPrime._cache || {};

  if (isPrime._cache[num] !== undefined) {
    return isPrime._cache[num];
  }

  let prime = "맞음";
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) {
      prime = "아님";
      break;
    }
  }
  isPrime._cache[num] = prime;
  return prime;
};

console.time("소요시간");
console.log("3 -> ", isPrime(3));
console.log("4 -> ", isPrime(4));
console.log("5 -> ", isPrime(5));
console.log("6 -> ", isPrime(6));
console.log("7 -> ", isPrime(7));
console.log("8 -> ", isPrime(8));
console.log("9 -> ", isPrime(9));
console.log("1000000007 -> ", isPrime(1000000007));
console.log("1000000007 -> ", isPrime(1000000007));
console.log("1000000007 -> ", isPrime(1000000007));
console.timeEnd("소요시간");

// ex04-05.js
Function.prototype.memo = function (key) {
  this._cache = this._cache || {};

  if (this._cache[key] !== undefined) {
    return this._cache[key];
  } else {
    return (this._cache[key] = this(key));
  }
};

const isPrime = function (num) {
  let prime = "맞음";

  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      prime = "아님";
      break;
    }
  }

  return prime;
};

console.time("소요시간");
console.log("3 -> ", isPrime(3));
console.log("4 -> ", isPrime(4));
console.log("5 -> ", isPrime(5));
console.log("6 -> ", isPrime(6));
console.log("7 -> ", isPrime(7));
console.log("8 -> ", isPrime(8));
console.log("9 -> ", isPrime(9));
console.log("1000000007 -> ", isPrime.memo(1000000007)); // 첫번째 캐싱
console.log("1000000007 -> ", isPrime.memo(1000000007)); // 2번째 캐싱
console.log("1000000007 -> ", isPrime.memo(1000000007)); // 3번째 캐싱
console.timeEnd("소요시간");

isPrime.memo(3)
│
├─> memo 메서드 실행
│    ├─> 캐시 확인/초기화
│    ├─> 캐시에 3이 없으므로
│    │    └─> isPrime(3) 실행
│    │         └─> 소수 판별 후 true 반환
│    └─> 캐시에 저장 후 true 반환
│
isPrime(3)
└─> isPrime 함수 바로 실행
      └─> 소수 판별 후 true 반환

✅ 개선된 점 요약
1. 메모이제이션 로직을 함수 밖으로 분리 (재사용 가능성 증가)
  - 🔽 왼쪽: isPrime 함수 안에서 _cache 관리
  - 🔼 오른쪽: Function.prototype.memo로 메모이제이션을 유틸리티 함수화 → 다른 함수에서도 .memo() 호출만으로 캐시 기능을 간편하게 쓸 수 있음
2. 관심사의 분리 (기능 분리로 가독성 향상)
  - 왼쪽은 소수 판별 로직 + 캐시 로직이 뒤섞여 있음
  - 오른쪽은 isPrime은 오직 소수 판별만, memo는 캐싱만 처리해서 코드 역할이 명확히 나뉨
3. 코드 재사용성 증가
  - Function.prototype.memo를 모든 함수에서 사용할 수 있음:
```
const slowFn = (x) => { ... };
slowFn.memo(x); // 캐싱 자동 처리
```
4. 함수 정의가 더 순수해짐 (Pure Function화)
  - isPrime은 캐시나 외부 상태 없이 오직 인자만으로 동작
  - 이로 인해 테스트, 디버깅, 재사용이 훨씬 쉬워짐
5. 코드의 확장성 향상
  - 이후 memo()에 만료 시간, 캐시 크기 제한 같은 기능도 쉽게 추가 가능
  - 개별 함수 수정 없이 메모이제이션 정책을 전역에서 관리할 수 있음
📌 한 줄 요약

기능 분리 + 재사용성 + 유지보수성 + 확장성까지 모두 좋아진 구조!

설명

// ex04-05.js
Function.prototype.memo = function (key) {
  this._cache = this._cache || {};

  if (this._cache[key] !== undefined) {
    return this._cache[key];
  } else {
    return (this._cache[key] = this(key));
  }
};

const isPrime = function (num) {
  let prime = "맞음";
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      prime = "아님";
      break;
    }
  }
  return prime;
};

const sayHello = function (name) {
  return "Hello" + name;
};

console.log(sayHello("캐싱 안함"));
console.log(sayHello.memo("캐싱 함"));
console.log(sayHello.memo("캐싱 함"));

console.time("소요시간");

console.log("3 -> ", isPrime(3));
console.log("4 -> ", isPrime(4));
console.log("5 -> ", isPrime(5));
console.log("6 -> ", isPrime(6));
console.log("7 -> ", isPrime(7));
console.log("8 -> ", isPrime(8));
console.log("9 -> ", isPrime(9));

console.log("1000000007 -> ", isPrime.memo(1000000007));
console.log("1000000007 -> ", isPrime.memo(1000000007));
console.log("1000000007 -> ", isPrime.memo(1000000007));

console.timeEnd("소요시간");

1️⃣ 1. Function.prototype.memo = function (key) { ... }

📌 핵심 기능

모든 함수에 공통적으로 사용할 수 있는 메모이제이션 기능을 추가함

this._cache를 통해 함수 단위로 캐시 객체를 저장

같은 입력이 들어오면 결과를 다시 계산하지 않고 캐시된 값 반환
2️⃣ sayHello.memo("캐싱 함")

📌 역할
- sayHello("캐싱 함")을 최초 한 번 계산 후 캐시에 저장
- 두 번째부터는 새로 계산하지 않고 저장된 결과를 반환
🧩 포인트
- "캐싱 함" → 내부적으로 sayHello._cache["캐싱 함"]에 저장됨
- 결과적으로 불필요한 계산을 줄여 성능 향상
3️⃣ isPrime.memo(1000000007)

📌 역할 소수 판별 함수 isPrime에 대해 고비용 계산을 메모이제이션으로 최적화

1000000007은 매우 큰 수이므로 첫 계산에 시간이 오래 걸림

이후 동일한 입력에 대해선 즉시 캐시된 값 반환

🧩 정리: 강조된 부분의 의미

번호	코드	설명
1️⃣	`Function.prototype.memo`	모든 함수에 캐시 기능 부여
2️⃣	`sayHello.memo(...)`	단순 문자열 반환 함수도 캐싱 가능
3️⃣	`isPrime.memo(...)`	고비용 연산의 캐싱 효과를 보여주는 사례

🔗 배웠던 파일

❓ 생긴 질문 / 더 알아볼 것

아..오늘 배웠던거 너무 어렵다... 선생님께서 오늘 배운거 어려운 개념이라고 하는데 진짜~ 너무 어려웠다... 질문도 막 하고 싶은데 아직 지식이 없는지 질문이 떠오르진 않았다..

🔗 참고 자료

📆 2025.04.21 ‐ 2025.04.22 ‐ Function invocation [멋쟁이사자처럼부트캠프 프론트엔드13기]

Tue, 22 Apr 2025 13:08:16 GMT

🧠 배운 점 & 정리

함수로 호출
- 일반적인 함수 호출 방법
- 함수();
- this 는 window 객체
  - window 객체는 어디서나 참조 가능하므로 this를 사용할 필요 없음
```
function f1(){
  console.log(this);
  this.alert();
  window.alert();
  alert();
};
f1();

const f2 = function(){
  console.log(this);
};
f2();
```

메서드
- 메서드로 호출
  - 객체에 정의된 메서드를 호출할 때
  - 객체 메서드명
  - this 는 메서드를 정의한 객체
    - this 는 생성된 객체를 참조하므로 객체에 종속적인 속성을 부여하는게가능
    - 함수를 하나만 정의하고 여러 객체에서 메서드로 사용
    - 자바스크립트로 객체지향 프로그래밍을 가능하게 하는 중요한 특징
```
window.name = "global"; // window 브라우저가 가지고 있는 전역 객체
global.name = "global"; // node.js가 가지고 있는 전역 객체
globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함
```
- 화살표 함수 호출
  - 일반 함수나 메서드와 동일하게 호출하지만 함수 내부에 arguments 나 this 가 생성되지 않고 상위 컨텍스트의 arguments, this 를 사용하게 됨
```
const getPingName = () => {
  console.log(this);
  return this.name;
};

const ping1 = { name: '바로핑', age: 11, getName: getPingName };
const ping2 = { name: '라라핑', age: 9, getName: getPingName };

console.log(baro.age, baro.getName());
console.log(rara.age, rara.getName());
```

apply(), call()

apply(), call() 메서드로 호출
- 함수에 정의된 메서드
- 함수명.apply(), 함수명.call() 형태로 호출
- this 는 apply(), call() 메소드의 첫번째 인자로 전달되는 객체
- this 를 명시적으로 지정할 수 있음
- 콜백 함수 호출 시 주로 사용

apply(p1, p2)

두 개의 매개변수를 가짐
첫 번째 매개변수 (p1) 에는 this 로 사용할 객체를 전달 ⇒ 생략가능
두 번째 매개변수 (p2) 에는 함수에 전달할 인자값 배열 ⇒ 생략가능

단 매개변수가 2개 이상으로 들어가야할때는 p2를 배열로 전달한다

ex02-05.js

function add(x, y) {
  console.log(this);
  return x + y;
}

console.log(add.apply({ name: "apply" }, [100, 10])); // this는 {name: "apply"}
// 출력 결과 {name: "apply"}
// x= 100, y=10 => x + y = 100 + 10 = 110

ex02-15.js

globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함

const getPingName = function () {
  return this.name;
};

const baro = new Object();
baro.name = "바로핑";
baro.age = 9;
baro.getName = getPingName;

const rara = {
  name: "라라핑",
  age: 8,
  getName: getPingName,
};

// 함수 호출하는 방법 1 - 일반 함수로 호출(this는 window)
console.log(getPingName());

// 함수 호출하는 방법 2 - 메서드로 호출(this는 메서드를 정의한 객체, this는 baro )
console.log(baro.age, baro.getName()); // getName의 this는 baro
console.log(rara.age, rara.getName()); // getName의 this는 rara

console.log("=========================================");
console.log(baro.getName(), baro.getName.apply(rara)); 
// this는 각각     baro,     rara

call(p1, p2, p3, …)

여러 개의 매개변수를 가짐
첫 번째 매개변수 (p1) 에는 this 로 사용할 객체를 전달

두 번째 이후의 매개변수 (p2, p3, …) 에는 함수에 전달할 인자값을 차례대로지정

ex02-05.js

function add(x, y) {
  console.log(this);
  return x + y;
}
console.log(add.call({ name: "call" }, 60, 10)); // this는 {name: "call"}
// 출력 결과 {name: call}
// x= 60, y=10 => x + y = 60 + 10 = 70

ex02-15.js

globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함

const getPingName = function () {
  return this.name; // 호출한 객체의 name 속성을 반환함
};

const baro = new Object(); // 바로라는 이름을 가진 새로운 객체 생성
baro.name = "바로핑"; // name 속성 설정
baro.age = 9; // age 속성 설정
baro.getName = getPingName; // getPingName 함수를 메서드로 할당

const rara = { // rara라는 이름을 가진 새로운 배열을 만듦
  name: "라라핑", // 이름
  age: 8, // 나이
  getName: getPingName, // 나의 이름
};

// 함수 호출하는 방법 1 - 일반 함수로 호출(this는 window)
console.log(getPingName());  // this.name => global

// 함수 호출하는 방법 2 - 메서드로 호출(this는 메서드를 정의한 객체, this는 baro )
console.log(baro.age, baro.getName()); // getName의 this는 baro
console.log(rara.age, rara.getName()); // getName의 this는 rara

// call을 사용하여 this를 명시적으로 지정
console.log("=========================================");
console.log(getPingName(), getPingName.call(baro), getPingName.call(rara));
// this는  window,                          baro,                   rara

배열의 push() 메서드 기능
- 배열의 마지막에 지정한 요소를 추가한다.
- this로 지정된 Array 객체의 length 속성값에 해당하는 속성을 만들고 지정한 요소를 저장한 후 length를 하나 증가시킨다.
Array의 push() 메서드를 이용하여 객체를 배열처럼 동작시키기
- length 속성 추가
- Array.prototype.push.call(객체, 추가할 요소) ⇒ ex01-28.js

생성자 함수
- 생성자 함수 (객체지향 언어의 클래스와 비슷) 호출
  - 함수를 생성자로 사용할 경우
    - new 함수명()
    - this는 생성자를 통해 생성된 객체
- 생성자로 호출될 때의 내부 동작 (ex02-19.js)
```
/*
함수 호출 방법 4 생성자 함수
*/

globalThis.name = "global"; // 브라우저면 window로 인식하고 node.js는 global로 인식함

const getPingName = function () {
  return this.name;
  // 화살표 함수를 만들면 this를 생성하지 않음
};

// 객체를 생성해서 반환하는 함수(생성자)
function Ping(name, age) {
  this.name = name;
  this.age = age;
  this.getName = function () {
    return this.name;
  };
}

/**
 * new의 동작
  * 1. 빈 객체를 참조하는 this 생성
  * 2. this를 생성자 함수에 전달
  * 3. 생성자 함수가 아무것도 리턴하지 않는다면 this를 자동으로 리턴
  */
const baro = new Ping("바로핑", 7);
const rara = new Ping("라라핑", 8);
const copyPing = new Ping("카피핑", 12);

baro.age++;
rara.age++;

console.log("이 핑의 이름은:", baro.getName(), "| 나이는:", baro.age); // getName의 this는 baro
console.log("이 핑의 이름은:", rara.getName(), "| 나이는:", rara.age); // getName의 this는 rara
console.log("이 핑의 이름은:", copyPing.getName(), "| 나이는:", copyPing.age); // getName의 this는 copyPing
```
  - 비어있는 객체를 새로 생성
```
const baro = new Ping("바로핑", 7);
```
  new Ping(...)을 호출하면, 자바스크립트는 내부적으로
  
  this = {} 와 같은 비어 있는 객체를 먼저 생성한다.
  - 새로 생성된 객체는 this 매개변수로 생성자 함수에 전달
```
function Ping(name, age) {
  this.name = name;
  this.age = age;
  this.getName = function () {
    return this.name;
  };
}
```
  위에서 만들어진 this = {}는
  
  Ping 함수 안으로 this라는 이름으로 들어감
  
  그런 다음 this.name, this.age 같은 속성들이 채워짐
  - 명시적으로 반환하는 객체가 없다면 생성된 객체를 반환
```
// Ping 함수에는 return이 없음
```
  Ping 함수는 명시적으로 return을 하지 않음 →
  
  그래서 자바스크립트는 자동으로 채워진 this 객체를 리턴함
  
  즉, baro 변수에는 { name: "바로핑", age: 7, getName: function }이 저장됨
  - 객체지향 프로그램의 new 연산자와 비슷한 동작
```
const baro = new Ping("바로핑", 7);
```
  이 전체 흐름은 Java, C++ 같은 객체지향 언어에서의 new와 유사함
  
  즉, new는 객체 생성 + 초기화 + 반환까지 한 번에 해주는 키워드야
- 생성자를 작성할 때 고려해야 할 것들
  - 일반 함수처럼 호출할 수 있지만, 이럴 경우 생성자 내부의 this는 window 객체를 가리키므로 객체에 종속적인 값을 지정할 수 없으므로 의미가 없다.
  - 명명(naming) 규칙
    - 일반 함수: 작업한 동작을 나타내는 동사로 이름 짓고 소문자로 시작
    - 생성자: 생성할 객체를 나타내는 명사로 이름 짓고 대문자로 시작

🔗 배웠던 파일

ex02-14 this는 window 객체
ex02-15 메서드-function
ex02-16 메서드-function 화살표 함수
ex02-17-01 카운터 예제 - visit2 함수 호출 실패
ex02-17-02 카운터 예제 - visit2 함수 호출 (변수선언)
ex02-17-03 카운터 예제 - visit2 함수 호출 (call)
ex02-17-04 카운터 예제 - visit2 함수 호출 (화살표 함수)
ex02-17-05 카운터 예제 - visit2 함수 호출 실패
ex02-18-01 최소값을 반환 - apply사용
ex02-18-02 최소값을 반환 - 전개 연산자(...) 사용
ex02-19 생성자 함수

❓ 생긴 질문 / 더 알아볼 것

this...그놈의 this... 딥다이브 열심히 보면서 해결해야겠다...

🔗 참고 자료

📆 2025.04.21 ‐ JavaScript Function Deep Dive [멋쟁이사자처럼부트캠프 프론트엔드13기]

Mon, 21 Apr 2025 08:45:01 GMT

🧠 배운 점 & 정리

First class object
- 일급 객체
  - 변수 , 배열 엘리먼트 , 다른 객체의 프로퍼티에 할당 될 수 있다
  - 함수의 인자로 전달 될 수 있다
  - 함수의 결과 값으로 반환 될 수 있다
  - 리터럴로 생성될 수 있다
  - 동적으로 생성된 프로퍼티를 가질 수 있다
- 자바스크립트의 함수(function) 는 일급객체 이다
  함수 == 호출 + 객체
- 함수가 일급 객체라서 가능한 일
  - 콜백 함수 (Callback function)
    - 다른 함수에 인자로 전달되어 어떤 작업의 결과로 호출되는 함수
  - 고차 함수 (Higher order function)
    - 함수를 인자로 받거나 반환 하는 함수

함수 생성

선언문
```
// 기명함수 add라는 이름이 있음
function add(x, y){
  const result = x + y;
  return result;
}
// 익명함수, 함수 이름이 없다
function () {}
```
- function 키워드로 시작하는 함수 정의
- 함수 이름
  - 유효한 식별자이어야 함
  - 생략 가능
- 매개변수 목록
  - 쉼표로 구분된 매개변수 목록과 그 매개변수 목록을 둘러싸고 있는 괄호
  - 매개변수는 생략 가능 , 괄호는 필수
- 함수 본문
  - 중괄호로 둘러싸여 있는 자바스크립트 구문
  - 본문은 생략 가능 , 중괄호는 필수
표현식
- 함수 정의를 변수에 할당
  - 변수명을 함수명처럼 사용
- 변수에 익명함수를 지정
```
const add = function (x,y){
  const result = x + y;
  return result;
};
add(10 , 20)
```
- 변수에 기명함수를 지정
  - 변수명을 함수명처럼 사용
  - 함수명을 통한 접근은 해당 함수 내부에서만 사용 가능 (재귀 함수)
```
const f = function factorial(n){
  if( n == 1 ){
  return 1
  }
  return n * factorial(n - 1);
};
console.log(f(5)); // 
console.log(factorial(5)); // 정삭 작동 안됨
```

Function 생성자 함수

함수 객체를 생성해서 반환

const add = new Function('x', 'y', 'let result = x + y; return result;');
//    변수 = 새로운 함수 (매개변수1, 매개변수 2, 실행할 코드)

가독성이 안 좋아서 진짜 잘 안쓰임

화살표 함수 표현식

함수 표현식의 대안으로 간결하게 함수 정의
익명 함수로만 정의 가능
실행할 코드가 하나만 있다면 함수 본문의 중괄호 생략 가능
함수 본문의 중괄호가 생략될 경우 함수의 코드가 자동으로 리턴값으로 사용됨
매개 변수가 하나만 있다면 매개변수의 괄호 생략 가능

// 기존 함수
let add = function (x, y) {
  return x + y;
};

// 화살표 함수
add = (x, y) => {
  return x + y;
};

// 화살표 함수 축약 => 실행할 코드가 단 한개면 가능
add = (x, y) => x + y;

// add 출력문
console.log(add(10, 20)); // 출력시 10 + 20 = 30

// 기존 함수
let add10 = function (x) {
  return x + 10;
};

// 화살표 함수
add10 = (x) => {
  return x + 10;
};

// 화살표 함수 축약 => 실행할 코드가 단 한개면 가능
add10 = (x) => x + 10;
add10 = x => x + 10; // 매개 변수가 하나만 있다면 매개변수의 괄호 생략 가능

// add10 출력문
console.log(add10(100)); // 100 + 10 = 110

호이스팅

함수 호이스팅
- 선언문 형태로 정의한 함수 의 유효 범위가 코드의 맨 처음부터 시작하 게 되는 자바스크립트의 동작 방식
- 특정 블럭의 코드가 자바스크립트 엔진에 의해 실행 되기 전에 호이스팅 단계를 거치는데 이때 선언문 형태의 함수가 생성 되므로 함수 선언 코드보다 먼저 호출하는 코드를 작성하는게 가능
```
console.log("실행 순서 2", add(10, 20));

function add(x, y) {
  return x + y;
}

console.log("실행 순서 3", add(10, 20));
```

변수 호이스팅

호이스팅 단계에서 var 로 선언한 변수 의 경우 선언만 되고 그 값은 undefined 로 초기화 됨
let, const 로 선언한 변수 의 경우 호이스팅 단계에서 선언은 되지만 초기화가 되지 않기 때문에 선언 전에 접근하면 에러 발생 (undefined 값도 할당되지 않은 상태)

console.log(a);
console.log(b); // ReferenceError: Cannot access 'b' before initialization
console.log(c); // ReferenceError: Cannot access 'c' before initialization

var a = 10; // 호이스팅 단계에서 undefinde로 초기화가 돼있음 => 그래서 에러 안남
let b = 20; // 호이스팅 단계에서 선언만 되고 초기화가 안됨 => 그래서 에러남
const c = 30; // 호이스팅 단계에서 선언만 되고 초기화가 안됨 => 그래서 에러남

console.log(a); // 정상적으로 출력 됨
console.log(b); // 정상적으로 출력 됨
console.log(c); // 정상적으로 출력 됨

console.log(add(10, 20)); 
// TypeError: add is not a function
// var 변수는 호이스팅되지만 초기화는 안되므로 이 시점에서 add는 undefined임

// 표현식 방식의 함수 정의
var add = function (x, y) {
  return x + y;
};

console.log(add(10, 20)); // 정상적으로 30으로 출력됨

TDZ(Temporal Dead Zone)

호이스팅 단계에서 변수가 선언된 이후 실제 초기화가 이루어지기 전까지의 구간
변수를 초기화 하기 이전에 변수에 접근할 수 없는 일시적인 영역으로 무분별한 변수 사용을 막고 예측 가능한 코드를 만들기 위한 장치

var add; // 호이스팅 시 선언되고 undefined로 초기화됨

// 본 코드 실행 단계 (아직 함수 할당 전)
console.log(add); 
// 출력 결과: undefined 
// 에러는 아님. 다만 아직 함수가 아님 => 실행 불가능

// 표현식 방식의 함수 정의 (함수를 변수에 할당)
var add = function (x, y) {
  return x + y;
};

console.log(add(10, 20)); // 30 출력됨

ex01-38.js gpt 설명

🔍 코드 설명

  function max(n1, n2) {
    let result; // 지역 변수 선언 (블록 스코프)

    if (n1 > n2) {
      result = n1;
    } else {
      result = n2;
    }

    return result;
  }

✅ 주요 포인트 설명

항목	설명
함수 이름	`max` — 두 수 중 최대값을 반환
매개변수	`n1`, `n2` — 비교할 두 숫자
지역 변수	`result` — 함수 내부에서만 사용되는 변수
스코프	`let`으로 선언된 `result`는 함수 내부(지역)에서만 유효함
호이스팅	`let`은 호이스팅은 되지만 TDZ(Temporal Dead Zone) 때문에 초기화 전 접근 불가능주석에 `var`로 바꾸면 호이스팅 학습 예시로 적절함

🧠 예시로 보는 지역 변수 vs 전역 변수
result는 함수 내부에서만 선언되었기 때문에 외부에서 접근 불가능

예시:

console.log(result); // ReferenceError: result is not defined

💡 var와 let의 차이 예시

function max(n1, n2) {
// var result; // 호이스팅으로 함수 최상단에 선언된 것처럼 작동
let result;     // let은 TDZ 영향 → 선언 전 접근 불가

if (n1 > n2) {
  result = n1;
} else {
  result = n2;
}

return result;
}

var로 선언하면, 함수 시작 시점에 undefined로 초기화됨
let은 선언 시점까지 TDZ에 있으므로, 선언 전 접근 시 ReferenceError

매개변수
- 기본값 매개변수 (Default parameters)
  - 함수 호출시 인자값을 전달하지 않으면 undefined가 전달됨
  - 값이 전달되지 않거나 undefined를 인자값으로 전달한 경우 지정한 매개변수를 기본값으로 초기화
- 나머지 매개변수 (Rest parameters)
  - 정해지지 않은 수의 매개변수를 배열로 전달받음
  - 함수의 마지막 매개변수 앞에 ...을 붙임
  - 나머지 매개변수의 특징
    - 배열로 수집: 모든 인수를 배열로 수집합니다.
    - 마지막 매개변수로만 사용: 함수 정의에서 나머지 매개변수를 사용한다.
    - 일반 매개변수와 함께 사용가능: 다른 매개변수와 함께 사용할 수 있습니다.
- 인자수
  함수에 정의한 매개변수와 함수 호출에 사용되는 인자의 수가 달라도 에러가 발생하지는 않음
  - 매개변수 > 인자
    - 부족한 인자에 대한 매개변수에는 undefined 가 지정됨
    - 다른 강형 언어에서는 매개변수를 호출안해주면 숫자 + 숫자 + undefined라서 NaN이 뜸
```
function add(x, y, z) {
  console.log(z); // undefined
  return x + y;
}
console.log(add(3, 4)); // 7 => z값은 알아서 무시
```
  - 매개변수 < 인자
    - 남는 인자에 대해서는 처리할 매개변수가 없기 때문에 무시됨
```
function add(x, y) {
  return x + y;
}
console.log(add(3 , 4 , 5)); // 7 => 5는 알아서 무시
```
- 암묵적 매개변수
  - 모든 함수에서 명시적으로 선언하지 않고 암묵적으로 사용할 수 있는 매개변수
  - arguments
    - 함수 내에서 arguments 변수로 접근 가능
    - 함수에 전달된 모든 인자들을 담고 있는 컬렉션 유사 배열 객체
    - 배열과 비슷하게 length 속성과 index로 각 인자에 접근 가능
    - arguments 대신 ES6 의 나머지 매개변수(…) 사용을 권장
  - this
    - 함수 내에서 this 키워드로 접근 가능
    - 함수 컨텍스트 객체
    - 함수를 호출한 객체 에 대한 참조

🔗 배웠던 파일

ch01
- ex01-38 전역 변수와 지역 변수 - 호이스팅
- ex01-42 기본 매개변수
- ex01-43 나머지 매개변수
ch02
- ex02-01 일급 객체
- ex02-02 함수의 인자
- ex02-03 함수의 결과 값
- ex02-04 동적으로 생성된 프로퍼티
- ex02-05 함수 생성 - 선언문)
- ex02-06 함수 생성 - 표현식-1
- ex02-07 함수 생성 - 표현식-2-1
- ex02-08 함수 생성 - 표현식-2-2 (펙토리얼 구하기)
- ex02-09 함수 생성 - 표현식-3(Function 생성자 함수) => 잘 안씀
- ex02-10-01 함수 생성 - 화살표 함수
- ex02-11-01 함수 호이스팅 - 선언문 방식
- ex02-11-02 함수 호이스팅 - 선언문 방식
- ex02-12-01 변수 호이스팅
- ex02-12-02 변수 호이스팅 - 표현식 방식
- ex02-12-03 변수 호이스팅 - 표현식 방식
- ex02-13-01 매개변수 - arguments
- ex02-13-02 매개변수 - 나머지(...)

❓ 생긴 질문 / 더 알아볼 것

함수에 대해서 생각보다 모르는게 좀 많았고 호이스팅 관련해서 이해도가 떨어지는것 같아 보인다. 파일을 다시 한번 살펴보고 책도 읽으면서 정리해야겠다.

🔗 참고 자료

📆 2025.04.15 ‐ DOM manipulation, event [멋쟁이사자처럼부트캠프 프론트엔드13기]

Tue, 15 Apr 2025 08:35:46 GMT

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

요소 노드의 내부 컨텐츠 제어



   두부 
   계란 
   라면

elem.innerHTML

elem 의 내부 HTML 코드의 값을 조회하거나 수정
elem 자신은 제외

const shoppingList = document querySelector('#purchases');
console.log(shoppingList.innerHTML)


\n두부
\n계란
\n라면
\n

elem.outerHTML

elem 의 내부 HTML 코드의 값을 조회하거나 수정
elem 자신을 포함

const shoppingList = document querySelector('#purchases');
console.log(shoppingList.innerHTML)


>\n두부
\n계란
\n라면
\n

elem.textContent

elem 의 내부 텍스트 노드의 값을 조회하거나 수정
소스코드의 값 그대로 조회

const secondLi = document.querySelector ('#purchases > li:nth-child(2)')
console.log(secondLi.textContent); //계란✔️



  두부 ✔️ 
  계란 ✔️
  라면 ✔️

elem.innerText
- elem 의 내부 텍스트 노드의 값을 조회하거나 수정
- 브라우저에 의해서 실제 보이는 값으로 조회
- 화면에 보이지 않는 요소는 제외 (hidden)
```
const secondLi = document.querySelector("#purchases > li:nth-child(2)");
console.log(secondLi.innerText); // 계란
```
```
  두부 ✔️ 
  계란 ✔️
  라면 ✔️
```

노드 생성

document 객체의 createXxx () 메소드를 이용

메서드	설명
`createElement(nodeName)`	지정한 태그명으로 요소노드 생성
`createTextNode(nodeValue)`	지정한 내용으로 텍스트노드 생성
`createAttribute(attributeName)`	지정한 이름으로 속성노드 생성

const newLiNode = document.createElement("li");     // li 요소 노드 생성
const newTextNode = document.createTextNode("우유"); // "우유" 텍스트 노드 생성

🌲 노드 추가 전

document
└── html
  └── body
      └── ul (id="purchases")
          ├── li → '두부'
          ├── li → '계란'
          └── li → '라면'

🌳 노드 추가 후

document
└── html
  └── body
      └── ul (id="purchases")
          ├── li → '두부'
          ├── li → '계란'
          ├── li → '라면'
          └── li → '우유'

노드 추가

요소노드.appendChild(childNode)
지정한 노드를(childNode) 요소노드의 마지막 자식노드로 추가

설명코드(ex05-03.html)

const shopingList = document.getElementById("purchases");
const newLi = document.createElement("li"); // li요소를 생성한다
const newTxt = document.createTextNode("우유"); // 우유라는 텍스트를 생성한다

// ⚠️ 추가 전 상태 확인
console.log("추가하기 전: ", newLi.childNodes, newLi.firstChild, newLi.lastChild); // (자식 노드들, 첫 번째 자식 노드, 마지막 자식 노드)
console.log("추가하기 전: ", newLi.childNodes, "(자식요소)"); // li 요소 안에 있는 자식 노드 리스트
console.log("추가하기 전: ", newLi.firstChild, "(첫번째 자식)"); // 첫 번째 자식 노드 (없음 → null)
console.log("추가하기 전: ", newLi.lastChild, "(마지막 자식)"); // 마지막 자식 노드 (없음 → null)

// ⚙️ 텍스트 노드를 li에 추가
newLi.appendChild(newTxt);

// ✅ 추가 후 상태 확인
console.log("추가한 후: ", newLi.childNodes, newLi.firstChild, newLi.lastChild); // (자식 노드들, 첫 번째 자식 노드, 마지막 자식 노드)
console.log("추가한 후: ", newLi.childNodes, "(자식요소)"); // 텍스트 노드 "우유"가 들어간 자식 노드 리스트
console.log("추가한 후: ", newLi.firstChild, "(첫번째 자식)"); // 첫 번째 자식 노드 → 텍스트 노드 "우유"
console.log("추가한 후: ", newLi.lastChild, "(마지막 자식)"); // 마지막 자식 노드도 동일 → 텍스트 노드 "우유"

// 🧺 쇼핑 목록에 li를 추가
shopingList.appendChild(newLi);

노드 삽입

요소노드 insertBefore(newNode, targetNode)
지정한 노드를(newNode) targetNode 앞에 삽입

const purchases = document.getElementById("purchases")
purchases.insertBefore(newLiNode, purchases.firstChild);

pdf 를 바탕으로 트리구조

노드 추가 전

document
└── html
└── body
    └── ul (id="purchases")
        ├── li → '두부'
        ├── li → '계란'
        └── li → '라면'

노드 추가 후 (맨 앞에 '우유' 추가됨)

document
└── html
└── body
    └── ul (id="purchases")
        ├── li → '우유'
        ├── li → '두부'
        ├── li → '계란'
        └── li → '라면'

노드 삭제

요소노드.removeChild(childNode)
지정한 노드를(childNode) 삭제한다.

btn3.addEventListener("click", function () {
  const targetList = document.querySelectorAll(".list");
  for (let i = 0; i < targetList.length; i++) {
    //i=0, 두부
, i=1 어벤저스
    const firstLi = targetList[i].firstElementChild;
    //해당 노드를 삭제한다
    // 첫번째 항목이 존제하면 삭제
    if (addFirstLi) addFirstLi.remove(); // if 문 사용

    firstLi?.remove(); //옵셔널 체이닝

    // 나를 기준으로 내 부모(엄마)
    firstLi?.parentNode.removeChild(firstLi); //비권장, 에전에는 이것밖에 지원을 안했음 지금은 그냥 위에 remove()쓰면된다.
  }
});

이벤트 처리(ex05-04.html)

쇼핑 목록

진행 순서
- 1️⃣: 버튼 클릭 시 "여기여기" 출력됨 (HTML의 onclick)
- 2️⃣: JS에서 onclick으로 "눌렀어" 등록 → 기존 "여기여기" 덮어씀
- 3️⃣: 다시 onclick으로 "눌렀어요?" 등록 → "눌렀어"도 덮어씀
- 4️⃣: addEventListener로 "눌렀습니다." 추가됨
- 5️⃣: addEventListener로 "눌렀슴다." 또 추가됨

🔗 배웠던 파일

ex05-03 쇼핑목록 만들기
ex05-04 이벤트 처리

❓ 생긴 질문 / 더 알아볼 것

한번 딴 짓 좀 했다고 따라가기 힘드네.. 내일 진짜 열씸히 공부한다
코드를 많이 써보고 쓴 것을 바탕으로 질문을 하자..너무 질문 안하더라

🔗 참고 자료

📅 페이지 이동

◀ 이전날 | 다음날 ▶

📆 2025.04.14 - client‐side JS, DOM, node types [멋쟁이사자처럼부트캠프 프론트엔드13기]

Tue, 15 Apr 2025 08:35:11 GMT

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

클라이언트 사이드 자바스크립트란?

웹 브라우저에서 실행되는 자바스크립트 환경 ECMAScript: 자바스크립트 언어에 대한 표준 patrick Charollais | ECMA-262 - Ecma lnternational
DOM(Document Object Model): 웹페이지 제어를 위한 표준
- https://dom.spec.whatwg.org
- window.document 등
- Event
BOM(Browser Object Model): 웹페이지 외부의 브라우저 기능 제어를 위한 표준
- HTML 표준 : https://html.spec.whatwg.org
- window. navigator: 브라우저와 운영체제에 대한 정보 제공
- window.location: 현재 페이지의 URL 에 대한 제어 읽기 , 수정
- window.history: 브라우저의 과거 페이지 이동 정보에 대한 제어 읽기 , 수정
- alert, setTimeout 등

Web APIs: 브라우저가 제공하는 웹 기능을 위한 표준

https://spec.whatwg.org
XMLHttpRequest: 서버와 통신에 사용되는 객체 (Ajax)
Web Storage, Notifications API, WebSocket 등
1. DOM / 2. BOM / 3. WEB APls

서버 사이드 vs 클라이언트 사이드

🌐 클라이언트 사이드 (Client-side)
- ✅ 정의
  클라이언트는 사용자가 직접 보는 브라우저 쪽에서 동작하는 부분이에요. 즉, HTML, CSS, JavaScript가 브라우저에서 실행되어, 화면에 보이고 사용자의 행동에 반응하는 거예요.
- ✅ 특징
  - 브라우저에서 실행됨
  - 즉각적인 반응 제공 (예: 버튼 클릭 → 팝업 열기)
  - 주로 UI 처리, 입력 검증, 애니메이션 등을 담당
- ✅ 예시
  
  쇼핑몰 웹사이트에서 제품 목록을 보고, "장바구니 담기" 버튼을 누르면 숫자가 올라가는 기능
  
  → 이건 브라우저에서 JavaScript가 실행된 결과 = 클라이언트 사이드

🖥️ 서버 사이드 (Server-side)

✅ 정의

서버사이드는 브라우저와는 떨어진 서버에서 실행되는 코드예요.

Node.js 같은 백엔드 기술이 여기에 해당돼요. 브라우저가 서버에 요청(request)을 보내면, 서버는 데이터를 가공해서 응답(response)을 돌려줘요.

✅ 특징
- 서버에서 실행
- 데이터베이스 조회, 로그인 처리, 파일 저장 등 보안이나 데이터 처리에 강함
- 사용자는 서버 코드에 직접 접근할 수 없음
✅ 예시

로그인 버튼을 눌렀을 때, 입력한 이메일과 비밀번호가 서버에 전달되고, 서버가 데이터베이스를 확인한 후 로그인 성공 여부를 돌려주는 것

→ 이건 서버에서 Node.js가 동작한 결과 = 서버 사이드

🎯 비유로 이해해보기

역할	설명	비유
클라이언트사이드	사용자에게 보이는 화면을 꾸미고 반응	레스토랑의 메뉴판과 종업원
서버사이드	사용자의 주문을 처리하고 요리를 제공	주방에서 요리를 만드는 셰프와 주방 시스템

DOM(Document Object Model)
- 문서 객체 모델
- HTML, XML 등의 문서를 제어 하기 위한 방법을 정의
- JavaScript로 HTML을 조작할 수 있게 해주는 인터페이스
- 텍스트 기반의 HTML, XML 문서를 일정한 규칙에 의해 객체로 만들고 이를 이용하여 문서를 제어 특정 요소를 추출 , 삽입 , 삭제 , 이동 등

노드의 종류

노드 (Node) DOM 트리구조는 모든 구성원이 각각의 객체로 인식되며 이러한 객체 하나 하나를 노드라고 함

노드의 종류 주로 사용되는 노드

문서노드 (document Node)
요소 노드 (element Node)
속성 노드 (attribute Node)
텍스트 노드 (text Node)

종류	설명	`nodeName`	nodeType	nodeValue
문서 노드	문서	`#document`	9	null
요소 노드	태그	`태그의 이름`	1	null
속성 노드	요소의 속성	`속성의 이름`	2	속성의 값
텍스트 노드	요소의 내용	`#text`	3	문자열 값

노드 찾기

태그의 id 를 이용하여 노드 찾기 document.getElementById (id): id 속성값에 해당하는 노드객체를 반환
```
const purchases = document.getElementById("purchases");
```
태그명을 이용하여 노드 찾기 요소노드 getElementsByTagName(tagName) 지정한 요소노드의 하위 모든 요소를 대상으로 태그명 (tagName) 에 해당하는 요소노드를 배열로 반환 tagName 에 “*”을 지정하면 모든 요소를 배열로 반환
```
const liList = purchases.getElementsByTagName("li");
```

트리구조를 이용하여 노드 찾기

부모 자식 노드 찾기

요소노드의 속성	설명
childNodes	자식 노드가 배열 형태로 저장 ⇒ 유사 배열 객체
firstChild	첫번째 자식 노드(요소, 텍스트, 주석)
firstElementChild	첫번째 자식 요소 노드
lastChild	마지막 자식 노드(요소, 텍스트, 주석)
lastElementChild	마지막 자식 요소 노드
parentNode	부모 노드
```jsx
const purchases = document.getElementById('purchases'); // id를 추출하는 코드
const firstItem = purchases.firstElementChild; // 첫번째 자식만 선택함
const lastItem = purchases.lastElementChild; // 마지막 자식만 선택
const liList = purchases.childNodes; // 유사배열 객체 추출
```

형제 노드 찾기

속성	설명
previousSibling	바로 앞의 형제 노드(요소, 텍스트, 주석)
previousElementSibling	바로 앞의 형제 요소 노드
nextSibling	바로 뒤의 형제 노드(요소, 텍스트, 주석)
nextElementSibling	바로 뒤의 형제 요소 노드

const purchases = document.getElementById("purchases");
const secondItem = purchases.childNodes[3];
const firstItem = secondItem.previousElementSibling;
const lastItem = secondItem.nextElementSibling;

class 속성으로 노드 찾기 document.getElementsByClassName(className): class 속성값이 className 인 요소 노드의 목록을 반환
```
const purchases = document.getElementsByClassName("list")[0];
```
CSS 셀렉터 이용
- Selector: CSS 에서 사용하는 노드 선택 구문
  - https://www.w3.org/TR/selectors-3/
- document.querySelector (selector)
  - 지정한 selector 구문에 매칭되는 노드 목록 중 첫번째 노드를 반환
- document.querySelectorAll (selector)
  - 지정한 selector 구문에 매칭되는 노드 목록을 반환
```
var purchases = document.querySelector(".list");
var purchases = document.querySelector("#purchases");
var purchases = document.querySelectorAll("ul")[0];
```

🔗 배웠던 파일

❓ 생긴 질문 / 더 알아볼 것

오늘은 그래도 아는 내용이라서 수업을 대충대충 들었던 기분이었다 내일은 좀 더 집중해서 들어야지

🔗 참고 자료

[📆 2025.04.11] reference types, scope, let const, array methods - [멋쟁이사자처럼부트캠프 프론트엔드13기]

Fri, 11 Apr 2025 08:47:09 GMT

📚 오늘 공부한 내용

참조 타입의 특징
변수 스코프
ES6 - 변수 선언문
오늘 배운 배열 메소드

🧠 배운 점 & 정리

오늘 공부하면서 인사이트, 개념 요약 등

참조 타입의 특징
- 기본 데이터 타입은 실제 데이터를 저장하고 다룸
  - 함수 호출 방식: 값에 의한 호출 (Call by Value) ⇒ 원시타입
- 참조형 데이터 타입은 실제 데이터가 있는 위치의 주소를 저장하고 다룸
  - 함수 호출 방식: 참조에 의한 호출 (Call by Reference) ⇒ 참조타입
  - 예제코드
    js 메모리 구조
```
function add10(data1, data2) {
  data1 += 10;
  data2[0] += 10;
  console.log("함수 내부에서 호출", data1, data2[0]);
}

let d1 = 80; // => 원시타입, Number
let d2 = [80]; // => 참조타입, array(object)

console.log("함수 호출 이전", d1, d2[0]);

add10(d1, d2);

console.log("함수 호출 이후", d1, d2[0]);
```
  - call stack
    - 모든 변수는 여기에 적용됨
    - 밑에서 부터 데이터가 하나씩 쌓이는 곳
    - 함수가 끝나면 stack frame이 역순으로 사라짐 (제일 마지막에 쌓였던 것부터 사라짐)
    - ex01-37-02 - call stack
```
console.log("1. 프로그램 시작.");

function a(n1) {
  console.log("2. a 시작.", n1);
  const n2 = b(n1);
  console.log("7. a 종료.", n2);
}

function b(n3) {
  console.log("3. b 시작.", n3);
  const n4 = c(n3); // 3.5번
  console.log("6. b 종료.", n4);
  return n4;
}

function c(n5) {
  console.log("4. c 시작.", n5);
  const n6 = n5 + 10;
  console.log("5. c 종료.", n6);
  return n6;
}

a(10);

console.log("8. 프로그램 종료.");
```
    🧠 Call Stack 흐름 요약 (색깔 따라가기)
    1. 빨간색 (함수 진입)
      - 프로그램 시작 (console.log 1)
      - a(10) 호출 → a 시작 (console.log 2)
      - b(n1) 호출 → b 시작 (console.log 3)
      - c(n3) 호출 → c 시작 (console.log 4)
    2. 파란색 (함수 내부 로직)
      - c() 내부에서 n6 = n5 + 10
      - console.log("5. c 종료.") → 값 반환 (n6)
    3. 초록색 (함수 반환과 종료)
      - b()로 돌아와서 console.log("6. b 종료.") → 값 반환 (n4)
      - a()로 돌아와서 console.log("7. a 종료.") → 종료
    4. 보라색 (최종 종료)
      - console.log("8. 프로그램 종료.")

    **🎯 요약 비유**
    - 함수를 **빨간 화살표**로 호출하면 스택에 차곡차곡 쌓이고 (push)
    - 반환되면 **초록 화살표**로 스택에서 제거됨 (pop)
    - 결국 마지막에 스택이 비워지면 프로그램도 끝남!

- heap
  - 모든 객체가 적용됨
  - 순서가 없는 무작위로 데이터를 담음

🧠 메모리 구조 이해
1. d1은 원시타입(Number)
- 값이 그대로 data1에 복사(pass-by-value)돼.
- 즉, data1 = 80이 되고, data1 += 10을 해도 d1에는 영향이 없어.
- data1은 함수 안에서만 90이 되고, 바깥의 d1은 여전히 80이야.
1. d2는 참조타입(Array/Object)
- d2의 참조값(주소)이 data2로 공유(pass-by-reference)돼.
- 즉, data2[0] += 10은 실제 배열의 값인 d2[0]을 바꿔.
- 그래서 바깥의 d2[0]도 같이 90으로 바뀜.
- 비유 🍱 도시락 비유
  🧍‍♂️ d1은 "직접 가져간 도시락"
  - 너가 친구한테 "내 도시락이 이거야!" 하고 도시락 사진만 줬어.
  - 친구는 그걸 보고 도시락 그림에 햄버거를 하나 더 그려.
  - 근데 네 진짜 도시락은 그대로야. 친구는 복사된 그림만 바꾼 거니까! 🟰 이게 바로 원시타입, 즉 pass-by-value (값 복사)!
  🧍‍♂️ d2는 "도시락 통째로 빌려준 거"
  - 이번엔 도시락을 직접 친구한테 건넸어.
  - 친구가 뚜껑 열고 안에 반찬 하나 더 넣어줬어.
  - 그래서 네가 다시 도시락 받아봤을 땐, 진짜로 반찬이 바뀌어 있었던 거야. 이게 참조타입, 즉 pass-by-reference (참조 전달)

변수 스코프
- 전역 변수
  공식 문서
```
var age = 20; // 전역 변수
(window.)year = 10; // 전역 변수
function getAge(year){ // 지역 변수
  var age = 30; // 지역 변수
  (window.)myAge = age + year; // 전역 변수
  (window.)alert(myAge);
  (window.)console.log(myAge);
}
```
  - 함수 외부에서 선언한 변수
  - 스크립트 내 어디에서나 접근 가능
  - 페이지가 로딩될 때 한번 생성하여 값이 유지됨
  - 모든 전역변수는 window 객체의 속성으로 지정됨
  - 변수를 재할당할 경우 앞에 window가 생략되어서 사용함
  - 변수선언을 안하고 써도 전역변수로 인식해서 윈도우 객체 아래에 넣어버리는것은 자바스크립트만의 특별한 동작 방식이다!
  - (window.)myAge = age + year;
    되도록이면 사용하지 않는 것을 추천한다. 나 혼자 보는 코드가 아니기 때문에 다른 사람들이 봤을 때 혼란스러울 수 있음 만약, 정말정말 쓰고 싶다면 앞에 window.을 붙여서 윈도우 객체의 아래에 있다고 명시해주자
- 지역 변수
  - 함수 내부에서 선언한 변수
  - 해당 함수 안에서만 접근 가능
  - 함수가 호출될 때마다 새로 생성하여 값이 초기화
  - 함수 내부에서 선언하지 않고 바로 사용하는 변수는 전역 변수로 동작
- 변수 우선순위
  - 변수는 가까운 곳부터 찾는다.
  - 즉 지역변수 영역에서 먼저 찾고 없을 경우 전역변수에서 찾는다.
- ❗지역변수의 유효 범위 대부분의 언어에서는 선언한 변수가 블록 단위의 유효범위를 갖지만 자바스크립트에서는 var로 선언한 변수가 함수 단위의 유효범위를 갖는다.
ES6 - 변수 선언문
- var선언문
  - 함수 단위의 유효범위를 갖는 변수 선언문
  - 대부분의 언어에서는 선언한 변수가 블록 단위의 유효범위를 갖지만 자바스크립트에서는 var로 선언한 변수가 함수 단위의 유효 범위를 갖는다.
- let 선언문
  - 블록 단위의 유효범위를 갖는 변수 선언문
- const선언문
  - 블록 단위의 유효범위를 갖는 상수 선언문

오늘 배운 배열 메소드

fill() 배열의 모든 요소를 지정한 값으로 채운다.

// 문법: array.fill(value, start, end)
// value: 배열을 채울 값
// start(선택): 시작 인덱스 (기본값 0)
// end(선택): 끝 인덱스 (기본값 array.length)

const arr = new Array(5);
arr.fill(7);
console.log(arr); // [7, 7, 7, 7, 7]

// 특정 구간만 채우기
const nums = [1, 2, 3, 4, 5];
nums.fill(0, 2, 4);
console.log(nums); // [1, 2, 0, 0, 5]

join() 배열의 모든 요소를 연결해 하나의 문자열로 만든다.

// 문법: array.join(separator)
// separator(선택): 요소 사이에 들어갈 구분자 (기본값은 쉼표)

const fruits = ['사과', '바나나', '딸기'];
console.log(fruits.join()); // '사과,바나나,딸기'
console.log(fruits.join(' ')); // '사과 바나나 딸기'
console.log(fruits.join(' - ')); // '사과 - 바나나 - 딸기'

split() 문자열을 지정된 구분자를 기준으로 나누어 배열로 변환한다.

// 문법: string.split(separator, limit)
// separator: 분할 기준 (문자열 또는 정규식)
// limit(선택): 반환할 분할 항목 수의 제한

const sentence = '안녕하세요, 자바스크립트 공부 중입니다';
const words = sentence.split(' ');
console.log(words); // ['안녕하세요,', '자바스크립트', '공부', '중입니다']

const csv = '김철수,30,개발자';
const person = csv.split(',');
console.log(person); // ['김철수', '30', '개발자']

// 모든 문자를 개별 요소로
const chars = '안녕하세요'.split('');
console.log(chars); // ['안', '녕', '하', '세', '요']

includes() 배열에 특정 요소가 포함되어 있는지 확인하고 true또는 false를 반환한다.

// 문법: array.includes(searchElement, fromIndex)
// searchElement: 찾을 요소
// fromIndex(선택): 검색을 시작할 위치 (기본값 0)

const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false

// 특정 위치부터 검색
console.log(numbers.includes(1, 2)); // false (인덱스 2부터 검색)

// 문자열 배열에서도 사용 가능
const fruits = ['사과', '바나나', '딸기'];
console.log(fruits.includes('바나나')); // true
console.log(fruits.includes('수박')); // false

🔗 배웠던 파일

29-02 2차원 배열
37-01 Call by Value와 Call by Reference 차이
37-02 Call by Value와 Call by Reference 차이
38 전역 변수와 지역 변수

❓ 생긴 질문 / 더 알아볼 것

오늘은 개인적으로 몸이 안 좋은 날이어서 수업을 잘 못 들은 하루였다. 제일 중요한 call stack랑 heap를 대충 들은거 같아서 내일부터 딥다이브를 보면서 머리속에 넣어야 할것 같다

🔗 참고 자료

[📆 2025.04.09] Array, array‐like object, two‐dimensional array, for...in, vs for...of - [멋쟁이사자처럼부트캠프 프론트엔드13기]

Fri, 11 Apr 2025 02:34:32 GMT

📚 오늘 공부한 내용

참조 타입
유사 배열 객체(Like-Array Object)
2차원 배열, 다차원 배열
for in, for of

🧠 배운 점 & 정리

참조 타입 (Array, 배열)

배열
- 하나의 변수에 여러개의 값을 지정하는 데이터 구조
- 순서정보 (index) 를 이용하여 각 요소를 참조 (0 부터 시작)
생성
- 크기를 미리 지정하지 않음
- Array 생성자 함수 로 생성
  - var score = new Array();
- JSON 표기법 이용
  - var score = [];

예제

초기화
- Array 클래스로 생성 및 초기화
  - var score = new Array(90, 70, 100);
- JSON 표기법으로 생성 및 초기화
  - var score = [ 90 , 70 , 100];
요소추가
- index 나 배열 메소드 이용
- score[3] = 86;
요소 읽기
- index 나 배열 메소드 이용
- score[3]
배열 요소의 수
- length 속성

push vs length의 차이 하드 코딩으로 5 6 7 등등 이렇게 하면 배열이 바뀌게 된다면 다시 수정을 해야 한다 그래서 알아서 찾아주는 length를 사용함, 다만 push는 기본적으로 배열의 마지막에 데이터를 추가 하는것이기 때문에 push를 사용하는게 좋다 ✅ arr[arr.length] = 값 vs arr.push(값) 비교표

항목	`arr[arr.length] = 값`	`arr.push(값)`
기본 개념	length를 사용해 마지막에 수동으로 값 추가	마지막에 값을 자동으로 추가
직관성	❌ 덜 직관적, 가독성 낮음	✅ 직관적이고 가독성 좋음
다중 추가	❌ 불가능 (하나씩만 가능)	✅ 가능 (`arr.push(1, 2, 3)`)
체이닝 가능 여부	❌ 없음	✅ 가능 (`arr.push(1).push(2)`)
사용 추천도	❌ 가급적 지양	✅ 배열 마지막에 추가할 땐 적극 사용
코드 유지보수	❌ 인덱스를 하드코딩하면 수정 어려움	✅ 자동 인덱싱으로 유지보수 쉬움
- gpt 답변
결론부터 말하면 `arr[arr.length] = 값` 와 `arr.push(값)` 는 거의 같은 동작을 해.

둘 다 **배열의 마지막에 값을 추가**하는 방식이야.

하지만 **약간의 차이점이 존재해!** 아래에 정리해줄게. 👇

---

## ✅ 공통점

| 항목 | 설명 |
| --- | --- |
| 동작 | 배열의 **맨 마지막 인덱스에 값을 추가**함 |
| 결과 | 배열 길이가 증가하고, 마지막에 값이 추가됨 |

예:

```jsx
let arr = [1, 2, 3];

arr[arr.length] = 500; // arr은 [1, 2, 3, 500]
arr.push(600);         // arr은 [1, 2, 3, 500, 600]
```          
---

**⚠️ 차이점**

| 구분 | `arr.push(value)` | `arr[arr.length] = value` |
| --- | --- | --- |
| 직관성 | ✅ 더 직관적이고 명확 | ❌ 덜 직관적 |
| 메서드 호출 | `push()`는 함수 호출 | 대괄호를 이용한 직접 할당 |
| 다중 추가 | 여러 값을 동시에 추가 가능 `arr.push(1, 2)` | ❌ 한 번에 하나만 추가 가능 |
| `Array.prototype` 함수 | push는 JS 내부 메서드라 **체이닝 가능** | 불가능 |

---

**✅ 예시 비교**

```jsx
let a = [1, 2];

a.push(3, 4); // 가능
console.log(a); // [1, 2, 3, 4]

a[a.length] = 5; // 가능
console.log(a); // [1, 2, 3, 4, 5]

a[a.length] = 6, 7; // 이렇게 하면 6만 들어감 (주의)
console.log(a); // [1, 2, 3, 4, 5, 6]
```

---

**👀 실무에서는?**

- **`push()`** 를 더 많이 써!
- 가독성, 직관성, 안정성 면에서 더 좋기 때문이야.

정리
- 배열의 마지막에 값을 추가하고 싶을 때, 인덱스를 하드코딩하지 말자.
  - 예: arr[5] = 10 ← 배열이 바뀌면 다시 수정해야 하므로 비효율적이다.
- 대신, arr.length를 사용하면 마지막 인덱스를 자동으로 찾아 추가할 수 있다.
  - 예: arr[arr.length] = 10
- 그러나 더 직관적이고 가독성 좋은 방법은 push() 메서드를 사용하는 것이다.
  - 예: arr.push(10)
- push()는 다음과 같은 장점이 있다:
  - 배열 끝에 값을 자동으로 추가한다.
  - 여러 값을 동시에 추가할 수 있다. (예: arr.push(1, 2, 3))
  - 코드 가독성과 유지보수가 쉽다.
- 따라서 배열의 끝에 값을 추가할 땐 push()를 사용하자!

유사 배열 객체(Like-Array Object)
- 유사 배열 객체란
  - 배열과 비슷하게 사용할 수 있는 객체
  - 사용법을 보면 배열 같지만 실제 배열이 아닌 일반 객체
- 특징
  - index 를 통한 접근 : 배열처럼 index 를 사용해서 각 요소에 접근 가능
  - length 속성 : 배열처럼 length 속성이 있어서 for 구문을 이용하면 모든 요소 참조 가능
  - 배열 메서드 없음 : forEach, map 등의 배열 메서드가 없음
  - arguments, NodeList, String 등의 내장 객체가 유사 배열 객체로 만들어져 있음 ⇒ 추후 배울 예정
- ❗필요한 이유
  - 주로 읽기를 목적으로 사용되는 객체일 경우 배열 요소를 제어하는 메서드가 필요 없음
  - 배열보다 더 적은 비용으로 생성 가능
- 배열로 변환 Array.from(obj) 을 사용하면 쉽게 배열로 변환 가능
그치만~~ 배열대신에 유사배열 객체를 직접 만들어서 쓸 일은 많지 않다. 마치 배열인거 처럼 쓰고 있지만 알고보니 배열이 아니였다…..
- 예시
```
const arr = {
  length: 3,
  0: "orange",
  1: "yellow",
  2: "green",
};

printArr(arr);
```

2차원 배열, 다차원 배열

배열 안에 또 다른 배열들이 들어있는 배열
행렬이나 테이블 형식의 데이터를 표현할 수 있음

구분 ⇒ k ∨ i	[0]	[1]	[2]	[3]
[0]	2	4	6	8
[1]	3	6	9	12
[2]	4	8	12	16
[3]	5	10	15	20

var numbers = [
  [2, 4, 6, 8 ],
  [3, 6, 9, 12],
  [4, 8, 12, 36],
  [5, 10, 15, 20]
];

// 1차원 배열 출력하기
console.log(numbers[0]); // [2, 4, 6, 8 ]
console.log(numbers[1]); // [3, 6, 9, 12]
console.log(numbers[2]); // [4, 8, 12, 36]
console.log(numbers[3]); // [5, 10, 15, 20]

// 2차원 배열 출력하기
console.log(numbers[0][0]); // 2
console.log(numbers[0][1]); // 4
console.log(numbers[1][0]); // 3
console.log(numbers[3][2]); // 15

`for in`, `for of`

for of 관련 문서
for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다.
```
// 객체 생성
const array1 = ["a", "b", "c"];

// for of
for (const element of array1) {
  console.log(element); 
}
/*
출력 값
a, b, c
*/  
```
for in 관련문서
for...in 문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)
```
  // 객체 생성
  const object = { a: 1, b: 2, c: 3 };

  for (const property in object) {
    console.log(`${property}: ${object[property]}`);
  }

/*
출력 값
"a: 1"
"b: 2"
"c: 3"
*/ 
```

📌 for...in vs for...of

한줄요약: for...in은 객체의 이름표(키)를 하나씩 꺼낼 때 쓰고, for...of는 배열이나 글자처럼 하나씩 꺼낼 수 있는 것의 내용(값)을 하나씩 꺼낼 때 써! ✅

구분	`for...in`	`for...of`
🔍 용도	객체의 키(key)를 반복	배열, 문자열 등 이터러블(iterable)의 값(value)을 반복
🔁 반복 대상	객체, 배열 (키 기준)	배열, 문자열, Map, Set 등 (값 기준)
🔑 반환값	속성 이름(문자열) 또는 인덱스	값(value)
⚠️ 주의사항	배열 순회 시 인덱스를 문자열로 반환하므로 주의 필요	객체에는 사용할 수 없음 (오류 발생)

💡 언제 어떤 걸 써야 할까?

상황	사용
객체의 key를 하나씩 순회해야 한다	`for...in`
배열이나 문자열의 값만 필요하다	`for...of`

🔗 배웠던 파일

❓ 생긴 질문 / 더 알아볼 것

배열에 대해서 조금 더 자세히 알아보고 공부해야겠다...수업 중간 중간에 조금 졸았던 것 같아서 막바지에는 따라가기 힘들었던 경향이 있다. 최대한 빨리 따라잡을 수 있도록 딥다이브책이나 공식문서를 보면서 익혀가야겠다!

🔗 참고 자료

[2025-04-03] Object, function - [멋쟁이사자처럼부트캠프 프론트엔드13기]

Thu, 10 Apr 2025 06:15:23 GMT

📚 오늘 공부한 내용

반복문을 멈추는 코드
Object
function

🧠 배운 점 & 정리

반복문을 멈추는 코드

break
- 반복문 이나 switch 문을 즉시 종료
- break 를 감싸고 있는 코드 블럭을 빠져나오고 코드 블럭 이후의 코드로 실행이 넘어감
continue
- 반복문 내에서 남아있는 코드를 건너뛰고 다음 반복으로 실행이 넘어감

예시코드

const n = 1;
const m = 10;

for (let i = n; i <= m; i++) {
  if (i % 2 === 0) {
    console.log(`첫 번째 짝수: ${i}`);
    continue; // 레이블이 지정된 루프의 현재 반복에서 명령문의 실행을 종료하고 반복문의 처음으로 돌아가여 루프문의 다음 코드를 실행합니다.
  // break; / => 반복문이 몇개이든 상간없이 코드 멈추기
  }
}

Object

key value 쌍의 데이터 집합 (속성, property)
속성의 값으로 모든 데이터 타입 지정 가능
- 값으로 함수가 지정된 속성을 메소드 (method) 라 함
여러개의 속성을 포함할 수 있음
원시 타입은 한 개의 변수 안에 2개의 값을 넣을 수 없었음

예시코드

  // 원시 타입
  let userName = "차차핑";
  let kor = 100;
  let eng = 90;
  let math = 85;

  let sum = kor + eng + math;
  let avg = sum / 3;

  console.log("총점: " + sum);
  console.log("평균: " + avg);

⇒ 원시 타입은 userName이라는 값에 다른 값을 넣으려면 변수를 하나 더 선언해야함

  // 객채로 만들기
  const score = new Object();
  score.userName = "차차핑";
  score.kor = 100;
  score.eng = 90;
  score.math = 85;

  score.sum = kor + eng + math;
  score.avg = sum / 3;
  console.log(`${score.userName}의 총점: ${score.sum}`);
  console.log(`${score.userName}의 평균: ${score.avg}`);

⇒ score이라는 변수를 새로 만들고 그 안에 변수값을 수정함

function

명령어의 묶음
특정 기능을 재사용 하고 싶을 때 작성
함수이름 , 인자목록 , 실행구문 , 반환값으로 구성됨

예제

// 기본 값
function 함수명 (매개변수1, 매개변수2, ...){
실행할 구문1;
실행할 구문2;
...
return 반환값;
}

실행구문은 함수 밑에 두나 함수 위에 두나 상관이 없음

하드코딩 vs 함수 사용

console.log("hello Function!");
console.log("hello Function!");
console.log("hello Function!");

⇒ 하드코딩으로 3번 사용함

//함수 생성
function sayHello() {
  console.log("안녕 Function!");
}
//함수 호출
sayHello();

⇒ 함수 명 사용함

매개 변수

매개변수는 함수에 전달되는 입력값을 받기 위한 변수이다.
```
function sayHello(pingName) {
                // 매개변수
  console.log("Hello " + pingName);
}

sayHello("하츄핑");
        // 호출할때 괄호 안에 매개 변수 사용하기
```
📌 실행 순서 (디버깅 과정)

1️⃣ 함수 sayHello() 정의
- function sayHello(pingName) { console.log("Hello" + pingName); }
  - 하지만 함수는 실행되지 않음 (호출되기 전 단계)
    
    2️⃣ 첫 번째 함수 호출 sayHello("하츄핑")
  - pingName에 "하츄핑"이 전달됨
  - 실행: console.log("Hello" + "하츄핑")
  - 출력: Hello하츄핑
    
    3️⃣ 두 번째 함수 호출 sayHello("깡총핑")
  - pingName에 "깡총핑"이 전달됨
  - 실행: console.log("Hello" + "깡총핑")
  - 출력: Hello깡총핑
    
    4️⃣ 세 번째 함수 호출 sayHello("초롱핑")
  - pingName에 "초롱핑"이 전달됨
  - 실행: console.log("Hello" + "초롱핑")
  - 출력: Hello초롱핑

함수를 사용할때와 아닐때

🧠 함수 쓸 때

함수는 그냥 “이름 붙여놓은 코드 블록”이야. 반복되는 작업을 한 번만 쓰고 계속 불러서 쓸 수 있게 하는 거.

예시

function sayHello() {
  console.log("안녕, 감자야!");
}

sayHello(); // 실행
sayHello(); // 또 실행

언제 쓰냐?

코드 재사용하고 싶을 때
같은 패턴이 반복될 때
코드 정리하고 싶을 때 (덜 지저분하게)

나중에 고치기 쉽게 만들고 싶을 때

🤯 함수 안 쓸 때

그냥 하드코딩. 필요한 작업을 그때그때 쓰는 스타일. 빠르게 테스트하거나, 짧고 단순한 코드에선 괜찮지만,

조금만 길어지면 바로 지옥 개장함. ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

예시

console.log("안녕, 감자야!");
console.log("안녕, 감자야!"); // 중복된 코드

🎯 비교 요약

상황	함수 쓸 때	함수 안 쓸 때
반복 작업	✅ 재사용 짱	❌ 복붙지옥
깔끔한 코드	✅ 구조화됨	❌ 혼돈의 카오스
단순 테스트	❌ 오바임	✅ 빠름
협업 코드	✅ 칭찬받음	❌ 욕먹음

🔗 배웠던 파일

❓ 생긴 질문 / 더 알아볼 것

추후 배울 object의 하위 속성들?을 좀더 공부하고 개념에 대해서 더 알아보고 싶다

koo-rogie.log

2026년 7월, 프론트엔드 업데이트 모음

목차

1. TypeScript 7.0 (2026.7.8)

1-1. 먼저, "컴파일러"가 뭘 하는 건지부터

1-2. 핵심 한 줄

1-3. 왜 굳이 언어를 바꿨나

1-4. 체감 성능 (숫자로 보면 확 와닿아요)

1-5. 아직 다 못 쓰는 이유 — "속도 vs 호환성" 트레이드오프

1-6. 우리(React/Next.js) 프로젝트는 어떨까?

2. Next.js 16.3 & 보안 패치 (2026.7)

2-1. 배경: Next.js와 Turbopack이 뭔지

2-2. Turbopack 개선 사항

2-3. 보안 패치 — 이번 달 중요한 부분

2-4. 우리 프로젝트에 적용하려면

3. npm 12.0.0 (2026.7.10 릴리즈)

3-1. 먼저, "공급망 공격"이 뭔지부터

3-2. 무엇이 바뀌었나

3-3. 그 외 정리된 기능들 (참고용)

3-4. 참고: pnpm(npm의 대체 도구)도 같은 흐름

4. 정리

참고 자료

디지털 이미지 - 픽셀과 해상도

픽셀(Pixel)이란?

픽셀의 주요 특징

해상도(Resolution)의 두 가지 개념

1. 픽셀의 총량 (이미지 크기)

2. 픽셀의 밀도 (이미지 품질)

PPI (Pixels Per Inch)

해상도의 상관관계

실제 예시

핵심 원리

이미지 용량 계산 (참고)

계산 예시: RGB 8bit, 720×720 픽셀 이미지

주요 용도별 권장 해상도

모두를 위한 웹: 접근성(A11y) 가이드

1. 웹 접근성이란?

2. 웹 접근성, 왜 우리가 신경 써야 할까요?

3. 이것만은 꼭! 핵심 4원칙 (POUR)

3.1 Perceivable (인식 가능)

3.2 Operable (운용 가능)

3.3 Understandable (이해 가능)

3.4 Robust (견고함)

5. 개발/디자인 실전 사례 (Bad vs Good)

나쁜 예 vs 좋은 예

6. WAI-ARIA: 꼭 필요할 때만 쓰는 치트키

7. 우리 팀을 위한 접근성 체크리스트

🔗참고사이트

변수 이름을 어떻게 하면 잘 지을까?

0. 들어가기 앞서서

❗주의할점

1. 변수란?

2. 변수 이름을 잘 짓는 방법

2.1 명확한 이름 사용하기

2.2 키워드에서 제공해주는 정보 중복으로 사용하지 않기

2.3 정확한 상속 관계를 보여주는 명칭 사용하기

2.4 단위를 알 수 있는 변수 명 사용하기

2.5 일관된 네이밍 규칙 사용하기.

2.6 함수 명에서는 동사 사용하기

2.7 같은 개념에 여러 용어 혼동해 사용하지 않기

2.8 발음하기 쉬운 이름 사용하기

2.9 검색 가능한 이름 사용하기

2.10 언어별 스타일 가이드 준수하기

💡 참고사이트

프론트엔드 개발자인데 SQL을 배워야할까?

Q. SQL발표를 왜 하게 되었느냐?

1. SQL이란

2. 프론트엔드는 SQL을 직접 안 쓰는데 왜?

3. 프론트엔드가 SQL 개념과 마주치는 순간

상황 1: 사이드 프로젝트 할 때

상황 2: AI 도구(Cursor, ChatGPT) 쓸 때

상황 3: API 응답 데이터 순서가 이상할 때

4. SQL을 알면 좋은 점

백엔드와 말이 통함

API를 똑똑하게 요청할 수 있음

속도가 왜 느린지 알 수 있음

혼자서도 뭔가 만들 수 있음

5. 현실적인 이야기

프론트는 이미 배울 게 너무 많습니다

실무에서 쿼리 짤 일은 거의 없습니다

1.1.1.1 메인 브랜치(`master`, `develop`)

`counter/06/` 와 `counter/07` 차이점

`Class` 사용