본문 바로가기

개발/react9

react_웹사이트 만들기_3.네비게이션바로 사이트 이동 안녕하세요. 오랜만에 react 관련 글을 쓰게 되었네요. 이번에는 전에 만든 네비게이션바를 통해서 사이트 이동을 하도록 하겠습니다. 우선 react-router-dom을 통해서 기능을 실현할 계획입니다. 터미널에서 npm install react-router-dom 을 입력하셔서 설치부터 해줍니다. 설치가 완료 되면 전에 components 폴더에 만든신 것과 같이 home.js, features.js, pricing.js 파일을 만들어 줍니다. 이후 App.js로 이동 후 수정이 들어갑니다. import './App.css'; import Navigation from './components/nav'; import Home from './components/home'; import { BrowserR.. 2022. 10. 18.
react_웹사이트 만들기_2. 네비게이션바 만들기 이번에는 웹사이트에 가장 상단에 네비게이션바를 만들겠습니다. 우선 디자인에 아주 센스가 없는 저는 bootstrap의 도움을 받으려고 합니다. 아래 사이트를 들어가 bootstrap을 설치 방법을 참고하여 설치를 시작하도록 하겠습니다. https://react-bootstrap.github.io/ https://react-bootstrap.github.io/ React Bootstrap The most popular front-end framework Rebuilt for React. Current version: 1.0.0-beta.17 react-bootstrap.github.io 해당 사이트를 접속하여 Get started를 눌러 설치 방법을 보입니다. npm을 이용해서 설치를 하라고 나오네요. 저.. 2020. 3. 18.
react_웹사이트 만들기_1. Visual Studio Code 설치 react로 웹사이트 만들어 보도록 하겠습니다. 우선 편하게 웹사이트를 만들기 위해서 Visaul Studio Code를 설치하도록 하겠습니다. 하기 사이트에 접속하여 Visual Studio 설치 파일을 다운로드 합니다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for buildin.. 2020. 3. 12.
react 설치하기 react를 설치하는 방법에 대해서 알아보도록 하겠습니다. 우선 Node.js를 먼저 설치를 해주겠습니다. 아래 링크를 통해서 다운로드 받으시면 됩니다. http://www.nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 사이트에 들어가면 바로 다운로드를 받으실 수 있으시며 저는 Most Users가 적혀 있는 12.16.1 LTS를 다운로드 받아 설치를 하였습니다. 설치는 간단하게 Next를 눌러 주시면 됩니다. 기본 위치에 설치되는 것을 원하시지 않으시면 Change 버튼을 눌러 변경하시면 됩니다. node.js를 설치하고 나면 cmd에서 npm 명령을.. 2020. 3. 10.