쿼리 작성하기

mysql -u root -p //mysql실행하기


//database 생성
create database USERS  DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;


// database 사용하기
use  USERS;


// table 만들기
CREATE TABLE users
( 
  id INT(11) NOT NULL AUTO_INCREMENT,
  name VARCHAR(45) NOT NULL,
  email  VARCHAR(45)  NOT NULL,
  pw VARCHAR(20) NOT NULL,
  CONSTRAINT email_pk PRIMARY KEY (id)
);


// all : 전체 데이터 출력 방법
SELECT * FROM users;


// data 넣기! (create)
INSERT INTO users(email ,name,pw)VALUES('a@naver.com','a', 'a1234');	//1
INSERT INTO users(email ,name,pw)VALUES('b@naver.com','b', 'b1234');	//2



// update
UPDATE  users SET email='update@naver.com', name='update', pw='up1234'  WHERE id=1;


// delete
DELETE FROM users WHERE id=3;


// read detail
SELECT * FROM users  WHERE id=4;


//database안의 table들 보기
show tables;

// table 형태 보기
desc users;


//database 삭제
drop database USERS;

 

 

Node EXPRESS에서 MySQL사용하기

npm install mysql --save 로 node.js에 mysql설치하기

 

js파일에 mysql을 넣어줍니다.

var mysql = require('mysql')

 

그다음 express와 mysql을 연동해야합니다.

express공식 홈페이지에 DB별로 연동 방법이 자세히 설명되어 있습니다.

http://expressjs.com/en/guide/database-integration.html#mysql

 

js파일에 다음 코드를 추가합니다.

//접속정보 
const connection = mysql.createConnection({
    host:"localhost",
    user: "root",
    password: "chrin^^1015",
    port: 3306,
    database: "USER"
});


//connection관련 객체 정보
connection.connect();

 

저장후,

nodemon을 실행시키면 노드와 mysql이 잘 연동되어 실행되는 것을 확인할 수 있습니다.

 

발생했던 오류

ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

 

MySQL Workbench를 실행한다.

 

ALTER USER 'root'@'localhost' INDENTIFIED WITH mysql_native_password BY 'password'

flush privileges;

'WEB > Node Express' 카테고리의 다른 글

[MySQL] cmd에서 실행하기/환경설정  (0) 2020.05.20

MySQL을 처음 설치하고 최상위 계정으로 접속하려고 시도한다면, 다음과 같이 오류가 발생합니다.

경로(path)를 설정해주지 않았기 때문에  실행할 프로그램을 찾지 못했다는 오류입니다.

 

path를 찾아봅시다.

MySQL이 설치되어 있는 폴더에 가서 MySQL Server > bin폴더까지 들어가 줍니다.

경로를 복사하고,

제어판 - 속성 - 고급시스템 설정

또는

window key + PauseBreak - 고급시스템설정 으로 들어갑니다.

 

고급 - 환경변수 - 시스템변수의 PATH변수 클릭 - 편집 -  새로만들기 - 경로 붙여넣기

 

위의 순서대로 따라하면 된다.

 

cmd 창으로 가서

mysqp -u root -p 명령어를 입력한 뒤,

password입력란이 뜨면 환경변수 설정 완료이다!!

 

 

'WEB > Node Express' 카테고리의 다른 글

[MySQL] 간단하게 CRUD / node연동  (0) 2020.05.20

부스터 2기 수료를 했다!!!!

부스터를 계기로 블로그 관리를 시작할 수 있었고, 또 좋은 강의도 수강할 수 있었다.

블로그를 관리하는게 쉬운일은 아닌것을 깨달았다ㅜㅜㅜ

그래도 기록만이 남는 것이니 열심히 블로그 관리를 하도록 노력해보겠다!!!!

'WEB > BoostCourse' 카테고리의 다른 글

[부스트코스]2_4 redirect & forward  (0) 2020.03.27
[부스트코스]2_3 JSP  (0) 2020.03.20
[부스트코스]2_2 WEB UI 개발  (0) 2020.03.12
[부스트코스]2_1JavaScript  (0) 2020.03.11
[부스트코스]Servlet 이란?  (0) 2020.03.06

1. redirect

- 리다이렉트는 http프로토콜로 정해진 규칙

- 서버는 클라이언트로부터 요청을 받은 후, 클라이언트에게 특정 URL로 이동하라고 요청할 수 있다. = redirect

- 서버에서는 클라이언트에게 응답으로 상태코드를 302와 함께 이동할 URL정보를 lacation header에 담아 전송. 클라이언트는 서버로 부터 받은 상태값이 302이면 location헤더 값으로 재요청을 보내게 된다.

- 서블릿이나 jsp는 redirect하기 위해서 HttpServletResponse가 가지고 있는 sendRedirect() 메소드를 사용

 

2. forward

  1. 웹 브라우저에서 Servlet1에게 요청을 보냄
  2. Servlet1은 요청을 처리한 후, 그 결과를 HttpServletRequest에 저장
  3. Servlet1은 결과가 저장된 HttpServletRequest와 응답을 위한 HttpServletResponse를 같은 웹 어플리케이션 안에 있는 Servlet2에게 전송(forward)
  4. Servlet2는 Servlet1으로 부터 받은 HttpServletRequest와 HttpServletResponse를 이용하여 요청을 처리한 후 웹 브라우저에게 결과를 전송

redirect와의 차이점

redirect는 클라이언트가 요청하면 서버에서 처리하고 url바뀌어서 다시 클라이언트에게 전송

forward는 요청을 서버에서 처리하고 또다른 서버로 한번 더 넘겨서 일 처리. url바뀌지 않음

 

 

'WEB > BoostCourse' 카테고리의 다른 글

부스트코스 서포터즈 2기 수료!  (0) 2020.04.02
[부스트코스]2_3 JSP  (0) 2020.03.20
[부스트코스]2_2 WEB UI 개발  (0) 2020.03.12
[부스트코스]2_1JavaScript  (0) 2020.03.11
[부스트코스]Servlet 이란?  (0) 2020.03.06

1. JSP란??

실습으로 JSP에 대해  알아보겠습니다.

eclipse를 켜셔 firstweb에 jsp실습을 해보겠습니다.

jsp파일을 만들면 다음과 같은 창이 뜹니다. html과 비슷하게 생겼습니다.

 

다음과 같이 코딩해 봅시다.

JSP는 약속 된 몇가지의 기호를 가지고 있습니다. 이 기호가 무었인가에 따라서 JSP파일이 servlet으로 바뀔때, 어떻게 바뀔지 결정됩니다.

 

JSP는 JSP자체가 동작하는게 아니라 모두 servlet으로 바뀌어서 동작합니다.

 

line10~15까지의 코드는 servelt으로 바뀔때 어떻게 바뀔까요??>>

<% %>만 제외하고 java코드 그대로 들어갑니다.

 

그럼 line17은 어떻게 바뀔까요??>>

<%=total %>이 부분은 out.print(total)이렇게 바뀝니다.

 

Run한 결과입니다.

 

JSP는 Java Server Page의 약자입니다. 위에서 JSP는 모두 serlet으로 바뀌어서 동작한다고 했습니다.

그럼 굳이 왜 JSP를 사용할까요? 

JSP와 servlet의 하는일은 동일하지만, 서블릿은 HTML이 자바 코드 내에 있어서 작성과 읽기가 굉장히 효율성이 떨어집니다. 그러나 JSP는 반대로 HTML안에 자바코드가 들어있어서 코드의 작성 효율과 가시성이 뛰어납니다. 

 

 

'WEB > BoostCourse' 카테고리의 다른 글

부스트코스 서포터즈 2기 수료!  (0) 2020.04.02
[부스트코스]2_4 redirect & forward  (0) 2020.03.27
[부스트코스]2_2 WEB UI 개발  (0) 2020.03.12
[부스트코스]2_1JavaScript  (0) 2020.03.11
[부스트코스]Servlet 이란?  (0) 2020.03.06

1. window 객체(setTimeout)

window라는 객체가 있습니다. window에는 많은 메서드들이 존재하며, 

  • window.setTimeout()
  • setTimeout()

위와같이 사용할 수 있습니다. window는 디폴트의 개념임으로 생략할 수 있습니다.

 

setTimeout 활용

setTimeout은 낯설게 동작합니다. 

이 코드를 실행해 보면, 2초후에 콘솔창에 msg가 출력됩니다.

 

이런식으로 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백(callback)함수라고 합니다.

callback함수는 보통 함수 호출즉시 실행되지 않고, 나중에 필요한 시점에 실행되거나, 실행이 안 될 수도 있습니다.

 

*자바스크립트는 함수를 인자로 받을 수 있고, 함수를 반활할 수도 있는 특징이 있습니다.

그렇다면, 이 코드를 실행시키면 어떤 순서로 출력될까요?????

run end가 출력되고 2초후에 msg가 출력되는 것을 확인할 수 있습니다.

이를 통해 setTimeout함수는 비동기(astnchronous)로 실행되어서, 동기적인 다른 실행이 끝난 후에 실행된다는 것을 알 수 있습니다.

그렇다면 이 두 코드의 실행 결과는 어떻게 될까요???

 

 

 

 

 

 

 

 

 

 

2. DOM과 querySelector

우리가 받은 이메일의 개수가 증가하는 것을 바로 화면에서 볼 수 있고, 댓글을 입력할 때 댓글이 바로 화면에 추가되는 것을 볼 수 있죠??

새로운 html파일을 불러온 것도 아닌데 어떻게 이게 가능할까요??

자바스크립트는 html내의 구조를 변경시킬 수 있습니다.

먼저 DOM을 이해하면 됩니다!!

 

DOM

브라우저에서는 HTML코드를 DOM이라는 객체 형태의 모델로 저장합니다. 그렇게 저장된 정보를 DOM Tree라고 합니다. (저번 포스팅 참고!!)

결국, HTML element는 Tree형태로 저장됩니다.

브라우저는 자바스크립트에서 HTML 요소를 쉽게 찾고, 가져올 수 있게하기 위해 다양한 DOM API를 제공하고 있습니다.

 

예시로 getElementById()를 들수 있습니다. id를 통해서 element를 찾는 메서드입니다.

또한, querySelector()메서드도 있습니다.

querySelector에서 파라미터는 css Selector문법을 사용합니다.

 

3) Browser Event, Event object, Event handler

우리가 웹사이트의 어떤 영역을 마우스 클릭하거나, 화면 스크롤 등의 작업을 하느냐에 따라 브라우저는 반응합니다.

이런 것들은 모두 브라우저가 Event기반으로 동작되게 만들어졌기 때문입니다.

 

Event

브라우저엔 많은 이벤트가 있습니다. 브라우저 화면의 크기를 조절하기, 마우스 클릭, 스크롤등을 할때에도 이벤트가 발생합니다. 

이벤트는 브라우저가 발생시켜줍니다. 우리는 이벤트 발생이 되었을때 어떤 일을 하라고 등록하면 됩니다.

이를 자바스크립트로 구현할 수 있습니다.

 

이벤트 등록

이벤트 등록은 addEventListener함수를 사용하는 방법이 표준입니다.

querySelector로 선택한 element의 값에 클릭 이벤트가 일어났을때!! function을 실행해라 라는 코드입니다.

 

addEventListener함수의 두번째 인자에 있는 함수. 즉, 이벤트 발생시 실행되는 함수를 Event Handler 또는 Event Listner이라고 합니다.

 

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해, 리스너 함수에 전달합니다.

이벤트 객체를 활용해서 추가적인 작업을 할 수 있게됩니다.

 

가장 많이 쓰이는 것을 event.target입니다. 이는 이벤트가 발생한 element를 가리킵니다.

element도 객체이므로 안에 nodeName이나 classname같은 속성을 확인할 수 있습니다.!!!!

 

4. Ajax통신의 이해

Ajax가 뭘까요???

Ajax는 비동기적으로 서버로부터 데이터를 가져오는 통신을 일컫습니다. 이게 무슨말냐고요??

저도 이해하는데 조금 시간이 걸렸어요ㅠㅠ

 

예를 하나 들어보겠습니다. 

만약 쇼핑몰 사이트에서 카테고리 정보를 클릭한다고 가정해봅시다.

상의 카테고리를 클릭할 때는 상의 정보에 해당하는 데이터들을 불러와서 페이지를 보여주어야 합니다. 

다음으로 하의 카테고리를 클릭하면 다시 새로운 컨텐츠를 담은 페이지를 보여주어야 합니다.

이때마다 브라우저가 새로운 html파일을 보여준다면 로딩속도나 여러가지 측면에서 비효율적입니다. 카테고리를 바꿀때 마다 새로고침을 하는 셈이니까요!

 

새로고침 없이 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 훨씬 효율적이지 않을까요? 

이 대표적인 기술이 Ajax입니다.

 

그렇다면, Ajax를 사용할 때, 클라이언트와 서버간의 데이터는 어떤 형식일까요??

JSON(JavaScript Object Notation)포멧을 사용합니다. 

Json은 데이터를 딕셔너리 형태로 저장하는 포멧입니다.

제가 얼마전 Django 프로젝트를 진행할 때 사용한 Json의 일부입니다. 

key와 value로 이루어진 데이터 표현 형식입니다.

 

Ajax 실행코드

 

5. 자바스크립트 디버깅

자바스크립트는 실행(runtime) 과정에서 버그가 발생합니다. 그래서 브라우저에서 디버깅을 합니다.

 

디버깅 컨트롤

  • Pause, Continue : 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 됩니다. 다른 브레이크포인트가 잡힐 때까지 코드를 진행합니다.
  • Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로는 진입하지 않습니다. 즉 라인의 함수를 실행만 하게 됩니다.
  • Step into next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있습니다.
  • Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아갑니다.
  • Active/Deactive breakpoint : 브레이크포인트를 끄거나 켤 수 있습니다.
  • Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아줍니다.

 

+ Recent posts