반응형 React8 [Next.js]Map 표시 Website 만들기 - 1 Langara College 졸업 후, 어떤 것을 만들어 볼까 고민하던 중 밴쿠버로 이주하고 싶은 사람들을 위한 Vancouver houce searching page를 만들기로 정했다. 먼저 플랫폼을 고민하던 중 처음 해보는 Next.js를 이용해 보기로 결정! 처음 배우는 것이니 기본 app을 만드는 것부터 시작. npx create-next-app@latest --typescript 여기서 @latest는 가장 최근 버전으로 만든다는 것이고, --typescript는 typescript를 적용한다는 것이다. 일단 typescript는 적용하지 않고 만들어봤다. 프로젝트가 생성되었으면 code nextapp을 입력하여 VS Code로 프로젝트를 연다. 프로젝트가 정상적으로 생성되었는지 확인하기 위해 .. 2023. 12. 6. [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 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 다음 반응형
