🐨 MySQL 설치
CUSTOM으로 Server랑 Workbench만 다운로드!
비밀번호 설정만 잘 해주고 (안까먹어야 함) 다른 설정 필요없이 완료하면 된다.
📌 환경변수 설정
✔️ 환경변수 설정 전
환경변수 설정 참고한 링크
https://dog-developers.tistory.com/21
이상한 거 바꾸지 않도록 ^^... 꼭 참고해서 설정하도록 하자... CLASSPATH를 바꿔서 머리가 하얘질 뻔... 내가 대체 뭘 건드린 것인가... 흫극
✔️ 환경변수 설정 후
mysql -u root -p
🐨 라이브러리 설치
폴더 생성 후 경로 이동(상대 경로) cmd창에서도 가능(더 추천)
✔️ npm init
전부 기본값으로 설정 (npm init -y로 엔터 없이 바로 설정 가능)
✔️ 결과! package.json 파일 생성 확인
✔️ npm install express 라이브러리 설치
➡️ 새 폴더 파일이 생성되고 의존성이 주입된 것을 확인할 수 있다.
✔️ npm install ejs 라이브러리 설치
✔️ npm install - package.json 안에 있는 의존성 모듈을 자동으로 설치해준다! (없어도 자동으로 설치해주는 건가봄! 협업할 때 다른 로컬 호스트에서 바로바로 다운받고 작업하기 편한듯!)
🐨 서버 오픈
콘솔 로그에 잘 뜹니다!!
✔️ api 생성
이전 서버 안 껐으니까 ctrl+c로 서버 종료해준 담에 다시 시작해준다 그러면 똑같이 server start가 콘솔 창에 뜨고
만들어둔 api(localhost:3000)로 들어가보면
Hello World!!! 띄우기 성공~
✔️ 두 번째 api, post 방식으로 서버 오픈
second는 잘 나오지만
➡️ get 방식은 주소창에 입력해서 잘 나오지만
third는 나오지 않는다
➡️ post방식은 주소창에 검색해서 나오지 않는다
(get으로 바꾸면 잘 나옴)
📍 npm install nodemon -g: 서버 자동 재시작
➡️restarting due to changes...
📍 npm start하면 nodemon 시작
✔️ 뷰 파일 기본 경로 설정
일단 코드 작성
폴더가 없네?! 그렇다면 폴더를 만들어주면 됨 ㅎㅎ 그 다음 간단한 html 파일 생성
main.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
> <body>
<h1>Main Page</h1>
<p>main page입니다.</p>
<p>로그인 부분</p>
</body>
</html>✔️ render 함수로 응답
경로가 다른데 어떻게?!
→ 뷰 파일들 기본 설정을 해두었기 때문에! 기본 경로가 'views'라는 폴더에 존재한다라고 설정을 했기 때문에 render할 때 자동으로 views라는 경로에서 파일을 찾는다
→ .ejs도 이미 엔진을 지정해뒀기 때문에 확장자 빼도 응답을 잘 받음
✔️ 하이퍼링크 생성
main.ejs 수정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- script 태그는 JavaScript를 사용하는 태그 -->
<script>
function third() {
location.href = '/third';
}
</script>
</head>
<body>
<h1>Main Page</h1>
<p>main page입니다.</p>
<p>로그인 부분</p>
<!-- 하이퍼링크 생성 -->
<!-- 절대 경로 하이퍼링크 -->
<a href="http://www.google.com"> Google</a>
<!-- 상대 경로 하이퍼링크 -->
<a href="/second">Second Page</a>
<!-- JavaScript를 이용하여 페이지 이동 -->
<button onclick="third()">Third Page</button>
</body>
</html>
클릭하면 경로 이동 잘 되는 것을 확인~
함수
→ 행동! 크게 보면 얘도 변수인데 단순히 데이터를 저장하는 것이 아니라 어떤 '행동'을 하겠다고 지정한 것 (행동에 대한 이름을 붙여둔 것)
매개변수와 인자
→ 매개변수: 파라미터
→ 인자: 함수를 호출할 때 해당하는 매개변수에 뭘 넣어주는 거?
근데 걍 혼용해서 씀 굳이 나눠서 얘기할 필요는 없음 하지만 개념은 알고 있어야 함... 뭐 암튼 함수, 매개변수, 인자 다 데이터 덩어리다~
✔️ data 전송
data.ejs 파일 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- form 태그
➡️유저가 입력한 값을 서버에게 보내준다
action - 주소값, method - 방식
-->
<form action="/data" method="get">
<input type="text" /> <br />
<input type="password" /> <br />
<!-- 데이터의 입력이 끝나면 제출 -->
<input type="submit" />
</form>
</body>
</html>➡️ 이 상태에서는 name속성 (key값)이 없어서 데이터를 보낼 수 없다! (보내지지 않음)
list와 json의 차이?
✔️ 공통점 - 여러 데이터를 하나의 변수에 담아놓는다!
✔️ 차이점
왜 웹에서는 json의 형태를 쓸까! ➡️ 순서 때문에! json은 앞에 key값이 있어서 순서가 다르게 변형이 되더라도 데이터를 가지고 오는데 지장이 없다! (key, value 형태로 데이터를 분류해놨기 때문에)
✔️ 데이터 화면에 띄우기
json 형태로 데이터를 브라우저에 띄워주고
콘솔에도 잘 찍혀있음
✔️ post 방식
data.ejs 파일
<h1>post 방식으로 데이터를 보내기</h1>
<form action="/data2" method="post">
<input type="text" name="_id" /> <br />
<input type="password" name="_pass" /> <br />
<input type="submit" />
</form>
결과창!
콘솔에도 잘 찍힘!
✔️ 화면과 데이터를 한 번에 보내기
index.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>로그인 상태 : ( <%=data%> )</p>
</body>
</html><%= %> 얘는 주석 안에서도 실행이 되니까 주의! 이게 있으면 주석이어도 그냥 javascript로 인식해버려서 에러가 뜬다.
올바르게 입력했을 경우
올바르게 입력하지 않았을 경우
🐨 나머지 수업
✔️ 리스트/json 형태의 데이터 보기
/*
DB에서 서버에게 데이터를 보내는 형태
result = [
{
id : 'test',
pass : '1234',
name : 'moon',
phone : '01011112222'
},
{
id : 'test2',
pass : '1111',
name : 'kim',
phone : '01099998888'
}, ....
]
➡️ list 안의 json 형태 (대괄호!를 확인)
✔️ kim 이라는 단어만 추출하려면
1. 대괄호 없애기
result[1] = {
id : 'test2',
pass : '1111',
name : 'kim',
phone : '01099998888'
}
2. 원하는 값 추출! (. 혹은 [인덱스번호][key값]으로 호출)
result[1].name or result[1]['name'] = 'kim'
*/
✔️ 해올 것 - 가나슈 설치
https://trufflesuite.com/ganache/
상당히 먹음직스러워 보이는 사이트...
스마트 컨트랙트 실행할 때 가장 처음 작업하는 공간! 블록 생성!
QUICKSTART 누르면 바아로 워크스페이스 생성
npm install truffle -g
근데 존나개구린 와이파이로 인하여 다운로드 개느려서 뭐 더 진행은 못 함. 집에서 설치를 해와야겠다.
컴파일 하면서 데이터가 만들어지는 과정... 을 보여주심. 굿... 다음에 더 잘 가르쳐주시길...
