본문 바로가기
반응형

JavaScript97

ECMAScript2015(ES6) ECMAScript2015(ES6) ECMAScript 넷스케이프(NE)는 javascript를 지원했고 인터넷익스플로러(IE)는 Jscript를 지원 했었습니다. 윈도우즈에 끼워팔기 신공으로 점차 득세를 하기 시작한 인터넷익스플로러는 그만 자만심에 빠져 Jscript를 표준이 아닌 적당히 자기만의 기능을 추가하기 시작했습니다. 점유율이 높으니 모든 브라우저들이 내가 만든 기준을 따라 올 거라 생각을 했던 것입니다. 하지만 넷스케이프는 자신이 밀고 있던 javascript의 핵심 개발 언어를 ECMA 인터내셔널에 제출하고 표준화를 시도 하였고 1996년에 ECMA-262(ES1)으로 명명된 표준 스크립트 기술 규격이 발표되었습니다. 이때부터 ES3 -> ES5 -> ES6(ES2015) -> ES7(ES.. 2022. 4. 10.
DOM API (Web API) and Concept DOM API (Web API) and Concept DOM API DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당합니다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성되며, 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTML.. 2022. 4. 10.
JavaScript의 동작 원리 JavaScript의 동작 원리 자바스크립트의 동작 원리를 보기 전에 먼저 전체적인 동작 구조를 살펴봐야 하는데 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요합니다. 자바스크립트는 엔진은 V8, Rhino, SpiderMonkey 등 다양하게 있지만 이 중에서도 가장 대표적인 예는 Google에서 만든 V8 엔진입니다. JavaScript 엔진 자바스크립트 엔진은 두 가지 구성요소로 구성됩니다. 하나는 Memory Heap(메모리 힙)이고, 다른 하나는 Call Stack(호출 스택)입니다. Memory Heap(메모리 힙)은 메모리 할당이 발생하고, Call Stack(호출 스택)은 코드 실행에 따라 스택이 하나씩 쌓이는 곳입니다. 자바스크립트를 사용하다 보면 setTimeOut() 같은 수.. 2022. 4. 10.
Express - 라우터의 파일로 분리 정리 라우터의 파일로 분리 정리 관리하는 페이지가 많아짐에 따라서 코드의 복잡도가 급격히 높아지게 된다. 복잡도를 낮추는 방법이 라우터다. 주소체계변경 main.js var express = require('express') var app = express() var fs = require('fs'); var path = require('path'); var qs = require('querystring'); var bodyParser = require('body-parser'); var sanitizeHtml = require('sanitize-html'); var compression = require('compression') var template = require('./lib/template.js').. 2021. 1. 14.
Express - 에러처리 에러처리 app.use(function(req, res, next) { res.status(404).send('Sorry cant find that!'); }); app.use(function (err, req, res, next) { console.error(err.stack) res.status(500).send('Something broke!') }); 위의 코드들을 맨 아래에 적용하면 에러 발생시 설정한 값이 뜨도록 설정할 수 있다. main.js const express = require('express') const app = express() const port = 3000 var fs = require('fs'); var qs = require('querystring'); var templ.. 2021. 1. 14.
Node.js and Mysql - 저자 관련 기능 구현 저자 관련 기능 구현 1. 저자 목록 보기 기능 구현 main.js var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); var template = require('./lib/template.js'); var db = require('./lib/db'); var topic = require('./lib/topic'); var author = require('./lib/author'); var app = http.createServer(function(request,response){ var _url = request.url; var queryData = url... 2021. 1. 12.
Node.js and Mysql - Node.js 정리정돈 Node.js 정리정돈 1. DB 설정정보 정리정돈 이제 정리정돈의 첫 시작으로 mysql을 연동시켰던 코드를 따로 분리하여 파일을 만들고 그 안에 따로 만들어 놓는다. 그리고 모듈화를 통해 main.js와 연동시켜준다. 위와 같이 db.js 파일을 main.js에 연동시켜주었다. 2. Node.js 코드의 정리정돈 (topic) topic.js라는 파일을 따로 만들어 mysql을 사용하여 node.js에 적용한 코드들을 그대로 따로 만든 파일에 옮긴 후 모듈화시켜 더욱 복잡하지 않게 하여 업무의 효율성을 더욱 높여주었다. 보기에도 깔끔하고 가독성이 좋아졌다. main.js var http = require('http'); var fs = require('fs'); var url = require('ur.. 2021. 1. 11.
Node.js and Mysql - My SQL join을 이용해서 구현하기 My SQL join을 이용해서 구현하기 mysql에 들어있는 위 두 테이블 데이터를 JOIN 기능을 Node.js에 적용하여 더 효율적으로 코드를 작성할 수 있다. 1. My SQL join을 이용해서 상세보기 구현 Main.js var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); var template = require('./lib/template.js'); var path = require('path'); var sanitizeHtml = require('sanitize-html'); var mysql = require('mysql'); var db = .. 2021. 1. 11.
Node.js and Mysql - Node.js에 My SQL 구현하기 Node.js에Nodejs에 My SQL 구현하기 1. mysql npm 세팅 $ npm install mysql 터미널에 위의 코드를 입력하여 mysql의 npm을 설치한다. mysql npm 홈페이지에서 복사해올 수 있는 세팅 코드를 js 파일 하나를 만들어 삽입한다. 주의할 점은 user, password, database의 mysql에서 설정했던 값들을 잘 입력해야한다. 이제 터미널에 $ npm install mysqljs/mysql을 입력하면 mysql의 데이터베이스 입력 데이터들이 쭉 나열되는 것을 확인 할 수 있다. 2. Node.js에 mysql 코드 설정 main.js var http = require('http'); var fs = require('fs'); var url = requi.. 2021. 1. 11.
ReactJs - input input PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.value }) } render() { return ( {this.state.name} ); } } export default PhoneForm; App.js import React, { Component } from 'react'; import PhoneForm from "./components/PhoneForm"; import './App.css'; class App extends Componen.. 2021. 1. 6.
ReactJs - LifeCycle API LifeCycle API 이 API 는 컴포넌트가 브라우저에서 나타날때, 사라질때, 그리고 업데이트 될 때, 호출되는 API 이다. 컴포넌트 초기 생성 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 API 들이 있다. constructor constructor(props) { super(props); } 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질 때마다 이 함수가 호출한다. componentDidMount componentDidMount() { // 외부 라이브러리 연동: D3, masonry, etc // 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc // DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등 } 이 API는 컴포넌트가 화면에 나타나게 됐을 때 호출.. 2021. 1. 6.
ReactJs - props 와 state props 와 state 리액트 컴포넌트에서 다루는 데이터는 props, state 이 두개로 나뉜다. props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없다. 반면에 state 는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. props 아래와 같이 새 컴포넌트를 만든다. Name.js import React, { Component } from 'react'; class Name extends Component { render() { return ( Hi My name is {this.props.name} 입니다. ); } } export default Name; 자신이 받아온 pro.. 2021. 1. 5.
ReactJs - JSX 기본 JSX가 적용되기 전에는 파일에서 JSX 를 사용하려면, 꼭 React 를 import 해주어야 한다. import의 예시 import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; 이렇게, import 를 하는 것은, 우리가 webpack 을 사용하기에 가능한 작업이다. 이렇게 불러오고나면 나중에 프로젝트를 빌드하게 됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게 된다. 컴포넌트의 JSX의 예시 class App extends Component { render() { return ( Hi ji seok To get started, edit src/App.js and save to relo.. 2021. 1. 5.
ReactJs - Update , Delete기능 구현하기 Update , Delete기능 구현하기 1. Update 구현 App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent" import Subject from "./components/Subject" import Control from "./components/Control" import CreateContent from "./components/CreateContent" import UpdateContent from "./components/UpdateContent" //UpdateContent.js 추가 연동 impor.. 2021. 1. 4.
ReactJs - Create 기능 구현 Create 기능 구현 1. mode 전환 기능 App.js import React, { Component } from 'react'; import TOC from "./components/TOC"; import ReadContent from "./components/ReadContent" //추가 import Subject from "./components/Subject" import Control from "./components/Control" import CreateContent from "./components/CreateContent"//추가 import './App.css'; class App extends Component { constructor(props){ super(props); t.. 2021. 1. 4.
ReactJs - 이벤트 이벤트 리액트는 사용자와 상호작용하는 애플리케이션의 핵심인 이벤트를 리액트에서 구현하는 방법이 있다. 이벤트 state props 그리고 render 함수 App.js import React, {Component} from 'react'; import Subject from "./component/Subject" import TOC from "./component/TOC" import Content from "./component/Content" import './App.css'; class App extends Component { constructor(props){ super(props); this.state = { mode: 'TEST1', //추가 TEST1:{title:'TEST1', desc:.. 2020. 12. 31.
ReactJs - state state React는 컴포넌트를 외부에서 조작할 때는 props를 내부적으로 상태를 관리할 때는 state를 사용한다. 기본 state의 개념 App.js mport React, {Component} from 'react'; import Subject from "./component/Subject" import './App.css'; class App extends Component { constructor(props){ //class안에서는 constructor의 함수는 생성자 함수이다. super(props); //super 메소드는 App 자신의 부모 Component에게 props라는 인자를 넘겨준다. this.state = { // super 메소드 이후 나오는 this도 부모의 함수안의 th.. 2020. 12. 31.
JQuery 폼 폼 서버로 데이터를 전송하기 위한 수단 JQuery는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다. JQuery 폼 API 문서 : http://api.jquery.com/category/forms/ Forms | jQuery API Documentation Bind an event handler to the “blur” JavaScript event, or trigger that event on an element. Bind an event handler to the “change” JavaScript event, or trigger that event on an element. Bind an event handler to the “focus” JavaScript event, or tr api.j.. 2020. 12. 29.
JQuery 엘리먼트 제어 엘리먼트 제어 jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다. http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of matched elements. Insert content, specified by the parameter, to the end of each element in the set of api.jquer.. 2020. 12. 28.
Node.js - 입력정보에 대한 보안 입력정보에 대한 보안 입력정보와 관련해서 보안적으로 처리해야 할 이슈가 있다. 아래와 같이 ../password.js 을 입력해주어 파일을 접근 시도를 하여 보안이 없다면 쿼리데이터는 알려주지 말아야할 파일 목록들을 그대로 노출시키는 이슈가 발생할 수 있다. 그래서 아래와 같이 path라는 메소드를 통해 ../을 통한 상위 디렉토리로 접근할 수 있는 경로를 차단해주었다. var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); var template = require('./data/muse.js'); var path = require('path'); //path라는.. 2020. 12. 26.
JQuery Event Event 시스템에서 일어나는 사건을 의미한다. javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. jQuery의 이벤트 크로스브라우징의 문제를 해결해줌 on로 이벤트 핸들러를 설치하고, off로 제거 trigger로 이벤트 핸들러를 강제로 실행 (예제2) click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함 예제 코드 2020. 12. 25.
Node.js - 기본적인 CRUD APP 기능들 구현하기 기본적인 APP 기능들 구현하기 1. 글생성 UI 만들기 var http = require('http'); var fs = require('fs'); var url = require('url'); // templateHTML 이름의 함수를 만들어 이 함수 안에 문서 내용을 넣어두었다. function templateHTML(title, list, body){ return ` WEB ${list} // '/create'라는 페이지 링크를 하나 만들어주었다. create ${body} `; } function templateList(filelist){ var list = ''; var i = 0; while(i < filelist.length){ list = list + `${filelist[i]}`; i .. 2020. 12. 19.
JQuery Wrapper Wrapper jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자') 맨앞의 jQuery 문자가 레퍼이며, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환시킨다. 레퍼의 안전한 사용 $(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 주의해야 한다. 제어 대상을 지정하는 방법 jQuery( selector, [context] ) jQuery( element ) test2 test 2020. 12. 18.
JQuery 이란 JQuery 엘리먼트를 선택하는 강력한 방법이다. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공한다. 자바스크립트 라이브러리라고 할 수 있다. 사용방법 http://jquery.org 에서 jquery 소스코드를 다운로드 한다. 위의 파일을 서버에 업로드 한 후 웹페이지 안에서 자바스크립트를 삽입한다. Javascript와 JQuery 비교 탭을 클릭했을 때 포커스를 색깔로 표시 변경하는 코드이다. 자바스크립트 본래의 코드보다 제이쿼리가 훨씬 간결해졌다. 2020. 12. 18.
Javascript ES6+ Destructuring assignment Destructuring assignment 배열의 해체할당 var colors = ['red', 'white', 'orange'] var first = colors[0] var second = colors[1] var third = colors[2] console.log(first, second, third) //결과: red white orange const colors = ['red', 'white', 'orange'] const [first, second, third] = colors console.log(first, second, third) //결과: red white orange 위의 두 코드의 결과는 똑같다. ES6+부터는 변수 이름을 배열화할 수 있게 되었다. const colors = .. 2020. 12. 14.
Node.js - Node.js에서 동기와 비동기 Nodejs에서 동기와 비동기 Node.js는 비동기적인 실행에 특화되어있다고 할 수 있다. 여기서 비동기와 동기를 설명하자면 동기는 차례대로 하나씩 하나씩 일을 처리해나가는 것이라면 비동기는 동시에 일을 처리해나가는 더 효율적인 방법이라고 말할 수 있다. 동기 var fs = require('fs') console.log('A'); var result = fs.readFileSync('fileB','utf8'); console.log(result); console.log('C'); 동기를 코드로 표현하였다. readFileSync 메소드는 file을 읽어오는 메소드이다. 여기서 불러올 fileB에는 텍스트 'B'가 저장되어 있다. 코드 결과를 보면 위에서부터 차례대로 결과가 쭉 나열되어 있는 것을 알 .. 2020. 12. 12.
Node.js - 파일 목록 알아내기 파일 목록 알아내기 파일을 한꺼번에 혹은 편리하게 관리하기 위해서는 컴퓨터에 파일 목록을 맡겨야한다. 즉 파일 목록을 알아내어 보내줘야 한다는 것이다. 아래 코드는 특정 폴더안에 있는 파일 리스트를 불러오는 코드이다. var testFolder = './data'; var fs = require('fs'); fs.readdir(testFolder, function(error, filelist){ console.log(filelist); }) data 폴더 안에 있는 파일 리스트들을 프롬프트 명령으로 불러온 것을 확인 할 수 있다. 응용 var http = require('http'); var fs = require('fs'); var url = require('url'); var app = http.cr.. 2020. 12. 12.
Javascript - Drag and Drop 기본 구현하기 마우스로 클릭 후 드래그해서 다른 곳으로 드랍하는 기능을 간단한 자바스크립트 코드로 구현해보았다. HTML 이미지를 드래그와 드랍을 하기 위해서는 html 태그에 드랍할 장소의 태그에 ondrop="drop(event)"을 각각 붙여줘야한다. 그리고 드래그할 이미지 태그에 드래그를 시작하는 요소라는 의미로 ondragstart="drag(event)"을 붙여준다. 또 드랍할 위치 태그에 allowDrop(event)는 다른 이벤트가 발생하는 것을 방지 하기 위한 함수이며 이는 자바스크립트에서 제어한다. CSS 아주 간단한 드랍 드래그 위한 박스를 두 개 만들었다. Javascript 함수 allowDrop()의 안에 preventDefault() 메소드는 다른 이벤트가 발생하는 것을 방지해주는 역할을 한.. 2020. 12. 9.
Javascript ES6+ template literal template literal console.log(`a bb ccc`) const a = 10 const b = 20 const str = `${a} + ${b} = ${ a + b }` console.log(str) backtick (`) 이라는 문자로 문자를 묶어주면 띄어쓰기, 빈 텍스트, 줄 바꿈 등을 따로 명령어를 사이에 입력을 하지 않아도 실제 타이핑하는 것처럼 표현할 수 있다. 또 backtick (`) 안에 있다는 조건하에 ${}로 값을 묶어주면 연산 또한 가능하다. 응용 const counter = { current: 0, step: 1, count: function() { return this.current += this.step }, reset: function() { return t.. 2020. 12. 8.
Javascript ES6+ forEach, map, reduce 메소드 forEach, map, reduce 메소드 forEach Array.prototype.forEach(callback[, thisArg]) callback : function (currentValue[, index[, originalArray]]) currentValue : 현재값 index : 현재 인덱스 originalArray : 원본 배열 thisArg : this에 할당할 대상. 생략시 global객체 for문을 돌리는 것이랑 같은 개념이다. const a = [ 1, 2, 3 ] a.forEach(function (v, i, arr) { console.log(v, i, arr, this) }, [ 10, 11, 12 ]) //결과: //1 0 [1, 2, 3] [10, 11, 12] //2 1.. 2020. 12. 8.
반응형