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

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..

2024.12.24 일에 발생한 오류❗️핵심 오류 문구Execution failed for task ':react-native-safe-area-context:compileDebugKotlin'.A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkActionCompilation error. See log for more details❗️진행도중의 오류 문항info Opening the app on Android...info JS server already running.info Installing the app...> Task :g..

FAB 버튼이란?우측 하단에 있는 조그마한 버튼을 일반적으로 "Floating Action Button" (FAB) 이라고 칭한다.추가 이동같은 간단한 작업할때 주로 사용.FAB 버튼 코드import { Alert, StyleSheet, Text, TouchableOpacity } from 'react-native';const FAB: React.FC = () => { const AddLocationListAlert = () => { Alert.prompt(//제목 , // 내용 , [ { text: 'Cancel', onPress: () => { // 취소시 작동하는것 }, style: 'cancel', },..

1) react-native-dotenv 설치npm install react-native-dotenv----yarn add react-native-dotenv2) Babel 설정 파일 업데이트babel.config.js를 다음과 같이 수정module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], plugins: [ [ 'module:react-native-dotenv', { moduleName: '@env', path: '.env', blocklist: null, allowlist: nul..