생활코딩/WEBn
-
[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] 코드 리팩토링, 이슈 정리생활코딩/WEBn 2021. 1. 24. 11:47
다음 단계인 Express로 가기전에 나름대로 코드를 정리하는 시간을 가졌다. 생활코딩에서는 다음 단계로 넘어갈 때 원초적인 골격 코드를 가지고 해당 주제에만 초점을 맞추는데 아까워서 전 단계에서 실습했던 코드를 그대로 가지고 추가추가 하는 과정을 거쳤더니 WEB3까지 마친 지금은 코드가 조각조각 이어붙인 넝마주이가 되고 말았다. 현재 이정표는 아래와 같다. WEB1 HTML&Internet -> WEB2 CSS -> WEB2 JavaScript -> WEB2 Node.js -> WEB3 Node.js & MySQL WEB1 HTML&Internet: 기본적인 HTML 페이지 골격 작성 WEB2 CSS: 디자인 부분을 스타일시트로 이동 & 로 연결 WEB2 JavaScript: Night Day 버튼으로..
-
[Node.js & MySQL] 도전과제: 검색/페이징/정렬생활코딩/WEBn 2021. 1. 24. 11:33
생활코딩 Node.js - MySQL 마무리에서 제시된 도전과제를 구현하였다. 1. 검색: form get 방식으로 요청을 받고, db단에서 SQL구문 SELECT * FROM 테이블 WHERE 컬럼 LIKE "%키워드%"로 데이터를 찾는다. 찾은 데이터를 html 데이터로 구성해서 웹페이지로 띄운다. 2. 페이징: 한번에 보여줄 페이지를 설정하고, 페이지목록을 만들어서 넘길 수 있도록 한다. 각 페이지는 SELECT * FROM topic LIMIT 0 OFFSET 20; 구문을 응용해서 구성하고, 페이지 목록은 SELECT COUNT(*) FROM topic; 구문으로 전체 글 개수를 확인한 다음 나눠서 구한다. 3. 정렬: 타이틀-오름차순/타이틀-내림차순/작성일순/작성일역순 4가지 옵션으로 검색이 ..
-
[Node.js & MySQL] 도전과제: 검색 - 색인기능 살펴보기생활코딩/WEBn 2021. 1. 20. 23:11
자주 검색하는 컬럼이라면 색인을 넣어주자. 검색 속도가 빨라진다. 아래처럼 인덱스를 만들어주고, 기존대로 WHERE 컬럼명 = ?으로 검색하면 된다. 다만 데이터가 꽤 많아야(테스트했을 때는 몇십만건 정도) 유의미한 차이를 느낄 수 있다. CREATE INDEX index_category ON 테이블명(컬럼명) 생활코딩 Node.js - MySQL 수업은 이고잉님이 추가 도전과제를 던져주는 것으로 끝난다. 검색, 정렬(저자 이름 순, 시간 순), 페이지 기능을 구현해보면 좋겠다. 그리고 팁을 몇 가지 준다. 1. 검색 의 get 방식을 이용해서 검색 요청을 처리하고, db단에서 SQL구문 SELECT * FROM topic WHERE title = "keyword"로 데이터를 찾는다. 이때 데이터가 많으..
-
[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..