TMC25 | Engineering - 더 나은 UX를 위한 프론트엔드 전략https://www.youtube.com/watch?v=Q-_crvz4tv8해당 내용을 참고해서 글을 작성했습니다.사용자의 경험을 결정 짓는 최고의 UX다음 3가지로 정의된다.유려한 UI : 보기 좋고 사용하기 편한 디자인화면의 안정성 : Layout Shift 없는 견고한 화면로딩 속도 : 사용자가 기다리는 시간의 최소화여기서 로딩 속도를 이용하여 사용자의 UX를 개선하는 계획들을 살펴봤다. 1. SSR(Server Side Rendering)의 전략적 활용이 필요하다.토스(Toss)의 렌더링 전략: 선택과 집중화면이 위의 사진과 같다면자산 영역 (상단): 내 통장에 얼마가 있는지 보여주는 ..

"이벤트 루프가 뭐예요?" 누군가 나에게 이렇게 묻다면 나는 자신 있게 답을 할 수 있을까? 솔직히 현재의 나는 명쾌하게 대답할 자신이 없다. 그래서 이 글은 미래의 나를 위해, 그리고 이 질문에 답하기 위해 작성하는 정리 노트다. 1. 자바스크립트는 싱글 스레드인데 어떻게 멀티태스킹을 할까?이벤트 루프를 논하기 전에 먼저 해결해야 할 의문이 있다. "자바스크립트는 싱글 스레드(Single Thread) 언어다." 이 말은 한 번에 하나의 작업만 할 수 있다는 뜻인데, 실제 우리가 쓰는 웹 사이트는 파일도 다운로드하고, 애니메이션도 보여주고, 서버 요청도 동시에 처리하는 것처럼 보인다. 이게 어떻게 가능한 걸까? . 자바스크립트 엔진은 '요청'만 보내고, 실제로 시간이 오래 걸리는 작업(네트워크, 타이머..

React를 사용하다면 자연스럽게 JSX 문법을 사용하게 된다.하지만 사용하면서 JSX 코드가 어떻게 자연스럽게 브라우저에 실행되는지 그리고 React 와 JSX 는 어떤 관계인지에 대해 궁금해서 해당 글을 작성해본다.JSX 는 React를 위한게 아니다.나도 이 블로그를 쓰기 전까지 잘못 알고있던 사실중 하나이다. JSX 는 React 전용 문법이라고 생각했는데 사실은 그렇지 않다. JSX는 Meta 에서 만든 하나의 문법 사양 일뿐 React를 위한 전용이 아니다. 단지 React 에서 JSX를 채택하여 UI를 표한하는 하나의 라이브러리이다.이를 대표적으로 사용하는게 JSX 문법중에 JSXNamespacedName 이다. 이는 와 같은 콜론을 사용하는 네임스페이스 문법이지만 React에서는 이를 공..

React / Next.js 보안 취약점 관련 내용으로 글을 포스팅합니다.개요지난 11월 29일, 보안 연구원 Lachlan Davidson에 의해 React 생태계, 특히 최신 버전인 React 19와 Next.js를 관통하는 치명적인 보안 취약점이 발견되었습니다. 이 문제는 Meta 측에 즉시 보고되었으며, 현재 전 세계 프론트엔드/풀스택 개발자들 사이에서 가장 시급한 이슈로 떠오르고 있습니다.이번 취약점은 단순한 정보 노출이 아닌, 원격 코드 실행(RCE, Remote Code Execution) 이 가능하다는 점에서 매우 위험합니다. 이에 따라 다음과 같은 CVE 번호와 심각도 점수가 부여되었습니다.관련 CVE:CVE-2025-55182 (React)CVE-2025-66478 (Next.js)CV..

사진과 같이 import가 많이질수록 코드가 점전 늘어나고 복잡해진다.이러한 문제를 해결하기 위해 절대 경로를 써준다.../../ 다음과 같은 부분을 @ 로 고치는 방법을 서술한다.babel 플러그인 설치yarn add -D babel-plugin-module-resolverornpm i -D babel-plugin-module-resolverbabel.config.js 에 플러그인 추가module.exports = { presets: ... plugins: [ ... [ 'module-resolver', { alias: { '@': './src', }, }, ], ],};해당 코드의 plugins 부분에 아래와 같은..

Object.assign 과 Spread Syntax (...) 둘 다 javascript에서 객체를 복사하거나 병합하는 방법이다.나도 일반적으로 Spread 문법을 주로 사용하고 Object.assign에 대해서는 무지했는데, 이에 대해 알아보기 위해 글을 작성해본다.Object.assign 사용예시const o1 = { a: 1 };const o2 = { b: 2 };const o3 = { c: 3 };const obj = Object.assign(o1, o2, o3);console.log(obj); // { a: 1, b: 2, c: 3 }console.log(o1); // { a: 1, b: 2, c: 3 }, 목표 객체 자체가 변경됨.console.log(o2); // { b: 2 };conso..