안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 도리 깃허브로 놀러오세요 전체 아티클177 자바스크립트로 스타일을 변경한다면 rAF(requestAnimationFrame)를 사용해보세요! 목차· 글을 시작하며· 브라우저 렌더링 단계· 브라우저 프레임· 타이머 함수로 60fps 제공하기· requestAnimationFrame· rAF(requestAnimationFrame)은 어떤 특징을 가지고 있어요?· rAF(requestAnimationFrame)은 처리하는 큐도 다르다?· rAF(requestAnimationFrame)의 사용방법글을 시작하며보통 웹 페이지의 애니메이션을 구현할 때, 리페인트를 방지하고자 CSS의 animation, transition, transform 속성을 통해 구현을 할 수 있지만 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해서 자바스크립트를 활용해 스타일을 변화시켜야하는 경우도 있어요. 특정 영역을 클릭하거나, 웹 페이지를 스크롤 할 때 변화무쌍한 .. 2025. 9. 17. Promise.all 말고 Promise.allSettled는 어떤가요? 목차· 글을 시작하며· Promise.all의 문제점은 무엇일까?· Promise.all을 사용하면 안되는걸까요?· 부록 : 네트워크 요청 시에 Promise 요청의 최대 개수가 존재한다?오해하기 쉬운 포인트 · Promise.all은 동시에 실행시켜준다기 보다, 이미 동시에 실행되고 있는 Promise들을 한데 묶어서 결과를 기다려주는 것이에요.· 동시 실행은 Promise를 생성하는 순간에 시작되어요.· Promise.all은 그 결과를 모아서 처리해주는 친구라고 생각을 하면 돼요.글을 시작하며어떤 도메인에서 프론트엔드 개발자로 일을 하다보면, 서버와 통신해 데이터를 웹 UI에 바인딩을 해야하는 경우들이 많아요. 특히 한 화면에서 여러 개의 데이터들을 비동기 처리할 경우에는 렌더링 이후 많은 통신을 .. 2025. 9. 11. 선언적 프로그래밍에 대한 착각과 오해를 읽고 해당 게시글은 작성 중입니다. https://evan-moon.github.io/2025/09/07/declarative-programming-misconceptions-and-essence/ 선언적 프로그래밍에 대한 착각과 오해필자는 평소 기술 인터뷰를 진행하며 지원자 분들이 과제를 작성하면서 내렸던 의사결정에 대한 근거를 물어보는 경우가 잦다. 이때 이에 대한 근거로 “이런 방식이 보다 선언적이기 때문이다evan-moon.github.io 2025. 9. 8. "왜 이 변수의 값이 그대로지?" 자바스크립트 모듈의 싱글톤 이야기 목차· 글을 시작하며· 자바스크립트 ES 모듈은 어떻게 동작할까?· 값을 공유하는 싱글톤, 전역 상태 관리와의 차이점은 무엇일까?· 전역 상태 관리와 싱글톤 패턴의 적절한 사용처는 무엇일까?글을 시작하며회사에서 백오피스 플랫폼을 개발하면서 입사때부터 새로운 코드 베이스로 전환되는 반면, 약 4년 전에 개발된 레거시 소스코드의 부채때문에 업그레이드를 할 때 조금 난관을 겪기도 했답니다. 그리고 무엇보다 과도한 추상화로 인한 상태의 강결합, 또 추상화되지 않고 쓰여진 반복적인 코드들이 새로운 코드 베이스를 만들어나갈 때 점차 쌓여나가면서 무려 100개가 넘는 반복 임포트와 상태 명시들이 남발되어지고 있었어요. 그래서 최근에 회사 생활에서 스스로에게 내린 과제가 있는데, 바로 이러한 코드들을 가벼운 수준의 추.. 2025. 9. 8. Object.freeze 만으로는 객체 동결이 불가하다? 목차· 글을 시작하며· Object.freeze로 객체를 동결 처리한다면 어떻게 될까?· 그렇다면 어떻게 중첩 구조의 객체도 동결 처리를 할 수 있을까?· 글을 마무리하며글을 시작하며타입스크립트를 사용하는 프로젝트라면 불변이 되어야하는 객체에 as const 키워드를 붙이곤 하는데요, 이 키워드를 붙이는 이유는 객체를 Readonly 속성으로 개발자가 직접적으로 값을 변경하지 못하게 하는 경우들이 생각보다 많아요. 규모가 커서 객체 변수를 많이 선언해야할 경우에는 더더욱인거죠. 타입스크립트를 사용하지 않는 경우에는 비슷하게나마 Object.freeze를 통해 객체를 동결시킴으로 개발자가 객체를 함부로 수정하는 일이 없도록 이를 방지하고 있어요. 물론 as const의 경우에는 타입스크립트 키워드로 객체 .. 2025. 8. 31. 폼 데이터의 크기를 측정해 예외 처리를 어떻게 해줄 수 있을까? 목차· 글을 시작하며· 왜 근데 클립보드의 Base64는 제한을 하게 된거예요?· 폼 데이터를 제한해보기· 위 코드는 어떤 방식으로 동작할까요?글을 시작하며회사에서 갑자기 오류가 터졌던 적이 있어요, 지금은 패치 기간도 아니어서 사이드 이펙트가 났을리는 없고.. 알고보니 기존의 숨어있던 예외 처리에 대한 버그가 발생한 것이었죠..! 문제가 발생했던 원인은 생각보다 많이 독특했던 버그였는데, 일반적으로 복사해서 붙여넣기를 하면 정상적으로 이미지 파일 형태로 붙여넣기가 되지만 팀즈와 같은 메세지에서 이미지를 복사하고 에디터에 붙여넣기를 하게 되면 Base64로 변환이 되면서 무수한 문자들이 생겨요. 이 문자들이 서버에서 제한하는 폼 데이터 크기를 초과하게 된 것이고, 폼 데이터 크기를 초과하는 경우는 다양한.. 2025. 8. 19. 토스 언더커버 사일로 판정단에 참여하고 해당 글은 작성중입니다. 2025. 8. 10. 깃허브 체리픽이란? 목차· 글을 시작하며· 체리픽은 언제 사용할까?· 체리픽의 유용한 정보들· 레퍼런스글을 시작하며내가 이미 기능을 뭉텅이로 많이 개발한 후 일부 기능만을 추가해야하는 경우와 같은 다른 브랜치에 있는 커밋들 중 일부를 선택하여 내 브랜치에 적용을 시켜야하는 경우가 있어요. 체리픽을 알기 전에는 기능 구현이 단순하다면 그 커밋을 추적하여 그대로 다시 구현하는 비효율적인 방법을 택했었는데, "체리픽으로 하면 되잖아!" 라는 말을 듣고, 체리픽에 대해 한번 공부하고 적용을 해보고자 이렇게 포스팅을 하게 되었어요.체리픽은 언제 사용할까?깃 체리픽은 같은 커밋이 중복되는 일이 발생하거나, 그 외에도 여러가지 문제가 발생할 수 있으니 꼭 필요한 상황에서만 사용하는 것을 권장한다고 해요.· 팀과 협업을 진행할 때팀으로 .. 2025. 8. 10. V8 엔진과 관련있는 히든 클래스란? 히든클래스는 인라이닝이 가능해지게 도와주는 중요한 기반 조건 중 하나인 요소이다.히든 클래스란?객체의 구조를 V8 엔진이 추적하여 내부적으로 C++ 클래스처럼 최적화하기 위한 기초 구조인라이닝함수를 아예 펼쳐 넣어서 함수 호출 비용을 없애는 최적화히든 클래스가 안정적이면 인라이닝을 가능하게 만드는 전제 조건이 된다.어떻게 관련이 있을까?만약 히든 클래스가 불안정하다면?function printUser(user) { console.log(user.name);}const a = { name: 'kim', age: 20 }const b = { age: 20, name: 'lee'} // 순서가 다르면 다른 히든 클래스가 생성된다.const c = { name: 'park' }printUser(a);printU.. 2025. 8. 1. 이전 1 2 3 4 ··· 20 다음
