sjindev 님의 블로그

2025-2026 겨울방학 회고

sjindev — Tue, 7 Apr 2026 17:54:43 +0900

어느덧 3학년이 끝나고 4학년을 맞이하기 전 마지막 방학이 왔습니다.

다행히 3학년 2학기 드림학기제를 진행하며 9학점을 받게되어 전공은 2과목만 들었고, 덕분에 조금 여유로운 학기를 보낼 수 있었습니다.

지나고 돌이켜보면 조금 여유로운 학기를 보냈던 내가 후회되기도 하네요. <---- 그 이유는 아래서 설명하겠습니다...

일단, 학점도 커리어하이(그래도 드학9학점에 4.5를 맞지못한 아쉬움은 남지만..)였고 무엇보다 좋은건 이번 학기가 끝나면 일주일뒤에 나는 유럽으로 떠난다는 기대감에 부풀어있었습니다!!

2025. 12. 27~ 2026. 01. 12

기다리던 유럽여행. 사실상 2학기 드림학기제를 통해 한가로웠던 시간들을 여행준비에 쏟은 것 같습니다.

기다리고 기다렸던.. 중국국제항공을 타고 인천-> 베이징(2h) -> 런던 히드로 공항(12h였나?)으로 총 14시간에 거쳐 날아갔습니다..

앉아서 자는걸 못해서 비행기나 대중교통에서 워낙 잠을 못자요.. 5억년버튼 12시간 버전 체험했습니다 진짜..

여자친구랑 같이갔는데 여자친구는 저랑 정 반대여서 12시간동안 거의 풀수면을 하더군요. 정말 힘들었습니다...ㅋㅋㅋ

그렇게 런던에 도착했습니다..한국 여권 파워가 좋기는하더라구요 뱅기 내리자마자 입국장가니 여권스캔하는 입국심사로 3초컷 입국했습니다. 짐 나오는것만 기다리고 바로 빠져나온거같아요!

지하철을 탔는데 흠,,,대한민국 지하철이 짱인거같아요.

여기서 놀라운 사실 : 런던은 세계최초로 지하철 개통(1863년)을 했습니다. 근데 그 당시 대한민국 땅에서는 대동여지도(1861년)가 만들어졌습니다.. 근데 결국 너무 일찍만들어졌다보니 지금까지도 좀 노후화되어있는거같아요. 좁고..냄새나고.. 별로임 ㅜㅜ

빅벤과 타워브릿지입니다.

놀랍게도 타워브릿지에서 가방(백팩)을 소매치기당했어요..

그냥 여자친구 사진 찍어준답시고 발밑에 잠시 내려두고 분명 제 시야에도 있었는데, 찍어주고 잠시 사진확인시켜줄겸 여자친구랑 대화나눈 약 10초새 감쪽같이...사라졌어요 걍 흔적도없이!!

다행히 배낭에 뭐 들은건 없었는데..그당시에 범인 찾았으면 ㄹㅇ팼을것 같아요

무튼 런던에서 2박3일 야무지게 놀고 파리로 넘어가려는데..

왜 나에게 이런일이.... 런던 - 파리를 잇는 유로스타 열차가 해저터널로 왔다갔다하는데, 이 열차가 해저터널 내부에서 전원공급이 차단되는 심각한 문제가 생겼대요..그래서 열차가 지연됐는데,,,농담반 진담반으로 이거 취소되진않겠지 진짜.. 이러고있었는데,

갑자기 역에서 방송이 나왔어요. 오늘 열차 전부 취소니까 역에서 전부 나가라고.. 그리고 역사앞에 막 방송국 기자들 와서 뉴스찍고있고 진짜 개구라 같은 날이었어요.

저희는 당일에 묵을 숙소도없고, 그 다음날 파리에서 개선문 새해 카운트다운을 보려고 하고 있었어요.

사실 저는 이게 유럽일정중 가장 기대가 됐는데, 잘못하면 카운트다운 일정까지 문제가 될 수도 있겠다 싶었어요..

그래서 급하게 네이버항공권으로 당일 항공권 찾아보는데 애초에 하나도 없었고, 이거 그래도 보상받을 수 있으니까 공항이라도 직접 가서 표 있는지 확인해보자! 싶어서 공항까지 갔습니다..

근데, 공항에서 표가 있긴한데 아침에 도착하는 경유 항공권에 편도 120만원이라더라구요. 제가 유럽 한국 왕복을 95만원에 끊었는데 이게 무슨 개소리. 진짜 눈물머금고 유로스타 오후에는 복구되겠지? 제발 되라 싶은 마음으로 저녁에 출발하는 유로스타 취소표를 인당 60 만원에 결제하고 다시 기차역으로 돌아갔습니다..

근데!!!!!!!!!!!!!!!!!!!!!!방송에서 기차가 갇혔던 해당 터널을 셧다운 하고 나머지 한 개의 선로로 런던<-> 파리 왕복운행 느낌으로 재개한다고 했어요!! 그것도 저희가 예매한 표 직전 열차부터 재개되서 간신히 그날 저녁 우여곡절 끝에 파리로 갈 수 있었습니다..

[베르사유 궁전]

우여곡절 끝에 파리 첫날일정부터 진행하였습니다. 원래는 전날 더 일찍 도착해서 하고싶은게 있었는데,,그래도 이정도면 억까치곤 양호하다. 생각이 들었습니다. 사치의 끝판왕 한번 봐주고 이후 일정 진행했습니다..

[에펠탑 야경]

어느 지하철역 밖으로 나오니 바로 눈앞에있던 풍경..에펠탑 야경도 봐주고!

[개선문 카운트 다운]

인생에서 가장 행복했던 순간 중 하나로 남을 것 같아요! 비록 한국보단 시간이 느려서 이미 가족, 친구들과 새해인사를 나눴지만, 제가 있는 곳(파리)에서 연말분위기와 함께 카운트다운 행사를 맛보니 정말 행복했습니다!

이후 파리에서도 여러 일정도 전부 소화하고 파리 -> 스위스(인터라켄) 으로 기차타고 넘어갑니다!

하아..그리고 매일같이 파리 숙소에 묵을때 아침 몇시에 먹을거냐 물어봐주시고 차려주신 식사가 아직도 그립습니다. 오븐에 구운 크로와상에 베이컨 + 치즈 + 맛있는버터 + 오렌지주스 + 요거트 + 블랙커피까지....매일같이 차려주시고 떠나는날까지 챙겨주셔서 너무 감사했는데, 혹시 파리가실분 계시면 제가 숙소 추천해드릴게요 짱짱!

그리고 스위스에 도착하였습니다! 인터라켄 West 역에 내려서 찍은 하늘사진인데, 저당시 영하 17도였나 그랬어요 ㅠㅠ 무척 추운 스위스..

[융프라우 방문]

두번째 스위스 방문끝에 이번에는 융프라우 도전! 융프라우는 첫트였는데 날이 맑아서 너무 좋았어요! 릴스보니깐 3번을 가도 눈보라치고 흐린날씨에 저런 뷰 못보시는 분들도 있던데 흡족한 결과입니다.

사실 저기서 고산병걸렸어요. 호흡을해도 숨이안쉬어지고 어지럽고 핑돌고 진짜 죽을거같았는데, 그래도 남는건 사진이니까..

객기부려보겠다고 영하 23도에서 반팔샷 찍었습니다...

패러글라이딩도 재밌었습니다! 2023년에 스위스에서 패러글라이딩 하려고 했었는데 당시에 바람이 너무 많이 불어서 전액환불 당하고 취소당했었어요 ㅠㅠ 이번엔 무조건 하고싶었는데 운이좋아 성공했습니다! 그치만 너무 비쌌어요..(15분정도 탔는데 영상 포함 약 42만원..?)

이후 루체른으로 넘어가서 예쁜 풍경 마저 감상해주고 다음날 이탈리아로 넘어가기 위해 휴식을 하였습니다.

[이탈리아!] 밀라노 -> 피렌체 -> 로마 코스

이때가 밀라노 동계올림픽 직전이라 밀라노 대성당 앞에서 이것저것 관련 구조물을 설치하고 있더라구요!

소신발언이지만 밀라노에서 밀라노 대성당 빼고는 볼것도 할것도 없어서 약간 노잼이었습니다.. 다행히 하루만 묵었지만요..

피렌체로 넘어가서 예쁜 두오모도 봐줬습니다. 실제로보니 정말 웅장하더라구요. 140년에 걸친 노력 ㅇㅈ한다.

이때 비가와서 흐리고 춥고 비오고 사진도 예쁘게안나와서 아쉬웠는데 그래도 잠깐 비가 멈춘 새 예쁜 풍경사진 한장을 건질 수 있었습니다! 미켈란젤로 언덕 뷰였습니다!!

이날 저녁은 피렌체에서 정말 유명한 티본 스테이크 맛집에 가서 식사를 하고 디저트로 티라미수까지 먹었습니다. 한국인들이 꽤 많았는데, 한국인들 추가로 더 할인해주고 그런게 있던거로 기억해요! 무튼 정말 맛있었는데 다 못먹고남겼어요.ㅜㅜ 여자친구가 너무 못먹어서..

이후 로마로 넘어갑니다!

트레비 분수도 봐주고~ 판테온 신전도 봐주고~

제가 여름에도 겨울에도 한번씩 유럽여행을 다녀왔었는데, 이번에 겨울에 가고 느낀점은... 여름에 가는 게 더 좋은거 같아요.

왜냐면,,지금 우측 판테온 사진만 보면 밤인거 같으시겠지만 실제로는 오후 4시정도입니다. 5시 되면 해가 아예 내려가고 4시만 지나도 저렇게 시퍼렇게 어둑어둑 해져요 ㅠㅠ 그래서 하루일정이 타이트하고 밤에 유럽 치안도안좋고 하니까 하루에 사용할 수 있는 시간이 많지 않습니다 ㅜㅜ

다시 아침이 되었고 산뜻하게 숙소 창문 밖 오렌지 나무를 구경해줍니다. 이탈리아는 신기하게 가로수가 오렌지 나무더라구요. 맘같아선 하나 따서 먹고싶었는데 너무 높았습니다 ㅜㅜ. 그리고 콜로세움 구경도 해주고~ 이 날 하루도 재밌게 마무리 했습니다.

벌써 마지막날입니다. 우측 깃대를 보면 아시겠지만 바티칸 시국에 왔어요! 인구수가 천 몇백명이 전부라고 했던거같고, 들어가는 절차가 굉장히 빡세요. 가이드없이 개인으로는 거의 못들어간다고 보면됩니다.. 좌측 사진은 그 유명한 베드로 성당 이에요!

무튼 이렇게 유럽여행을 잘 마무리했고...방학이라고 놀기만 하면 안되겠죠? 그래도 최소한 취업준비도 미리 시작하며 이루고 싶은 것들이 몇 가지 있었습니다.

돌아오고 바로 다음날부터 과외 + 정보운영팀 근로 + 정처기 필기시험 준비 + 진행중이던 쿠잇 프로젝트 전부 소화해냈습니다.

그래서 밀린 할일을 처리하고 학생회나 이런곳에서 또 엠티도 가야하고 하는 일정들이 있었는데,,

그런것치고는 짧은시간에 또 집중해서 해낸것들이 많은것같아요.

[그래도 방학때 이룬것들]

- 정보운영팀 근로에서 진행하던 프로젝트는 목표치만큼 완성했습니다!

- 2월 초에 봤던 정보처리기사 필기 시험 합격했습니다!

- 진행중인 프로젝트 '코르크차지' 리뉴얼 버전에 대한 구현을 QA 전 단계까지 새롭게 마무리 하였습니다!

- 2월말부터 준비했던 Opic 영어 시험은 3월 첫주에 시험을 봐서 1트 IH 를 달성했습니다.

[그치만 후회 되는 것]

- 처음에 말했듯 드림학기제를 진행했던 3-2학기 한가로운 시간부터 내가 바로 다음주에 코테를 본다 라는 마인드를 장착하고 최소 주당 3PS 를 했으면 얼마나 좋았을까. 지금 상반기 취준하면서 많이 느낍니다. 아 나에게 서류 합격이라는 기회가 와도 코테를 정복하지 못하면 아무 의미가없구나!!!!!!!!!!!!그래서 지금부터라도 열심히 하고 있어요 ㅠㅠ

이 한가지가 사실 제 후회의 모든것인거같아요.

그래도 이뤄둔 것에대한 뿌듯함과 후회(아쉬움)을 통해 교훈을 배웠다고 생각하니 잃을 것 없이 잘보낸 겨울방학인것같아요!

가장 잘 놀았고 가장 이룬것도 많았다! 후회는 남지만 앞으로 어떻게 해야할지 배웠으니 이제부터 더 잘해보자 라는 마음으로 한학기를 또 열심히 살아보겠습니다.

[React] 사용자 경험을 극대화하는 '낙관적 업데이트(Optimistic Update)'와 주의할 점

sjindev — Fri, 6 Mar 2026 14:03:14 +0900

개발을 하다 보면 "서버 응답을 기다리는 짧은 시간조차 사용자에게는 지루함이 될 수 있다"는 고민을 하게 되었다. 특히 좋아요 버튼, 삭제, 수정처럼 사소하고 빈번하게 일어나는 작업에서 더더욱... 오늘은 진행 중인 프로젝트 '코르크차지(CorkCharge)'의 그룹 관리 기능을 구현하며 적용한 낙관적 업데이트와 그 과정에서 마주친 Race Condition(경쟁 상태) 문제 해결 과정을 적어보려고 한다.

1. 낙관적 업데이트(Optimistic Update)란?

낙관적 업데이트는 "서버로 보낸 요청이 성공할 것이라고 낙관적으로 가정"하고, 서버 응답이 오기 전에 UI를 먼저 업데이트하는 기법이다.

일반적인 방식: 요청 → 대기(Loding) → 응답 완료 → UI 업데이트 (느린 네트워크에서 답답함 유발)
낙관적 업데이트: 요청 → UI 즉시 업데이트 → 응답 완료 → (실패 시) 롤백

2. 문제의 코드: "삭제했는데 왜 다시 나타나지?"

코르크차지의 그룹 삭제 로직을 처음 구현했을 때, 코드레빗(CodeRabbit)으로부터 날카로운 지적을 받았다. 바로 낙관적 업데이트와 서버 동기화 사이의 타이밍 이슈였다.

수정 전 코드 (문제 발생 지점)

// handleEditGroup 중 일부
const handleDeleteGroup = async (id: number) => {
  // [1] API 요청 보냄 (비동기)
  deleteBookmarkGroup(id); 

  // [2] 낙관적 업데이트: UI에서 즉시 제거
  setMyGroups((prev) => prev.filter((g) => g.id !== id));

  // [3] 목록 새로고침 (문제의 구간!)
  refreshGroups(); 
};

왜 문제가 될까? (Race Condition 발생)

사용자가 삭제를 클릭하면 setMyGroups에 의해 화면에서 항목이 즉시 사라진다. (기분 좋은 사용자 경험)
동시에 deleteBookmarkGroup(id) API가 서버로 날아간다. 하지만 DB에서 실제로 삭제되기까지는 수 밀리초에서 수 초가 걸린다.
문제는 refreshGroups()이다. API가 완료되기도 전에 refreshGroups가 실행되어 서버에 "전체 목록 줘!"라고 요청을 보낸다.
서버는 아직 삭제 처리가 안 된(DB에 남아있는) 데이터를 반환한다.
결과: 삭제된 줄 알았던 그룹이 잠시 후 다시 목록에 나타났다가 사라지는 '깜빡임' 현상이 발생한다.

3. 해결책: 실행 순서의 제어 (Async/Await)

이 문제를 해결하려면 "UI는 즉시 바꾸되, 서버 데이터 재조회는 반드시 서버 작업이 끝난 후에 수행한다"는 순서를 강제해야 한다.

수정 후 코드 (해결 완료)

const handleDeleteGroup = async (id: number) => {
  const targetGroup = myGroups.find((g) => g.id === id);
  if (!targetGroup) return;

  // 1단계: UI 먼저 업데이트 (사용자는 즉각적인 피드백을 받음)
  setMyGroups((prev) => prev.filter((g) => g.id !== id));

  try {
    // 2단계: 서버 삭제 요청을 await으로 기다림
    // 서버 DB에서 삭제가 완전히 끝날 때까지 다음 줄로 넘어가지 않음
    await deleteBookmarkGroup(id);
    
    // 3단계: 삭제가 확실히 완료된 후, 최신 서버 데이터를 가져옴 (동기화)
    await refreshGroups(); 

  } catch (error) {
    console.error('삭제 실패:', error);
    // 4단계: 만약 서버 요청이 실패한다면? 롤백(Rollback) 수행
    // 사용자에게 에러를 알리고 UI를 이전 상태로 되돌림
    setMyGroups((prev) => [...prev, targetGroup]);
    alert('그룹 삭제에 실패했습니다.');
  }
};

4. 회고: 왜 이렇게 해결해야만 했는가?

1) 신뢰성 있는 데이터 관리

낙관적 업데이트는 UI를 속이는 기법이다. 하지만 결국 최종적인 데이터의 주인(Source of Truth)은 서버다. 서버의 상태가 바뀌기 전에 조회를 요청하는 것은 Dirty Read와 유사한 상황을 클라이언트에서 만드는 것과 같다. await을 통해 작업의 원자성(Atomicity)과 순서를 보장해야 한다.

2) 에러 핸들링과 롤백(Rollback)의 중요성

낙관적 업데이트의 필수 짝꿍은 롤백이다. 서버가 500 에러를 뱉었는데 UI만 삭제되어 있다면 사용자는 데이터가 유실되었다고 오해할 수 있다. catch 블록에서 이전 상태를 복구하는 로직은 시스템의 안정성을 높인다.

3) 생성(Create) 시의 예외 상황

수정이나 삭제는 기존 ID를 알고 있어 낙관적 업데이트가 쉽다. 하지만 '생성'은 서버에서 생성된 실제 ID를 받아와야 하므로, 가짜 ID(예: Date.now())를 임시로 부여했다가 서버 응답 후 실제 ID로 교체하는 등 좀 더 복잡한 로직이 필요할 수 있다. (이번 프로젝트에서는 생성 시엔 모달을 띄워 응답을 기다리는 방식으로 처리했다.)

요약 및 결론

낙관적 업데이트는 응답 대기 시간을 체감 0으로 만들어 사용자 경험을 극적으로 개선한다.
하지만 서버 작업 완료 전 재조회(Race Condition)를 하게 되면 데이터 불일치(깜빡임) 현상이 발생한다.
해결책: UI는 즉시 갱신하되, await을 사용하여 서버 응답을 확인한 후 동기화(Refresh)를 진행하고, 실패 시 롤백 로직을 반드시 갖춰야 한다.

낙관적 업데이트에 대하여 처음 접해보았고, 단순한 기능 구현외에 이런 '타이밍 이슈'(race condition 처리)를 전공과목으로만 공부해봤는데, 실제 내가 진행하는 프로젝트의 내가 맡은 프론트엔드 파트에서 고민하는 과정을 겪으니 신기했고, 전공지식이 쓸모있구나 생각도 들어 뿌듯했다....!

[project] 코르크차지 바텀시트 중첩구조로 인한 topSnapVh 관련 이슈 해결을 위해 DOM 조작하기

sjindev — Sat, 21 Feb 2026 15:01:42 +0900

문제 상황

우리 프로젝트는 현재 지도 페이지에서 특정 버튼 또는 클릭의 여부에 따라 사전에 구현해둔 바텀 시트에 children 컴포넌트를 각각 분기처리하여 그때 그때 필요한 컴포넌트를 바텀시트로 띄우곤 한다.

현재 프로젝트의 코드 구조는 간략히 아래와 같다.

// CorkageMap.tsx 의 일부. 각 컴포넌트의 props는 생략
..
..
..
      {/* 바텀시트: 저장한 매장 or 멀티핀 리스트 */}
      <BottomSheet >
        {sheetView === 'list' && (
          <List />
        )}
        {sheetView === 'store' && <MyStore />}
        {sheetView === 'multipin' && <MultipinList />}
        {/* [추가] Detail 컴포넌트 렌더링 (ID 전달) */}
        {sheetView === 'detail' && selectedRestaurantId && (
          <Detail />
        )}
      </BottomSheet>

위 BottomSheet가 지도에서 처음으로 등장하는 바텀시트이다. 여기에 Detail 컴포넌트 속에서 한번더 BottomSheet가 존재한다.

즉,

외부 바텀시트 : CorkageMap.tsx 지도 페이지로부터 팝업된 BottomSheet(Detail.tsx 등)

내부 바텀시트 : 외부 바텀시트의 Children 컴포넌트로 전달된 Detail.tsx 에서 사용되는 또한번의 BottomSheet

이로인해, 바텀시트 이중구조를 띄고있다.

현재 개별식당 클릭 시 아래와 같이 식당 정보에 관한 바텀시트가 등장한다.

여기서 저장(스크랩) 버튼을 클릭하면 오른쪽 사진과 같이 또한번 바텀시트가 등장한다.

여기서 문제가 발생한다. 바텀시트 안에서 또하나의 바텀시트가 동작한다는 것이다.

이로인해 바텀시트안의 바텀시트는 topSnapVh(바텀시트를 띄울 최대높이) 계산을 뷰포트 전체를 기준으로 하는 것이 아니라, 본인의 바로 외부 컴포넌트. 즉 사용자 관점에서 봤을 때, 첫번째 바텀시트에 표시된 화면을 기준으로 topSnapVh를 계산하게 된다.

이로인해 오른쪽 사진에서 볼 수 있듯이 그룹에 저장하고 싶어도 바텀시트가 더이상 끌어올려 지지도 않는 등 제대로 동작하지 못하고있다.

이를 해결하기 위해 다음과 같은 방법을 생각했다.

중첩된 BottomSheet 구조 내에서 자식 컴포넌트(GroupSelector)가 부모의 제약(높이, 위치, 쌓임 맥락)을 무시하고 전체 뷰포트를 기준으로 동작하게 만드는 가장 간단하고 확실한 방법인 React Portal을 사용하는 것

방법은 아래와 같다.

import { createPortal } from 'react-dom'; // createPortal을 import 한다.
.
.
.
// return 문을 createPortal로 감싼다.
return createPortal(
    <>
    //내용물
    </>,
    document.body
    );

Portal의 첫 번째 인자: 화면에 보여줄 JSX 전체(<> ... </>)가 들어간다.
Portal의 두 번째 인자: 이 UI가 실제로 붙을 DOM 위치(document.body) 이다.

보통 리액트 컴포넌트는 부모 컴포넌트의 자식 위치(DOM 상에서도 안쪽)에 렌더링하지만 포털을 사용하면 "논리적인 위치는 부모-자식 관계를 유지하고, 물리적인 렌더링 위치는 전혀 다른 곳으로 순간이동" 시키는 것과 같음.

기존 방식: CorkageMap > BottomSheet > Detail > GroupSelector 순으로 겹겹이 쌓여있어, 부모가 작으면 자식인 GroupSelector도 부모의 크기에 갇혀버림
Portal 방식: Detail 컴포넌트가 GroupSelector를 호출하는 코드는 그대로 두어 데이터(Props)는 자유롭게 주고받되, 브라우저가 화면을 그릴 때는 <body> 태그 바로 아래에 독립적으로 배치.

document.body를 인자로 준 것은, 이 바텀시트를 HTML의 가장 뿌리가 되는 <body> 태그 바로 아래에 붙이겠다는 뜻.

레이아웃 독립성: body 바로 아래에 있으면 주변에 방해되는 부모 요소가 없음. 따라서 width: 100%, height: 100vh 같은 설정이 부모의 크기가 아닌 사용자의 전체 브라우저 화면(Viewport)을 기준으로 동작하게 되며 이 문제를 해결할 수 있게됨.

구조적 변화 시각화

[수정 전 DOM 트리]

<body>
  <div id="root">
    <main> 
    	<div class="bottom-sheet"> 
    		<div class="detail">
          		<div class="group-selector">...</div> 
        	</div>
      	</div>
    </main>
  </div>
</body>

[React Portal 적용 후 DOM 트리]

<body>
  <div id="root"></div>
  <div class="group-selector-portal"> </div>
</body>

Vercel + React Router (CSR) 환경에서 정적 호스팅 라우팅 문제 해결

sjindev — Mon, 15 Sep 2025 16:15:27 +0900

- 문제 배경

Vercel + React Router (CSR- Client Side Rendering) 환경에서 Vercel 로 배포한

"https://프로젝트명.vercel.app/" 배포주소에서 발생하는 오류가 하나 있다.

프로젝트를 하며 작성하는 Router.tsx 파일의 path가 localhost 에서는 잘 작동하지만 배포도메인에서는 맨 뒤에 path를 입력했을 때 404 not found 오류가 발생한다.

- 문제 요약

"https://프로젝트명.vercel.app/" : 해당 URL 접속은 잘 됨!

"https://프로젝트명.vercel.app/signin" : 이처럼 서브 라우트로 직접 접근하면 404 Not Found 발생하는 문제.

- 원인: CSR(클라이언트 사이드 라우팅)과 정적 호스팅의 충돌

React Router는 브라우저 내에서 라우팅을 처리하는 CSR 방식이다. 그런데 Vercel이나 Netlify 같은 정적 서버는 기본적으로

요청된 경로에 실제 HTML 파일이 없으면 404 에러를 띄운다.

즉, 예시와 같이 "/signin" 라는 URL로 직접 접속하면 Vercel은 "/signin/index.html " 같은 정적 파일을 찾으려고 시도하며 없다면 404 에러 가 발생한다.

ps) Single Page Application (SPA) 배포 시 매우 흔하게 발생하는 라우팅 문제이다.

=> 간단히 말해, Vercel 서버는 /home이라는 실제 파일(HTML)을 찾으려고 시도했지만, 리액트 프로젝트에는 index.html 하나만 존재하기 때문에 찾지 못해 404 에러를 띄운 것

- 해결 방법: 모든 경로를 index.html로 리디렉션하기

Vercel의 경우 vercel.json 설정으로 해결 가능하다. 아래와 같이 작성한다.

참고로 vercel.json 의 파일 경로는 아래와 같이 작성한다.

your-project/
├── public/
├── src/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── vercel.json ← ✅ 이 위치!

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Vite 사용 시 추가 설정이 필요하며 아래와 같다.

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

근데 위와같은 설정은 기존에 프로젝트 코드를 보면 기본으로 되어있을 것이고, 그렇지 않다면 위와같이 작성해주면 된다.

위 코드에 대해 조금더 설명하자면,

alias: { '@': path.resolve(__dirname, './src') } : @/components/Button 이런 식으로 절대 경로 import 가능하다.

이는, 프로젝트 규모 커질수록 유지보수에 유리하고, 최근 대부분의 Vite/Next.js 프로젝트에서 사용하는 방식이다.

ex) 위 코드에서 사용한 alias 문 사용에 관하여 예시를 들면 아래와 같다.

// 기존 상대경로
import Button from '../../components/Button';

// alias 적용 후
import Button from '@/components/Button';

결론

Vercel + React Router (CSR- Client Side Rendering) 환경에서 vercel.json 파일에서 설정을 통하여

모든 경로를 index.html로 리디렉션하는 방식으로 문제를 해결할 수 있다.

github 액션 yml 파일 만들기 (CI/CD 파이프라인 구축)

sjindev — Thu, 28 Aug 2025 00:43:44 +0900

오늘은 배포자동화에 필요한 CI/CD 파이프라인 구축을 위해 어떤 코드를 작성해야하는지 알아볼 예정입니다.

github 액션을 이용하면 코드를 push 했을때, PR Template 을 통한 체계적인 Pull Request 작성, CI 테스트, CD 테스트, prettier 적용 테스트 등 다양한 테스트를 진행할 수 있습니다.

위와 같은 테스트가 필요한 이유는, 사전에 내가 올릴 코드들을 여러가지 test를 통해 협업 브랜치에 merge 됐을 때, 발생하는 오류가 없는지 사전에 확인해보기 위함입니다. 문제발생 가능성이 있거나, 실제로 문제가 있는 코드는 협업 브랜치에 merge 됐을 시 팀원들에게 ~~많은 사랑...을받을 수 있을 겁니다.~~

그러지 않도록, 협업에서 주로 사용하는 3가지 테스트를 위한 githun action 설정용 코드를 아래와 같이 남겨드리겠습니다.

- CI

- CD (vercel로 우선 배포하고, 연동한 뒤 작성해야합니다. 안그러면 테스트 실패함)

- Prettier

우선 확장자는 .yml 입니다. 위 파일들은 아래 경로에 작성합니다.

- 프로젝트의 루트 디렉토리 아래 /github 이름으로 폴더를 만듭니다.

- /github 폴더 아래 /workflows 폴더를 만듭니다.

- workflows 폴더 아래 .yml 파일을 작성합니다.

위 사진과 같이 작성해주시면 됩니다.

참고로 Pull Request 템플릿을 위한 파일은 workflows 폴더 바로 아래 작성해주시면 됩니다.

저는 Pull Request 템플릿을 아래와 같은 양식으로 사용합니다.

##   작업 내용

- 기능에서 어떤 부분이 구현되었는지 설명해주세요

<br/>

##   PR Point

- 

<br/>

## 이미지 첨부


<br/>

##   다음 할 일

- 다음 할 일을 적어주세요

<br/>

CI 테스트

ci.yml

name: CI (develop)

on:
  push:
    branches: [develop]
  pull_request:
    branches: [develop]

jobs:
  build-test:
    runs-on: ubuntu-latest
    timeout-minutes: 10 # 무한 대기 방지

    steps:
      - uses: actions/checkout@v4

      - uses: pnpm/action-setup@v2
        with:
          version: 8
          run_install: false # install 단계에서 직접 캐시 사용

      # 의존성 캐싱
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: Install deps
        run: pnpm install

      # 타입체크 + 번들
      - run: pnpm run build

      # ESLint (선택 항목)
      - run: pnpm run lint

CD 테스트 및 시크릿 변수 등록(github)

deploy.yml

name: Deploy to Vercel (main)

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 10

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - uses: pnpm/action-setup@v2
        with:
          version: 8
          run_install: false

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm run build # 또는 tsc -b && vite build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

참고로 위 코드는 이미 pnpm run build 를 수행하고 있기 때문에 build.sh 파일이 따로 필요하지 않습니다.

secret 변수는 vercel 배포시 Generate new token (classic) 메뉴를 선택하여 발급받은 뒤 따로 복사해둡니다. 이후 github 의 Org 레포 settings -> Secrets and Variables -> Actions 에서 secret 변수를 등록합니다.

ghp_~~ 로 시작하는 토큰을 AUTO_ACTIONS 라는 이름으로 저장합니다.

이후 본인 깃허브 계정 이메일을 EMAIL 이라는 이름으로 저장합니다.

제가 사용하는 deploy.yml 파일의 코드를 보면 사진과 같이 VERCEL_ 로 시작하는 시크릿변수를 등록해야함을 알 수 있습니다. 각각의 토큰들은 어디서 발급받는지 아래 참고하시면 됩니다.

vercel 로 배포 및 CI/CD 파이프라인 구축하기(배포 자동화)

오늘은 vercel 로 배포및 CI/CD 파이프라인 구축을 통해 프론트엔드 개발환경을 세팅해볼 예정입니다. 위 블로그를 작성할때 기준 저의 프로젝트 개발환경 세팅은 pnpm + react + typescript + tailwind 입니

sjindev.tistory.com

위 블로그 글의 5번과정 참고하시면 됩니다.

Prettier 테스트

prettier.yml

name: Prettier

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  prettier:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Install pnpm
        run: npm install -g pnpm

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Run Prettier
        run: pnpm prettier --check

위 3개의 파일을 참고하셔서 깃허브 자동화 설정 해주시면 됩니다!

중요설정 :

main 브랜치 : 배포 연동용

devleop 브랜치(default 로 설정) : 개발용 중앙 브랜치

feat 브랜치 : 기능 개발용 브랜치이며 이는 develop 브랜치로부터 파생됩니다.

1. develop 브랜치에서 feat(기능 개발용) 브랜치를 생성하여 작업합니다.

2. git push origin [feat브랜치명] 으로 push 후 PR을 작성합니다. 아래 사진과 같이 CI 테스트 및 프리티어 테스트가 진행됩니다.

3. 통과되면 merge 가능 상태가 되며 협업시 브랜치 팀별 룰셋에 따라 코드리뷰 및 approve가 필요할 수 있습니다.

4. 이후 feat브랜치의 코드가 develop 브랜치에 merge 되었다면 로컬에서 git pull origin devleop 으로 최신사항을 가져옵니다.

5. main 브랜치로 전환합니다.

6. git merge develop 을 하여 develop과 sync를 맞춰줍니다.

7. git push origin main 으로 main 브랜치에 push 합니다. 이때 main 브랜치는 배포 연동용이며, 배포자동화 설정이 끝났다면, 배포환경에도 반영이 되며 이때 CI, CD, 프리티어 테스트가 진행됩니다.

추가) 프로젝트에 적용한 브랜치 전략

참고로 제가 진행한 프로젝트의 브랜치 전략은 아래와 같습니다.

master(main) : 기준이 되는 브랜치로 제품을 배포하는 브랜치

develop : 개발 브랜치로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 Merge

feature : 단위 기능을 개발하는 브랜치로 기능 개발이 완료되면 develop 브랜치에 Merge

대략적으로 위와 같은 분기를 두어 진행했으며, gitflow 전략을 간소화 시킨것으로 볼 수 있을 것 같네요.

이를 위해 main, develop 브랜치 에 함부로 직접 push 할수 없도록 github 브랜치 보호 rullset을 잘 설정해두는 것도 꼭 필요합니다.

개발 프로세스

1. feat 브랜치 즉, 기능 개발 브랜치에서 기능을 개발한 후 원격에 push 합니다.

2. 원격에서 CI 테스트 진행 후 통과하면 develop 브랜치에 merge 합니다.

3. 로컬환경에서 develop 브랜치로 변경한 후 git pull origin develop 으로 최신사항을 유지해줍니다.

4. main 브랜치로 switch 합니다.

5. git merge develop 으로 develop 브랜치의 내용과 sync 를 맞춰줍니다.

6. git push origin main 으로 main브랜치를 push 하면 자동배포가 진행됩니다.

vercel 로 배포 및 CI/CD 파이프라인 구축하기(배포 자동화)

sjindev — Thu, 28 Aug 2025 00:14:17 +0900

오늘은 vercel 로 배포및 CI/CD 파이프라인 구축을 통해 프론트엔드 개발환경을 세팅해볼 예정입니다.

위 블로그를 작성할때 기준 저의 프로젝트 개발환경 세팅은 pnpm + react + typescript + tailwind 입니다. 또한, 저의 경우 깃허브 레포지토리로 미리 위 세팅에 대해 template 레포지토리가 있기 때문에 레포는 미리 만들어두고 시작했습니다.

1. github에 있는 repository clone

1. vscode 로컬 환경에 워크스페이스 폴더를 등록합니다.

2. 해당 워크스페이스 폴더로 터미널 경로를 맞춰줍니다.

3. git clone [레포주소]

4. pnpm install : 의존성 설치 작업 진행.(저는 기존 템플릿 레포지토리를 클론받은거라 의존성 설치를 해주었습니다.)

2. 예상치 못한 이슈

위와 같이 의존성 설치 후 pnpm run dev 를 통해 로컬호스트 실행을 하였습니다. 하지만, tailwind css 의 자동완성 및 자동정렬 기능이 실행되지 않는 이슈가 발생했습니다. 이를 해결하는 방법은 아래와 같습니다.

해결과정

Ctrl + P 를 눌러 검색창에 "settings.json" 파일로 들어갑니다.

이후 맨 아랫줄 코드를 추가했습니다.

  "tailwindCSS.validate": true,

위와 같이 추가하면, tailwind 자동완성 및 자동정렬 기능이 정상 동작합니다.

3. yml 코드를 통한 깃허브 액션봇 설정

github 액션봇 yml 파일 만들기 (CI/CD 파이프라인 구축)

오늘은 배포자동화에 필요한 CI/CD 파이프라인 구축을 위해 어떤 코드를 작성해야하는지 알아볼 예정입니다. github 액션을 이용하면 코드를 push 했을때, PR Template 을 통한 체계적인 Pull Request 작성,

sjindev.tistory.com

위 글을 참고해주세요. 주의할 것은 deploy.yml (CD테스트) 는 vercel 로 배포 연동 후 등록해야 합니다.

4. vercel 배포하기

vercel로 배포할 때, org 에 있는 레포를 그대로 배포하려면 vercel 유료 버전을 결제해야합니다. 따라서 저는 아래 블로그를 참고했습니다.

[Github Action] 깃허브 Organization 레포지토리 vercel 자동 배포

시작하기 앞서...현재 프로젝트를 진행하고 있는데깃허브에서 Organization 레포지토리에서 작업을 하고 vercel 로 배포를 하려면 프로 계정을 사용해야 된다.Pro 계정 무료 체험 2주를 할 수 있지만

jjang-j.tistory.com

1. 위 블로그에서 설명하는 것 처럼, org의 레포를 먼저 개인 레포로 fork 해줍니다.

2. 이후 fork 한 레포를 vercel 에서 배포해줍니다.

3. github 웹에서 secret 토큰을 발급받습니다.(블로그 3번과정 참조) 발급받은 토큰은 복사해둡니다.

secrets token 발급 => https://github.com/settings/tokens 에서 진행

+) 참고로 우리의 방식에서는 build.sh 파일은 작성하지 않아도 됨. .yml 파일에서 build 수행에 관한 명령문을 포함할 것이기 때문

4. Org 레포 settings -> Secrets and Variables -> Actions 에서 secret 변수를 등록합니다. (블로그 5번과정 참조)

저의 방식의 경우 build.sh 파일이 필요없습니다. 제가 올려둔 deploy.yml 파일에서 이미 깃허브 액션으로 빌드 가 진행되기 떄문입니다,

5. VERCEL 토큰 발급받기

위와 같이 Accounts Settings 에서 토큰 이름을 아무렇게나 정해주고 발급받습니다. 발급받은 토큰은 본인 계정으로 배포한 프로젝트들에서 사용되는 secrets.VERCEL_TOKEN 변수가 되며, 이는 깃허브 Actions 서 secret변수로 등록하면 된다.

꼭 복사해서 저장해두세요!!

위는 Org repo 의 settings 화면이며, 저의 deployment.yml 파일 기준으로 등록해야하는 secret 변수는 3개 입니다.

- VERCEL_TOKEN : 위에 위에 있는 vercel 홈페이지 Account Settings 에서 발급받으면 됩니다.

- VERCEL_PROJECT_ID : 아래 사진 참고하셔서 프로젝트 settings -> general 화면에서 확인 가능합나다.

- VERCEL_ORG_ID : 아래 사진 참고하셔서 워크스페이스에서 Settings를 클릭한 뒤, Team ID를 복사하면 됩니다.

무지 이모티콘이 붙어있는 settings 클릭

Team ID 를 복사해주세요!

위의 과정이 성공적으로 마무리 되면,

위 사진처럼 배포 자동화까지 성공적으로 진행됩니다.

(참고 : 배포 자동화는 main에 코드를 push 했을 때 발생합니다!)

이제 feat 브랜치에서 작업 -> 원격에 push 및 develop 브랜차에 merge -> 로컬환경에서 git pull origin develop 으로 최신사항 반영 -> main 브랜치로 switch 후 develop 브랜치 merge -> main 을 원격에 push 과정을 거치면 변경사항이 배포환경에 자동으로 적용되는 것을 확인할 수 있습니다!

+ vercel 에서의 환경변수 등록

추후 네이버연동이나 카카오연동에 따른 API KEY 등록 및 백엔드 API BASE URL 등록등 환경변수 등록이 필요합니다. 이때, vercel 홈페이지에서 해당 프로젝트를 클릭합니다.

이후 위와같이 Settings -> Environment Variables 화면으로 들어갑니다.

위 입력란에 Key 값과 Value 값을 컨벤션에 맞게 입력해주면 됩니다.

등록 후의 위와 같이 확인할 수 있습니다. 위 모습은 제가 이전에 진행했던 프로젝트의 내용입니다.

VITE_REDIRECT_URI 와 VITE_CLIENT_ID 는 네이버 맵 api 를 연동할 때 발급받은 것이며, VITE_API_BASE_URL 은 백엔드 api 도메인 주소를 입력한 것입니다.

물론 배포환경 말고, 로컬환경에서도 위와 같이 등록을 해야합니다.

해당 작업은 vscode 로컬 환경에서도 동일하게 해야하며, 방법은 아래와 같습니다.

1. 프로젝트 루트 디렉토리 아래 .env 파일 생성

2.VITE_API_BASE_URL=https://1.2.3.4........~~처럼 api base url을 입력해줍니다.

3. .env 파일은 gitignore처럼 github 에 push 되지 않으므로, 팀원들과의 커뮤니티를 통해 해당 작업의 내용을 알려주고 각자 로컬에서 똑같이 등록할 수 있도록 공유해야 합니다.

[모던 자바스크립트 DeepDive] Js 심화 스터디 week 8

sjindev — Wed, 27 Aug 2025 13:16:18 +0900

브라우저의 렌더링 과정

1. 요청과 응답

브라우저 주소창에 URL 입력 시 브라우저가 DNS를 통해 IP 주소 조회함
해당 서버로 HTTP 요청 전송함
서버는 HTML 문서를 응답으로 반환함
브라우저는 HTML 문서 수신 후 렌더링 엔진에 전달함

2. HTTP 1.0 과 HTTP 2.0

HTTP 1.0: 요청마다 TCP 연결 새로 생성함, 다중 요청 불가능함, 리소스가 많은 페이지에서 성능 저하 발생함
HTTP 2.0: 하나의 연결에서 다중 요청 동시 처리 가능함, 헤더 압축과 서버 푸시 지원으로 성능 향상됨

3. HTML 파싱과 DOM 생성

DOM 생성과정 요약

1. 렌더링 엔진이 HTML 문서를 읽고 토큰 단위로 분해함

2. 토큰을 객체로 변환하여 노드를 생성(문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노드).

3. DOM(Document Object Model) 트리 생성함

4(결과). DOM은 HTML 문서의 계층적 구조를 메모리에 표현한 객체 모델임

<html>
  <body>
    <h1>Hello</h1>
  </body>
</html>

위 HTML 문서는 <html>, <body>, <h1> 요소를 노드로 가지는 DOM 트리 생성함

4. CSS 파싱과 CSSOM 생성

CSS 파서가 스타일시트를 파싱하여 CSSOM(CSS Object Model) 트리 생성함
CSSOM은 각 노드별 스타일 규칙을 담고 있음
DOM과 결합하여 렌더 트리 생성에 사용됨

5. 렌더 트리 생성

DOM 트리와 CSSOM 트리 결합하여 렌더 트리 생성함
렌더 트리는 실제 화면에 표시될 노드와 스타일 정보를 포함함
보이지 않는 노드(<head>, display:none)는 렌더 트리에 포함되지 않음

6. 자바스크립트 파싱과 실행

브라우저의 JavaScript 엔진이 자바스크립트 코드 처리함
토크나이징(Tokenizing): 소스 코드를 토큰 단위로 분해함
파싱(Parsing): 토큰을 AST(Abstract Syntax Tree)로 변환함
실행(Execution): AST를 바이트코드로 컴파일하고 실행함

7. 리플로우와 리페인트

리플로우(Reflow): 레이아웃이 변경될 때 다시 렌더 트리 계산하는 과정임
리페인트(Repaint): 색상, 배경 등 시각적 스타일 변경 시 발생함
리플로우가 성능에 더 큰 영향을 미침

8. 자바스크립트 파싱에 의한 HTML 파싱중단

브라우저는 <script> 태그 만나면 HTML 파싱 중단하고 스크립트 실행함
DOM 생성 지연으로 초기 렌더링 속도 저하 원인 될 수 있음

9. script 태그의 async/defer 어트리뷰트

async: 스크립트 다운로드와 HTML 파싱 병렬 처리, 다운로드 완료 시 즉시 실행함

defer: 스크립트 다운로드 병렬 처리, HTML 파싱 끝난 뒤 실행함

<script src="script.js" async></script>
<script src="script.js" defer></script>

async는 다운로드 완료 순서대로 실행, defer는 HTML 파싱 완료 후 순서대로 실행함

요약

요청과 응답 → HTML/CSS 파싱 → DOM/CSSOM 생성 → 렌더 트리 생성 → 자바스크립트 실행 → 리플로우·리페인트 순으로 렌더링 진행됨
async, defer 속성 사용 시 HTML 파싱과 자바스크립트 실행 효율적으로 조정 가능함

DOM(Document Object Model)

1. 노드

DOM은 문서의 계층적 구조와 정보를 표현하는 트리 구조 모델임
HTML 요소, 텍스트, 속성 등을 각각 노드(node)로 표현함
노드 타입 종류
- 문서 노드(Document): HTML 문서 전체 표현
- 요소 노드(Element): HTML 태그 표현
- 텍스트 노드(Text): 요소 안의 텍스트 콘텐츠 표현
- 어트리뷰트 노드(Attribute): 요소의 속성 표현
- 주석 노드(Comment): 주석 데이터 표현

<html>
  <body>
    <h1 id="title">Hello</h1>
  </body>
</html>

위 예시에서 <h1>은 요소 노드, "Hello"는 텍스트 노드임

- 문서노드는 Document, HTMLDocument 인터페이스를 상속받음

- 어트리뷰트 노드는 Attr을 상속받음

- 텍스트 노드는 CharacterData 인터페이스를 상속받

2. 요소 노드 취득

자바스크립트에서 DOM 요소 접근 방법
getElementById(id): ID로 요소 선택
getElementsByTagName(tag): 태그 이름으로 요소 컬렉션 선택
getElementsByClassName(class): 클래스 이름으로 요소 컬렉션 선택
querySelector(selector): CSS 선택자로 첫 번째 요소 반환
querySelectorAll(selector): CSS 선택자로 모든 요소 반환

const title = document.getElementById('title');
const items = document.querySelectorAll('.item');

3. 노드 탐색

공백문자는 텍스트 노드를 생성한다!!

만약 인위적으로 HTML 공백문자를 제거하면 공백 텍스트 노드를 생성하지 않지만, 이는 가독성이 좋지않으므로 권장되지 않음.

노드 간 관계를 통해 DOM 트리 탐색 가능함
parentNode: 부모 노드 반환
childNodes: 자식 노드 반환 (텍스트 노드 포함)
children: 자식 요소 노드만 반환
firstChild, lastChild: 첫/마지막 자식 노드 반환
previousSibling, nextSibling: 형제 노드 탐색
previousElementSibling, nextElementSibling: 형제 요소 노드 탐색

const parent = title.parentNode;
const first = parent.firstChild;

4. 노드 정보 취득

nodeType: 노드 유형 숫자 반환
nodeName: 노드 이름 반환
nodeValue: 텍스트 노드 값 반환

console.log(title.nodeType); // 1 (요소 노드)
console.log(title.nodeName); // H1

5. 요소 노드의 텍스트 조작

textContent: 요소 내 모든 텍스트 콘텐츠 접근
innerText: 렌더링된 텍스트만 접근

title.textContent = 'Welcome';

6. DOM 조작

요소 생성: document.createElement(tagName)
텍스트 노드 생성: document.createTextNode(text)
노드 추가: appendChild(node), insertBefore(new, ref)
노드 제거: removeChild(node)
노드 교체: replaceChild(new, old)

const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

7. innerHTML

요소 내부 HTML 마크업을 문자열로 접근 및 변경 가능함
기존 콘텐츠 모두 제거하고 새로운 HTML 파싱하여 DOM으로 변환함
XSS(교차 스크립팅 공격) 주의 필요함
- 웹 사이트의 어드민(관리자)이 아닌 악의적인 목적을 가진 제 3자가 악성 스크립트를 삽입하여 의도하지 않은 명령을 실행시키거나 세션 등을 탈취할 수 있는 취약점
- 예시
  - <script>alert("hi")</script> : 대놓고 script 태그를 넣어 alert를 실행시키는 구문. 이 구문이 실행된다면 해당 사이트는 XSS에 대한 대책이 전혀 없는 것이라 봐도 무방
  - <scr<script>ipt>alert("hi");</scr</script>ipt> : <script> 태그를 일차적으로 필터링하는 것을 우회하기 위한 구문, 중첩된 script 태그가 필터링되면 갈라져있던 script 태그가 결합되면서 구문이 실행
  - <a onmouseover="alert('hi')"> : a 태그를 이용한 공격입니다. onmouseover 이벤트를 통해 공격을 실행

document.body.innerHTML = '<h2>New Content</h2>';

8. 어트리뷰트

요소의 속성 접근 및 조작 가능함
getAttribute(name), setAttribute(name, value), hasAttribute(name), removeAttribute(name) 제공함

const link = document.querySelector('a');
link.setAttribute('href', 'https://example.com');

HTML 표준 속성은 프로퍼티처럼 직접 접근 가능함

link.href = 'https://example.com';

9. 스타일

style 프로퍼티 통해 인라인 스타일 조작 가능함

title.style.color = 'red';
title.style.fontSize = '24px';

CSS 클래스 조작 메서드
- classList.add(className)
- classList.remove(className)
- classList.toggle(className)
- classList.contains(className)

title.classList.add('highlight');

10. DOM 표준

W3C와 WHATWG에서 DOM 표준 관리함
현재는 WHATWG 단일 사양으로 통합됨
DOM Level 1: 기본 구조와 접근 API 정의함
DOM Level 2: 이벤트 모델, CSS 지원 추가함
DOM Level 3: XPath, Load & Save, Keyboard 이벤트 추가함
이후 HTML5와 함께 지속 확장됨

요약

DOM은 문서 구조를 객체 모델로 표현하고 자바스크립트를 통해 동적 조작 가능하게 함
노드 탐색, 조작, 속성 변경, 스타일 제어 등 풍부한 API 제공함

이벤트(Event)

1. 이벤트 드리븐 프로그래밍

프로그램 흐름이 이벤트에 의해 결정되는 프로그래밍 방식임
브라우저 환경에서는 사용자 입력, 네트워크 응답, DOM 변화 등이 이벤트임
이벤트 발생 시 미리 등록한 이벤트 핸들러 실행됨

2. 이벤트 타입

마우스 이벤트: click, dblclick, mousedown, mouseup, mousemove, mouseover 등
키보드 이벤트: keydown, keyup, keypress
폼 이벤트: submit, change, input, focus, blur
윈도우 이벤트: load, resize, scroll, unload
드래그 & 드롭 이벤트: dragstart, dragover, drop 등

document.body.addEventListener('click', () => console.log('clicked'));

3. 이벤트 핸들러 등록

HTML 속성 방식: 요소 태그에 on이벤트명 속성으로 등록
DOM 프로퍼티 방식: 요소의 이벤트 프로퍼티에 함수 할당
addEventListener 메서드: 한 요소에 여러 핸들러 등록 가능

<button onclick="alert('clicked')">Click Me</button>

const btn = document.querySelector('button');
btn.onclick = () => console.log('clicked');
btn.addEventListener('click', () => console.log('another click'));

4. 이벤트 핸들러 제거

HTML 속성 방식과 DOM 프로퍼티 방식은 핸들러를 null 할당으로 제거함
addEventListener 방식은 같은 함수 참조 필요함

function handleClick() { console.log('clicked'); }
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);

5. 이벤트 객체

이벤트 발생 시 이벤트에 대한 다양한 정보 담긴 객체 자동 생성됨
이벤트 핸들러 첫 번째 매개변수로 전달됨
주요 프로퍼티: type, target, currentTarget, timeStamp, key, clientX, clientY 등

btn.addEventListener('click', e => {
  console.log(e.type); // click
  console.log(e.target); // 이벤트 발생 요소
});

6. 이벤트 전파

캡처링 단계: 최상위 요소에서 이벤트 대상까지 내려감
타깃 단계: 이벤트 대상 도달
버블링 단계: 이벤트 대상에서 최상위 요소까지 전파

const parent = document.querySelector('#parent');
parent.addEventListener('click', () => console.log('parent'));
btn.addEventListener('click', () => console.log('button'));

7. 이벤트 위임

버블링 이용해 상위 요소에서 하위 요소 이벤트 일괄 처리 기법임
성능 향상과 코드 단순화에 유리함

document.querySelector('#list').addEventListener('click', e => {
  if (e.target.tagName === 'LI') console.log(e.target.textContent);
});

8. DOM 요소의 기본 동작 조작

링크 클릭 시 페이지 이동, 폼 전송 같은 기본 동작 취소 가능함
preventDefault() 메서드 사용함

document.querySelector('a').addEventListener('click', e => {
  e.preventDefault();
  console.log('링크 동작 취소됨');
});

9. 이벤트 핸들러 내부의 this

HTML 속성 방식: 이벤트 핸들러 내부 this는 해당 요소 참조함
DOM 프로퍼티 / addEventListener: this는 이벤트를 바인딩한 요소 참조함

btn.addEventListener('click', function() {
  console.log(this === btn); // true
});

10. 이벤트 핸들러에 인수 전달

직접 호출 시 이벤트 객체 대신 undefined 전달되므로 주의 필요함
래퍼 함수 사용으로 인수 전달 가능함

btn.addEventListener('click', e => handleClickWithArgs(e, 123));
function handleClickWithArgs(e, id) { console.log(id); }

11. 커스텀 이벤트

CustomEvent 생성자 사용해 사용자 정의 이벤트 생성 가능함
dispatchEvent() 메서드로 이벤트 발생시킴

const custom = new CustomEvent('myEvent', { detail: { key: 'value' } });
btn.addEventListener('myEvent', e => console.log(e.detail));
btn.dispatchEvent(custom);

한줄요약

이벤트 드리븐 프로그래밍에서 이벤트 등록, 제거, 전파, 위임, 기본 동작 제어, 커스텀 이벤트까지 모두 이해 필요함

타이머

1. 호출 스케줄링

자바스크립트는 단일 스레드 기반 언어임
동시에 여러 작업 수행 불가, 이벤트 루프와 태스크 큐 사용해 비동기 작업 처리함
호출 스케줄링은 특정 함수 실행 시점 예약하는 기능임
브라우저 환경에서는 Web API 타이머 함수 활용함
지정한 시간 경과 후 콜백 함수 실행 예약 가능함

2. 타이머 함수

setTimeout

지정 시간 후 한 번만 콜백 함수 실행함
타이머 ID 반환, clearTimeout으로 취소 가능함

const timerId = setTimeout(() => console.log('3초 후 실행'), 3000);
clearTimeout(timerId);

setInterval

지정 시간 간격마다 반복 실행함
타이머 ID 반환, clearInterval로 취소 가능함

const intervalId = setInterval(() => console.log('1초마다 실행'), 1000);
clearInterval(intervalId);

requestAnimationFrame

화면 주사율에 맞춰 콜백 실행함
주로 애니메이션 구현에 사용함
setInterval 대비 성능 최적화 장점 있음

function animate() {
  console.log('프레임마다 실행');
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

3. 디바운스와 스로틀

짧은 시간 동안 이벤트가 많이 발생하면 성능 저하 발생함
디바운스와 스로틀 기법으로 호출 횟수 조절 가능함

디바운스(Debounce)

마지막 이벤트 발생 후 일정 시간 지나야 콜백 실행함
연속 입력 종료 시점에 한 번만 실행되게 함
주로 검색창 입력 처리에 사용함

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  }
}

const processChange = debounce(() => console.log('입력 완료'), 500);

스로틀(Throttle)

일정 시간 간격으로 콜백 실행 보장함
스크롤 이벤트 같은 고빈도 이벤트 최적화에 사용함

function throttle(fn, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

const handleScroll = throttle(() => console.log('스크롤 중'), 1000);

setTimeout, setInterval, requestAnimationFrame으로 호출 스케줄링 가능함
디바운스와 스로틀 기법으로 이벤트 처리 최적화 가능함
불필요한 연산 줄이고 성능 개선에 기여함

[모던 자바스크립트 DeepDive] Js 심화 스터디 week 7

sjindev — Wed, 27 Aug 2025 11:40:54 +0900

심벌 (Symbol)

1. 심벌값의 생성

심벌은 ES6에서 도입된 원시 타입 중 하나임
Symbol() 함수 호출로 생성함
생성된 심벌값은 유일무이함
new 연산자 사용 불가
심벌값은 문자열로 자동 변환되지 않음

const sym1 = Symbol('desc');
const sym2 = Symbol('desc');
console.log(sym1 === sym2); // false

2. 심벌과 상수

중복되지 않는 상수 값 생성 시 유용함
주로 enum 대체 용도로 사용됨

const DIRECTION = {
  UP: Symbol('up'),
  DOWN: Symbol('down')
};

3. 심벌과 프로퍼티 키

객체 프로퍼티 키로 심벌 사용 가능함
문자열 키와 달리 충돌 위험 없음

const key = Symbol('key');
const obj = {
  [key]: 'value'
};
console.log(obj[key]); // value

4. 심벌과 프로퍼티 은닉

심벌 키 프로퍼티는 기본적인 순회에서 노출되지 않음
for...in, Object.keys(), JSON.stringify() 등에서 제외됨
은닉 프로퍼티처럼 사용 가능함

const secret = Symbol('secret');
const user = {
  name: 'Alice',
  [secret]: 'hidden'
};
console.log(Object.keys(user)); // ['name']

5. 심벌과 표준 빌트인 객체 확장

빌트인 객체의 기존 메서드 충돌 없이 새로운 메서드 추가 가능함

const custom = Symbol('custom');
Array.prototype[custom] = function() {
  return 'custom method';
};
const arr = [];
console.log(arr[custom]()); // custom method

6. Well-known Symbol

자바스크립트 엔진이 미리 정의한 심벌 값
객체 동작을 커스터마이징하는 데 사용함

심벌 설명

Symbol.iterator	for...of 루프 동작 정의
Symbol.asyncIterator	비동기 반복자 정의
Symbol.toStringTag	객체의 기본 toString 태그 변경
Symbol.hasInstance	instanceof 연산자 동작 정의
Symbol.isConcatSpreadable	배열 concat 시 전개 여부 결정
Symbol.species	파생 객체 생성자 결정
Symbol.match	문자열 매칭 동작 정의
Symbol.replace	문자열 치환 동작 정의
Symbol.search	문자열 검색 동작 정의
Symbol.split	문자열 분할 동작 정의

class Custom {
  get [Symbol.toStringTag]() {
    return 'CustomObject';
  }
}
const c = new Custom();
console.log(Object.prototype.toString.call(c)); // [object CustomObject]

이터러블(Iterable)

1. 이터레이션 프로토콜

이터러블 프로토콜과 이터레이터 프로토콜로 구성됨
이터러블 프로토콜: 객체가 Symbol.iterator 메서드를 가져야 함
이터레이터 프로토콜: next() 메서드를 호출할 때 { value, done } 형태 객체 반환해야 함
done이 true이면 반복 종료 의미함
자바스크립트의 순회 가능한 객체는 이 두 프로토콜을 모두 준수함

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }

2. 빌트인 이터러블

Array, String, Map, Set, TypedArray, arguments, DOM 컬렉션(NodeList 등) 등이 빌트인 이터러블 객체임
이들은 모두 for...of문, 스프레드 문법, 배열 디스트럭처링 등에 사용 가능함

const str = 'hello';
for (const char of str) {
  console.log(char);
}

3. for ...of 문

이터러블 객체 순회 전용 반복문임
내부적으로 이터레이터 프로토콜 사용함
for...in은 열거 가능한 속성 순회, for...of는 값 자체 순회

const arr = [10, 20, 30];
for (const val of arr) {
  console.log(val);
}

4. 이터러블과 유사 배열 객체

유사 배열 객체(Array-like Object)는 length 프로퍼티를 가진 객체임
예: arguments, NodeList 등
배열 메서드 사용 불가, 이터러블이 아닐 수도 있음
스프레드 문법이나 Array.from()으로 배열 변환 가능함

function test() {
  console.log(arguments); // 유사 배열 객체
  const arr = Array.from(arguments);
  console.log(arr.map(x => x * 2));
}
test(1, 2, 3);

5. 이터레이션 프로토콜의 필요성

다양한 데이터 소스를 동일한 방법으로 순회 가능하게 함
일관된 순회 인터페이스 제공으로 코드 재사용성 향상
ES6의 스프레드 문법, for...of, 디스트럭처링 할당, Promise.all 등에서 활용됨

const set = new Set([1, 2, 3]);
console.log([...set]); // [1, 2, 3]

6. 사용자 정의 이터러블

직접 Symbol.iterator 메서드 구현하여 이터러블 객체 생성 가능함

const customIterable = {
  values: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    const values = this.values;
    return {
      next() {
        if (index < values.length) {
          return { value: values[index++], done: false };
        } else {
          return { done: true };
        }
      }
    };
  }
};

for (const val of customIterable) {
  console.log(val);
}

위 예시에서 customIterable 객체는 직접 이터레이터를 구현했기 때문에 for...of문 사용 가능함

스프레드 문법(Spread Syntax)

1. 함수 호출문의 인수 목록에서 사용하는 경우

스프레드 문법은 ... 기호 사용함
배열이나 이터러블 요소를 개별 인수로 확장하는 역할 함
Function.prototype.apply()를 대체하는 간결한 문법 제공함
함수 호출 시 가독성 향상 및 코드 간결화 가능함

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

Math.max() 같이 여러 인수를 받는 함수에도 사용 가능함

const values = [10, 20, 30];
console.log(Math.max(...values)); // 30

2. 배열 리터럴 내부에서 사용하는 경우

배열 결합, 복사 시 활용 가능함
concat() 메서드 없이도 간결하게 배열 병합 가능함

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

배열 복사 시 얕은 복사 수행함

const original = [1, 2, 3];
const copy = [...original];
console.log(copy); // [1, 2, 3]
console.log(original === copy); // false

문자열도 배열처럼 전개 가능함

const str = 'hello';
console.log([...str]); // ['h', 'e', 'l', 'l', 'o']

3. 객체 리터럴 내부에서 사용하는 경우

ES2018에서 도입된 기능임
기존 객체를 전개하여 새로운 객체 생성 가능함
객체 병합 시 Object.assign()을 대체함

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }

얕은 복사 수행, 중첩 객체는 참조 복사됨

const nested = { x: { y: 1 } };
const copyNested = { ...nested };
copyNested.x.y = 2;
console.log(nested.x.y); // 2 (얕은 복사로 인한 영향)

새로운 프로퍼티 추가하면서 복사 가능함

const user = { name: 'Alice', age: 20 };
const updated = { ...user, age: 21, city: 'Seoul' };
console.log(updated); // { name: 'Alice', age: 21, city: 'Seoul' }

디스트럭처링 할당(Destructuring Assignment)

1. 배열 디스트럭처링 할당

배열의 요소를 개별 변수로 쉽게 할당하는 문법임
인덱스 순서대로 변수에 값이 할당됨
코드 간결화와 가독성 향상에 유용함

const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

기본값 할당

배열 요소가 undefined인 경우 기본값 할당 가능함

const [x, y, z = 5] = [10, 20];
console.log(x, y, z); // 10 20 5

필요 없는 요소 무시

쉼표로 요소를 건너뛸 수 있음

const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3

나머지 요소 할당(Rest)

나머지 요소를 배열로 모아 할당 가능함

const [head, ...rest] = [1, 2, 3, 4];
console.log(head); // 1
console.log(rest); // [2, 3, 4]

2. 객체 디스트럭처링 할당

객체 프로퍼티를 변수로 쉽게 추출하는 문법임
프로퍼티 이름과 변수 이름이 동일해야 자동 매칭됨

const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name, age); // Alice 25

프로퍼티 이름 변경

다른 변수명으로 할당 가능함

const { name: userName, age: userAge } = user;
console.log(userName, userAge); // Alice 25

기본값 할당

프로퍼티가 undefined이면 기본값 사용함

const { city = 'Seoul' } = user;
console.log(city); // Seoul

중첩 객체 디스트럭처링

중첩된 객체 프로퍼티 추출 가능함

const person = { info: { firstName: 'Bob', lastName: 'Smith' } };
const { info: { firstName, lastName } } = person;
console.log(firstName, lastName); // Bob Smith

나머지 프로퍼티 할당(Rest)

나머지 프로퍼티를 객체로 모아 할당 가능함

const { name: n, ...others } = { name: 'Alice', age: 25, city: 'Seoul' };
console.log(n); // Alice
console.log(others); // { age: 25, city: 'Seoul' }

Set과 Map

1. Set

Set 객체는 중복되지 않는 유일한 값들의 집합임
원시값과 객체 참조 모두 저장 가능함
삽입 순서를 기억함

const set = new Set([1, 2, 3, 3]);
console.log(set); // Set(3) {1, 2, 3}

주요 메서드

set.add(value) : 값 추가
set.has(value) : 값 존재 여부 확인
set.delete(value) : 특정 값 삭제
set.clear() : 모든 요소 제거
set.size : 요소 개수 반환

const set = new Set();
set.add(1);
set.add(2);
console.log(set.has(1)); // true
set.delete(1);
console.log(set.size); // 1

Set 순회

for...of, forEach 모두 사용 가능함
keys(), values(), entries() 메서드 제공함

const set = new Set([1, 2, 3]);
for (const val of set) {
  console.log(val);
}

활용

배열 중복 제거에 유용함

const numbers = [1, 2, 2, 3];
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3]

2. Map

Map 객체는 키-값 쌍으로 이루어진 컬렉션임
키에는 객체, 함수, 원시값 모두 가능함
삽입 순서를 기억함

const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // value1

주요 메서드

map.set(key, value) : 키-값 쌍 추가
map.get(key) : 키에 해당하는 값 반환
map.has(key) : 키 존재 여부 확인
map.delete(key) : 키와 값 삭제
map.clear() : 모든 요소 제거
map.size : 요소 개수 반환

const map = new Map();
map.set('a', 1);
map.set('b', 2);
console.log(map.has('a')); // true
map.delete('a');
console.log(map.size); // 1

Map 순회

for...of문, forEach 메서드 사용 가능함
keys(), values(), entries() 메서드 제공함

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(key, value);
}

객체와의 차이점

객체는 문자열, 심벌만 키로 사용 가능함
Map은 키 타입 제한 없음
요소 개수는 map.size 사용, 객체는 Object.keys(obj).length 사용

const obj = { a: 1 };
obj[1] = 'number key';
console.log(obj); // { '1': 'number key', a: 1 }

const map = new Map();
map.set(1, 'number key');
map.set({x: 10}, 'object key');
console.log(map);

[모던 자바스크립트 DeepDive] Js 심화 스터디 week 6

sjindev — Sun, 10 Aug 2025 17:45:24 +0900

ES6 함수의 추가기능

함수의 구분

ES6 이후 자바스크립트의 함수는 의도와 동작 방식에 따라 명확하게 구분됨.

1.1 함수의 종류

일반 함수 (Normal Function)

function 키워드를 사용해 선언
생성자 함수로 사용 가능 (new 가능)
호출 방식에 따라 this 바인딩이 달라짐

메서드 (Method)

객체의 프로퍼티 값이 함수인 경우
super 키워드 사용 가능
생성자 함수로 사용 불가 (new 불가)

화살표 함수 (Arrow Function)

간결한 함수 선언 문법
this 바인딩이 없고 상위 스코프를 참조 (렉시컬 this)
생성자 함수로 사용 불가

화살표 함수 (feat : 함수표현식 vs 함수선언식)

생성자 함수 (Constructor Function)

new 연산자와 함께 호출되어 인스턴스를 생성
클래스 문법의 기반

function normalFunc() {
  console.log("일반 함수");
}

const obj = {
  method() {
    console.log("메서드");
  }
};

const arrow = () => console.log("화살표 함수");

new normalFunc(); // OK
// new obj.method(); // TypeError
// new arrow(); // TypeError

메서드

예시 코드

const person = {
  name: "KSJ",
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // Hello, my name is KSJ

특징

메서드는 프로토타입의 메서드로 정의됨
super 키워드를 사용해 부모 객체 메서드 호출 가능
생성자 함수처럼 new로 호출 불가.

const parent = {
  greet() {
    return "Hello";
  }
};

const child = {
  greet() {
    return `${super.greet()} World`;
  }
};

Object.setPrototypeOf(child, parent);
console.log(child.greet()); // Hello World

화살표 함수

예시코드

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

특징

this, arguments, super, new.target을 바인딩하지 않음.
항상 상위 스코프의 this를 참조 (렉시컬 this).
메서드로 사용하면 안 됨 (객체 메서드 내부의 this 참조 불가).

const obj = {
  value: 42,
  arrow: () => console.log(this.value),
  normal: function () {
    console.log(this.value);
  }
};

obj.arrow(); // undefined (전역 this 참조)
obj.normal(); // 42

화살표함수 vs 일반함수

구분	일반 함수	화살표 함수
`this`	호출 방식에 따라 동적 바인딩	상위 스코프의 `this`(렉시컬 바인딩)
`arguments`	전달된 인수 유사배열로 접근 가능	없음(상위 스코프의 arguments 참조)
생성자 사용	가능	불가능
`super` 사용	가능	없음
코드 길이	길어질 수 있음	간결

Rest 파라미터

ES6에서 추가된 문법으로, 가변 인자를 배열로 한 번에 받을 수 있는 기능

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

특징

항상 마지막 매개변수에만 사용 가능
함수의 length 프로퍼티에 영향을 주지 않음.
arguments 객체보다 직관적

function log(a, b, ...rest) {
  console.log(a);    // 첫 번째 인자
  console.log(b);    // 두 번째 인자
  console.log(rest); // 나머지 인자 배열
}

log(1, 2, 3, 4, 5);

매개변수 기본값

ES6부터 매개변수에 기본값을 직접 설정할 수 있음.

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

greet(); // Hello, Guest
greet("KSJ"); // Hello, KSJ

함수 호출 시 인자를 생략하거나 undefined를 전달하면 기본값 사용.
기본값 표현식에서 다른 매개변수를 참조 가능.

배열

1. 자바스크립트 배열은 배열이 아니다

자바스크립트의 배열은자료구조에서 말하는 일반적인 배열(Array)과 다름.

전통적인 배열(C, Java): 메모리상에 같은 타입의 데이터가 연속적으로 저장됨.
자바스크립트 배열: 해시 테이블 기반의 객체(Object)로, 인덱스를 키로 사용하는 특수한 객체입니다.

즉, JS 배열은 동일한 타입과 연속적인 메모리 구조를 강제하지 않으며, 다양한 타입의 데이터를 섞어 저장할 수 있다.

const arr = [1, 'text', true, { key: 'value' }];
console.log(typeof arr); // 'object'

2. length 프로퍼티와 희소 배열

2.1 length 프로퍼티

배열의 length는 요소 개수가 아니라 가장 큰 인덱스 + 1 값.
요소를 삭제하거나 인덱스를 건너뛰면 실제 요소 개수보다 length가 더 클 수 있다.

const arr = [];
arr[3] = 'hello';
console.log(arr.length); // 4 (0~3 인덱스)

2.2 희소 배열(Sparse Array)

중간 인덱스에 값이 없는 배열을 희소 배열이라고 함.
빈 요소는 undefined가 아니라 존재하지 않는 값으로 취급.

const sparse = [1, , 3];
console.log(sparse.length); // 3
console.log(sparse[1]); // undefined (요소가 없음)
console.log(1 in sparse); // false

3. 배열 생성(간단한 코드로 문법 확인)

3.1 배열 리터럴

const arr = [1, 2, 3];

3.2 Array 생성자

const arr1 = new Array(3); // 길이 3, 빈 요소
const arr2 = new Array(1, 2, 3); // 요소 1,2,3

3.3 Array.of()

const arr = Array.of(3); // [3]

3.4 Array.from()

const arr = Array.from('abc'); // ['a', 'b', 'c']

4. 배열 요소의 참조

인덱스는 0부터 시작.
존재하지 않는 인덱스 접근 시 undefined 반환.

const arr = ['a', 'b'];
console.log(arr[0]); // 'a'
console.log(arr[5]); // undefined

5. 배열 요소의 추가와 갱신

const arr = [1, 2];
arr[2] = 3; // 추가
arr[1] = 20; // 갱신

인덱스를 건너뛰어 추가하면 희소 배열 생성.

6. 배열 요소의 삭제

6.1 delete 연산자

const arr = [1, 2, 3];
delete arr[1];
console.log(arr); // [1, <empty>, 3]

요소는 삭제되지만, length는 변하지 않고 빈 슬롯 유지.

6.2 splice() 사용 (권장)

const arr = [1, 2, 3];
arr.splice(1, 1);
console.log(arr); // [1, 3]

7. 배열 메서드

7.1 변경 메서드 (원본을 수정)

push(), pop()
shift(), unshift()
splice()
sort(), reverse()

7.2 비변경 메서드 (새 배열을 반환)

concat()
slice()
map(), filter()
reduce(), reduceRight()

8. 얕은 복사 vs 깊은 복사

8.1 얕은 복사

참조형 데이터의 참조 값만 복사.

const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2[0] = 99;
console.log(arr1[0]); // 99

8.2 깊은 복사

실제 값까지 완전히 복사.

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2[0] = 99;
console.log(arr1[0]); // 1

중첩 객체일 경우 structuredClone() 또는 lodash.cloneDeep() 권장.

9. 배열 고차 함수

고차 함수(Higher-Order Function)는 함수를 인수로 받거나 함수를 반환하는 함수.

forEach() : 단순 반복
map() : 요소 변환
filter() : 조건 필터링
reduce() : 누적 계산
find(), findIndex() : 조건 검색

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2); // [2, 4, 6, 8]

10. JSON.stringify 메서드

배열이나 객체를 JSON 문자열로 변환.

const arr = [1, 2, 3];
const json = JSON.stringify(arr);
console.log(json); // "[1,2,3]"

함수나 undefined는 무시됨.

const arr = [1, undefined, function(){}];
console.log(JSON.stringify(arr)); // [1,null,null]

요약정리

JS 배열은 객체이지만, 인덱스 기반 데이터 관리에 최적화된 구조.
length와 희소 배열 개념을 이해하면 예기치 못한 버그 방지 가능.
원본 변경 여부에 따라 메서드를 구분해 사용.
얕은 복사/깊은 복사 차이를 이해해야 참조 문제를 피할 수 있음.
JSON 직렬화 시 undefined와 함수는 제외됨.

Number, Math, Date

Number

Number 생성자 함수

숫자 값을 생성하기 위한 래퍼 객체 생성자 함수
new 연산자와 함께 호출 시 Number 객체 생성
new 없이 호출 시 숫자 타입 변환 수행
예시

new Number(10); // Number 객체
Number('123'); // 숫자 123

Number 프로퍼티

Number.EPSILON : 1과 1보다 큰 수 중에서 가장 작은 수의 차이값
Number.MAX_VALUE : 자바스크립트에서 표현 가능한 가장 큰 수
Number.MIN_VALUE : 자바스크립트에서 표현 가능한 가장 작은 수(0에 가장 가까운 양수)
Number.MAX_SAFE_INTEGER : 안전하게 표현할 수 있는 최대 정수값 (2^53 - 1)
Number.MIN_SAFE_INTEGER : 안전하게 표현할 수 있는 최소 정수값 (-(2^53 - 1))
Number.POSITIVE_INFINITY : 양의 무한대
Number.NEGATIVE_INFINITY : 음의 무한대
Number.NaN : Not-a-Number 값

Number 메서드

Number.isFinite() : 유한수 여부 판별
Number.isInteger() : 정수 여부 판별
Number.isNaN() : NaN 여부 판별
Number.isSafeInteger() : 안전한 정수 여부 판별
Number.parseFloat() : 문자열을 부동소수점 숫자로 변환
Number.parseInt() : 문자열을 정수로 변환
toExponential() : 지수 표기법 문자열로 변환
toFixed() : 고정 소수점 표기 문자열로 변환
toPrecision() : 지정된 자릿수의 문자열로 변환

Math

Math 프로퍼티

Math.PI : 원주율(π) 값
Math.E : 자연로그의 밑(e)
Math.LN2 : 2의 자연로그
Math.LN10 : 10의 자연로그
Math.LOG2E : e의 밑이 2인 로그값
Math.LOG10E : e의 밑이 10인 로그값

Math 메서드

Math.abs() : 절대값 반환
Math.ceil() : 올림
Math.floor() : 내림
Math.round() : 반올림
Math.trunc() : 소수점 이하 버림
Math.max() : 최대값 반환
Math.min() : 최소값 반환
Math.pow() : 거듭제곱 계산
Math.sqrt() : 제곱근 계산
Math.random() : 0 이상 1 미만 난수 생성
Math.sign() : 부호 반환 (양수 1, 음수 -1, 0)

Date

Date 생성자 함수

날짜와 시간을 표현하는 객체 생성
new Date() : 현재 날짜와 시간 반환
new Date(milliseconds) : 1970-01-01 00:00:00 UTC부터 지정된 밀리초 경과 시점
new Date(dateString) : 날짜 문자열 기반 객체 생성
new Date(year, month[, day, hour, minute, second, millisecond]) : 지정된 날짜/시간 기반 생성

Date 메서드

Getter 메서드
- getFullYear() : 연도 반환
- getMonth() : 월(0~11) 반환
- getDate() : 일(1~31) 반환
- getDay() : 요일(0~6) 반환 (일요일=0)
- getHours() : 시 반환
- getMinutes() : 분 반환
- getSeconds() : 초 반환
- getMilliseconds() : 밀리초 반환
- getTime() : 1970-01-01 00:00:00 UTC부터 경과한 밀리초
- getTimezoneOffset() : 로컬과 UTC 차이(분)
Setter 메서드
- setFullYear() : 연도 설정
- setMonth() : 월 설정
- setDate() : 일 설정
- setHours() : 시 설정
- setMinutes() : 분 설정
- setSeconds() : 초 설정
- setMilliseconds() : 밀리초 설정
- setTime() : 밀리초 기반 날짜 설정
기타 메서드
- toDateString() : 사람이 읽기 쉬운 날짜 문자열 반환
- toTimeString() : 사람이 읽기 쉬운 시간 문자열 반환
- toISOString() : ISO 8601 형식 문자열 반환
- toLocaleDateString() : 지역화된 날짜 문자열 반환
- toLocaleTimeString() : 지역화된 시간 문자열 반환
RegExp

1. 정규표현식이란?

문자열에서 특정 패턴을 검색, 추출, 치환하기 위해 사용하는 표현식
문자열 처리에서 강력한 패턴 매칭 기능 제공
주로 데이터 유효성 검사, 문자열 검색, 문자열 변환 등에 사용
JavaScript에서는 RegExp 객체로 표현

2. 정규표현식의 생성

리터럴 표기법

const regex = /pattern/flags;

/로 시작하고 종료
pattern은 검색할 패턴
flags는 검색 방식 지정
코드 실행 시점에 정규표현식이 고정됨

생성자 함수 표기법

const regex = new RegExp('pattern', 'flags');

문자열로 패턴과 플래그를 전달
런타임에 동적으로 정규표현식 생성 가능

3. RegExp 메서드

3.1 RegExp.prototype.exec()

정규표현식과 매치되는 문자열 반환
일치하면 배열, 불일치 시 null 반환

const regex = /abc/;
console.log(regex.exec('abcdef')); // ["abc"]

3.2 RegExp.prototype.test()

일치 여부를 불리언 값으로 반환

const regex = /abc/;
console.log(regex.test('abcdef')); // true

3.3 String.prototype.match()

문자열에서 정규표현식과 일치하는 부분을 배열로 반환

const str = 'hello world';
console.log(str.match(/world/)); // ["world"]

3.4 String.prototype.replace()

정규표현식에 매칭되는 부분을 치환

const str = 'hello world';
console.log(str.replace(/world/, 'JavaScript')); // hello JavaScript

3.5 String.prototype.search()

일치하는 첫 번째 인덱스 반환, 없으면 -1 반환

const str = 'hello world';
console.log(str.search(/world/)); // 6

3.6 String.prototype.split()

정규표현식을 구분자로 사용하여 문자열 분리

const str = 'apple,banana,orange';
console.log(str.split(/,/)); // ["apple", "banana", "orange"]

4. 플래그

g : 전역 검색 (모든 일치 항목 검색)
i : 대소문자 구분 없이 검색
m : 다중 행 모드 (각 행의 시작과 끝을 인식)
u : 유니코드 모드
y : "sticky" 모드, lastIndex부터만 검색

const regex = /abc/gi; // 대소문자 무시, 전역 검색

5. 패턴

5.1 메타문자

. : 임의의 한 문자
^ : 문자열 시작
$ : 문자열 끝
[] : 문자 집합
[^] : 부정 문자 집합
| : OR 연산자
() : 그룹화

5.2 수량자

* : 0회 이상 반복
+ : 1회 이상 반복
? : 0 또는 1회
{n} : n회 반복
{n,} : n회 이상 반복
{n,m} : n회 이상 m회 이하 반복

5.3 이스케이프 문자

\ : 메타문자를 일반 문자로 인식
예: \. → . 문자 자체

5.4 자주 쓰는 패턴

\d : 숫자
\D : 숫자가 아닌 문자
\w : 알파벳, 숫자, 밑줄
\W : 위 문자가 아닌 것
\s : 공백 문자
\S : 공백이 아닌 문자

String 객체 정리

String 생성자 함수

String 생성자 함수는 문자열을 생성하는 함수 객체임
new String(value) 형태로 호출 시 String 래퍼 객체 생성됨
인자를 전달하지 않으면 빈 문자열 생성됨
문자열 리터럴("hello")과 달리, 생성자 함수로 만든 값은 객체로 취급됨
typeof 연산 시 객체(object)로 반환됨
문자열 원시값과 달리 프로토타입 메서드 호출 시 내부적으로 객체로 변환되는 과정 존재함

const str1 = 'hello';
const str2 = new String('hello');
console.log(typeof str1); // string
console.log(typeof str2); // object

length 프로퍼티

문자열의 길이를 나타내는 읽기 전용 프로퍼티임
공백, 특수문자 포함하여 길이 계산됨
str.length 형태로 접근함
변경 불가, 재할당 불가

const str = 'hello world';
console.log(str.length); // 11

String 메서드

1. 문자 접근

charAt(index) : 지정 인덱스 위치 문자 반환
charCodeAt(index) : 지정 인덱스 문자의 UTF-16 코드 반환
대괄호 표기(str[index])로 접근 가능

2. 문자열 검색

indexOf(searchValue, fromIndex) : 왼쪽에서 검색하여 첫 번째 인덱스 반환
lastIndexOf(searchValue, fromIndex) : 오른쪽에서 검색하여 첫 번째 인덱스 반환
includes(searchString, position) : 포함 여부 불리언 반환
startsWith(searchString, position) : 시작 여부 확인
endsWith(searchString, length) : 끝 여부 확인

3. 문자열 변환

toUpperCase() : 대문자 변환
toLowerCase() : 소문자 변환
trim() : 양쪽 공백 제거
trimStart() / trimEnd() : 시작/끝 공백 제거

4. 문자열 추출

slice(start, end) : start~end 미만 잘라내기
substring(start, end) : 인덱스 기반 부분 문자열 추출
substr(start, length) : 시작 인덱스와 길이 기반 추출 (Deprecated)

5. 문자열 치환

replace(searchValue, replaceValue) : 첫 번째 일치 부분 치환
replaceAll(searchValue, replaceValue) : 모든 일치 부분 치환

6. 문자열 분리/결합

split(separator, limit) : 구분자로 분할하여 배열 반환
concat(...strings) : 문자열 결합

7. 기타 메서드

repeat(count) : 지정 횟수만큼 반복한 문자열 생성
padStart(targetLength, padString) : 앞쪽 채우기
padEnd(targetLength, padString) : 뒤쪽 채우기

[모던 자바스크립트 DeepDive] Js 심화 스터디 week 05

sjindev — Mon, 28 Jul 2025 12:19:07 +0900

자바스크립트의 Strict Mode

자바스크립트는 유연한 문법을 제공하는 언어이지만,
이로 인해 개발자가 실수하더라도 에러 없이 조용히 넘어가는 경우가 많다.
이를 보완하기 위해 ES5부터 도입된 기능이 바로 Strict Mode(엄격 모드)이다.

Strict Mode는 더 엄격한 문법과 실행 규칙을 적용하여 잠재적인 버그를 사전에 방지할 수 있게 해준다.

1. Strict Mode란?

Strict Mode는 자바스크립트 실행을 더 엄격하게 만들어 잠재적인 에러나 비표준 사용을 방지하는 모드이다.

'use strict';

위 문장을 코드 최상단이나 함수 내부에 작성하면 Strict Mode가 적용된다.

주요 특징

암묵적 전역 변수 사용 금지
읽기 전용 프로퍼티에 값 할당 시 에러
삭제 불가능한 프로퍼티 삭제 시 에러
this가 명시되지 않은 경우 undefined로 설정됨
중복된 매개변수 이름 사용 금지
with 문 사용 불가

2. Strict Mode의 적용 방법

전역 적용

'use strict';
// 이후의 모든 코드에 적용

함수 단위 적용

function test() {
  'use strict';
  // 이 함수 내부만 strict mode
}

모듈은 자동 strict mode

ES6 모듈(.mjs 파일 또는 type="module")은 기본적으로 strict mode가 적용된다.

// .mjs 파일 또는 type="module"에서는 생략해도 strict mode가 적용됨

3. 전역에 Strict Mode 적용은 피하자

파일 전체에 'use strict'를 선언하면 파일 내 모든 스크립트가 강제로 strict 규칙을 따르게 된다.
이는 라이브러리나 외부 코드와 충돌할 가능성을 높일 수 있다.

예를 들어, 아래처럼 여러 스크립트가 섞여 있을 경우:

<script>'use strict';</script>
<script src="legacy-lib.js"></script>

legacy-lib.js가 strict mode와 호환되지 않는 문법을 포함하고 있다면 실행 오류 발생

해결 방안

전역이 아닌 클래스/모듈/함수 내부에 국한하여 사용하는 것이 바람직

4. 함수 단위 Strict Mode 적용도 피하자

함수 내부에만 use strict를 선언하면 코드 일관성이 깨지고, 스코프 추적이 복잡해질 수 있다.

function a() {
  'use strict';
  // 엄격 모드
}

function b() {
  // 비엄격 모드
}

이처럼 혼합 사용은 유지보수 시 실수를 유발할 수 있으며, 디버깅이 어려워짐

권장 방식

모듈 또는 클래스 전체에 적용하거나, 전체 코드 통일 적용

5. Strict Mode가 발생시키는 에러

Strict Mode에서 기존에는 조용히 무시되던 동작들이 명시적인 에러로 전환된다.

암묵적 전역 변수 금지

function foo() {
  x = 10; // ReferenceError
}
foo();

읽기 전용 속성 변경 금지

'use strict';
const obj = {};
Object.defineProperty(obj, 'x', {
  value: 42,
  writable: false
});
obj.x = 100; // TypeError

삭제 불가능한 속성 삭제 금지

'use strict';
delete Object.prototype; // TypeError

중복 매개변수 금지

function sum(a, a) { // SyntaxError in strict mode
  return a + a;
}

with 문 사용 금지

'use strict';
with (obj) { // SyntaxError
  console.log(x);
}

6. Strict Mode 적용에 의한 변화

Strict Mode를 적용하면 기존 코드에서 다음과 같은 변화가 생긴다.

구분	비 Strict 모드	Strict 모드
암묵적 전역 변수	허용됨	ReferenceError
중복 매개변수	허용됨	SyntaxError
`with` 문	허용됨	SyntaxError
`this` (함수 내부)	전역 객체(window)	`undefined`
읽기 전용 속성 할당	무시됨	TypeError

이러한 변화는 코드의 예측 가능성, 안정성, 보안성을 높이기 위한 설계이다.

빌트인 객체

자바스크립트는 다양한 내장 객체(Built-in Object)를 제공하여, 개발자가 복잡한 기능을 손쉽게 구현할 수 있도록 돕는다.

1. 빌트인 객체란?

빌트인 객체(Built-in Object)는 자바스크립트 엔진에 내장되어 있는 객체로, 별도의 선언 없이 언제든지 사용할 수 있다. 예를 들어, Math, Date, JSON, Array, Object 등이 있다.

이러한 객체는 자바스크립트 사양(ECMAScript 표준)에 정의되어 있으며, 표준 빌트인 객체(Standard Built-in Object)라고도 한다.

2. 자바스크립트 객체의 분류

자바스크립트에서 객체는 다음과 같이 분류된다:

분류	설명	예시
표준 빌트인 객체	ECMAScript 사양에 정의된 객체	`Object`, `Array`, `Function`, `String`, `Date`, `Math` 등
호스트 객체	자바스크립트가 실행되는 환경(브라우저 등)이 제공하는 객체	`window`, `document`, `XMLHttpRequest`, `fetch` 등
사용자 정의 객체	개발자가 직접 정의한 객체	생성자 함수, 클래스 인스턴스 등

3. 표준 빌트인 객체

자주 사용되는 표준 빌트인 객체는 다음과 같다:

Object
Array
Function
String
Number
Boolean
Date
RegExp
Math
JSON

const now = new Date();
console.log(Math.max(10, 20, 30));
console.log(JSON.stringify({ name: 'Alice' }));

이들은 모두 생성자 함수로 제공되며, 인스턴스를 만들거나 정적 메서드를 사용할 수 있다.

4. 원시값과 래퍼 객체

자바스크립트의 기본 데이터 타입인 문자열, 숫자, 불리언은 원시값이다.

이 원시값들은 임시적으로 객체처럼 동작할 수 있는데, 이 때 래퍼 객체(Wrapper Object)가 생성된다.

const str = 'hello';
console.log(str.toUpperCase()); // 'HELLO'

위 코드에서 'hello'는 문자열 원시값이지만, toUpperCase()를 호출할 수 있다. 이는 String 래퍼 객체가 임시로 생성되어 메서드를 호출한 뒤 소멸되기 때문이다.

래퍼 객체의 종류:

String
Number
Boolean

const num = 100;
console.log(num.toFixed(2)); // '100.00'

5. 전역 객체(Global Object)

전역 객체는 코드 어디서든 접근 가능한 전역 범위의 객체이다. 실행 환경에 따라 이름은 다르다.

브라우저 환경: window
Node.js 환경: global

ES2020 이후 공통으로 사용할 수 있는 전역 객체는 globalThis이다.

console.log(globalThis === window); // 브라우저에서 true

전역 객체에는 다음과 같은 속성이 있다:

전역 변수 (var로 선언한 변수)
전역 함수 (parseInt, isNaN, setTimeout, clearInterval 등)
표준 빌트인 객체 (Math, Date, JSON 등)

6. 빌트인 전역 함수

전역 객체의 일부로 제공되는 빌트인 전역 함수는 다음과 같다:

`isNaN()`

숫자가 아닌 경우 true를 반환

isNaN('abc'); // true

`parseInt()`, `parseFloat()`

문자열을 정수 또는 실수로 변환

parseInt('42px'); // 42
parseFloat('3.14abc'); // 3.14

`eval()`

문자열을 코드로 실행 (보안상 사용 지양)

eval('2 + 2'); // 4

7. encodeURI / decodeURI (URI / URN)

URI (Uniform Resource Identifier)

자원을 식별하는 문자열. URL과 URN이 포함된다.

URL (Uniform Resource Locator): 자원의 위치
URN (Uniform Resource Name): 자원의 이름

`encodeURI()` / `decodeURI()`

URI 문자열에서 특수문자를 인코딩/디코딩할 때 사용

const url = 'https://example.com/한글';
const encoded = encodeURI(url); // 인코딩
const decoded = decodeURI(encoded); // 디코딩

encodeURIComponent()는 =, & 등도 인코딩하는 반면, encodeURI()는 그렇지 않음

8. 암묵적 전역 (Implicit Global)

var, let, const 없이 변수를 선언하면 암묵적으로 전역 변수가 생성된다.

function foo() {
  x = 10; // 전역 객체의 프로퍼티로 등록됨
}
foo();
console.log(window.x); // 10

문제점

전역 오염
의도치 않은 변수 재정의 위험
모듈 간 충돌 가능성

해결 방법

'use strict'를 사용하여 암묵적 전역 방지
항상 let, const, var 중 하나로 선언

`this`

1. this 키워드란?

this는 실행 컨텍스트에 따라 동적으로 결정되는 특수한 식별자이다. 일반적으로 어떤 객체의 메서드를 호출할 때 해당 메서드 내부에서 this는 그 메서드를 호출한 객체를 참조한다.

하지만 함수가 어떤 방식으로 호출되느냐에 따라 this가 참조하는 대상은 달라진다. 이 점이 자바스크립트의 this를 이해하는 데 핵심이다.

console.log(this); // 브라우저에서 window, Node.js에선 global

2. 함수 호출 방식과 this 바인딩

자바스크립트는 함수를 호출하는 방식에 따라 this 바인딩이 달라진다. 크게 4가지 방식으로 나눌 수 있다:

일반 함수 호출
메서드 호출
생성자 함수 호출
call, apply, bind에 의한 명시적 바인딩

3. 일반 함수 호출에서의 this

함수를 단독으로 호출할 경우, strict mode 여부에 따라 this가 다르게 바인딩된다.

function foo() {
  console.log(this);
}

foo(); // 비엄격 모드: window (또는 global), 엄격 모드: undefined

엄격 모드에서는 undefined

'use strict';
function foo() {
  console.log(this); // undefined
}
foo();

이는 의도하지 않은 전역 객체 접근을 방지하기 위한 설계이다.

4. 메서드 호출에서의 this

객체의 프로퍼티로 함수를 호출할 경우, this는 해당 객체를 참조한다.

const person = {
  name: 'KSJ',
  sayHi: function () {
    console.log(`Hi, I'm ${this.name}`);
  }
};

person.sayHi(); // Hi, I'm KSJ

이 경우 sayHi 메서드는 person 객체의 프로퍼티로 호출되므로, this는 person을 가리킨다.

단 주의할 점

const fn = person.sayHi;
fn(); // 일반 함수 호출로 간주되어 this는 window 또는 undefined

5. 생성자 함수 호출에서의 this

new 키워드와 함께 함수를 호출하면, 새로운 객체가 생성되며 그 객체가 this로 바인딩된다.

function Person(name) {
  this.name = name;
  this.sayHello = function () {
    console.log(`Hello, I'm ${this.name}`);
  };
}

const p1 = new Person('Ksj');
p1.sayHello(); // Hello, I'm Ksj

이때 생성자 함수 내부의 this는 새로 생성된 인스턴스 객체를 가리킨다.

생성자 호출 시 처리 과정

빈 객체 생성
this에 바인딩
프로퍼티/메서드 정의
this 반환

6. 명시적 바인딩: call, apply, bind

call, apply, bind 메서드를 사용하면 this를 명시적으로 지정할 수 있다.

function greet() {
  console.log(this.name);
}

const user = { name: 'Ksj' };
greet.call(user); // Ksj
greet.apply(user); // Ksj

const boundGreet = greet.bind(user);
boundGreet(); // Ksj

call: 첫 번째 인자를 this로 바인딩하고 나머지 인자를 함수에 전달
apply: 첫 번째 인자를 this로 바인딩하고 두 번째 인자는 배열로 전달
bind: this를 고정한 새로운 함수를 반환 (호출은 나중에)

자바스크립트의 this는 정적이지 않고 동적이다. 함수가 호출되는 방식에 따라 this가 달라지기 때문에, 그 차이를 정확히 이해하는 것이 중요하다. 아래 각 방식에 따라 this 가 어떻게 지정되는지 정리했다.

일반 함수 호출: 전역 객체 (또는 undefined)
메서드 호출: 호출한 객체
생성자 함수 호출: 새로 생성된 인스턴스
call/apply/bind: 명시적으로 지정된 객체

실행 컨텍스트

1. 실행 컨텍스트란?

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 의미한다. 전역 코드, 함수 코드 등 각각의 실행 단위마다 별도의 실행 컨텍스트가 생성되며, 이 안에 변수, 함수 선언, this 등이 저장된다.

var x = 1;
function foo() {
  var y = 2;
  console.log(x + y);
}
foo();

위 예제에서는 전역 컨텍스트와 foo 함수 컨텍스트 두 개가 생성된다.

2. 소스코드 타입

자바스크립트의 실행 단위는 다음과 같은 소스코드 타입으로 분류된다:

전역 코드
함수 코드
eval 코드
모듈 코드

각 타입은 실행 컨텍스트의 생성 방식과 처리 순서에 영향을 준다.

▸ 전역 코드

가장 먼저 실행되며, 전역 객체 생성과 전역 변수, 함수 선언을 처리한다.

▸ 함수 코드

함수가 호출될 때 생성되며, 지역 변수와 arguments 객체 등이 이 컨텍스트에 저장된다.

▸ eval 코드

eval 함수로 실행된 문자열 내부 코드.

▸ 모듈 코드 (ES6)

엄격 모드가 자동 적용되며, import/export 키워드를 사용할 수 있다.

3. 소스코드의 평가와 실행

자바스크립트 엔진은 소스코드를 다음의 2단계로 처리한다:

▸ 1. 평가(Evaluation) 단계

실행 컨텍스트 생성
변수, 함수, 클래스 선언 등록
렉시컬 환경 구성

▸ 2. 실행(Execution) 단계

변수에 값 할당
함수 호출
연산 수행 등 실제 코드 실행

4. 실행 컨텍스트의 역할

실행 컨텍스트는 아래와 같은 중요한 역할을 수행한다:

식별자(변수, 함수 등) 이름과 값을 매핑
this 바인딩
외부 렉시컬 환경 참조 저장
클로저의 기반 환경 제공

5. 실행 컨텍스트 스택

자바스크립트는 싱글 스레드 기반이며, 실행 중인 컨텍스트를 스택(LIFO) 구조로 관리한다.

▸ 실행 순서

전역 컨텍스트 push
함수 호출 → 새로운 컨텍스트 push
함수 종료 → 컨텍스트 pop

function a() {
  function b() {
    console.log('b');
  }
  b();
}
a();

실행 컨텍스트는 [global] → [a] → [b] 순으로 쌓이고 역순으로 제거된다.

6. 렉시컬 환경 (Lexical Environment)

실행 컨텍스트 내부에는 렉시컬 환경이라는 구성 요소가 포함된다. 이는 식별자와 변수 값을 실제로 저장하는 공간이다.

렉시컬 환경은 다시 두 부분으로 나뉜다:

환경 레코드 (Environment Record)
- 변수, 함수, 매개변수 정보 저장
외부 렉시컬 환경 참조 (Outer Lexical Environment Reference)
- 상위 스코프에 대한 참조

7. 실행 컨텍스트 생성과 식별자 검색

식별자(변수, 함수)를 검색할 때, 자바스크립트 엔진은 현재 컨텍스트의 렉시컬 환경 → 상위 컨텍스트 → ... → 전역 컨텍스트 순으로 검색한다. 이를 스코프 체인이라고 한다.

function outer() {
  const x = 10;
  function inner() {
    console.log(x); // 외부 렉시컬 환경을 참조하여 검색
  }
  inner();
}
outer();

8. 실행 컨텍스트와 블록 레벨 스코프

ES6 이전에는 함수 레벨 스코프만 존재했지만, let, const 도입 이후 블록 레벨 스코프도 생겼다. 실행 컨텍스트 안에서도 이러한 블록 스코프는 별도의 렉시컬 환경으로 관리된다.

{
  let x = 1;
  const y = 2;
}
// x, y는 이 블록 밖에서 접근 불가

클로저(Closure)

1. 클로저란?

클로저는 "함수가 자신이 선언될 당시의 렉시컬 환경(Lexical Environment)을 기억하고 있는 현상"을 의미한다. 이 덕분에 함수 외부에서 선언된 변수에 접근할 수 있다.

function outer() {
  const x = 10;
  return function inner() {
    console.log(x); // 외부 스코프 변수 접근
  }
}
const fn = outer();
fn(); // 10

2. 렉시컬 스코프와 클로저

렉시컬 스코프란 함수가 어디서 선언되었는지에 따라 상위 스코프가 결정되는 방식이다. 실행 위치가 아니라 선언 위치가 기준이다.

클로저는 이러한 렉시컬 스코프를 기반으로 외부 변수에 접근 가능하다. 위 예제에서 inner는 outer의 스코프를 참조하고 있으므로 x에 접근할 수 있다.

3. 함수 객체의 내부 슬롯

자바스크립트의 함수는 객체이며, 내부 슬롯을 가진다:

[[Environment]]: 함수가 생성될 때의 렉시컬 환경 참조
[[Scopes]]: V8 엔진 등 일부 구현체에서 사용

이 내부 슬롯이 존재하기에 함수는 자신이 생성될 당시의 환경을 기억하고 접근할 수 있다. 이게 클로저의 핵심 동작 원리다.

4. 클로저와 렉시컬 환경

실행 컨텍스트가 생성되면 그 안에 렉시컬 환경이 포함된다. 클로저는 이 렉시컬 환경을 함수 내부에 저장하여 유지한다.

function counter() {
  let count = 0;
  return function () {
    count++;
    return count;
  }
}

const inc = counter();
console.log(inc()); // 1
console.log(inc()); // 2

위 코드에서 inc 함수는 count가 존재하는 렉시컬 환경을 유지하고 있으므로 상태를 보존할 수 있다.

5. 클로저의 활용

클로저는 다음과 같은 패턴에 활용된다:

상태 유지를 위한 private 변수
이벤트 핸들러의 고정 상태 유지
콜백 함수 내부에서 외부 변수 참조

▸ 예: 상태 유지용 클로저

function createTimer() {
  let seconds = 0;
  return function () {
    seconds += 1;
    return `${seconds}초 경과`;
  }
}

const timer = createTimer();
timer(); // '1초 경과'
timer(); // '2초 경과'

6. 캡슐화를 위한 정보 은닉

자바스크립트는 접근 제어자(private 등)가 없지만, 클로저를 이용하면 정보 은닉이 가능하다.

function createUser(name) {
  let _password = '1234';

  return {
    getName() {
      return name;
    },
    checkPassword(pw) {
      return pw === _password;
    },
  }
}

const user = createUser('Alice');
console.log(user.getName()); // Alice
console.log(user.checkPassword('wrong')); // false
console.log(user.checkPassword('1234')); // true

위 예제처럼 외부에서 password에 직접 접근하지 못하게 하고, checkPassword 함수로만 확인할 수 있게 설계할 수 있다.

클로저는 단순한 기술 요소를 넘어서, 자바스크립트의 스코프, 실행 컨텍스트, 함수 객체 구조까지 깊이 이해할 수 있게 해주는 핵심 개념이다. 렉시컬 환경과의 연결 구조를 이해하면 클로저의 동작 방식을 이해하기 더 쉬울것이다.

캡슐화, 상태 보존, 은닉 등 실제 개발에서 매우 유용하게 활용되므로, 클로저를 단순한 개념이 아니라 도구로 이해하고 활용하는 것이 중요하다.

클래스(Class)

자바스크립트에서 클래스는 객체지향 프로그래밍(OOP)을 보다 명확하고 직관적으로 구현하기 위해 도입된 문법이다. ES6에서 도입된 이 클래스 문법은 기존 생성자 함수 기반 객체 생성 방식보다 가독성이 높고 구조적인 코드 작성을 가능하게 한다.

1. 클래스 정의

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

  sayHello() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

class 키워드로 클래스를 정의하며, 생성자는 constructor() 메서드로 정의한다. 생성자 내부에서 프로퍼티를 초기화하고, 나머지 메서드는 프로토타입 메서드로 정의된다.

2. 클래스 호이스팅

클래스는 호이스팅은 되지만 초기화 전에 접근할 수 없다. 이는 let, const와 같은 TDZ(Temporal Dead Zone)로 동작한다.

const p = new Person(); // ReferenceError
class Person {}

함수 선언과는 달리 클래스는 선언 전에 사용할 수 없다.

3. 인스턴스 생성

new 키워드를 통해 클래스로부터 인스턴스를 생성할 수 있다.

const me = new Person('Alice');
me.sayHello(); // Hi, I'm Alice

me는 Person 클래스의 인스턴스이며, Person.prototype을 상속받는다.

4. 메서드

클래스 내부에서 정의된 메서드는 프로토타입 메서드다. 클래스 정의 바깥에서 정의된 메서드와 달리, 자동으로 prototype에 할당된다.

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

5. 정적 메서드 vs 프로토타입 메서드

정적 메서드: 클래스 자체에 속하며 인스턴스에서는 호출할 수 없다.
프로토타입 메서드: 인스턴스에서 호출 가능한 메서드

class MathUtil {
  static add(x, y) {
    return x + y;
  }
}

MathUtil.add(2, 3); // 5

6. 클래스의 인스턴스 생성 과정

빈 객체 생성
this 바인딩
constructor 실행
인스턴스 반환 (명시적 반환이 없으면 this 반환)

7. 프로퍼티

클래스 필드는 생성자 외부에서도 선언 가능하다.

class User {
  name = 'unknown';
}

이 프로퍼티는 각 인스턴스마다 복사된다.

8. private 필드 정의 제안

#을 붙이면 외부에서 접근할 수 없는 private 필드를 만들 수 있다.

class Secret {
  #code = 1234;
  getCode() {
    return this.#code;
  }
}

const s = new Secret();
s.#code; // SyntaxError

9. static 필드 정의 제안

정적 필드도 static 키워드를 사용해 클래스 자체에 바인딩할 수 있다.

class Counter {
  static count = 0;
  static increase() {
    Counter.count++;
  }
}

10. 상속에 의한 클래스 확장

클래스는 다른 클래스를 상속받아 확장할 수 있다.

class Animal {
  speak() {
    console.log('Animal sound');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Bark');
  }
}

11. extends 키워드

extends는 서브클래스가 슈퍼클래스를 상속하도록 지정한다. 상속받은 서브클래스는 부모 클래스의 메서드를 사용할 수 있으며, 오버라이딩도 가능하다.

12. 동적 상속

상속 대상은 변수나 함수로 동적으로 지정 가능하다.

function createParent() {
  return class {
    greet() {
      console.log('Hello');
    }
  }
}

class Child extends createParent() {}

13. 서브클래스의 constructor

서브클래스에서 constructor를 오버라이딩할 경우, 반드시 super()를 호출해야 한다.

class Dog extends Animal {
  constructor(name) {
    super(); // 반드시 필요
    this.name = name;
  }
}

14. super 키워드

메서드 내에서 부모 클래스의 메서드를 호출할 때 사용
생성자 내에서 super()는 부모의 생성자 호출

class Parent {
  greet() {
    console.log('Hi from parent');
  }
}

class Child extends Parent {
  greet() {
    super.greet(); // Hi from parent
    console.log('Hi from child');
  }
}

클래스는 자바스크립트에서 객체지향적 코드 구조를 명확하게 표현하는 도구이다. 상속, 캡슐화, 정적 메서드 등 OOP 개념을 이해하면 더욱 강력한 자바스크립트 코드를 작성할 수 있다.

ES6 클래스 문법은 실제로는 기존 프로토타입 기반 객체 시스템 위에 추상화된 문법적 설탕(syntactic sugar)이라는 점도 함께 기억해두자.