예를 들어 어떤 게시물에서 사진이 있는 경우, 없는 경우가 있을 텐데 그럴 때 마다 {image && } 이런 식으로 컴포넌트를 구성한 적이 있는 사람? 그건 바로 나 좀 더 성능을 개선할 수 있는 방법이 있다 React 에서 지원하는 lazy, suspense를 사용해 좀 더 개선해보자 어떻게 성능을 줄일 수 있냐면img태그는 컴포넌트가 렌더 되자마자 이미지를 즉시 다운로드 한다면React.lazy() 로 컴포넌트를 감싸면, 컴포넌트 자체 코드도 필요할 때만 다운로드돼서초기로딩을 더 최소화 할 수 있다. Suspense란?비동기 작업이 끝날 때까지 기다리는 동안fallback UI(로딩화면 등)를 보여주는 React기능(Suspense는 제한된 환경에서만 작동함. lazy로 import한 컴포넌트..

프로젝트를 매번 진행하면서babel이나 config 파일을 건드려야 할 일이 생기면 이해하지 못한채 무지성으로 따라만 했던 경험이 있어요.그래서인지 이런 파일들을 건드려야 할 일이 생기면 에러도 많이 뜨고 뭔가 순탄하게 잘 실행이 되지는 않았던 거 같아요. 이번 기회에 각 파일들의 역할 쓰임 동작 등등을 공부해보려 합니다! babel이란 뭐지?  우선 Babel의 주요 역할은 최신 js(es6, es7 및 그 이상)를 사용하는 코드가 브라우저 버전과 상관없이 다양한 js 엔진에서 작동할 수 있게 하는 것입니다.이는 특히 최신 기능을 지원하지 않는 오래된 브라우저에서도 코드가 작동할 수 있게 해 줍니다! 바벨이 등장함으로 브라우저 간 호환성을 지켜야 하는 크로스 브라우징 이슈를 어느 정도 해결했다고 보는데..

일단 화면 개발에 앞서리액트 네이티브가 어떻게 동작하는지, 각 파일의 의미 등등에 대해서먼저 공부해 보면 좋을 것 같아요!!그래야 이 리액트 네이티브를 좀 더 잘 이해하고 코드를 구현할 수 있으니까요!  Dom 이란?가상 DOM 을 사용해서 렌더링을 하는 React NativeThread 란? 리액트 네이티브의 4가지 ThreadReact Native 의 핵심 아키텍처 BridgeJavascript와 네이티브 코드 간의 브리지 통신 React Native 에서 상태관리가 이루어질 때, Thread의 동작은?  가상 DOM이란 개념 이전에 그냥 DOM은 뭘까요?  DOM 이란?  Document Object Model 즉 한국어로 풀어 말하면 문서 객체 모델입니다.웹 문서의 구조화된 표현!웹 페이지와 스크..

info Welcome to React Native v0.74 info Starting dev server on port 8081... error listen EADDRINUSE: address already in use :::8081. Error: listen EADDRINUSE: address already in use :::8081 at Server.setupListenHandle [as _listen2] (node:net:1872:16) at listenInCluster (node:net:1920:12) at Server.listen (node:net:2008:7) 위의 에러는 기존의 서버를 종료하지 않은 채 visual studio를 강제 종료했을 때다시 해당 포트 번호로 서버를 실행시키려고 할..

안녕하세요!오늘은 React Native의 ScrollView와 FlatList의 차이에 대해서 알아보려고 하는데요! 저의 프로젝트에는 두가지가 적절하게 선택되어 사용하고 있어요.(아마두?? ㅎㅎㅎ....) 두 가지 컴포넌트는 스크롤 가능한 콘텐츠를 표시하기 위해 사용되며스크롤 가능한 아이템을 감싸는 컴테이너 역할을 하며, 자식 컴포넌트들이 모두 해당 컴포넌트 안에서 렌더링이 돼요!기본적으로 수직 스크롤을 지원하지만, horizontal 속성을 통해 수평 스크롤도 지원한답니다! 이렇게 비슷한 역할을 하는 컴포넌트인데, 어떤 차이를 가지고 어떤 상황에 어떻게 적절하게 쓰는지 짚고 넘어가면프로젝트에 더욱 더 도움 되실 거예요 ~~❤️❤️ ScrollView 의 쓰임  ScrollView 는 화면 상관없이 모..

안녕하세요!저번 포스팅에서  https://dlawlgus40.tistory.com/136 Capstone#4. Axios instance 생성하기 / Axios interceptors안녕하세요!오늘은 벌써!! 저의 캡스톤을 소개하는 네 번째 시간이네요~~ 음.. 다음 글은 상태관리를 할까... 화면 구성하는 걸로 할까..뭘로 할까 하다가.. 우선 어플이 딱 처음에 실행되었을 때dlawlgus40.tistory.com interceptors의 기능 설명하면서 코드가 잠깐 나왔었었는데,여기서  Axios.interceptors.request.use(async config => { if ( config.headers.Authorization === '' || config.headers.Autho..