[React] React build 시 sourcemap 제거하기

왜 제거해야 하나요? create-react-app으로 React 프로젝트를 빌드하여 배포하는 경우, 기본적으로 webpack에 의해 번들링 된 파일과 해당 파일에 대응되는 sourcemap이 생성됩니다. 다음은 결과 예시이며, *.css.map과 *.js.map 파일이 sourcemap입니다. 📁build ├── index.html ├── . . . └── 📁static ├── 📁css │ ├── main.58ba45b2.chunk.css │ └── main.58ba45b2.chunk.css.map 👈 └── 📁js ├── 2.70d883b6.chunk.js ├── 2.70d883b6.chunk.js.LICENSE.txt ├── 2.70d883b6.chunk.js.map 👈 ├── main.c855ce..

• format_list_bulleted Frontend/React
• · 2023. 7. 11.
• textsms

[React] React 컴포넌트 라이프사이클 및 메소드

컴포넌트 라이프사이클 라이프사이클 메서드는 총 9가지가 있다. 아래와 같은 접두사가 붙어있는 경우도 있다. Will + ~ : 어떤 작업을 작동하기 전 실행 Did + ~ : 어떤 작업을 작동한 후 실행 🔍 리액트 컴포넌트의 라이프사이클 마운트(Mount) : DOM이 생성된 후 웹 브라우저에 나타나는 것. 업데이트(Update) : 컴포넌트에서 props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트 리렌더링 때, this.forceUpdate로 강제 렌더링할 때 업데이트 됨. 언마운트(Unmount) : 마운트의 반대 과정. DOM에서 컴포넌트를 제거하는 과정 * 생명 주기 React의 생명 주기는 생성(mounting) - 업데이트(updating) - 제거(unmounting) 단계로 구성되어..

• format_list_bulleted Frontend/React
• · 2023. 7. 5.
• textsms

[API] Youtube 데이터 가져오기

유튜브 영상 리스트를 만들기 위해서 유튜브 API를 가져와보자. 공식문서 사이트 : https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었 developers.google.com 1. google cloud platform 등록 https://code.google.com/apis/console/?hl=ko Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 acco..

• format_list_bulleted Frontend/React
• · 2023. 4. 13.
• textsms

React주석과 JSX주석처리

React코드 주석 javascript와 동일하게 한 줄주석은 //로, 여러 줄은 /* */로 처리합니다. // singleline comments componentDidMount() { //console.log("test"); this._getProducts(); }; // multiline comments componentDidMount() { /*console.log("test"); this._getProducts();*/ }; React JSX코드 주석 javascript의 여러줄 주석을 {}로 감싸준 형태로 사용합니다. {/* 주석연습 */} 출처 : https://fe-flower.tistory.com/38

• format_list_bulleted Frontend/React
• · 2022. 10. 31.
• textsms

[React] react-icons 사용하는 방법

React 아이콘 사용하기 https://react-icons.netlify.com/#/ 여기 사이트로 접속하세요. 설치방법 yarn add react-icons 사용방법 저는 이 중에서 IonIcon을 사용해보겠습니다. IonIcon 중에서도 갯수 다양하죠? 저는 닫기 아이콘을 사용해보겠습니다. ctrl+f 를 누르고 찾기를 누르면 됩니다. import { ICON_NAME } from "react-icons/io"; //예) import { IoIosClose } from "react-icons/io"; // 맨위에서 사용하고픈 아이콘을 골라 Icon_name에 써줍니다. *** //위에서 불러온 형태 그대로 사용해줍니다. 옵션 추가 import { ICON_NAME } from "react-icon..

• format_list_bulleted Frontend/React
• · 2021. 1. 7.
• textsms