반응형 Programming/React9 [React] Github publish 하기 1. gh-pages tool 설치 ( npm i gh-pages ) 2. package.json 파일의 build script 실행. - 프로젝트의 production ready code를 생성함. ( 코드 압축 및 프로젝트 최적화 ) - script 실행 완료 후 build 폴더가 생김. 3. package.json 파일에 내용 추가 - package.json 끝 부분에 "homepage": "https://github유저네임.github.io/github repository(github 저장소)" 추가 ( 해당 항목 추가 전에 , 추가 하는 것 잊지 마세요 ) - "script" 항목에 아이템 추가 1) "deploy" : "gh-pages -d build" ( gh-pages를 실행 시키고, bu.. 2023. 1. 22. [React] 로그가 두 번씩 찍힐 때. (StrictMode) create-react-app을 이용하여 project를 생성하면 기본적으로 최상의 root element render 시에 StrictMode로 감싸준다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구로, 개발 모드에서만 활성화 됩니다. 기본적으로 생성되고 프로덕션 빌드 시에는 영향을 주지 않기 때문에 유용하지만, 정확한 내용을 파악하고 있지 않으면 개발 시에 혼란을 겪을 수 있습니다. 저도 React 공부 중에 useEffect 함수 안에 사용한 console.log가 두 번씩 찍혀서 이상하다고 생각하다가 좀 찾아보니 StrictMode에서는 몇 개의 함수를 의도적으로 두 번 호출하여 문제가 되는 부분을 발견할 수 있게 한다고 합니다. 의도적으로 두 번씩 호출하는 함수는 .. 2023. 1. 21. [React] Create react app 으로 Application 만들기 Create-react-app을 사용하는 목적은 좀 더 쉽게 ReactJS Application을 만들기 위해서 입니다. Create-react-app은 ReactJS Application을 만들기 위한 많은 사전 설정들을 미리 준비해주기 때문입니다. Create-react-app을 사용하기 위해 해야할 일. 1. node.js 설치 ( https://nodejs.org/en/ ) 안정화된 버전인 LTS를 설치하고, 콘솔 화면에서 node -v를 입력했을 때, 버전이 표시되고 npx 명령어도 잘 수행된다면 정상 설치된 것입니다. 2. VSCode ( https://code.visualstudio.com/ ) 코드 작성을 위해 VSCode를 설치해 줍니다. 다른 IDE를 설치해도 문제는 없지만, VSCod.. 2023. 1. 18. [React] React vs Vanilla Javascript Vanilla JS : HTML을 먼저 만들고 그것을 Javascript로 가져와서 HTML을 수정 React : 모든 것이 Javascript로 시작 이후에 HTML이 됨. 업데이트 할 HTML을 React JS가 생성함. Referrence - nomadcoder : https://nomadcoders.co/react-for-beginners/lobby 2023. 1. 10. React support tools React Snippets ( VSCode extention ) - https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier. marketplace.visualstudio.com JS/JSX Snippets ( VSCod.. 2022. 12. 26. [React] useState UseState - Manage react statusWhat does useState returnLook at useStatus through console.log, an array is displayed.First value is undefined as being the state value currently when we run the app for the first time.( when we render our app component. )Second value is function that we're going to use to update the state. 2022. 12. 18. 이전 1 2 다음 반응형
