생활코딩WEB2
-
[Node.js] 입출력 데이터의 보안 이슈생활코딩/WEBn 2020. 9. 18. 17:57
[강의 출처] opentutorials.org/course/3332/21150 App - 입력 정보에 대한 보안 - 생활코딩 수업소개 입력정보와 관련해서 보안적으로 처리해야 할 이슈를 살펴보겠습니다. 강의 소스코드 main.js (변경사항) var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('queryst opentutorials.org 입력정보 보안 데이터 저장 형태와 아래와 같다고 할 때, directory /data /data1 /data2 /data3 /main.js /password.js URL에 ?id=../password.js와 같은 쿼리스트링을 입력함으로써 해당 정보에 접..
-
[Node.js] 인코딩 - encodeURI(), charset=utf-8생활코딩/WEBn 2020. 9. 17. 22:12
URL의 인코딩 실습 중 한글 인코딩 관련해서 이슈가 발생했다. 먼저 코드 원문. 유저로부터 받은 post 데이터를 파싱해서 파일명 title인 파일을 생성하고, 유저를 해당 파일 페이지로 리다이렉트 한다. fs.writeFile(`data/${post.title}`, content, 'utf8', function(err){ response.writeHead(302, {location: `/?id=${post.title}`}); response.end(); }); 아래는 발생한 에러메세지. _http_outgoing.js:512 throw new ERR_INVALID_CHAR('header content', name); ^ TypeError [ERR_INVALID_CHAR]: Invalid charact..
-
[Node.js] 비동기/동기(Sync)와 콜백, request생활코딩/WEBn 2020. 9. 15. 22:33
[강의 출처] opentutorials.org/course/3332 WEB2 - Node.js - 생활코딩 수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사 opentutorials.org Node.js에서의 비동기처리 동기(Synchronous): 작업을 순차적으로 처리 비동기(Asynchronous): 작업을 병렬적으로 처리 비동기로 처리하면 대기시간이 없어 빠르기 때문에 퍼포먼스가 중요한 작업에 권장됨 node.js에서는 비동기가 default로, 동기처리용 함수는 Sync 형태로 제공됨(ex fs.readFile, fs.readFileSync)..
-
[HTML] form생활코딩/WEBn 2020. 9. 14. 20:31
[강의 출처] opentutorials.org/course/3332/21134 HTML - Form - 생활코딩 수업소개 웹브라우저에서 서버로 데이터를 전송할 때 사용하는 기능이 form입니다. 여기서는 HTML로 폼을 만드는 방법을 살펴보겠습니다. 강의 소스코드 syntax/form.html opentutorials.org Form 사용자와의 상호작용을 위한 틀을 짜주는 HTML의 기능 무엇을: form 내부 control들(input, textarea ... )에 사용자가 입력한 정보를 언제: 사용자가 submit 버튼을 눌렀을 때 어디로: form의 action 속성이 가리키는 서버로 어떻게: 쿼리스트링 형태의 데이터로 전송 method="post" 유저의 데이터를 url로 받으면 보안 이슈 등 의..
-
[Node.js] 개요 - CRUD(Create, Read, Update, Delete)생활코딩/WEBn 2020. 9. 10. 19:50
[강의 출처] opentutorials.org/course/3332 WEB2 - Node.js - 생활코딩 수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사 opentutorials.org CRUD(Create, Read, Update, Delete) fs(file system) 모듈을 이용. 보통 아래 형태로 모듈을 호출 const fs = require('fs'); Create file var fs = require('fs'); fs.writeFile('sample.txt', 'content', 'utf8', function(err){ // con..
-
[Node.js] 개요 - 웹페이지 생성 preview, query string생활코딩/WEBn 2020. 9. 9. 20:42
[강의 출처] opentutorials.org/course/3332 WEB2 - Node.js - 생활코딩 수업소개 이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다. 수업대상 예를들어 1억개의 페이지로 이루어진 웹사 opentutorials.org Node.js javascript를 웹브라우저 외부(컴퓨터 자체나 서버 등)에서도 사용할 수 있도록 환경을 구현해주는 플랫폼 javascript 기반으로 웹페이지를 자동으로 생성하기 때문에 서버쪽 애플리케이션(Server Side Application)이기도 함 html을 직접 타이핑해서 웹페이지를 만들면 구조를 바꾸는 등의 작업은 굉장히 복잡해지지만, html t..
-
[JS] 나머지 개념들 - library, framework, UI, API생활코딩/WEBn 2020. 8. 29. 19:41
[강의 출처] opentutorials.org/course/3085/18886 라이브러리와 프래임워크 - 생활코딩 라이브러리와 프래임워크 2017-12-02 16:24:54 opentutorials.org Library & FrameWork 다른 이들이 작성해둔 코드들의 도서관 같은 곳 library가 각각의 부품이나 도구들의 전시장이라면 framework는 뼈대나 골격이 이미 잡힌 반제품들을 완성시키는 느낌 전체적인 흐름을 누가 결정하느냐에 따라 구분된다고 생각하면 됨 [참고] 라이브러리와 프레임워크의 사용법과 효용 js 라이브러리인 jQuery를 사용한다고 할 때, 똑같이 html문서에서 js로는 길게 작성해야되는 코드들에 대해서 간단하게 처리 가능한 이점이 있음 아래처럼 'a'태그의 글자색을 빨간색..
-
[JavaScript] 개요생활코딩/WEBn 2020. 8. 28. 22:17
[강의 출처] opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상� opentutorials.org JavaScript란? 사용자와 동적으로 상호작용(사용자의 조작에 반응해서 움직이는)하는 웹페이지를 구현하는 기술 주로 HTML을 제어하는 용도로 쓰이며, HTML 위에서 동작하도록 고안된 프로그래밍 언어 웹페이지에서 일어나는 일련의 사건들(event) 중 특별한 경우들(onclick, onchange, ...)을 통해 상호작용 가능 HTML..