코딩28 보이지 않는 input 을 삽입해서 데이터 전달하기 edit.ejs 오늘의 할일 날짜 Submit 이런식으로 값을 전달해줄수 있다. // 어떤 사람이 edit 경로로 put 요청을 하면 app.put('/edit', function(요청, 응답){ // 폼에 담긴 제목/날짜 데이터를 가지고 // db.collection 에다가 업데이트 함 db.collection('feData').updateOne( {_id : 요청.body.id }, // id값을 따라서 (나는 전달받은 데이터 중 name이 "id"인 값 받겠다.) { $set : {제목 : 요청.body.title , 제목 : 요청.body.date}}, // Operator $set 을 이용해 업데이트 (없으면 추가) function(에러,결과){ // url 파라미터 중 :id 를 가져와주세요... 2021. 6. 20. HTML5 에서 PUT/DELETE 요청하기 HTML5 에서 PUT/DELETE 요청은 안되기 때문에, 라이브러리를 추가로 설치해주어야 한다. 터미널에 npm install method-override 설치 후 server.js 상단에 const methodOverride = require('method-override') app.use(methodOverride('_method')) 를 입력 edit.ejs 오늘의 할일 날짜 Submit PUT 은 HTML5 에서는 못씀 POST 로 쓰되 ?_method=PUT 을 action에 추가해준다. 이런식으로 PUT/DELETE 를 사용가능하다. 2021. 6. 20. DB 에서 데이터 받아온 후 ejs 호출 시 전달하는 법 server.js // .html 말고 .ejs 파일 보내주는법 app.get('/list', function(요청, 응답){ db.collection('feData').find().toArray(function(에러, 결과){ console.log(결과); 응답.render('list.ejs', { posts : 결과 }); // 이런식으로 렌더링을 해준다. // 근데 이렇게만 하면 에러난다. // ejs 파일은 곡 views 폴더 안에 있어야 한다. }); // 다 찾아주세요~ }); 위 posts 값을 list.ejs 에 전달해준다. list.ejs 할 일 제목 : 할 일 마감날짜 : 삭제 수정 2021. 6. 20. url 파라미터 값을 유동적으로 입력하는 법 app.get('/edit/:id', function(요청, 응답){ db.collection('feData').findOne({_id : parseInt(요청.params.id)}, function(에러,결과){ // url 파라미터 중 :id 를 가져와주세요. // 여기서 id 값을 String 값이기 때문에 정수로 바꾸어주어야한다. console.log(결과) if(결과==null){ 응답.render('nox.ejs', {data:결과}) }else{ 응답.render('edit.ejs', {data:결과}) } }) }); 'feData' 에 DB 이름을 적어주자. 2021. 6. 20. puppeteer 트러블슈팅 - 2 > 텍스트 박스에 입력값 넣기 (How to fill an input field using puppeteer) ※ puppeteer 1.20.0 버전에서 발생하는 현상입니다. Selenium 자동화를 써오다가 새로운 javascript에 puppeteer에 적응하자니 헷갈리는게 너무 많다... Selenium 에서는 sendkeys() 라는 함수를 쓰면 텍스트 박스에 값을 입력할 수 있었는데, puppeteer는 많이 달랐다. 네이버에서 간단하게 로그인하는 코드를 작성해봤다. const page = await browser.newPage(); await page.setViewport({ width, height }); await page.goto( "https://www.naver.com/", { waitUntil : "networkidle2" } ); page.waitForNavigation(),// 해당 페이.. 2019. 9. 30. puppeteer 트러블슈팅 - 1 > "headless: false" 옵션값을 넣어주었을 때, Page Crush 나는 현상 트러블슈팅 ※ puppeteer 1.20.0 버전에서 발생하는 현상입니다. puppeteer에서 headless : false 값을 넣어주면, 크롬 창이 나타나면서 코드가 어떻게 돌아가는지 보여주는데, 크롬 창이 나타나면서 아래와 같이 Page Crush 가 발생하는 현상이 있었다. const puppeteer = require('puppeteer'); puppeteer.launch({ headless: false, }).then(async browser => { const page = await browser.newPage(); await page.goto('https://www.naver.com'); await page.screenshot({ path: 'myscreenshot.png', fullPage: tr.. 2019. 9. 30. Javascript 자동화 puppeteer - 웹페이지 pdf로 추출 안녕하세요. salzzak 입니다~ 저번엔 이미지로 캡쳐를 했는데, 이번에는 pdf로 캡쳐를 해보겠습니다. 사실 https://github.com/GoogleChrome/puppeteer 에 다 있는 내용인데... 공부도 할겸.. 이렇게 포스팅을 해봅니다! const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://www.salzzakart.com/portfolio', {waitUntil: 'networkidle2'}); await page.pdf({path: 'salzzak.pdf.. 2019. 9. 30. Javascript 자동화 - Headless chrome puppeteer 소개 Puppeteer - 인형을 부리는 인형술사라는 뜻 안녕하세요, salzzak입니다~ puppeteer은 구글 크롬 프로젝트에서 만든 Headless chrome API 입니다. 크롬브라우저에서의 자동화 테스트를 headless모드와 nod-headless 모드 둘 다 사용가능하도록 하는 node.js 라이브러리로, 헤드리스 브라우저란 일반적으로 시각적으로 보이지 않고 백그라운드에서 작동하는 브라우저를 말합니다. https://github.com/GoogleChrome/puppeteer 위 github에 있는 설명을 공부하면서 포스팅을 해보겠습니다! 우선 node.js 를 아래 링크에서 받으십니다~ https://nodejs.org/en/download/ 설치가 완료 되면 cmd 프롬프트를 열어서 아래 .. 2019. 9. 30. 이전 1 2 3 다음
