전체 글 (97) 썸네일형 리스트형 db 내용 html에 보여주기 문제 단순히 서버가 고객이 요청하는 html 파일 요청에 따라 보여주면 이거는 단순 화면 구현과 같다. 만약 db에 있는 데이터를 보여주고 싶다면?? html이라는 마크업 언어에 데이터를 넣어줄 수 있는 엔진을 설치하여 표현하면 된다!! ( react도 이러한 방식으로 바로 데이터를 쏠 수 있는 좋은 라이브러리이다) 순서 1. ejs설치 npm install ejs 2. 서버에서 불러오기 app.set('view engine', 'ejs'); 3.views 폴더 내에 ejs파일 만들기 4. 고객이 /list 로 get 요청을 하면 db에서 파일을 찾아 ( findOne) 데이터를 ejs파일에 보여줌!! app.get('/list', function(요청, 응답){ db.collection('post')... class의 이해 class의 관련 용어 클레스 : 차라는 것에 대한 추상화 ( increase(), value ) 쉽게 말해 빈 깡통 자동차 if 생성자를 통해 속성을 넣는다면, 인스턴스: class를 바탕으로 만들어진 인스턴스 객체 ex) 아반떼 based on 차 프로토타입: 생성자: 예시 class Counter { constructor() { this.value = 0; // 생성자 호출을 할 경우, this는 new 키워드로 생성한 Counter의 인스턴스입니다 } increase() { this.value++ } decrease() { this.value-- } getValue() { return this.value } } let counter1 = new Counter() // 생성자 호출 counter1... 고객의 post 요청 db에 담기 문제 : 내가 입력한 내용이 서버에 요청해서 db에 담아야 한다. 전제: 고객이 /write 라는 공간에서 (get 요청으로 미리 서버가 뿌려줌!!) 1.app.post 로 (/add 를 고객이 요청하면!! 함수에서 응담.send('서버에 잘 보내줬어요') 해줘야 함!! 2. . db.collection('post'),insertOne은 두개의 인자 1. 넣을 내용 2.함수( 성공시 보여주는) app.post('/add',function(request,response){ response.send('잘 받았어!!') db.collection('post').insertOne({ 아이디: request.body.name, 내용: request.body.content },function(){ console.lo.. 몽고DB 설치부터 ~서버에서 db 넣어보기 server.js가 (서버가 ) db를 컨트롤 할 수 있게 하기 0. ip 는 what is my id on goggle 1. mongoDB atlas 접속 후 개인 ip 여러 설치 조건 만족 후 Databases 에 connect 클릭!! 2. url 복사하여 연결할 준비하기 3. npm install mongodb 설치 4.몽고db 와 서버를 연결 const MongoClient = require('mongodb').MongoClient; MongoClient.connect('아까 챙겨온 접속URL', function(에러, client){ if (에러) return console.log(에러); //서버띄우는 코드 여기로 옮기기 app.listen('8080', function(){ console... node js server 첫 스타트!! 1. npm init ( package.json )파일 만들기 위해 사용하는 명령어 2.entry point 에 이름을 만들어주어야 함!!!! package name: (filtereddatapractice) version: (1.0.0) description: entry point: (index.js) server.js test command: git repository: keywords: author: 3. npm install express( 서버 쉽게 쓰기 위한 라이브러리 ) 4.server.js 에 서버 만들고 확인하기 //라이브러리 불러오기 const express= require('express') 라이브러리 넣기 const app= express() //8080 이름에 서버 오픈 app.l.. select, option tag 코드 1 Choose a pet: 2 3 4 --Please choose an option-- 5 Dog 6 Cat 7 Hamster 8 Parrot 9 Spider 10 Goldfish 11 12 Output Choose a pet: --Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish 더미데이터 버튼 클릭시 보여주기 위한 onclick=button() 만들기 javascript function button(){ const container=document.querySelector('#contents') for(let i=0; i css 준비할 시 항상 잘 쓰는 태그 , 입력어 1. 박스 크기 조절 *{ box-sizing: content-box; } 2. display-flex .header-form-container{ display: flex; flex-direction: row; justify-content: flex-end; 3. Grid 더미데이터를 보여주는 사이트입니다. button 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음