728x90 반응형 SPA148 [React] Hooks - useCallback 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useCallback에 대해 적어보는 시간을 가져보려고 합니다. useCallback이란? useCallback은 hooks에서 메모이제이션을 이용해 함수를 재사용함으로 써 최적화를 해주는 역할을 담당합니다. 예를 들어 어떤 상황에서든 항상 동일한 결과값을 제공해주는 함수(= 순수 함수)가 있다고 가정해보겠습니다. 리액트를 개발하다보면 빈번하게 리 렌더링의 상황이 발생되는데 이때 항상 동일한 결괏값을 제공해주는 함수들도 함께 리 렌더링이 이루어집니다. 이것은 다른 말로 데이터를 지웠다가 똑같은 상태의 함수를 다시 생성하는 불필요한 작업을 한다고도 말할 수 있습니다. 그리고 이런 작업들이 한 개, 두 개 점점 쌓여나가면 결국 서비스의 속도에 영향을 미칠.. 2021. 9. 15. [React] Hooks - useRef 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useRef에 대해 적어보는 시간을 가져보려고 합니다. useRef란? useRef는 hooks에서 컴포넌트의 전 생명주기 동안 객체 값을 유지해주는 역할을 담당합니다. 여기서 값을 유지해준다는 것은 말 그대로 어느곳에서라도 한번 저장된 값을 그대로 유지시켜 준다는 것입니다. 리액트를 이용하여 어느정도 개발해보신 분들이라면 useState나 또는 let을 이용한 일반 변수값을 선언한 뒤 데이터를 업데이트할 때 본인이 생각한 데이터로 업데이트가 되지 않았던 현상을 겪어보셨을 수도 있습니다. 예를 들어 setTimeout, setInterval을 사용한다거나 또는 액션함수에서 업데이트한 데이터가 업데이트되지 않고 그대로 유지되는 등의 케이스들이 있습니다... 2021. 9. 13. [React] Hooks - useState 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useState에 대해 적어보는 시간을 가져보려고 합니다. useState란? useState는 hooks에서 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다. 여기서 말하는 반응성이라는 것은 말 그대로 화면에 사용되는 데이터가 변경될 때 변경된 데이터가 화면에 업데이트되어 보이는 것인지를 말합니다. 예를 들어 숫자 값을 증가시킨다고 할 때 반응성이 제공될 때에는 숫자를 증가할 때 마다 숫자가 증가되는 것이 실시간으로 화면에 보이게 되는 것이고, 반응성이 제공되지 않을 때에는 실제로 숫자는 증가하지만 화면에는 기존 값이 유지되어 있는 것입니다. 클래스형 컴포넌트에도 useState와 동일한 역할을 처리해주는 것이 있었습니다. 클래스형 컴포넌트.. 2021. 9. 5. [React] Hooks - useEffect 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useEffect에 대해 적어보는 시간을 가져보려고 합니다. useEffect란? useEffect는 hooks에서 컴포넌트가 마운트, 언마운트, 업데이트될 때 원하는 작업이 수행될 수 있도록 도와주는것을 담당합니다. 클래스형 컴포넌트에서 사용되는 유사한 라이프 사이클 메서드는 다음과 같이 있습니다. ComponentDidMount ComponentDidUpdate ComponentWillUnmount useEffect의 사용방법은 간단합니다. 우선 useEffect는 리액트 사용을 위해 impor해오는 'react' 패키지에서 제공해주는 기능이기 때문에 import만 해준다면 바로 가져다 사용할 수 있습니다. 그리고 vscode에서 제공해주는 use.. 2021. 9. 2. [React] StyledComponents Tree Shaking 적용 안녕하세요. J4J입니다. 이번 포스팅은 styled-componets에 tree shaking을 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전에 올렸던 글인 [React] Tree Shaking으로 최적화하기를 통해 리액트에서 webpack을 이용하여 tree shaking 하는 방법은 모두 끝났다고 생각을 했었습니다. 하지만 css사용을 위해 제가 즐겨 사용하던 styled-components에 tree shaking이 적용되지 않는 현상을 발견할 수 있었습니다. 해결방법을 알게 되어 서로서로(?) 공유하고자 글을 적게 되었습니다. StyledComponetns Tree Shaking 적용 방법 우선 tree shaking이 적용되지 않는 상황을 간단하게 보여드리겠습니다. 이전 글에 .. 2021. 9. 1. [React] Tree Shaking으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 tree shaking으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Tree Shaking이란? tree shaking은 나무 흔들기라는 뜻으로 소스코드에서는 명시되어 있지만 실제로 프로그램 실행에 영향을 주지 않는 코드들을 빌드 단계 때 제거하는 것을 의미합니다. tree shaking을 이용하여 프로그램 실행에 영향을 주지 않는 코드들을 제거했을 때 돌아오는 이점은 번들 파일의 크기 최적화입니다. 서비스의 규모가 커짐에 따라 프로그래밍되는 코드들도 많아지고 결국 번들 파일의 크기가 커지는 것은 당연한 상황이 됩니다. 그리고 번들 파일의 크기가 커지게 되면 브라우저가 번들 파일을 로드할 때 더 많은 시간을 소비하게 만듭니다. 이런 상황에서 tr.. 2021. 8. 31. [React] 타입 스크립트 환경에서 정적 이미지 파일 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 환경에서 정적 이미지 파일 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전에 작성된 포스팅을 확인해보면 타입 스크립트를 사용하지 않을 때 정적 이미지 파일 사용하는 방법에 대해서 확인할 수 있습니다. 타입 스크립트를 사용한다고 해서 달라질 것은 거의 없지만 설정이 어떻게 되어 있는지에 따라 에러가 표출될 수도 있습니다. 에러 표출없이 이미지 파일 사용하는 방법에 대해 적어보겠습니다. 정적 이미지 파일 불러오는 방법 [ 1. 패키지 설치하기 ] $ npm install file-loader [ 2. webpack설정 파일에 로더 등록 ] module: { rules: [ { // babel loader }, { test: /\.(png|.. 2021. 8. 24. [React] 정적 이미지 파일 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 정적 이미지 파일 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 리액트를 이용하여 개발하다 보면 프로젝트 내부에 이미지 파일을 저장해둔 뒤 화면에 불러오는 작업을 쉽게 마주할 수 있습니다. 저의 경험담이기도 하지만 여기서 당황스러웠던 점은 html에서 하던 방식으로 이미지를 불러올 경우 정상적으로 동작되지 않는다는 것입니다. 리액트에서는 부가적인 설정을 해줘야 하는데 해당 방법에 대해 글을 적어보도록 하겠습니다. 정적 이미지 파일 불러오는 방법 [ 1. 패키지 설치 ] $ npm install file-loader [ 2. webpack설정 파일에 로더 등록 ] module: { rules: [ { // babel loader }, { test: /\... 2021. 8. 24. [React] 지연 로딩(Lazy Loading)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 지연 로딩으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 지연 로딩이란? 지연 로딩이라고 하는 것은 말 그대로 로딩을 바로 하지 않고 지연시켰다가 로딩을 나중에 해준다는 뜻입니다. 간단한 예시로 더 자세하게 말씀드리겠습니다. 예를 들어 한 페이지에 많은 양의 사진이 사용된다고 가정해보겠습니다. 요즘 만들어지는 사진들은 용량이 크기 때문에 화면을 처음 로드할 때 많은 양의 사진을 한 번에 로드를 하는 것은 서비스의 속도를 늦추는 요인이 될 수 있습니다. 심지어 이렇게 로드되는 많은 사진들이 한 화면에 전부 보이는 일은 드뭅니다. 그럼 만약 페이지를 로드할 때 페이지에서 사용되는 모든 사진을 한 번에 로드하는 것이 아니라 실제 화면에 보이는 사진들만 .. 2021. 8. 18. [React] 코드 스플릿팅(Code Splitting)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 코드 스플릿팅으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 코드 스플릿팅이란? 코드 스플릿팅이라고 하는 것은 webpack, rollup, browserify와 같은 모듈 번들러를 이용하여 만들어진 하나의 번들 파일을 여러 개의 번들 파일로 나누는 것을 의미합니다. 그리고 하나의 번들 파일을 여러 개의 번들 파일로 나누는 이유는 더 빠른 속도로 화면을 로드하기 위해서입니다. 모듈 번들러를 사용하게 된 이유부터 간단히 언급을 해보자면 브라우저에서 호출하는 파일의 개수를 줄여 부하가 발생되는 것을 방지하기 위해 번들러를 사용하고 있습니다. 하지만 프로젝트의 규모가 커짐과 동시에 번들링 되는 파일의 크기도 점점 커지게 되고 이것은 결국 url을 입력하.. 2021. 8. 16. [React] Router를 타입스크립트와 같이 사용하는 방법 안녕하세요. J4J입니다. 이번 포스팅은 Router를 타입 스크립트와 같이 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 우선 들어가기에 앞서 이전에 Router를 이용한 페이지 이동하는 방법에 대해 글을 올린적이 있습니다. 타입 스크립트를 사용한다고 하더라도 router를 사용하는 것에 있어서 크게 다를 것은 없지만 일부 기능들은 타입을 지정해줘야 사용할 수가 있습니다. 대표적으로 history, location, match가 있는데 이들을 제외한 나머지는 사용방법이 동일하기 때문에 이전 글을 참조하시길 바랍니다. ※ 추가 → 해당 글은 react router v6 업그레이드 이전에 작성된 글입니다. 현재 최신 버전을 설치할 경우 다른 점이 존재할 수 있으니 변경점에 대해 확인이 필요하신 .. 2021. 8. 11. [React] 함수형 컴포넌트 + 타입스크립트 환경에서 Redux 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트 + 타입 스크립트 환경에서 redux 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 redux가 무엇인지에 대해 궁금하신 분은 여기를 참고해주시면 됩니다. Redux 사용 방법 이번에 redux를 설정하여 최종적으로 확인해볼 것은 다음과 같습니다. store에 num값을 저장 파라미터 값만큼 num의 값을 증가시키는 액션 함수 정의 파라미터 값만큼 num의 값을 감소시키는 액션 함수 정의 증가와 감소 버튼을 누를 경우 num의 값이 실시간으로 변화되는 것을 확인 [ 1. 패키지 설치 ] $ npm install redux react-redux @types/react-redux redux-devtools-extension .. 2021. 8. 9. [React] CRA 없이 타입스크립트 개발환경 구축하기 (webpack 구 버전 사용) 안녕하세요. J4J입니다. 이번 포스팅은 CRA 없이 타입 스크립트 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] $ npm init npm init을 입력하게 되면 다음과 같은 정보들을 추가적으로 입력해줘야 합니다. package name: (init_typescript) react_typescripot_init version: (1.0.0) description: react typescript init description entry point: (index.js) index.tsx test command: git repository: keywords: author: J4J license: (ISC) 괄호 같은 경우는 아.. 2021. 8. 9. [Next] 초기 개발환경 구축하기 안녕하세요. J4J입니다. 이번 포스팅은 초기 개발환경 구축하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 개발환경 구축 방법 [ 1. package.json 생성 ] package.json은 설치된 패키지들을 관리하는 파일입니다. package.json을 생성하는 방법은 다음 명령어를 이용하면 됩니다. $ npm init 명령어를 입력할 경우 추가적인 정보들을 기입해줘야 합니다. 원하는 텍스트를 입력하여 지정할 수도 있고 또한 괄호가 처져있는 부분은 아무것도 입력하지 않고 그냥 넘길 경우 괄호 안에 내용이 입력됩니다. package name: (init) next_init version: (1.0.0) description: next init description entry point: (inde.. 2021. 7. 28. [React] 함수형 컴포넌트에서 Redux-Saga 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 Redux-Saga 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Redux 미들웨어 redux-saga에 대해 알기 전 redux 미들웨어의 개념에 대해 인지를 하고 있어야 합니다. redux 미들웨어라고 하는 것은 action함수들이 reducer에 전달될 때 전달되는 action함수들을 가로채어 부가 작업들을 진행하는 장소를 일컫습니다. redux 미들웨어를 사용하는 목적으로 알고 있는 것들은 다음과 같은 것들이 있습니다. 비동기 처리 redux 로그 처리 하나의 action함수로 다수의 action함수 실행 그리고 이런 redux 미들웨어 중 대표적으로 사용되는 라이브러리는 다음과 같습니다. redux-thunk redux-s.. 2021. 7. 26. [React] 함수형 컴포넌트에서 Mobx 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 함수형 컴포넌트에서 mobx 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Mobx란? mobx는 react에서 상태 관리를 위해 사용되는 라이브러리입니다. react에서 제일 많이 사용되는 상태 관리는 redux라는 것이 있는데 상태 관리와 redux에 대한 개념이 필요하신 분들은 여기를 참고해주시면 됩니다. mobx의 공식문서를 참고해보면 mobx는 다음과 같은 구조로 되어 있다고 합니다. Actions → Observable State에 저장되어 있는 데이터들을 변화시키는 액션 함수 Observable State → 관찰되고 있는 데이터 값들이 저장되어 있는 장소 Compute Values → Observable State에 저장되어 있는 데이터가.. 2021. 7. 24. [React] regeneratorRuntime is not defined 에러 안녕하세요. J4J입니다. React를 이용하여 프로그래밍을 하다가 다음과 같은 에러에 마주한 적이 있습니다. Uncaught ReferenceError: regeneratorRuntime is not defined 해당 에러를 마주하게 된 원인은 async/await의 사용이었습니다. 사용되던 async/await을 걷어내고 promise로 변경했더니 정상적으로 실행되는 것을 확인했습니다. 하지만 그렇다고 async/await을 사용하지 않을 수 없으니 해결방법을 찾아봤고 다음과 같은 방법으로 해결할 수 있었습니다. [ 1. 패키지 설치 ] $ npm install babel-polyfill [ 2. webpack 설정파일 중 entry에 babel-polyfill 추가 ] entry: ["babel-.. 2021. 7. 17. [React] Webpack Proxy설정을 이용하여 CORS 해결 안녕하세요. J4J입니다. 이번 포스팅은 webpack proxy설정을 이용하여 cors 해결하는 방법에 대해 적어보는 시간을 가져보려고 합니다. CORS란? cors는 cross-origin resource sharing의 약자로 교차 출처 리소스 공유라고 표현됩니다. server-client 간 개발을 하다 보면 정말 쉽게 접할 수 있는 문제가 cors문제인데 cors문제가 발생하는 이유는 간단하게 보안 때문입니다. cors는 본인이 운영하는 웹사이트가 아닌 다른 피싱 사이트에서 요청한 request가 넘어오게 되면 request처리를 하지 않고 에러를 발생되도록 도와줍니다. cors설정을 하지않을 경우 일반적으로 동일 도메인 + 동일 포트로 넘어온 request에 대해서는 데이터 처리가 정상적으로 .. 2021. 7. 17. 이전 1 ··· 5 6 7 8 9 다음 728x90 반응형
