만족

1. 간단 설명2026년 3월 31일, npm에 배포된 axios 일부 버전에악성 코드가 포함된 공급망 공격(Supply Chain Attack) 이 발생했다.해당 버전은 정상 라이브러리처럼 배포되었지만,설치 시 내부적으로 악성 dependency가 실행되어 시스템이 감염될 수 있다.2. 사고 발생 원인axios npm 패키지의 배포 계정이 공격자에게 탈취됨공격자가 정상 릴리즈처럼 보이도록 악성 코드 포함 버전 배포개발자들이 이를 정상 업데이트로 착각하고 설치코드 자체 취약점이 아니라, 패키지 배포 과정이 해킹된 사건3. 보안 위협 방식3.1 공격 구조 (Supply Chain Attack)개발자가 axios 설치 (npm install axios)오염된 axios 버전 다운로드내부 dependency(..

const str= '😅';console.log(str.length); 위 코드를 실행하면 콘솔에는 어떻게 표시될까? '1글자니까 1이겠지' 라고 생각할 수 있지만 2가 표시된다.  왜 이렇게 표시되는지 알아보자 써로게이트 페어 (surrogate pair) 기본적으로 js에서 string은 UTF-16으로 다뤄진다. UTF-16은 문자를 표현할 때 2바이트 또는 4바이트를 가변적으로 사용한다. 한국어 문자(가, 나, 다...)는 2바이트로 표현이 가능하지만일부 한자나 이모지 등은 2바이트로 표현이 불가능해 2바이트를 더 사용해야 한다, 따라서 기본적으로는 2바이트를 사용하되, 2바이트로 표현 가능한 범위 바깥의 문자열들은 2바이트를 더 사용하여 표현한다. 두 글자만큼의 공간을 한 글자를 표현하는데 사..

웹 어플리케이션에서 데이터 패칭, 캐싱, 서버 상태와 동기화 및 업데이트(fetching, caching, synchronizing and updating server state)를 쉽게 만들어주는 library 이 포스트에서는 react-query의 기초적인 개념 몇 가지에 대해 다룬다. Installation yarn add @tanstack/react-query eslint와 함께 사용하는 것을 추천, 세팅은 아래 링크 참조 https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query ESLint Plugin Query | TanStack Query Docs tanstack.com Quick Start: queryClient https://t..

웹 배포 후 정상적으로 작동하는지 확인해보기 위해 직접 몇몇 url들로 들어가, 정상적으로 웹사이트가 동작하는지 확인하고는 한다. 그러나 매 배포마다 모든 페이지를 확인하기는 번거로우며, 그렇다고 테스트 코드를 빡빡하게 작성하기에는 부담스럽다. cypress를 사용하면 이 작업을 간단히 자동화할 수 있다. 가령 특정 url로 접근하기만 해도 웹사이트가 터져버리는데 미처 확인하지 못해 한참 뒤에나 알아차린 경험이 있다면 아주 간단한 cypress test를 적용하는 것 만으로도 그런 상황을 막을 수 있을 것이다. 샘플 프로젝트 세팅 # 리액트 프로젝트 생성 npx create-react-app simple-cypress-with-react cra로 리액트 프로젝트를 생성해준다. yarn add react-..

Fatal Exception: java.lang.IllegalStateException: Can not perform this action after onSaveInstanceState at androidx.fragment.app.FragmentManager.checkStateLoss(FragmentManager.java:1844) at androidx.fragment.app.FragmentManager.enqueueAction(FragmentManager.java:1884) at androidx.fragment.app.BackStackRecord.commitInternal(BackStackRecord.java:329) at androidx.fragment.app.BackStackRecord.commit..

Android Studio에서 JDK 버전을 업데이트하려면 다음 단계를 따르세요. 공식 웹 사이트( https://www.oracle.com/java/technologies/javase-downloads.html ) 에서 최신 JDK 버전을 다운로드하여 설치합니다 . Android Studio를 열고 파일 > 프로젝트 구조로 이동합니다. 프로젝트 구조 대화 상자의 왼쪽 메뉴에서 SDK 위치를 선택합니다. JDK 위치에서 경로 옆에 있는 줄임표 버튼을 클릭하고 최신 JDK 버전을 설치한 위치를 선택합니다. 적용을 클릭한 다음 확인을 클릭합니다. 변경 사항을 적용하려면 Android 스튜디오를 다시 시작하세요. 그게 다야! 이제 Android Studio에서 설치한 최신 JDK 버전을 사용합니다. -----..

CLS(Cumulatie Layout Shift) 누적 레이아웃 변경 수치를 말한다. 예를 들어 img 태그에 가로/세로값을 지정하지 않았을 때, 이미지 로딩이 끝난 이후에야 크기를 추정할 수 있으므로 이미지 로딩 중에는 크기가 0으로 추정되고 로딩이 끝나고 나면 크기가 결정되어 레이아웃의 위치가 변경된다. 네트워크의 속도가 느리거나, 크기를 지정하지 않은 이미지의 갯수가 많은 경우 많은 레이아웃 이동이 발생하고, 레이아웃의 이동은 사용자가 의도하지 않은 항목의 클릭과 같은 문제로 UX가 저해된다. 이것을 수치화시킨 것이 CLS 수치이다. (lower is better) CLS 측정하기 크롬 개발자 도구의 lighthouse 를 이용해 측정할 수 있다. 이미지와 글밖에 없는 간단한 html이지만 벌써부터..

전면 광고가 성공적으로 로딩되었음에도 로딩되지 않는 현상이 포착되었다. 조건 만족 시 전면 광고 로딩이 실패하거나 표시된 후 다음 동작이 실행되었기 때문에 매우 치명적인 문제였다. 오류 설명 코드에서는 전면 광고를 담당하는 로직을 분리해 별도의 클래스에서 관리하고 있었다. public void load(Context context) { mInterstitialAd = new InterstitialAd(context); if (BuildConfig.DEBUG_MODE) { mInterstitialAd.setAdUnitId("ca-app-pub-3940256099942544/1033173712"); } else { mInterstitialAd.setAdUnitId("AD_UNIT_ID"); } mInters..