좌충우돌 anecdote

콜스택에서 발행한 RN 최적화 문서인 React Native Optimization를 2023년에 공부했던 것 같은데,2025년 버전도 새로 나와서 이 참에 정리해 봤다. 예전에 웹 개발 팀원분이 React Native도 DOM 기반이에요? 라고 질문했을 때 아닌 건 알았지만, 제대로 설명 못했던 경험이 있는데, 리액트 리렌더링 모델 내용을 정리하면서 그때 생각이 났다. 아직도 React와 React Native의 차이를 모르는 분이라면 해당 내용을 읽어보면 좋을 것 같다.react-dom은 별도의 렌더러라는 것을 ... 앱이 ‘빠르다’는 것은 무엇을 의미할까? ex.1940년대에 뉴욕의 한 오피스 빌딩에서 느린 엘리베이터에 대해 한 직원이 불만을 호소했는데, 건물 관리자는 엘리베이터 속도를 실제로 높이..

아이템 41 any의 진화를 이해하기요약일반적인 타입들은 정제되기만 하는 반면 (ex. 타입 좁히기), 암시적 any와 any[] 타입은 진화할 수 있습니다. 이러한 동작이 발생하는 코드를 인지하고 이해할 수 있어야합니다.any를 진화시키는 방식보다 명시적 타입 구문을 사용하는 것이 안전한 타입을 유지하는 방법 입니다. 1. 일반적인 타입들은 정제되기만 하는 반면, 암시적 any와 any[] 타입은 진화할 수 있습니다.❗️타입의 진화는 값을 할당하거나 배열의 요소를 넣은 ‘후’에만 일어나기 때문에, 편집기에서는 할당 다음 줄을 봐야 진화된 타입이 잡힌다.//1. 배열의 any 타입 진화(evolve)const result = [];  //any[]result.push('a');  result   //st..

아이템 34 ~ 40 정리본 목차아이템 34아이템 35아이템 36아이템 37아이템 38아이템 39아이템 40 아이템 34 부정확한 타입보다는 미완성 타입을 사용하기타입이 구체적일수록 버그를 더 많이 잡고 타입스크립트가 제공하는 도구를 활용할 수 있게 된다.하지만 부정확한 타입 설계는 없는 것보다 못하다그리고 타입정보를 구체적으로 만들 수록 오류 메시지와 자동 완성 기능에 주의를 기울여야 한다. 예시 1. 타입을 구체적으로 개선한 코드interface Point { type: 'Point'; coordinates: number[];}interface Linestring { type: 'LineString'; coordinates: number[][];}interface Polygon ..

리액트 환경의 무한 스크롤무한 스크롤은 페이지 하단 영역까지 스크롤될 경우 다른 컨텐츠를 새롭게 로딩해 페이지에 추가되는 방식이다.react-intersection-observer 라이브러리를 사용해서 구현해보았다. - 라이브러리 설치$ npm install react-intersection-observer --save - useInView hook const { ref: observerRef, inView } = useInView() => 관찰하는 객체 (observer) 하나를 ref로 설정한 후 해당하는 객체가 화면에 보이면 특정 코드를 실행시킬 수 있다.https://github.com/thebuilder/react-intersection-observer GitHub - thebuilder/re..

Selenium 자동화 코드를 작성하면서 텍스트 입력된 내용을 삭제하는 코드를 자주 쓰게 되는데,처음 알게된 내용을 공유하려고 한다. 네이버 쇼핑에서 여러 개의 키워드를 검색해서 내용을 가져오는 웹 크롤링을 하다가아래 코드에서 이슈가 발생했다. 이슈keywords = ['라면', '바구니', '커피']for idx, keyword in enumerate(keywords): input = wait.until(EC.element_to_be_clickable((By.XPATH, '//*[@id="gnb-gnb"]/div[2]/div/div[2]/div/div[2]/form/div[1]/div/input'))) input.send_keys(keyword) 키워드 배열을 돌면서 input 안에 keyw..

아이템 1 ~ 5 정리본아이템 1: 타입스크립트와 자바스크립트의 관계 이해하기모든 자바스크립트는 타입스크립트지만, 모든 타입스크립트는 자바스크립트가 아니다.let city = 'new york city';console.log (city.toUppercase());// 'toUppercase* 속성이 'string* 형식에 없습니다.// 'toUpperCase1 을(를) 사용하시겠습니까?city 변수가 문자열이라는 것을 알려주지 않아도 타입스크립트는 초깃값으로부터 타입을 추론한다.타입 추론은 ts에서 중요한 부분 !! 타입 시스템의 목표런타임에 오류를 발생시킬 코드를 미리 찾아내는 것하지만, 타입 체커가 모든 오류를 찾아내지는 않음const states = [ {name: 'Alabama'f capi..

Android 앱 개발을 하다보면 보안을 위해서 출시 전에는 꼭 난독화를 해야한다.  Android 소스 난독화란? 앱의 소스 코드를 난독화하는 기술로,안드로이드 앱의 소스 코드를 분석하기 어렵게 만들기 위한 기술입니다.이를 통해 소스 코드를 더욱 안전하게 보호할 수 있습니다. 해커가 앱의 코드를 이해하고 악성 기능을 추가하는 것을 어렵게 만들 수 있습니다.그렇기 때문에 앱을 배포하기 전 앱 소스 난독화는 꼭 필요합니다.   Proguard 적용하기  Proguard는 소스코드를 난독화 및 최적화 해주는 무료 오픈소스 툴입니다. minifyEnabled축소, 난독화 및 코드 최적화를 활성화 / 비활성화 한다. getDefaultProguardFile("proguard-android.txt")Android..

xcode 에서 iOS 개발 시 http 통신할 때 다음과 같은 에러가 나올 경우가 있다.since it does not conform to ATS policy ... 해당 에러가 났을 때 처음 시도해볼 수 있는 방법은모든 도메인을 허용해주는 방법이다.Info.plist > ATS > Allow Arbirarty Loads를 YES로 바꾼다.  하지만, Allow Arbirarty Loads 설정은 모든 웹사이트에 대한 보안성을 자체적으로 떨어뜨리기 때문에 앱 심사에서도 거절당할 수 있다.  ✔️ HTTP인 도메인 일부만 허용안전하게 특정 도메인만 추가시켜보자. 1. nscurl 명령어를 사용하여 ATS 관련정보를 가져온다.터미널에 아래 명령어를 입력하자.nscurl https://example.com ..

next.js 프로젝트를 설치하고, App 라우팅에 대해 알아보겠습니다.새로 프로젝트를 만들면서, 어떤 구조로 짤지 고민을 많이 했는데,,,,오늘은 app 라우팅에 배우고, component나 style에 관한 것은 다음에 포스팅 하겠습니다 😀 Next.js 14 프로젝트 설치npx create-next-app 프로젝트명 App 라우터와 Page 라우터의 차이점Next.js에는 앱 라우터와 페이지 라우터라는 두 가지 라우터가 있습니다. App 라우터는 서버 구성 요소 및 스트리밍 같은 React의 최신 기능을 사용할 수 있는 최신 라우터입니다.Pages 라우터는 서버에서 렌더링된 React 애플리케이션을 구축할 수 있게 해줍니다. App 라우팅Next.js가 새롭게 도입한 App router 방식은..

React-Native에서는 비율대로 잡아주고, style 속성에서 width, height을 지정해줬다. 하지만, Reactstrap에서는 xs, sm, md, lg 속성으로 이해가 안되는 부분들이 있어 하나씩 정리해보았다. 😀 Reactstrap의 가장 큰 특징은 "모바일 우선"이라는 것이다. 1. Grid Class 매우 작은 기기 (ex. 모바일) - 너비가 768px 미만 - xs 작은 기기 (ex. 태블릿) - 너비가 768px 이상 - sm 중간 기기 (ex. 노트북) - 너비가 992px 이상 - md 큰 기기 (ex. 노트북/데스크탑) - 너비가 1200px 이상 - lg 2. Layout Container, Row, Col 을 이용하여 콘텐츠를 레이아웃하고 정렬한다. import Con..