낮햇볕

Netlify 프로젝트 만들고 배포 할 수 있도록 도와주는 사이트 Netlify 구글검색 https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com 처음이면 회원가입 깃허브여서 깃허브로 회원가입 승인클릭 다작성해주구 Set up and continue클릭 깃으로 해주기위해 Import from Git클릭 GitH..

1. npm i gh-pages -D 설치 $ npm i gh-pages -D package.json에 설치되어진게 보인다 2. package.json 안에 homepage 작성 { "name": "blog", "version": "0.1.0", "homepage": "https://아이디.github.io/리포지토리이름", "private": true, "dependencies": { "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", "web-vitals": "^3.0.3" }, homepage를 작성해줘야한다 또한 아래 script에도 "predeploy": "npm run build", "deploy": "gh-pages -..

구글검색 https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io Get started 클릭 아래의 페이지가 나온다 vscode터미널에 입력해줘서 설치 npm install react-bootstrap bootstrap json 안에 설치되었다고 나온다 bootstrap사용법 1. app.js에 입력 import 'bootstrap/dist/css/bootstrap.min.css'; 2. pubilc > index.js head태그안 작성 원하는 버튼이나 경고창등 사용하기 검색창에 원하는거 입력하기 button을 화면에 띄우..

Material icons 설치 //npm npm install @material-ui/core //yarn yarn add @material-ui/core Material-UI icon 설치 //npm npm install @material-ui/icons //yarn yarn add @material-ui/icons icon과 font적용시키기 https://mui.com/material-ui/material-icons/?query=search Material Icons - Material UI 2,000+ ready-to-use React Material Icons from the official website. mui.com 빨간체크를 적어줘야하는데 현재 mui로 설치안해저고 material로 설..

데이터바인딩 데이터를 중괄호에 데이터이름을 넣어사용 서버에서 데이터가져와서 html사이에 중괄호 안에 넣어줄때 사용 function App() { let post = '안녕하세요'; retrun ( {post} ); } export default App; let으로 변수이름을 post로 '안녕하세요' 라고 작성해주어 아래html에 h2태그안에 {} 중괄호 안에 post를 작성해주어 데이팅바인딩을 해주었다 h2태그로 post 안녕하세요 가 출력되어진다

파싱(Parsing) 문서나 HTML 등 큰자료에서 원하는 정보만 가공하고 추출해서 가져오고싶을때 불러올수있게한다 파싱을 수행하는 프로그램을 파서(Parser)라고한다

package.json 안에 "react" : "^18.1.0", "react-dom" : "^18.1.0", 를 직접 수정하고 파일저장하고 터미널에서 npm install을 해준다

터미널에 $ npm create react-app react-event npm으로도 설치가능하다 $ npx create-react-app 폴더명 입력해주면 react가 설치가되어진다 npx - 라이브러리 설치도와주는 명령어(node.js설치 되어야 이용가능) create-react-app 라이브러리이름 리액트 셋팅이 다된 boilerplate 만들기 쉽게 도와주는 라이브러리 설치다 되었으면 $ cd 폴더명 $ npm start 설치한 폴더명들어가기 코드작성되어있는 것을 화면에 띄우기 이렇게 첫화면이 나온다 src > app.js 가 메인페이지가 된다 react는 jsx문법을 사용해줘서 html의 class 가 jsx는 className으로 작성해줘야한다 app.js 에 작성해줬다 function app ..

nodemon으로 인해 js를 수정해줄때 ctrl + c로 서버종료하고 다시 node 실행할js를 반복해주지않고 수정된것을 바로바로 변경해준다 $ npm i nodemon -g nodemon을 설치해준다 -g를 붙여 글로벌로 설치한다 $ nodemon 실행할.js nodemon을 적어주고 실행할.js를 적어주면 된다 꼭 js를 적어주지않아도상관없다 한번 위에 것을 만들어주고 ctrl+s를 해주니 아래의 터미널에서 멜론색의 nodemon 이 두개가 나오고 아래 서버주소가 나오게된다 서버주소를 ctrl 누르고 왼쪽마우스를 누르니 사이트가나온다 위실행한코드들 // express 모듈을 사용 const express = require("express"); // 서버 생성 const app = express();..

서버기본문법 express const express = require("express"); const app = express(); app.get('/',(req, res) => { //화면에 아래의 html태그를 출력 response.send("Hello express"); }); app.listen(8080, () => { //서버가 열리자마자 실행되는 console.log()내용 console.log("Server running at http://127.0.0.1:8080"); }); const express = require("express"); express 모듈을 사용 mode에서 모듈을 가져올때 require로 가져온다 설치한 express라이브러리 가져오기 서버생성 const app = e..