우롱이 공책정리

// 버튼에 btn-save라고 id 값을 지정해놨기 때문에 querySelector의 #btn-save로 // 해당되는 항목을 선택할 수 있다. // 그리고 그 버튼에 이벤트를 설정하는 것이다. // 그 버튼을 클릭했을 때 아래 코드들이 실행되라! document.querySelector("#btn-save").addEventListener("click", function () { let todo_input = document.querySelector("input"); // input box를 선택하는 좋은 방법 // 확실하게 원하는 input box가 select 되도록 설정하는 방법 todo_input = document.querySelector( "section.todo_main form inpu..

client에서 데이터를 보내는 3가지 방법 1. query String 방식 - http://localhost:3000/?변수1=변수값&변수2=변수값 - let 변수1 = req.query.변수1 - let 변수2 = req.query.변수2 2. Path Varriable 방식 : URL처럼 값을 보내는 방법 - http://localhost:3000/값1/값2 - router.get("/:변수1/:변수2") - let 변수1 = req.params.변수1 - let 변수2 = req.params.변수2 3. form에 input에 값을 담아서 post로 보내는 방법 form(method="POST") input(name="변수1") input(name="변수2") - let 변수1 = req.bod..

CRUD의 C : INSERT // 입력 form을 보여주는 get 방식 // localhost:3000/bbs/write URL 요청 router.get("/write", function (req, res) { // bbsWrite.pug 파일을 rendering하여 요청 전송 // insert와 update를 write.pug 파일로 공통으로 사용하기 위해서 // insert를 수행할 때 비어있는 vo를 만들어서 bbsWrite에 전달해줘야한다. let data = new bbsVO(); res.render("bbsWrite", { bbsVO: data }); }); save () 함수 // form에 데이터를 입력하고 전송버튼을 클릭했을 때 호출되는 URL // form, input에 입력된 데이터..

Node_bbs //- 한글 안깨지게 해주는 meta(charset="utf-8") //- 스마트폰 기기용, PC기기용에서 같은 화면을 보이게 하는 속성 meta(charset="viewport", content="width=device-width, initial-sacle=1") 모든 웹브라우저에서 공통으로 사용되는 친구 jquery script. $(function(){ // nav 내부의 ul 내부의 li tag가 클릭되면 $("nav ul li").click(function(){ // 클릭된 li의 보이는 문자열을 추출하여 text 변수에 담고 let text = $(this).text() // 그 문자열이 "MEMO" 이면 if(text == "MEMO") { // bbs/list로 URL 점프..

.js에서 먼저 코드를 작성 한 후 Ex) router.get("/", function (req, res) { // res.send("home GET mapping"); res.render("div"); }); // form의 submit에 의해서 호출되는 mapping router.post("/", function (req, res) { res.send("home POST mapping"); }); app.js로 간다. var homeRouter = require("./routes/home"); // routes/home.js를 사용하겠다 이런식으로 코드를 작성해준 후 // localhost:3000/users/* 라고 요청을 하면 // userRouter에게 제어권을 넘겨라 app.use("/home..

Nodejs를 사용하여 Web Application Server 생성하기 1. workspace / nodejs 폴더 생성 2. nodejs 폴더에서 express 프레임워크를 사용하여 프로젝트 생성 - express Hello_Node 3. cd Hello_Node : 프로젝트 폴더로 이동 4. npm install : dependency download - package.json 파일에 설정된 dependency들을 download 하여 node_modules 폴더에 저장 5. 프로젝트 시작 가. npm start : 기본 시작하기 나. nodemon : 개발환경에서 파일이 변경(수정)하면 자동으로 서버를 재시작하는 tool을 사용하기 nodejs의 view 설정 1. nodejs의 탄생시점에서는 j..

Hello_Node 처음에 nodejs를 이용해서 프로젝트를 생성할거다. express 프로젝트 명 express nodejs에서 웹 프로젝트를 만들 때 가장 많이 사용되고 있는 프레임워크 중에 하나이다. 프로젝트를 만들고 나서 package "dependencies": { "cookie-parser": "~1.4.4", "debug": "~2.6.9", "express": "~4.16.1", "http-errors": "~1.6.3", "jade": "~1.11.0", "morgan": "~1.9.1", "pug": "^3.0.0" } 우리가 사용하는 nodejs 프로젝트에서 기본적으로 가지고있는 dependency들임! jade라는 친구가 Spring에서 jsp View단에 해당하는 친구! jade는..

console 창에 결과 보이기 먼저 hello.js를 routes 파일에 만들고 app.js에 변수선언과 매핑을 해준다. 터미널 창에서 cd 명령어로 해당 프로젝트로 이동해야한다. 해당프로젝트의 routes로 이동해줌! 내가 routes에다가 저장해놔서! 그리고 node hello.js 해주면 console창에서 확인을 할 수 있다. nodemon hello.js nodemon이 친구는 nodejs에서 사용되는 확장 플러그인이다. hello.js main.js sub.js

C:\bizwork\workspace\nodejs 폴더(프로젝트) 새로 생성해 준 후 그 안에서 쉬프트키 누르면서 오른쪽 마우스 클릭 여기서 명령창 열기 함 (일반 cmd창인것) 이렇게 express Node_hello해주면 아래처럼 새 폴더가 생긴당 그리고 cmd닫아주고 이 폴더 안에서 무언가 많이 생겨 있을 텐데 거기서 또 명령창 열기 yarn install을 하면 뭔가를 열심히 또 다운받을것이다. install이 완료가 되면, node_modules이라는 폴더가 생기는데 이런 것들은 spring에서 maven repository라고 보면 된당 다시 cmd 창에서 nodemon 입력 방화벽 나오면 액세스 허용 해줌 창 끄지말고 웹브라우저에 localhost:3000이라고 치면 Express 나온당~ ..