본문 바로가기

개념/React

 (17)
hoxy...Proxy가 왜 필요한지 아시나요? 정확히요... 🙏🏻 thanks to 생활코딩 Create React App - Proxy 코스 교육과정 중 proxy관련 부분이 이해가 잘 안되서 다른 교육 자료를 찾아봤는데 생활 코딩님의 유튜브 영상을 보고 너무 잘 이해가 갔다..감덩... 샤라웃투 생활코딩, 구독 좋아요 박았숩니다!👍🏻 무튼 이번 블로깅은 그 영상으로 부터 배운 것들을 판서하는 식으로 작성했다. 영상을 다 보기 어려울 때 아래 내용을 보고 참고하고, 영상을 볼 수 있는 경우 영상으로 볼 것을 추천한다. 🤔 어떤 경우 , 왜 Proxy가 필요할까? CRA(Create React App)로 개발을 할 경우 개발환경을 편하게 만들어 주기위한 proxy라는 기능이 있다. 이 기능이 왜 필요한가에 대해 먼저 알아보고자 한다. 일단 CRA로 웹 개발을 하다..
NODE_ENV와 REACT_APP_ 환경변수란? + 깃허브 토큰 예제 🤔 환경변수란? 환경변수는 프로젝트 전체에서 참조할 수 있는 변수 만들 수 있어 편리하게 이용된다. 환경변수로 변수를 선언하시면 JS파일 내에서 지역변수로 선언한 것 과같이 변수를 참조해 올 수 있다. 기본적으로 NODE_ENV라는 환경변수가 있고, 필요에따라 REACT_APP_으로 시작하는 다른 환경 변수들도 설정할 수 있다. 이 둘에 대한 이야기는 아래에서 각각 더 자세히 다룬다. 💡 NODE_ENV는 현재의 모드를 가르킨다 Node.js의 express 서버를 실행할 때 필요한 변수이다. NODE.ENV는 지금 돌아가고 있는 어플리케이션의 모드를 특성화 시키는 환경변수이다. 보통은 'development'와 'production' 이 두가지 문자열로 등장한다. 아래의 코드를 보면 어떤 식으로 쓰이는..
웹팩 기본 구조 📌 시작하며 웹팩과 번들의 필요성과 개념에 대한 설명은 링크를 참조 🤔 웹팩의 핵심 개념들 웹팩을 다룬다는 것은 webpack.config.js 파일을 이해하고 작성하는게 사실상 전부다. webpack.config.js 파일만 잘 작성해 놓으면 번들링이 성공적으로 되고 빌드가 완료되는데 이 webpack.config.js파일에 옵션이 너무 많고 복잡해서 생소한 부분이 많다. 일단 웹팩 공식문서에서 제시하는 핵심개념들은 아래와 같다. (각 링크를 클릭하면 공식문서로 넘어간다) Entry(엔트리) Output(출력) Loaders(로더) Plugins(플러그인) Mode(모드) Browser Compatibility(브라우저 호환성) 💡 웹팩의 모양 웹팩 설정 파일의 아주 간단한 모습은 아래와 같다. 아래는..
번들링과 웹팩, 무엇이고 왜 필요할까? 🎀 번들링(bundling)이란 '묶는다'는 뜻을 가지고 있으며, 사용자에게 웹 애플리케이션을 제공하기 위해 기능별로 모듈화 했던 파일들을 하나로 묶어주는 작업을 말한다. 🤔 번들링은 왜 필요할까 구체적인 사례로 들자면 아래의 것들을 들 수 있다. 여러개의 js파일을 사용할때 변수간 충돌을 막을 수 있다. 파일을 불러오는 횟수를 줄일 수 있어서 인터넷 속도가 느릴 때에도 좋다. 유지보수를 위해 공백이나 주석을 지우지 않아도 배포용 코드에서만 뺄 수 있다. 배포 코드를 암호화하여 안전하게 만들 수 있다. 요약해서 말하자면, 번들링은 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서 필요하다. 여러개의 파일들이 있다면 그만큼 서버에 요청하고 응답받는 횟수가 많아진다. 그러면 당연히 페이지가 로딩되는 시..
[React] useRef사용법, 언제 써야 할까? 🤔 useRef는 javaScript에서는 DOM을 선택해야 하는 상황에 getElementById나 querySelector와 같은 DOM Selector 함수를 사용해서 선택했다. 그런데 React에선 실질적으로 대부분 state를 이용해 자동으로 리랜더링 되기 때문에, 직접 DOM요소를 건드릴 일이 많이 없고, 리액트 자체에서도 DOM을 되도록 직접 조작하는 일은 없게하라 그런다. 그럼에도 불구하고, DOM을 직접 선택해야 하는 상황이 있다. 예를 들면 아래와 같은 상황들이다. useRef가 필요한 상황 예시 특정 엘리먼트의 크기 가져오기 스크롤바의 현 위치 가져오기 혹은 설정하기 🌟포커스 설정하기 🌟비디오 제어하기 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리 사용할..
[React] Styled Components 시작하기, styled-reset 추가 하기 🤔 Styled Component 왜 필요할까? CDD기반의 개발을 하기 위해선, CSS를 컴포넌트화 시킬 필요가 있다. (지금 이 문장이 이해가 가지 않는다면, 링크의 글을 먼저 읽는다) 리액트를 사용함으로써 우리는 기본적으로 html과 js 코드를 한방에 jsx로 묶을 수 있다. 그렇지만 css는 리액트 기본 기능으론 컴포넌트로 쪼개서 jsx 파일에 담을 수는 없다. 이것을 가능하게 해주는 Styled Component라는 귀한 분을 모셔와야 한다. 우리는 React와 Styled Component 이 빛과 같은 두분으로 뿔뿔이 흩어져 있던 html + css + js 코드를 js하나로(jsx도 사실 js코드이므로) 묶을 수 있게 된다. 1+1+1 = 1 이 되는 기적!! 🔥 Styled Compon..
[React] 메모이제이션(Memoization) 무엇이고, 언제 어떻게 쓸까? 본 글은 다음의 글을 의역하고 추가한 글입니다. https://www.freecodecamp.org/news/memoization-in-javascript-and-react/ 이번 글은 메모이제이션에 대해 알아보려 합니다. 메모이제이션(memoization)은 무거운 연산 과정을 더 효율적으로 계선해주는 기술입니다. 이 글에서 메모이제이션이 무엇이고, 어떤 곳에 사용할때 좋을지에 대해 이야기 해볼 것입니다. 자바스크립트와 리액트에서의 예시도 나와있습니다.😊 💡 메모이제이션이란? 프로그래밍에서 메모이제이션이란 애플리케이션을 더욱 효율적이고 빠르게 만들어주는 최적화 기술입니다. 메모이제이션이 최적화 할 수 있는 원리는 바로 연산의 결과를 캐시에 저장해 놓고, 다음번에 동일한 연산이 필요할 때에 캐시로 부터 ..
[React] 컴포넌트 내에서 ajax 요청하기, loading indicator 추가하기 🦋 시작하며 useEffect 기본을 이해해야 한다. (링크) 📡 필터링 예제로 보는 ajax 요청 어떤 목록을 필터링하는 예제에서 두가지 방법이 있을 수 있다. 컴포넌트 내에서 필터링: 처음에 한번 외부 API로부터 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법 (코드펜 예제) 컴포넌트 외부에서 필터링: 한번에 다 받아오지 않고 검색어 바뀔 때마다, 컴포넌트 외부로 API 요청해 필터링 한 결과를 받아오는 방법 (보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당) (코드펜 예제) 각각의 장단점은 아래와 같다. 장점 단점 컴포넌트 내부에서 처리 HTTP 요청의 빈도를 줄일 수 있다 브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난..
[React] 상태(state) 끌어올리기, useEffect 기본 🦋 시작하며 React의 데이터의 흐름과 어떤 것을 state로 두어야 하는지 이해해야한다. (링크) 🧐 상태 끌어올리기는 왜 필요할까 간단히 말하자면, 상위 컴포넌트의 state를 하위에서 바꾸어야 할때 필요하다. "단방향 데이터 흐름"이기 때문에, 자식 컴포넌트 여러개가 하나의 상태에 접근하고자 할때 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 하고 자식에게 props로 state를 물려줘야한다. 그런데 이 부모컴포넌트의 상태를 바꿔야하는 자식 컴포넌트가 있다면? 여러개의 자식 컴포넌트가 상태에 접근해 두기위해서 부모에 state는 그대로 두되, 특정 자식컴포넌트는 부모의 상태에 접근해 변경해줄 수 있도록 세팅해야 한다. 이 과정을 공식홈페이지에선 "역방향 데이터 흐름 추가"한다고 표현한다. 📌 ..
[React] Create React App으로 SPA개발 시작하기 👀 create-react-app이란 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴체인이다. 하나의 명령어만으로 SPA개발에 최적촤된 리액트 개발을 시작할 수 있다. 초기 준비시간이 들지 않아 좋다. 리액트에서도 적극적으로 권고하고 있지만, 현업에서는 이렇게 세팅해주는대로 가져가기보다는 필요한거만 솎아내서 사용하는 경우가 많다. 💡 create-react-app으로 시작하기 프로젝트 폴더가 생길 상위폴더에서... npx create-react-app@latest 폴더이름(프로젝트이름) "Happy hacking!"이라는 문구가 뜨면 이제 준비끝이다. npm run start 하면 리액트 로고가 박힌 라이브서버가 열리면서 프로젝트를 확인하면서 개발할 수 있다. 📌 create-react-a..

티스토리툴바