반응형
---------------------------------------------------------1교시----------------------------------------------------
교실을 바꿔서 다시
1. mysql, node.js, JS 설치
2. JS terminal 에서는
npm init
npm install express
npm install nunjucks chokidar
npm install body-parser
npm install mysql
npm install dotenv
3. mysql prompt 창에서는 source +path;
---------------------------------------------------------2교시----------------------------------------------------
앞으로의 3주간의 계획 :
1. 게시판 여태공부한거 100% 알아야함 -> 코드가 함축됨
2. 서버를 분산시키는 라우터를 사용할거임
우리가 그동한한 express, nunjucks 는 이정도만 알고 있어도 되고
express= event기반 서버처리하는 걸 위반 (?) 하는거래
앞으로는 ajax 를 배울꺼래
ajax (비동기)
또 무엇일까..
JavaScript 문법
-> 이번에 한 게시판은 1시간 이내로 컷할 수 있게 외우기
mvc 패턴이란?
하나의 기능을 쪼개서 만드는거 -> 이게 객체 지향
MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다. (출처-위키피디아) 뭐 간단히 정리하면 프로그램을 구성하는 요소들을 데이터, 화..2017. 3. 25.
model db를 변수에 담는거
View nunjucks (html page)
Controller data의 가공
요로코롬 생각하는 것이 객체 지향이다......
쉽게 말하면 파일쪼개기
이제 파일 쪼개는걸 터득해야 코드가 예뻐짐.
* 교수님의 js
throw 가 있다. 뭐징?? 찾아보기
js 를 분산시켰다. routes 폴더 - board 폴더 - js files
-> 예제 코드는 github에서 확인해보기
github.com/ingoo-code/nodejs_board/tree/master
ingoo-code/nodejs_board
nodejs 학습하기. Contribute to ingoo-code/nodejs_board development by creating an account on GitHub.
github.com
오늘 할 거
1. 파일쪼개기
2. 비동기
3. 우리가 만든 board를 여러번 만들것이야
ex) to do list 도 만들어보기 with router
router 사용하면 ajax 까지 사용하기
그 이후(3주이후)에는 팀 프로젝트 (서버, html, css 다 있어서)
하면node.js 거의 다 마스터! 대신 훈련하는 시간을 많이 투자해야함
---------------------------------------------------게시판 review --------------------------------------------
point 1. connection 요렇게 하는 사람도 있음.
let connection = mysql.createConnection({
host:process.env.DB_HOST,
user:process.env.DB_USER,
password:process.env.DB_PASSWORD,
database:process.env.DB_DATABASE,
})
connection.connect(); //server 시작되자마자 db 접속됨.
//connection.connect(); 요거 없다면 위의 connection 이 오류나도 port 연결 잘 됨 (아직 실행이 안된거라)
point 2. 오류 메세지 나오면 꼼꼼히 읽어보기
point 3 get & post -> method 로 표현
app = express
express.method([uri], function(){})
(uri, 콜백함수)
바로 사용하기 위해 익명함수를 씀
콜백함수 개념 찾아보기 - 라우터 배울 때 콜백 개념 인지해야함.
콜백함수의
1인자 - 요청
요청은 - client 가 주는 아이다.
요청 (req 변수를 뜻함)
2인자 - 응답
응답 (res변수를 뜻함)
응답은 server -> client 주는 거
console.log(req,res) 찍어보면 내용이 엄청 많아. 객체형태로 .... 이 data를 json 객체 형태로 담고 있는 상태 req를 사용할 때 많이 사용한 객체 내용
-> query 다.
결론 : req내용은 객체로 준다. 내용 많다.
console.log(req)결과
[
RowDataPacket {
idx: 2,
subject: '제목이다',
writer: '글쓴이',
content: '어후 힘들어,,,',
motoday: null,
today: 2021-04-26T00:30:39.000Z,
hit: 0
}
]
3
[
RowDataPacket {
idx: 3,
subject: '얏호',
writer: '됐다. ',
content: 'ㅠㅠ',
motoday: null,
today: 2021-04-26T00:30:46.000Z,
hit: 0
}
]
4
[
RowDataPacket {
idx: 4,
subject: '월욜 아침이다.',
writer: '졸리다',
content: 'ㅠㅠ',
motoday: null,
today: 2021-04-26T00:31:00.000Z,
hit: 0
}
]
1
[
RowDataPacket {
idx: 1,
subject: '주제',
writer: '작성자',
content: '내용',
motoday: 2021-04-26T00:29:42.000Z,
today: 2021-04-26T00:29:42.000Z,
hit: 0
}
]
[
RowDataPacket {
idx: 1,
subject: '주제',
writer: '작성자',
content: '내용',
motoday: 2021-04-26T00:29:42.000Z,
today: 2021-04-26T00:29:42.000Z,
hit: 1
}
]
[Object: null prototype] {
idx: '1',
subject: '공지사항입니다.',
writer: '주인장',
content: '구라입니다.'
}
OkPacket {
fieldCount: 0,
affectedRows: 1,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '(Rows matched: 1 Changed: 1 Warnings: 0',
protocol41: true,
changedRows: 1
}
5
[
RowDataPacket {
idx: 5,
subject: '또 공지사항입니다.',
writer: '그만',
content: '그만~~~~~~~',
motoday: null,
today: 2021-04-26T00:31:55.000Z,
hit: 0
}
]
7
[
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '....',
motoday: null,
today: 2021-04-26T00:32:29.000Z,
hit: 0
}
]
7
[
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '....',
motoday: null,
today: 2021-04-26T00:32:29.000Z,
hit: 1
}
]
7
[
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '....',
motoday: null,
today: 2021-04-26T00:32:29.000Z,
hit: 2
}
]
7
[
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '....',
motoday: null,
today: 2021-04-26T00:32:29.000Z,
hit: 3
}
]
6
[
RowDataPacket {
idx: 6,
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: 'ㅠㅠ',
motoday: null,
today: 2021-04-26T00:32:17.000Z,
hit: 0
}
]
[
RowDataPacket {
idx: 6,
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: 'ㅠㅠ',
motoday: null,
today: 2021-04-26T00:32:17.000Z,
hit: 1
}
]
[Object: null prototype] {
idx: '6',
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: '수정이닷 '
}
OkPacket {
fieldCount: 0,
affectedRows: 1,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '(Rows matched: 1 Changed: 1 Warnings: 0',
protocol41: true,
changedRows: 1
}
7
[
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '....',
motoday: null,
today: 2021-04-26T00:32:29.000Z,
hit: 4
}
]
[
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '....',
motoday: null,
today: 2021-04-26T00:32:29.000Z,
hit: 5
}
]
[Object: null prototype] {
idx: '7',
subject: '졸립니다.',
writer: '졸리다',
content: '졸리다규'
OkPacket {
fieldCount: 0,
affectedRows: 1,
insertId: 0,
serverStatus: 2,
warningCount: 0,
message: '(Rows matched: 1 Changed: 1 Warnings: 0',
protocol41: true,
changedRows: 1
}
PS C:\Users\KGA_02\Documents\example> node server.js
server start port : 3000
<ref *2> IncomingMessage {
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: null,
ended: true,
endEmitted: false,
reading: false,
constructed: true,
sync: true,
needReadable: false,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: true,
autoDestroy: true,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: true,
decoder: null,
encoding: null,
[Symbol(kPaused)]: null
},
_events: [Object: null prototype] { end: [Function: clearRequestTimeout] },
_eventsCount: 1,
_maxListeners: undefined,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: true,
ended: false,
endEmitted: false,
reading: true,
constructed: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: false,
autoDestroy: true,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: false,
decoder: null,
encoding: null,
[Symbol(kPaused)]: false
},
_events: [Object: null prototype] {
end: [Array],
timeout: [Function: socketOnTimeout],
data: [Function: bound socketOnData],
error: [Function: socketOnError],
close: [Array],
drain: [Function: bound socketOnDrain],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_eventsCount: 8,
_maxListeners: undefined,
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: false,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: false,
errorEmitted: false,
emitClose: false,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_connections: 2,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
_connectionKey: '6::::3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 9
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_connections: 2,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
_connectionKey: '6::::3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 9
},
parser: HTTPParser {
'0': [Function: bound setRequestTimeout],
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
locals: [Object: null prototype] {},
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
timeout: 0,
[Symbol(async_id_symbol)]: 20,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 5978,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 40,
[Symbol(triggerId)]: 37
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: true,
rawHeaders: [
'Host',
'localhost:3000',
'Connection',
'keep-alive',
'sec-ch-ua',
'" Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"',
'sec-ch-ua-mobile',
'?0',
'Upgrade-Insecure-Requests',
'1',
'User-Agent',
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36',
'Accept',
'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
'Sec-Fetch-Site',
'same-origin',
'Sec-Fetch-Mode',
'navigate',
'Sec-Fetch-User',
'?1',
'Sec-Fetch-Dest',
'document',
'Referer',
'http://localhost:3000/',
'Accept-Encoding',
'gzip, deflate, br',
'Accept-Language',
'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
'If-None-Match',
'W/"1a90-4UJACRsI5uqPyH+nioQes3G551Y"'
],
rawTrailers: [],
aborted: false,
upgrade: false,
url: '/board',
method: 'GET',
statusCode: null,
statusMessage: null,
client: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: true,
ended: false,
endEmitted: false,
reading: true,
constructed: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: false,
autoDestroy: true,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: false,
decoder: null,
encoding: null,
[Symbol(kPaused)]: false
},
_events: [Object: null prototype] {
end: [Array],
timeout: [Function: socketOnTimeout],
data: [Function: bound socketOnData],
error: [Function: socketOnError],
close: [Array],
drain: [Function: bound socketOnDrain],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_eventsCount: 8,
_maxListeners: undefined,
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: false,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: false,
errorEmitted: false,
emitClose: false,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_connections: 2,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
_connectionKey: '6::::3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 9
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_connections: 2,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
_connectionKey: '6::::3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 9
},
parser: HTTPParser {
'0': [Function: bound setRequestTimeout],
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [Circular *2],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: ServerResponse {
_events: [Object: null prototype],
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: [Circular *1],
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
locals: [Object: null prototype] {},
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype]
},
timeout: 0,
[Symbol(async_id_symbol)]: 20,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 5978,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 40,
[Symbol(triggerId)]: 37
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_consuming: false,
_dumped: false,
next: [Function: next],
baseUrl: '',
originalUrl: '/board',
_parsedUrl: Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: null,
pathname: '/board',
path: '/board',
href: '/board',
_raw: '/board'
},
params: {},
query: {},
res: <ref *3> ServerResponse {
_events: [Object: null prototype] { finish: [Function: bound resOnFinish] },
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 8,
_maxListeners: undefined,
_writableState: [WritableState],
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: [Server],
_server: [Server],
parser: [HTTPParser],
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: [Circular *3],
timeout: 0,
[Symbol(async_id_symbol)]: 20,
[Symbol(kHandle)]: [TCP],
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: Timeout {
_idleTimeout: -1,
_idlePrev: null,
_idleNext: null,
_idleStart: 5978,
_onTimeout: null,
_timerArgs: undefined,
_repeat: null,
_destroyed: true,
[Symbol(refed)]: false,
[Symbol(kHasPrimitive)]: false,
[Symbol(asyncId)]: 40,
[Symbol(triggerId)]: 37
},
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: [Circular *2],
_sent100: false,
_expect_continue: false,
locals: [Object: null prototype] {},
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype] { 'x-powered-by': [Array] }
},
body: {},
_parsedOriginalUrl: Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: null,
pathname: '/board',
path: '/board',
href: '/board',
_raw: '/board'
},
route: Route { path: '/board', stack: [ [Layer] ], methods: { get: true } },
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: {
host: 'localhost:3000',
connection: 'keep-alive',
'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"',
'sec-ch-ua-mobile': '?0',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
'sec-fetch-site': 'same-origin',
'sec-fetch-mode': 'navigate',
'sec-fetch-user': '?1',
'sec-fetch-dest': 'document',
referer: 'http://localhost:3000/',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
'if-none-match': 'W/"1a90-4UJACRsI5uqPyH+nioQes3G551Y"'
},
[Symbol(kHeadersCount)]: 30,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0,
[Symbol(RequestTimeout)]: undefined
}
console.log(res) 결과
PS C:\Users\KGA_02\Documents\example> node server.js
server start port : 3000
<ref *2> ServerResponse {
_events: [Object: null prototype] { finish: [Function: bound resOnFinish] },
_eventsCount: 1,
_maxListeners: undefined,
outputData: [],
outputSize: 0,
writable: true,
destroyed: false,
_last: false,
chunkedEncoding: false,
shouldKeepAlive: true,
_defaultKeepAlive: true,
useChunkedEncodingByDefault: true,
sendDate: true,
_removedConnection: false,
_removedContLen: false,
_removedTE: false,
_contentLength: null,
_hasBody: true,
_trailer: '',
finished: false,
_headerSent: false,
_closed: false,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: true,
ended: false,
endEmitted: false,
reading: true,
constructed: true,
sync: false,
needReadable: true,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: false,
autoDestroy: true,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: false,
decoder: null,
encoding: null,
[Symbol(kPaused)]: false
},
_events: [Object: null prototype] {
end: [Array],
timeout: [Function: socketOnTimeout],
data: [Function: bound socketOnData],
error: [Function: socketOnError],
close: [Array],
drain: [Function: bound socketOnDrain],
resume: [Function: onSocketResume],
pause: [Function: onSocketPause]
},
_eventsCount: 8,
_maxListeners: undefined,
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: false,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: true,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: false,
errorEmitted: false,
emitClose: false,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_connections: 2,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
_connectionKey: '6::::3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 9
},
_server: Server {
maxHeaderSize: undefined,
insecureHTTPParser: undefined,
_events: [Object: null prototype],
_eventsCount: 2,
_maxListeners: undefined,
_connections: 2,
_handle: [TCP],
_usingWorkers: false,
_workers: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 0,
keepAliveTimeout: 5000,
maxHeadersCount: null,
headersTimeout: 60000,
requestTimeout: 0,
_connectionKey: '6::::3000',
[Symbol(IncomingMessage)]: [Function: IncomingMessage],
[Symbol(ServerResponse)]: [Function: ServerResponse],
[Symbol(kCapture)]: false,
[Symbol(async_id_symbol)]: 9
},
parser: HTTPParser {
'0': [Function: bound setRequestTimeout],
'1': [Function: parserOnHeaders],
'2': [Function: parserOnHeadersComplete],
'3': [Function: parserOnBody],
'4': [Function: parserOnMessageComplete],
'5': [Function: bound onParserExecute],
'6': [Function: bound onParserTimeout],
_headers: [],
_url: '',
socket: [Circular *1],
incoming: [IncomingMessage],
outgoing: null,
maxHeaderPairs: 2000,
_consumed: true,
onIncoming: [Function: bound parserOnIncoming],
[Symbol(resource_symbol)]: [HTTPServerAsyncResource]
},
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: [Circular *2],
[Symbol(async_id_symbol)]: 20,
[Symbol(kHandle)]: TCP {
reading: true,
onconnection: null,
_consumed: true,
[Symbol(owner_symbol)]: [Circular *1]
},
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_header: null,
_keepAliveTimeout: 5000,
_onPendingData: [Function: bound updateOutgoingData],
req: IncomingMessage {
_readableState: ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: BufferList { head: null, tail: null, length: 0 },
length: 0,
pipes: [],
flowing: null,
ended: true,
endEmitted: false,
reading: false,
constructed: true,
sync: true,
needReadable: false,
emittedReadable: false,
readableListening: false,
resumeScheduled: false,
errorEmitted: false,
emitClose: true,
autoDestroy: true,
destroyed: false,
errored: null,
closed: false,
closeEmitted: false,
defaultEncoding: 'utf8',
awaitDrainWriters: null,
multiAwaitDrain: false,
readingMore: true,
decoder: null,
encoding: null,
[Symbol(kPaused)]: null
},
_events: [Object: null prototype] { end: [Function: clearRequestTimeout] },
_eventsCount: 1,
_maxListeners: undefined,
socket: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 8,
_maxListeners: undefined,
_writableState: [WritableState],
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: [Server],
_server: [Server],
parser: [HTTPParser],
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: [Circular *2],
[Symbol(async_id_symbol)]: 20,
[Symbol(kHandle)]: [TCP],
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
httpVersionMajor: 1,
httpVersionMinor: 1,
httpVersion: '1.1',
complete: true,
rawHeaders: [
'Host',
'localhost:3000',
'Connection',
'keep-alive',
'sec-ch-ua',
'" Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"',
'sec-ch-ua-mobile',
'?0',
'Upgrade-Insecure-Requests',
'1',
'User-Agent',
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36',
'Accept',
'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
'Sec-Fetch-Site',
'none',
'Sec-Fetch-Mode',
'navigate',
'Sec-Fetch-User',
'?1',
'Sec-Fetch-Dest',
'document',
'Accept-Encoding',
'gzip, deflate, br',
'Accept-Language',
'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
'If-None-Match',
'W/"300-Zpi5whRTPhRdLG0tfox9HHzvWGU"'
],
rawTrailers: [],
aborted: false,
upgrade: false,
url: '/',
method: 'GET',
statusCode: null,
statusMessage: null,
client: <ref *1> Socket {
connecting: false,
_hadError: false,
_parent: null,
_host: null,
_readableState: [ReadableState],
_events: [Object: null prototype],
_eventsCount: 8,
_maxListeners: undefined,
_writableState: [WritableState],
allowHalfOpen: true,
_sockname: null,
_pendingData: null,
_pendingEncoding: '',
server: [Server],
_server: [Server],
parser: [HTTPParser],
on: [Function: socketListenerWrap],
addListener: [Function: socketListenerWrap],
prependListener: [Function: socketListenerWrap],
setEncoding: [Function: socketSetEncoding],
_paused: false,
_httpMessage: [Circular *2],
[Symbol(async_id_symbol)]: 20,
[Symbol(kHandle)]: [TCP],
[Symbol(kSetNoDelay)]: false,
[Symbol(lastWriteQueueSize)]: 0,
[Symbol(timeout)]: null,
[Symbol(kBuffer)]: null,
[Symbol(kBufferCb)]: null,
[Symbol(kBufferGen)]: null,
[Symbol(kCapture)]: false,
[Symbol(kBytesRead)]: 0,
[Symbol(kBytesWritten)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_consuming: false,
_dumped: false,
next: [Function: next],
baseUrl: '',
originalUrl: '/',
_parsedUrl: Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: null,
pathname: '/',
path: '/',
href: '/',
_raw: '/'
},
params: {},
query: {},
res: [Circular *2],
body: {},
_parsedOriginalUrl: Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: null,
query: null,
pathname: '/',
path: '/',
href: '/',
_raw: '/'
},
route: Route { path: '/', stack: [Array], methods: [Object] },
[Symbol(kCapture)]: false,
[Symbol(kHeaders)]: {
host: 'localhost:3000',
connection: 'keep-alive',
'sec-ch-ua': '" Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"',
'sec-ch-ua-mobile': '?0',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
'sec-fetch-site': 'none',
'sec-fetch-mode': 'navigate',
'sec-fetch-user': '?1',
'sec-fetch-dest': 'document',
'accept-encoding': 'gzip, deflate, br',
'accept-language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7',
'if-none-match': 'W/"300-Zpi5whRTPhRdLG0tfox9HHzvWGU"'
},
[Symbol(kHeadersCount)]: 28,
[Symbol(kTrailers)]: null,
[Symbol(kTrailersCount)]: 0,
[Symbol(RequestTimeout)]: undefined
},
_sent100: false,
_expect_continue: false,
locals: [Object: null prototype] {},
[Symbol(kCapture)]: false,
[Symbol(kNeedDrain)]: false,
[Symbol(corked)]: 0,
[Symbol(kOutHeaders)]: [Object: null prototype] {
'x-powered-by': [ 'X-Powered-By', 'Express' ]
}
}
객체 추가 설명
* 객체 지향(Object-oriented approach) 프로그래밍
C++,
실제 세계는
나, 핸드폰, 자동차, 다른 사람, 아파트, 등등 등 의 객체로 이루어져있고 상호작용 한다.
객체 지향은 현실 세계를 모델링 하는 것
객체 지향 방법의 최대 목표는 코드의 재사용 (reuse)
객체 지향 사용은 큰 규모의 소프트웨어를 만들 때 유용
--------------------------------------------------배곱하 3교시-----------------------------------------------------
객체를 가져올 수 있는 능력을 길러야함.
// 배열 안에 객체
let 자동차 = [
{name:'아반떼', engine:'v0', handle:'동그라미'},
{name:'소나타', engine:'v1', handle:'세모'},
{name:'그랜저', engine:'v2', handle:'네모'}
]
// ~ 를 가져와바
//배열
console.log(자동차);
console.log(자동차[0]);
console.log(자동차[0].handle);
console.log(자동차[0].handle);
console.log(자동차[0].handle);
//객체 안에 배열을 넣기
// {} 요것 객체는 . 쩜으로 접근
let 자동차 = {
아반떼:['v1', {handle:'동그라미'},'바퀴4개'],
소나타:['v1', {handle:'네모'},'바퀴6개'],
그랜저:['v1', {handle:'세모'},'바퀴8개'],
제네시스:function(){
console.log('aa');
}
}
console.log(자동차);
console.log(자동차.그랜저);
console.log(자동차.그랜저[1]);
console.log(자동차.그랜저[1].handle);
//객체 안에 함수도 들어갈 수 있다.
console.log(자동차.제네시스);
console.log(자동차.제네시스());
point 4. req, res 의 반환값이 object이다. 알 수 있음.
그래서 우리가
req.query.idx
req.body.idx 이렇게 씀
- res.render 아래 부분에서 console.log(results)하면
app.get('/board',(req,res)=>{ //너의 요청이 methos가 get일 때, uri값이 board일 때 아래 함수를 실행해라.
//req 색이 회색 -> 아직 사용이 안된것
//시작하자마자 query문 날리기
//connection - mysql.query() 라는 구문을 사용해서 (sql구문, callbacl함수(error,results)) -> 우리는 익명함수로 대체해서 사용함.
// sql구문에 error 나면 console.log에 나오겠찌
connection.query("select *, date_format(today, '%H:%i %d.%m.%Y') as today, date_format(motoday, '%H:%i %d.%m.%Y') as motoday, @idx:=@idx+1 as idx2 from board, (select @idx:=0)A", (error,results)=>{
if(error){ //객체가 있으면 나오고 없으면 안나온다.
console.log(error);
}else{
res.render('board.html',{ //template을 사용한 nunjucks인 html board를 가져와서 화면에 뿌림
board_db:results, // results는 Array 였다. console.log(results)찍으면
//
})
}
})
})
요렇게 배열로 나옴.
obj[0].board_name; -> 이름 가져오기
board.html
console.log(results);
[
RowDataPacket {
idx: 1,
subject: '공지사항입니다.',
writer: '주인장',
content: '구라입니다.',
motoday: '09:31 26.04.2021',
today: '09:29 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 1
},
RowDataPacket {
idx: 2,
subject: '제목이다',
writer: '글쓴이',
content: '어후 힘들어,,,',
motoday: null,
today: '09:30 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 2
},
RowDataPacket {
idx: 3,
subject: '얏호',
writer: '됐다. ',
content: 'ㅠㅠ',
motoday: null,
today: '09:30 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 3
},
RowDataPacket {
idx: 4,
subject: '월욜 아침이다.',
writer: '졸리다',
content: 'ㅠㅠ',
motoday: null,
today: '09:31 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 4
},
RowDataPacket {
idx: 5,
subject: '또 공지사항입니다.',
writer: '그만',
content: '그만~~~~~~~',
motoday: null,
today: '09:31 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 5
},
RowDataPacket {
idx: 6,
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: '수정이닷 ',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 6
},
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '졸리다규',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 6,
'@idx:=0': 0,
idx2: 7
},
RowDataPacket {
idx: 8,
subject: '페이징',
writer: '은',
content: '어떻게하지',
motoday: null,
today: '09:32 26.04.2021',
hit: 0,
'@idx:=0': 0,
idx2: 8
}
]변수 붙이고 이름 지움
let bof =[
{
idx: 1,
subject: '공지사항입니다.',
writer: '주인장',
content: '구라입니다.',
motoday: '09:31 26.04.2021',
today: '09:29 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 1
},
{
idx: 2,
subject: '제목이다',
writer: '글쓴이',
content: '어후 힘들어,,,',
motoday: null,
today: '09:30 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 2
},
{
idx: 3,
subject: '얏호',
writer: '됐다. ',
content: 'ㅠㅠ',
motoday: null,
today: '09:30 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 3
},
{
idx: 4,
subject: '월욜 아침이다.',
writer: '졸리다',
content: 'ㅠㅠ',
motoday: null,
today: '09:31 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 4
},
{
idx: 5,
subject: '또 공지사항입니다.',
writer: '그만',
content: '그만~~~~~~~',
motoday: null,
today: '09:31 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 5
},
{
idx: 6,
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: '수정이닷 ',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 6
},
{
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '졸리다규',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 6,
'@idx:=0': 0,
idx2: 7
},
{
idx: 8,
subject: '페이징',
writer: '은',
content: '어떻게하지',
motoday: null,
today: '09:32 26.04.2021',
hit: 0,
'@idx:=0': 0,
idx2: 8
}
]
배열 안 의 내용이 여러개로 복사된 후,
subject내용만 뽑기.
/board
sql " select ~ "
console.log(results);
[
RowDataPacket {
idx: 1,
subject: '공지사항입니다.',
writer: '주인장',
content: '구라입니다.',
motoday: '09:31 26.04.2021',
today: '09:29 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 1
},
RowDataPacket {
idx: 3,
subject: '얏호',
writer: '됐다. ',
content: 'ㅠㅠ',
motoday: null,
today: '09:30 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 2
},
RowDataPacket {
idx: 4,
subject: '월욜 아침이다.',
writer: '졸리다',
content: 'ㅠㅠ',
motoday: null,
today: '09:31 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 3
},
RowDataPacket {
idx: 5,
subject: '또 공지사항입니다.',
writer: '그만',
content: '그만~~~~~~~',
motoday: null,
today: '09:31 26.04.2021',
hit: 2,
'@idx:=0': 0,
idx2: 4
},
RowDataPacket {
idx: 6,
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: '수정이닷 ',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 2,
'@idx:=0': 0,
idx2: 5
},
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '졸리다규',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 9,
'@idx:=0': 0,
idx2: 6
},
RowDataPacket {
idx: 8,
subject: '페이징',
writer: '은',
content: '어떻게하지',
motoday: null,
today: '09:32 26.04.2021',
hit: 2,
'@idx:=0': 0,
idx2: 7
},
RowDataPacket {
idx: 9,
subject: '테스트 할거야',
writer: '테스트인',
content: '얏호',
motoday: null,
today: '11:43 26.04.2021',
hit: 0,
'@idx:=0': 0,
idx2: 8
},
RowDataPacket {
idx: 10,
subject: 'ㅇㅇ',
writer: 'ㅇㅇ',
content: 'ㅇㅇㅇㅇㅇㅇ',
motoday: '11:44 26.04.2021',
today: '11:43 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 9
}
]
이번에는
/write 에서 insert 했을 때
console.log(results)
[
RowDataPacket {
idx: 1,
subject: '공지사항입니다.',
writer: '주인장',
content: '구라입니다.',
motoday: '09:31 26.04.2021',
today: '09:29 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 1
},
RowDataPacket {
idx: 3,
subject: '얏호',
writer: '됐다. ',
content: 'ㅠㅠ',
motoday: null,
today: '09:30 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 2
},
RowDataPacket {
idx: 4,
subject: '월욜 아침이다.',
writer: '졸리다',
content: 'ㅠㅠ',
motoday: null,
today: '09:31 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 3
},
RowDataPacket {
idx: 5,
subject: '또 공지사항입니다.',
writer: '그만',
content: '그만~~~~~~~',
motoday: null,
today: '09:31 26.04.2021',
hit: 2,
'@idx:=0': 0,
idx2: 4
},
RowDataPacket {
idx: 6,
subject: '공지사항있다규',
writer: 'ㅠㅠ',
content: '수정이닷 ',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 2,
'@idx:=0': 0,
idx2: 5
},
RowDataPacket {
idx: 7,
subject: '졸립니다.',
writer: '졸리다',
content: '졸리다규',
motoday: '10:25 26.04.2021',
today: '09:32 26.04.2021',
hit: 9,
'@idx:=0': 0,
idx2: 6
},
RowDataPacket {
idx: 8,
subject: '페이징',
writer: '은',
content: '어떻게하지',
motoday: null,
today: '09:32 26.04.2021',
hit: 2,
'@idx:=0': 0,
idx2: 7
},
RowDataPacket {
idx: 9,
subject: '테스트 할거야',
writer: '테스트인',
content: '얏호',
motoday: null,
today: '11:43 26.04.2021',
hit: 0,
'@idx:=0': 0,
idx2: 8
},
RowDataPacket {
idx: 10,
subject: 'ㅇㅇ',
writer: 'ㅇㅇ',
content: 'ㅇㅇㅇㅇㅇㅇ',
motoday: '11:44 26.04.2021',
today: '11:43 26.04.2021',
hit: 1,
'@idx:=0': 0,
idx2: 9
},
RowDataPacket {
idx: 11,
subject: '이건 write console.log를 위한 ',
writer: '글이다.',
content: ' 곧 점심이닷 ',
motoday: null,
today: '11:49 26.04.2021',
hit: 0,
'@idx:=0': 0,
idx2: 10
}
]
--------------------------------------------4교시--------------만하면 점심이닷-----------------------------------
질문time ->
[30일차 복습2 / 숙제 ] node.js express서버 구축, 게시판 만들기 수정, 삭제, 조회수 올리기 - mysql DB연
*{ margin:0; padding:0; } a{ text-decoration: none; } ul,li{ list-style: none; } 1. DB 연결부터 다시 해보기 SQL by vs CREATE DATABASE homepage7; use homepage7; CREATE TABLE board( idx INT(11) NOT N..
blckchainetc.tistory.com
-----------------------------------------------------낙지돌솥------------------------------------------------
원래 글을 쓰고 view page 나오고 그 다음에 list로 돌아감 -> 바꿔보기 insertID 값을 사용해서
select 문 result -> 객체
changesRows; 몇개의 rows 가 변했는가
- > 이걸 사용ㅇ해서 조건문으로 만들 수도. 위의 값이 n 이상이면 ~
insertID: 내가 마지막에 넣었던 idx (pk)를 가지고 옴.
results는 query문에 따라 결과가 다르다.
select 문 빼고 다 비슷하게 나옴.
각각 sql 명령의 results 를 비교해보자 !
=> 요 내용들은 라우터를 배울 때 반드시 개념이 있어야함
첫번째 사진에 res.redirect 들어가야함 -> 이런식으로 할 수 잇다.
--------실습 -------
idx 값 맨위로 올라가게 바꾸기
------------------------------------------집가서 일단 자자-------------------------------------
js
require('dotenv').config();
const express=require('express');
const app=express();
const nunjucks=require('nunjucks');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const port = process.env.SERVER_PORT || 3000;
nunjucks.configure('views',{
express:app,
})
app.use(bodyParser.urlencoded({extended:false}));
app.set('view engine', 'html');
app.use(express.static('public')); //express안에 있는 정적 파일들을
let connection = mysql.createConnection({
host:process.env.DB_HOST,
user:process.env.DB_USER,
password:process.env.DB_PASSWORD,
database:process.env.DB_DATABASE,
})
connection.connect(); //server 시작되자마자 db 접속됨.
//connection.connect(); 요거 없다면 위의 connection 이 오류나도 port 연결 잘 됨 (아직 실행이 안된거라)
app.get('/',(req,res)=>{
res.render('index.html');
})
app.get('/board',(req,res)=>{ //너의 요청이 methos가 get일 때, uri값이 board일 때 아래 함수를 실행해라.
//req 색이 회색 -> 아직 사용이 안된것
//시작하자마자 query문 날리기
//connection - mysql.query() 라는 구문을 사용해서 (sql구문, callbacl함수(error,results)) -> 우리는 익명함수로 대체해서 사용함.
// sql구문에 error 나면 console.log에 나오겠찌
connection.query("select *, date_format(today, '%H:%i %d.%m.%Y') as today, date_format(motoday, '%H:%i %d.%m.%Y') as motoday from board order by idx desc", (error,results)=>{
if(error){ //객체가 있으면 나오고 없으면 안나온다.
console.log(error);
}else{
console.log(results);
let total_record = results.length;
results.forEach(ele=>{
ele.number = total_record; //각각의 ele에 number라는 속성 만듬.
total_record--;
})
console.log(results);
res.render('board.html',{ //template을 사용한 nunjucks인 html board를 가져와서 화면에 뿌림
//result.lenght
//result 반복하는데 --1 값한값을
//result.number에다가 넣는다.
board_db:results, // results는 Array 였다. console.log(results)찍으면
//
})
}
})
})
app.get('/write',(req,res)=>{
res.render('write.html');
})
app.post('/writedone',(req,res)=>{
let subject = req.body.subject;
let writer=req.body.writer;
let content=req.body.content;
let sql=`insert into board (subject,writer,content, today, hit) values ('${subject}','${writer}','${content}', now(),0)`
connection.query(sql,(error,results)=>{
if(error){
console.log(error);
}else {
// console.log(results);
res.redirect('/board');
}
})
//여기 url을 /board로 바꾼다 -> render('board') 하지 않는 이유? render로 board.html로 넘어가면 db가 없다.
})
//------------------ V I E W -------------------//
app.get('/view',(req,res)=>{
let idx = req.query.idx;
console.log(idx);
connection.query(`select * from board where idx='${idx}'`,(error,results)=>{
if(error){
console.log(error)
}else{
console.log(results)
res.render('view.html',{
view_db:results[0],
});
}
})
connection.query(`update board set hit=hit+1 where idx='${idx}'`);
})
app.get('/modify',(req,res)=>{
let idx=req.query.idx;
connection.query(`select * from board where idx=${idx}`,(error,results)=>{
if(error){
console.log(error)
}else{
console.log(results);
res.render('modify.html',{
modify_db:results[0],
});
}
})
})
app.post('/modifydone',(req,res)=>{
let idx = req.body.idx;
console.log(req.body);
let subject = req.body.subject;
let writer = req.body.writer;
let content = req.body.content;
let sql = `update board set subject='${subject}', writer='${writer}', content='${content}', motoday=now() where idx='${idx}'`;
connection.query(sql,(error,results)=> {
if(error){
console.log(error);
}else{
console.log(results);
res.redirect('/board');
}
})
})
app.get('/delete',(req,res)=>{
let idx=req.query.idx;
let sql=`delete from board where idx='${idx}'`;
connection.query(sql,(error,results)=>{
if(error){
console.log(error);
}else{
res.redirect('/board');
}
})
})
app.listen(3000,()=>{
console.log('server start port : 3000')
})
index.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./index.css">
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="outerbox" >
<div class="innerbox">
<h2 class="welcome">WELCOME!</h2>
<div id = "gogobox">
<a id="gogo" href="/board" >게시판 구경하기</a>
</div>
</div>
</div>
</div>
</body>
</html>
write.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./index.css">
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&display=swap" rel="stylesheet">
<script type="text/javascript">
function val (){
let subject_tx = document.getElementById("subject_tx");
let writer_tx = document.getElementById("writer_tx");
let content_tx = document.getElementById("content_tx");
if(subject_tx.value==""){
alert("제목을 입력해주세요르레히호");
event.preventDefault();
} else if(writer_tx.value==""){
alert("작성자를 입력해주세요");
event.preventDefault();
} else if(content_tx.value==""){
alert("내용을 입력해주세요");
event.preventDefault();
}
}
function enter(){
if(window.event.keyCode ==13){
alert("d");
document.getElementsByName("content").innerHTML+="<br/>";
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="outerbox" >
<div class="innerbox">
<h2 class="main"> 글 작성하기</h2>
<form method="post" action="/writedone">
<button type=submit name = "name" disabled onclick="enter()"; style="display:none;"></button> <!-- enter하면 입력되지 않도록 방지-->
<div class="mainbox">
<div class="subbox">
<div class="subsubbox">
<span class="sub">제목 :</span>
</div>
<input id="subject_tx" class ="txbox" type="text" name="subject">
</div>
<div class="wribox">
<div class="subsubbox">
<span class="wri">작성자 :</span>
</div>
<input id="writer_tx" class = "txbox" type="text" name="writer">
<br/>
</div>
<div class="d">
<div class="subsubbox">
<span class="con">내용 :</span>
</div>
<textarea id="content_tx" onckeyup="enter()" class = "conbox" type="textbox" name="content"> </textarea>
<!--textarea name="content"></textarea-->
</div>
</div>
<div class="btnbox">
<button class="btn"><a href="/board">돌아가기</a></button>
<input class ="btn" type="submit" value="글작성" onclick="val()">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
board.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="outerbox" >
<div class="innerbox">
<h2 class="main">게시판</h2>
<div class="mainbox">
<table id="table1">
<tr id ="fields" class="tb">
<td class="td0">
<span>All</span>
<span><input name="chk" type="checkbox" onclick="checkAll()"></span>
</td>
<td class="td1">번호</td>
<td class="td2">제목</td>
<td class="td3">작성자</td>
<td class="td4">수정 날짜</td>
<td class="td4">작성 날짜</td>
<td class="td5">조회수</td>
</tr>
<tr class="tb">{% for item in board_db %}
<td class="td0"><input name="chk" type="checkbox" ></td>
<td class="td1">{{item.number}}</td>
<td class="td2" id="aa"><a href="/view?idx={{item.idx2}}">{{item.subject}}</a></td>
<td class="td3">{{item.writer}}</td>
<td class="td4">{{item.motoday}}</td>
<td class="td4">{{item.today}}</td>
<td class="td5">{{item.hit}}</td>
</tr>{% endfor %}
</table>
<div class="btnbox">
<button class="btn"><a href="/">돌아가기</a></button>
<button class="btn"><a href="/write">글쓰기</a></button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
let check = false;
// function checkAll(){
// let chk = document.getElementsByName("chk[]");
// console.log(chk);
// if(check==false){
// check=true;
// for(let i=0; i<chk.length; i++){
// chk[i].checked=true;
// }
// }else{
// check=false;
// for(let i=0; i<chk.length; i++){
// chi[i].checked=false;
// }
// }
// }
function checkAll(checkAll){
console.log(checkAll);
let checkboxes=document.getElementsByName("chk");
console.log(checkboxes);
checkboxes.forEach((checkbox)=>{
checkbox.checked=checkAll.checked;
})
}
</script>
</body>
</html>
modify.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./index.css">
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&display=swap" rel="stylesheet">
<script type="text/javascript">
function val (){
let subject_tx = document.getElementById("subject_tx");
let writer_tx = document.getElementById("writer_tx");
let content_tx = document.getElementById("content_tx");
if(subject_tx.value==""){
alert("제목을 입력해주세요르레히호");
event.preventDefault();
} else if(writer_tx.value==""){
alert("작성자를 입력해주세요");
event.preventDefault();
} else if(content_tx.value==""){
alert("내용을 입력해주세요");
event.preventDefault();
}
}
</script>
</head>
<body>
<div class="wrap">
<div class="outerbox" >
<div class="innerbox">
<h2 class="main"> 글 수정하기 </h2>
<form method="post" action="/modifydone">
<button disabled type=submit onclick="return flase;" style="display:none;"></button> <!--enter하면 입력되지 않도록 방지-->
<div class="mainbox">
<div class="subbox">
<div class="subsubbox">
<span class="sub">글 번호 :</span>
</div>
<input class="txbox" type="text" name="idx" value="{{modify_db.idx}}" readonly >
</div>
<div class="subbox">
<div class="subsubbox">
<span class="sub">제목 :</span>
</div>
<input id ="subject_tx" class="txbox" type="text" name="subject" value="{{modify_db.subject}}">
</div>
<div class="wribox">
<div class="subsubbox">
<span class="wri">작성자 :</span>
</div>
<input id="writer_tx" class="txbox" type="text" name="writer" value="{{modify_db.writer}}">
</div>
<div class="d">
<div class="subsubbox">
<span class="con">내용 :</span>
</div>
<input id="content_tx" class="conbox" type="text" name="content" value="{{modify_db.content}}">
</div>
</div>
<div class ="btnbox">
<button class ="btn"><a href="/board">돌아가기</a></button>
<input class ="btn" type="submit" value="글 수정 완료" onclick="val()">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
view.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./index.css">
<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Gamja+Flower&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="outerbox" >
<div class="innerbox">
<h2 class="main">VIEW PAGE </h2>
<div class="mainbox1">
<div class="subbox">
<div class="subsubbox">
<span class="sub">글 번호 :</span>
</div>
<input class ="txbox" type="text" name="subject" disabled value="{{view_db.idx}}">
</div>
<div class="subbox">
<div class="subsubbox">
<span class="sub">제목 :</span>
</div>
<input class ="txbox" type="text" name="subject" disabled value="{{view_db.subject}}">
</div>
<div class="wribox">
<div class="subsubbox">
<span class="wri">작성자 :</span>
</div>
<input class = "txbox" type="text" name="writer" disabled value="{{view_db.writer}}">
<br/>
</div>
<div class="d">
<div class="subsubbox">
<span class="con">내용 :</span>
</div>
<input class = "conbox" type="text" disabled name="content" value="{{view_db.content}} ">
</div>
</div>
<div class="btnbox" class="btnbox3">
<button class="btn"><a href="/board">뒤로가기</a></button>
<button class="btn"><a href="/modify?idx={{view_db.idx}}">글 수정하기</a></button>
<button class="btn"><a href="/delete?idx={{view_db.idx}}">글 삭제하기</a></button>
</div>
</div>
</div>
</div>
</body>
</html>
index.css
*{
margin:0;
padding:0;
font-family: 'Gamja Flower', cursive;
}
a{
text-decoration: none;
color:black;
}
a:hover{
color:lightcoral;
}
ul,li{
list-style: none;
}
/* in COMMON */
.wrap{
width:100%;
background-color: rgb(218, 157, 153);
}
.outerbox{
width:100%;
height:100%;
}
.innerbox{
background-color: white;
width:1080px;
height:750px;
border: 2px solid rgb(202, 202, 202);
border-radius: 2px;
position: absolute;
left:50%;
transform: translateX(-50%);
top:8%;
}
#gogo{
width:100px;
height:50px;
background-color: white;
border-radius: 5px;
padding:5px;
box-sizing: border-box;
}
#gogo:hover{
transition: .5s ease-in-out;
background-color: darkseagreen;
color:white;
}
.main{
width:1080px;
height:80px;
text-align: center;
font-size:50px;
color:salmon;
margin-top:30px;
}
.mainbox{
width:1000px;
height:550px;
padding:20px 20px 20px 38px;
}
.mainbox1{
width:1000px;
height:520px;
padding:20px;
}
.btn{
width:120px;
height:40px;
font-size: 16px;
background-color: lightcoral;
border-radius: 4px;
border:1px solid lightcoral;
color:white;
align-items: center;
margin-left: 20px;
}
.btn:hover{
color:lightcoral;
background-color: white;
border:2px solid lightcoral;
}
.btnbox{
width:500px;
height:50px;
position: absolute;
top: 660px;
left: 54%;
}
.btn>a{
padding:10px;
}
.subbox,.wribox{
width:940px;
height:40px;
}
.subsubbox{
width:100px;
height:40px;
display: inline-block;
float:left;
text-align: center;
padding: 0 0 0 7px;
box-sizing: border-box;
}
.conbox{
width:835px;
/* height:400px; */
float:left;
display: inline;
border:1px solid darkslategray;
text-align: left;
padding:10px 0 350px 7px;
box-sizing: border-box;
}
.sub,.wri,.con{
font-size: 20px;
line-height: 35px;
text-align: center;
}
.txbox{
width:835px;
height:35px;
border:1px solid darkslategray;
padding:5px;
box-sizing: border-box;
}
input{
width:100%;
}
/* index */
.welcome{
width:1000px;
height:200px;
color:darkseagreen;
text-align: center;
padding:90px 0 0 0 ;
font-size:70px;
display:inline-block;
}
#gogobox{
width:1000px;
height:400px;
padding:250px 0 0 550px;
display:inline-block;
box-sizing: border-box;
}
#gogo{
font-size: 40px;
text-align:center;
color:darkslategray;
}
/* board */
#table1{
border:1px solid rgba(221, 220, 220, 0.994);
box-sizing: border-box;
border-collapse:collapse;
}
#fields{
color:rgb(48, 48, 48);
font-size: 20px;
text-align: center;
background-color: rgb(255, 227, 232);
font-weight: bold;
}
td{
text-align: center;
border:1px solid rgba(221, 220, 220, 0.994);
box-sizing: border-box;
}
#aa{
text-align:center;
}
.td0{
width:100px;
height:40px;
padding:9px 0;
}
.td0>span>input{
width:15px;
}
.td1{
width:70px;
height:40px;
}
.td2{
width:400px;
height:40px;
}
.td3{
width:150px;
height:40px;
}
.td4{
width:200px;
height:40px;
}
.td5{
width:100px;
height:40px;
}
/* */
/* */
/* */
/* */
createTable.sql
CREATE DATABASE homepage1;
use homepage1;
CREATE TABLE board(
idx INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
subject VARCHAR(100) NOT NULL,
writer VARCHAR(50) NOT NULL,
content text,
motoday datetime,
today datetime default CURRENT_TIMESTAMP,
hit INT(11)
) AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;
.env
SERVER_PORT=3000
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=5353
DB_DATABASE=homepage1
반응형
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [32일차] 20210427 라우터 middle ware 사용해서 express server 분산시켜 만들기 배움 (0) | 2021.04.27 |
|---|---|
| [31일차 복습] req, res 배열, 객체 연습 (0) | 2021.04.27 |
| [30일차 복습2 / 숙제 ] node.js express서버 구축, 게시판 만들기 수정, 삭제, 조회수 올리기 - mysql DB연결 (0) | 2021.04.25 |
| [30일차 복습] node.js로 서버, 게시판 만들기 node.js template css 연결하기 mysql DB 연결하기 배열 for item in 변수 endfor (0) | 2021.04.24 |
| nunjucks 정리 if, for문 % 변수, 배열, 요소 (0) | 2021.04.23 |
