[무작정 따라하기 #3] 컴포넌트
Step-by-step Guide for beginner
Step1. 컴포넌트 만들기
Step2. 컴포넌트 사용하기
63빌딩을 만들때 한층 한층 63개를 만들어서 쌓아올리면 쉽게 만들수 있지 않을까? 웹앱을 만들때도 구성요소별로 만든다음 쌓아올리기가 가능하다. 이 기능을 컴포넌트라고 한다.
컴포넌트를 쌓아서 빌딩을 완성하고 싶다고 치자. 59층의 바깥쪽 창문 LED색깔을 빨강에서 핑크로 바꾸고 싶다. 직접올라갈것인가? 밖에서 바라보며 바꾸면 편하지 않을까? 이때 사용하는 기능이 props이다.
또는 날씨에 따라 (비오는날 눈오는날) 63빌딩의 1층부터 63층 까지 모두 다른 색깔의 LED를 켜고 싶다. 이때는 state란 기능을 써서 해결할 수 있다. 일단 컴포넌트
Step #1: 컴포넌트 만들기
1) client폴더아래 component라는 폴더를 만든다.
2) Head.js, Intro.js라는 파일을 만든다.
Step #2: 컴포넌트 사용하기
1) import를 사용하여 우리가 만든 컴포넌트를 가져온다.
2) 아래 처럼 <Head></Head>, <Intro></Intro> 단 네 단어만 써보자. 그러면 우리가 앞서 힘들게 만든 63빌딩의 한층 한층을 보여준다.
[무작정 따라하기 #4] 데이터베이스
Step-by-step Guide for beginner
Step1. Nodemon설치
Step2. SQL 연결하기
Step3: 데이터베이스, 테이블, 데이터 생성
Step4: Node.js에 SQL 모듈 설치 및 설정
Step #1: nodemon 설치 및 실행하기
1) server폴더로 가서 아래 커맨드를 실행해서 nodemon을 설치한다!
npm install nodemon
2) nodemon을 사용해서 서버 실행
예전에는 아래 커맨드로 서버를 시작했다. 이제는 그 밑에 커멘드를 사용해서 매번 코드가 바뀔때마다 서버를 껐다 키지 않아도 된다!
nodemon index.js
Step #2: SQL 연결하기
1) 아래 커멘드로 mysql이 설치된 bin폴더로 이동한다.
cd /usr/local/mysql/bin/
2) 이동한후 아래 커맨드를 실행한다.
./mysql -uroot -p
3) 비밀번호를 입력후 mysql데이터베이스에 접속하자!
Step #3: 데이터베이스, 테이블, 데이터 생성
1) 데이터베이스 생성하자 (데이터베이스명 : 아무거나, 저는 project4로 하겠습니다)
create database project4;
show databases;
2) 데이터베이스를 선택한다.
use project4;
3) 테이블을 만들자. 아래 코드를 커맨드에 복붙하면 테이블이 만들어진다
- 테이블 명 : company
Step #4: Node.js에 SQL 모듈 설치 및 설정
1) server폴더로 가서 아래 커맨드를 실행해서 sql 모듈을 설치한다!
npm install mysql
2) 모듈 불러오기
const mysql = require('mysql')
3) db라는 변수에 연결 정보 입력하기
const db = mysql.createConnection({
host : 'localhost', user : 'root', password : '비밀번호', database : '데이터베이스명'
})
[무작정 따라하기 #5] 데이터 넣고 가져오기
Step-by-step Guide for beginner
Step1. 데이터 넣기
Step2. 데이터 넣은거 확인하기
Step3: 데이터베이스의 값들 가져오기 (Server상에서 가져오기)
Step4: Client 상에서 가져오기 (경로 : Client!!!)
Step #1: 데이터 넣기
1) 아래 코드를 index.js에 넣어주자~
2) 웹사이트에서 새로고침눌러주면 데이터베이스에 위 데이터가 들어간다.
Step #2: 데이터 넣은거 확인하기
1) 데이터가 잘 들어간걸 볼수있다.
mysql 에서 select * from company로 확인하자.
Step #3: 데이터베이스의 값들 가져오기 (Server상에서 가져오기)
- 아래 코드를 넣는다.
- 그러면 웹사이트에서 우리 데이터베이스의 데이터를 가져온다.
Step #4: Client 상에서 가져오기 (경로 : Client!!!)
1) client경로에서 axios 모듈을 설치한다
npm install axios
2) useState, useEffect
3) 서버에서 3001보낸거 리액트로 가져오기
- 이렇게 하니 에러가 뜬다. 컴포넌트로 하지말라는거다.
- function App()으로 바꿔주자
4) 확인
- 데이터가 넘어갔다!
'Excel, Python, 리액트' 카테고리의 다른 글
| [리액트, Node.js, SQL, CRUD] 처음부터 끝까지 기초만 한번 훑어보자! #2 (Feat. 생활코딩) (0) | 2021.01.07 |
|---|---|
| [리액트, Node.js, SQL, CRUD] 처음부터 끝까지 기초만 한번 훑어보자! #1 (Feat. 생활코딩) (0) | 2021.01.06 |
| [Node.js & React] - 무작정 따라하기 #1 (리액트, 서버, SQL, 데이터 주고 받기) (2) | 2020.10.29 |
| [웹사이트 만들기] 부트스트랩(Bootstrap) - Lesson #1 (2) | 2020.07.07 |
| 엑셀 활용 예제2 - VLOOKUP 사용법 (0) | 2020.07.01 |