React
-
나만의 홈페이지 만들기-03 [부트스트랩]React 2022. 8. 31. 16:11
부트스트랩 공식사이트 React-Bootstrap 설치 The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer). 아래 처럼 터미널에서 설치를 한다. npm install react-bootstrap bootstrap Navbar 넣기 index.js 부트스트랩 css import 하기 // Importing the Bootstrap CSS import 'bootstrap/dist/css/bootstrap.min.css'; app.js 에 container 와 navbar 컴포넌트 임포트 import React from 'react'; import Co..
-
나만의 홈페이지 만들기-02 [프로젝트 생성]React 2022. 8. 29. 15:34
웹페이지는 요즘 핫한 React로 생성한다. 원하는 임의의 폴더를 생성한다. VS Code 를 실행해서 폴더열기- 위에서 만든 폴더를 선택한다. 새터미널을 클릭한다. 터미널에서 아래 명령을 실행한다. npx create-react-app . 실행이 끝나면 아래처럼 템플릿 소스 코드가 생성된다. 다시 터미널에서 아래 코드 실행. 템플릿 웹사이트가 오픈된다. app.js 파일을 아래와 같이 정리하고 저장하면, 아래와 같이 Hello World 가 보인다. 참고링크 https://create-react-app.dev/docs/getting-started Getting Started | Create React App Create React App is an officially supported way to cr..
-
[REACT] .env 환경설정 파일 사용하기React 2022. 7. 21. 14:12
.env 파일은 중요한 설정파일이나 Key 값같은 보안이 필요한 부분을 "키=값"의 형태로 환경설정파일에시 보관하고 관리하기 위한 파일이다. 아래와 같은 형태로 설정값저장. *여기서 중요한사실은 변수들은 반드시 REACT_APP_ 로 시작해야 인식을 한다는 점이다. (이거 찾느라 엄청나게 삽질함.^^) js 파일에서 사용할때는 아래처럼 사용하면 됩니다. 그리고, github를 사용한다면 .gitignore 파일에 아래처럼 추가해서 버전관리에서 빠지게 해야겠죠. 이상입니다.
-
나만의 홈페이지 만들기-01 [VS CODE 설치]React 2022. 7. 16. 12:11
웹 3.0의 시대 디지털이 일상이 된지 오래다. 모든것이 가상의 세계(메타버스)에서 이루어질 정도로 이제는 스스로 이질감을 느끼지 못하는 시대가 됬다. 사실 이것이 디지털세상인지 리얼 실생활인지 가끔은 구분이 안가기도 한다. 항상 느끼는 것이지만, 장자의 나비의 꿈...이것이 진정 이모든것을 설명하는 것일지도 모른다. 꿈속에 내가 진짜인지...실제 지금의 내가 진짜인지 이제는 어느 것이 중요한지 알기 힘든 시대가 됬다. 하루 24시간에서 8시간을자고 16시간을 깨어 있다고 가정하자. 주말아침 7시에 눈을뜨면, 제일먼저 가상화폐의 시세를 확인한다. 그리고, 간밤에 무슨일이 있었는지 습관적으로 인터넷 포털의 뉴스를 검색하고.. 한참을 그렇게 뒤적이다가.. 배가 고프면 슬며시 일어나서 먹을 것을 찾는다. 그리..