생활코딩Web3
-
[Node.js + AJAX] 편집 페이지(Author) - 무한 스크롤 / Fetch API생활코딩/WEBn 2021. 2. 14. 21:33
생활코딩 AJAX 강의를 완료하고, 기존에 Node.js로 백엔드를 구현해놓은 코드에 AJAX를 적용해보았다. 가장 큰 차이는 기존에는 MySQL 쿼리문으로 직접 받아왔던 데이터를, fetch API에서는 URL로 받아온다는 것. Node.js의 app 라우팅 부분에 데이터 리턴을 추가해서 프론트의 fetch API와 URL로 소통할 수 있도록 했다. 이쪽을 참조했다: node-js-mysql-how-to-do-the-ajax-call-and-access-the-data-on-server-js 작업하다보니 내용이 길어져서 글을 나누었다. 기본 페이지(Rread): [Javascript - AJAX] Node.js + AJAX - 기본 페이지 편집 페이지(Author): 현재 포스팅 편집 페이지(Creat..
-
[Javascript - AJAX] Node.js + AJAX - 기본 페이지생활코딩/WEBn 2021. 2. 9. 14:10
생활코딩 AJAX 강의를 완료하고, 기존에 Node.js로 백엔드를 구현해놓은 코드에 AJAX를 적용해보았다. 가장 큰 차이는 기존에는 MySQL 쿼리문으로 직접 받아왔던 데이터를, fetch API에서는 URL로 받아온다는 것. Node.js의 app 라우팅 부분에 데이터 리턴을 추가해서 프론트의 fetch API와 URL로 소통할 수 있도록 했다. 이쪽을 참조했다: node-js-mysql-how-to-do-the-ajax-call-and-access-the-data-on-server-js 작업하다보니 내용이 길어져서 글을 나누었다. 기본 페이지(Rread): 현재 포스팅 편집 페이지(AuthorPage): [Javascript - AJAX] Node.js + AJAX - 편집 페이지(Author) ..
-
[JavaScript - Ajax] 개요생활코딩/WEBn 2021. 1. 28. 15:25
Asynchronous Javascript And Xml 웹페이지의 정보를 부분적으로 변경(갱신)하는 기술. 갱신이 필요하지 않은 부분은 재사용함으로써 사용자의 경험을 개선해주고 서버 운영자의 리소스를 절약해준다. 이런 효과를 가지는 웹페이지를 SPA(Single-Page Application)라고 부르기도 한다. SPA의 발전형으로 PWA(Progressive Web Apps)가 있는데, SPA에 offline 동작을 지원하는 어플리케이션을 말한다. Fetch API Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작할 수 있도록 인터페이스를 제공해준다. [MDN] Fetch-API 예제: fetch라는 버튼을 누르면 text.html의 파일을 읽어와서 출력하게 만드는 ..
-
[Node.js & MySQL] 보안: SQL injection, Escaping생활코딩/WEBn 2021. 1. 13. 20:41
외부로부터 유입되는 정보는 필터링이 필요하다. 유저가 입력 데이터로 악성 SQL을 주입해 공격하는 경우인 SQL injection 예방법과 해당 데이터를 웹브라우저로 실행할 때 발생할 수 있는 Cross site scripting (XSS) 예방법을 살펴본다. [강의 출처] opentutorials.org/course/3347/21299 SQL injection 예방법 페이지를 아래처럼 로드한다고 할 때, var mysql = require('mysql'); var db = mysql.createConnection({ host : 'localhost', user : 'root', password : 'password', database : 'data' }) db.connect(); var app = ht..
-
[Node.js & MySQL] 테이블 생성생활코딩/WEBn 2021. 1. 13. 18:57
DB에서 가져온 데이터를 반복문을 이용해 html 테이블() 형태로 작성 +기본적인 조작에 필요한 CSS [강의 출처]opentutorials.org/course/3347/21202 테이블 생성 html에서 테이블을 생성하는 태그는 이다. 그 아래로 제목 , 행 , 컬럼(셀 하나하나 자리) 가 온다. 는 강조를 위한 제목태그로, 제목 부분에서 를 대신해서 사용하면 된다. # C1 C2 1 Data1 Data2 2 Data3 Data4 Foot . . # C1 C2 1 Data1 Data2 2 Data3 Data4 결론 . . 기본 값은 테두리 없음이다. 전체 테두리를 쳐보자. html 내에서 css를 실행하려면 # C1 C2 1 Data1 Data2 2 Data3 Data4 결론 . . 헤딩 부분은 td..
-
[Node.js & MySQL] main.js 정리 - DB접속 정보/쿼리 분리생활코딩/WEBn 2021. 1. 12. 02:08
main.js에 실제 실행 부분의 코드가 포함되어 있으면 복잡해져서 전체맥락을 파악하기 쉽지 않다. main.js는 index, 목차처럼 사용하는 것이 바람직하고, 그렇게 하기 위해서는 구체적인 정보들의 분리가 필요하다. 먼저 DB접속 정보를 분리했다. data/lib/db.js 파일 생성 후 접속 정보를 가져온다. var mysql = require('mysql'); var db = mysql.createConnection({ host : 'localhost', user : 'root', password : 'password', database : 'data' }) db.connect(); module.exports = db; // 외부에서 임포트할 모듈이 하나라면 이렇게 하면 된다 main.js에서는..
-
[Node.js & MySQL] 목록 콤보박스 생성 / 디폴트값 설정생활코딩/WEBn 2021. 1. 5. 21:03
DB에서 가져온 데이터를 반복문을 이용해 html 콤보박스() 형태로 작성 그중 원하는 데이터를 디폴트로 설정(selected) [강의 출처] opentutorials.org/course/3347/21193 html에서 콤보박스를 생성하는 태그는 select다. Value1 Value2 Value3 Value1 Value2 Value3 이 박스에서 Value1을 선택하고 해당 FormData를 전송하면, 데이터는 {"전송되는 데이터 이름": "1"}처럼 객체형태로 전달된다. 이 기능과 반복문을 이용해 특정한 데이터로 콤보박스를 생성할 수 있다. (MDN Web Docs js 루프와 반복 페이지에도 비슷한 예시가 있으니 나중에 헷갈리면 참조!) 자바스크립트의 배열을 이용해 콤보박스를 생성하는 경우: var..
-
[Node.js & MySQL] LEFT JOIN으로 가져온 데이터 출력생활코딩/WEBn 2020. 12. 9. 21:32
LEFT JOIN SELECT * FROM table1 LEFT JOIN table2 ON table1.key=table2.key 테이블에 같은 이름의 컬럼이 있는 경우, 테이블.컬럼 형태로 표시해주어야 ambiguity error가 나지 않는다. SELECT topic.id, title, author.name, author.description FROM topic LEFT JOIN author ON topic.author_id=author.id; +----+-----------+--------+-------------+ | id | title | name | description | +----+-----------+--------+-------------+ | 0 | Home | banana | fru..