Blog | 김건우 포트폴리오

[프로그래머스 / JavaScript] 2021 KAKAO BLIND RECRUITMENT / 숫자 문자열과 영단어

문제 보러가기네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다.영단어 변환 예시:1478 → "one4seveneight"234567 → "23four5six7

자료구조, 왜 배워야 할까? 스택부터 해시테이블까지 핵심 정리

들어가며 "자료구조? 그거 학교에서나 배우는 거 아니야?" 실무에서 코딩만 하면 되지, 왜 자료구조를 알아야 하는지 의문을 가진 적 있으신가요? 저도 처음에는 그랬습니다. 하지만 자료구조는 단순히 이론이 아닙니다. 우리가 매일 작성하는 코드의 효율성과 직결되는 실전 개념입니다. 컴퓨터의 메모리는 무한해 보이지만, 사실은 매우 한정적입니다. 이 한정된...

"이 알고리즘이 더 빠른가요?" Big O 표기법으로 정확하게 답하는 법

"이 알고리즘이 더 빠른데?" vs "저 알고리즘이 더 빠른데?"개발자들 사이에서 흔히 일어나는 논쟁입니다. 하지만 '빠르다'는 표현은 생각보다 애매합니다. 내 컴퓨터에서는 0.5초 걸렸는데, 동료 컴퓨터에서는 0.2초 걸렸다면? 과연 어느 알고리즘이 더 효율적인 걸까

React의 Render Phase와 Commit Phase: 실제로 알아야 할 것들

프로젝트를 진행하다 보면 "React 렌더링이 어떻게 동작하는지" 궁금해지는 순간들이 있습니다. 특히 성능 이슈를 마주했을 때나, 복잡한 상태 관리가 필요할 때 말이죠. 저도 처음에는 "useState 호출하면 화면이 바뀌는 거 아닌가?"라고 단순하게 생각했는데, 실제

React의 Error Boundary와 비동기 오류 처리

React의 Error Boundary는 컴포넌트 렌더링 도중 발생하는 오류를 포착하여 앱이 완전히 중단되지 않도록 돕는 강력한 기능입니다.하지만 한 가지 중요한 한계가 있습니다 — 비동기 코드에서 발생한 오류는 Error Boundary가 잡을 수 없습니다. 왜 Er

React 리렌더링(Re-rendering): Trigger → Render → Commit

React에서 “언제, 왜, 어떻게” 리렌더링이 일어나는지 정확히 이해하면 성능 최적화와 불필요한 복잡도 감소에 큰 도움을 줍니다. 이 글은 리렌더링의 이론을 체계적으로 정리하고, 실행 가능한 예시와 실무 체크리스트로 마무리합니다.Trigger: 상태(state) 변경

실무에서 꼭 알아야 할 JWT 저장소 보안 패턴과 공격 탐지 방법

안녕하세요! 프론트엔드/풀스택 실무에서 자주 부딪히는 “JWT를 어디에 보관할 것인가” 문제를 정리했습니다. 저장 위치별 보안/UX 트레이드오프, 실제로 일어나는 탈취(steal) 시나리오, 그리고 탈취 되었을 때 어떻게 눈치채고 대응할지까지 바로 적용 가능한 체크리스

Next.js SSR 페이지 풀 페이지 캐싱

이번 글에서는 아직 다루지 않은 SSR(Server-Side Rendering) 페이지의 풀 페이지 캐싱에 대해 이야기합니다.SSR은 매 요청마다 서버에서 HTML을 생성하므로 항상 최신 데이터를 보장하지만, 그만큼 성능 부담이 큽니다.그렇다면 SSR 페이지를 캐싱하면

useEffect에서 setInterval이 상태를 못 따라오는 이유 (stale closure)

리액트에서 useEffect와 setInterval을 함께 쓰다 보면, 분명 1초마다 증가시키라고 했는데 상태가 갱신되지 않거나 0에 멈춰 있는 현상을 자주 만납니다. 원인은 대부분 “stale closure(오래된 클로저)” 입니다. 핵심만 간단히 정리합니다.문제 원

React Error Boundary: 왜 아직도 클래스일까?

리액트 프로젝트를 하다 보면 꼭 한 번은 만나게 되는 상황이 있습니다.컴포넌트 트리 어딘가에서 에러가 터지면, 앱 전체가 그대로 하얀 화면(whitescreen of death)이 되어버리는 순간이죠.이럴 때 사용자를 보호해주는 최후의 안전망이 바로 ErrorBound

WhiteMouse.Dev

게시글