더 나은 UX를 위한 프론트엔드 전략에 관하여
·
Stack/TypeScript
TMC25 | Engineering - 더 나은 UX를 위한 프론트엔드 전략https://www.youtube.com/watch?v=Q-_crvz4tv8해당 내용을 참고해서 글을 작성했습니다.사용자의 경험을 결정 짓는 최고의 UX다음 3가지로 정의된다.유려한 UI : 보기 좋고 사용하기 편한 디자인화면의 안정성 : Layout Shift 없는 견고한 화면로딩 속도 : 사용자가 기다리는 시간의 최소화여기서 로딩 속도를 이용하여 사용자의 UX를 개선하는 계획들을 살펴봤다. 1. SSR(Server Side Rendering)의 전략적 활용이 필요하다.토스(Toss)의 렌더링 전략: 선택과 집중화면이 위의 사진과 같다면자산 영역 (상단): 내 통장에 얼마가 있는지 보여주는 ..
이벤트 루프
·
Stack/JavaScript
"이벤트 루프가 뭐예요?" 누군가 나에게 이렇게 묻다면 나는 자신 있게 답을 할 수 있을까? 솔직히 현재의 나는 명쾌하게 대답할 자신이 없다. 그래서 이 글은 미래의 나를 위해, 그리고 이 질문에 답하기 위해 작성하는 정리 노트다. 1. 자바스크립트는 싱글 스레드인데 어떻게 멀티태스킹을 할까?이벤트 루프를 논하기 전에 먼저 해결해야 할 의문이 있다. "자바스크립트는 싱글 스레드(Single Thread) 언어다." 이 말은 한 번에 하나의 작업만 할 수 있다는 뜻인데, 실제 우리가 쓰는 웹 사이트는 파일도 다운로드하고, 애니메이션도 보여주고, 서버 요청도 동시에 처리하는 것처럼 보인다. 이게 어떻게 가능한 걸까? . 자바스크립트 엔진은 '요청'만 보내고, 실제로 시간이 오래 걸리는 작업(네트워크, 타이머..
JSX의 동작 방식과 내부 원리 파헤치기
·
Stack/React
React를 사용하다면 자연스럽게 JSX 문법을 사용하게 된다.하지만 사용하면서 JSX 코드가 어떻게 자연스럽게 브라우저에 실행되는지 그리고 React 와 JSX 는 어떤 관계인지에 대해 궁금해서 해당 글을 작성해본다.JSX 는 React를 위한게 아니다.나도 이 블로그를 쓰기 전까지 잘못 알고있던 사실중 하나이다. JSX 는 React 전용 문법이라고 생각했는데 사실은 그렇지 않다. JSX는 Meta 에서 만든 하나의 문법 사양 일뿐 React를 위한 전용이 아니다. 단지 React 에서 JSX를 채택하여 UI를 표한하는 하나의 라이브러리이다.이를 대표적으로 사용하는게 JSX 문법중에 JSXNamespacedName 이다. 이는 와 같은 콜론을 사용하는 네임스페이스 문법이지만 React에서는 이를 공..
당신의 Next.js 프로젝트, 지금 해킹당할 수 있습니다. React 19 보안이슈에 대해 CVE-2025-55182 (React2shell)
·
Stack/Next.js
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..
[React-Native CLI] 앱 아이콘 적용시키기
·
Stack/React-Native
안드로이드 설정android → app → src → main → res들어가면 아래 사진과 같이 폴더와 파일이 존재한다. ic_launcher.png 파일이랑 ic_luncher_round.png 파일까지 전부 바꿔줘야된다.이 파일들을 icon kitchen 사이트에 있는 파일과 대치 시켜주면된다.iOS 설정XCode 에서 프로젝트를 열어준 이후 앱 → 이미지로 가서 AppIcon 에서 설정해준다.
[React-Native CLI] react-native-maps이용하여 googleMap 구현하기
·
Stack/React-Native
React-Native 에서 화면 스크린에 구글 맵을 띄우고 싶으면 react-native-maps 을 이용하면된다.우선 Google Map을 하려면 Google API 키가 필요하다.react-native-maps 라이브러리 설치react-native-maps 라이브러리를 설치해준다.$ npm install react-native-maps# --- or ---$ yarn add react-native-mapspods 설치cocoapod으로 ios에 react-native에서 라이브러리를 넣어주는 작업을 해준다.$ npx pod-installcode 추가해주기ios → ProjectName → AppDelegate.mm파일에 에 코드를 추가한다.// 이부분 추가+ #import @implementatio..