반응형 자바스크립트112 JS ES5 핵심 개념(JS ES5 Core Concept) JS ES5 핵심 개념(JS ES5 Core Concept) 1. 데이터 타입(Data Type) 데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말합니다. - 기본형(Primitive Type): 변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 합니다. 즉 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. 객체가 아니면서 method를 가지지 않는 6가지의 타입이 있습니다. 원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다. string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 .. 2022. 5. 5. 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. Typescript 클래스(Class) 클래스(Class) 기본 class을 이용한 타입 정의 class Person { name: string; age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } sayHello() { console.log('안녕'); } } 맴버 변수에서 name과 age을 타입정의하고 있으며 age는 초기값으로 0을 할당하고 있다. constructor에서는 맴버 변수를 초기화하고 있다. class 상속 개념 class Person { sayHello() { console.log('안녕'); } } class Programmer extends Person { fixBug() { console.log('버그.. 2021. 5. 6. Typescript enum 타입 enum 타입 enum 타입이란 자바스크립트에는 없고 타입스크립트에만 있는 것인데 각각 enum 타입으로 열거형을 사용하여 이름이 있는 상수들을 정의할 수 있게된다. enum Fruit { Apple, Banana = 5, Orange, } console.log(Fruit.Apple, Fruit.Banana, Fruit.Orange) // 0 5 6 위의 코드를 보면 enum 타입을 이용하여 객체 형식의 열거형으로 타입들의 상수들을 정의할 수 있게되었다. 이때 초기화 되지 않은 열거형의 첫번째 값은 '0'으로 시작하며 만약 Apple = 1 이라고, 값을 지정해 주면, 다음부터는 자동증가하여 Fruit.Apple 은 1, Banana 은 2, Orange 는 3가 된다. "use strict"; Obje.. 2021. 5. 5. Typescript 기본 타입 정의하기 타입 정의하기 타입스크립트는 타입을 원하는대로 정의할 수 있다. const size: number = 123; const isBig: boolean = size >= 100; const msg: string = isBig ? '크다' : '작다'; const values: number[] = [1, 2, 3]; const values2: Array = [1, 2, 3]; const data: [string, number] = [msg, size]; 위와 같이 변수 옆에 ': 타입'을 해주면 타입스크립트에서는 타입을 인식하여 변수에 정해진 타입과 다른 것이 들어오면 곧바로 오류가 발생했다는 것을 알려준다. console.log('typeof 123 =>', typeof 123) console.log('ty.. 2021. 5. 5. 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. Express - 기본 세팅 시작 기본 세팅 시작 npm install exppress --save 위 코드를 node.js가 실행된 상태에서 터미널에 명령하여 express 프로그램을 다운로드한다. expressjs.com/ko/starter/hello-world.html Express "Hello World" 예제 Hello world 예제 기본적으로 이 앱은 여러분이 작성할 수 있는 가장 간단한 Express 앱일 것입니다. 이 앱은 하나의 파일로 된 앱이며 Express 생성기를 통해 얻게 되는 앱과는 같지 않습니다. (이 예제 expressjs.com 위 사이트에 들어간다. express가 실행되는지 확인하는 간단한 코드가 주어진다. const express = require('express') const app = expres.. 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 - 배열을 다루는 CRUD 구현 배열을 다루는 CRUD 구현 생성과 렌더링 리액트애서는 state 내부의 값을 직접적으로 수정하면 절대로 안된다. 이를 불변성 유지라고 하는데, push, splice, unshift, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 적합하지 않는다. 그 대신에, 기존의 배열에 기반하여 새 배열을 만들어내는 함수인 concat, slice, map, filter 같은 함수를 사용하면된다. App.js import React, { Component } from 'react'; import PhoneForm from "./components/PhoneForm"; import './App.css'; class App extends Component { id =2 state = { information.. 2021. 1. 7. 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 - 이벤트 이벤트 리액트는 사용자와 상호작용하는 애플리케이션의 핵심인 이벤트를 리액트에서 구현하는 방법이 있다. 이벤트 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 탐색 탐색 체인 컨텍스트를 유지하면서 제어의 대상이 되는 엘리먼트를 변경하는 기법이다. ${'#root}.addclass{'s'}.removeClass{'s'}.add('s').addclass{'s'}.removeClass{'s'}.first{'s'}........ 위의 예시처럼 계속 체인처럼 연결하여 탐색을 계속 코딩할 수 있다. .add(selector) : 엘리먼트를 추가한다 .andSelf() : 현재 엘리먼트 셋에 이전 엘리먼트 셋을 더 한다 .children([selector]) : 자식 엘리먼트를 선택한다 .closest(selector) : 가장 가까운 selector 조상 엘리먼트를 탐색한다 .each(function(index,Element)) : 현재 엘리먼트 셋에 반복 작업을 실행한다 ... 2020. 12. 30. ReactJs - 컴포넌트 제작하기 컴포넌트 제작하기 컴포넌트를 제작하기 전 아주 간단한 pure.html 라는 파일을 pubilc 폴더 안에 만들어 주었다. pure.html WEB Hi, My name is jin seok. HTML CSS Javascript HTML HTML is HyperText Markup Language. pure.html 부분에서 부분만 리액트에 컴포넌트 적용시켜보고자 한다. WEB Hi, My name is jin seok. 일단 src 폴더 안에 있는 App.js 파일을 열어 컴포넌트를 제작한다. App.js import React, {Component} from 'react'; import './App.css'; class App extends Component { //자바스크립트의 class 함수라고 .. 2020. 12. 30. 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 - 출력정보에 대한 보안 출력정보에 대한 보안 페이지에서 사용자가 업데이트나 수정을 하였을때 폼 값 자체를 태그와 같은 것으로 버그를 유발하며 출력 정보를 조작할 수 있다. 아래의 예처럼 태그로 alert 경고창을 뜨게 하도록 할 수도 있다. 이러한 버그는 아주 기본적인 예시일 뿐이며 더 나아간다면 정보 탈취 등등 많은 심각한 보안 문제로 사건이 커질 수 있다. 이를 해결하기 위해서는 필터링 처리를 하는 일명 '소독'이 필요하다. 아래 사이트는 npm이라는 모듈의 정보를 서비스 제공하는 사이트이다. 여기서 HTML의 와 같은 태그들을 필터링하기 위한 모듈 서비스 중 하나인 "sanitize-html"의 모듈을 찾을 수 있다. 유의할 점은 npm 모듈을 모두 신뢰하면 안된다. 사이트에 들어가 다른 개발자 사용자들의 후기와 다운로드.. 2020. 12. 26. JQuery Event Event 시스템에서 일어나는 사건을 의미한다. javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등) 이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. jQuery의 이벤트 크로스브라우징의 문제를 해결해줌 on로 이벤트 핸들러를 설치하고, off로 제거 trigger로 이벤트 핸들러를 강제로 실행 (예제2) click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함 예제 코드 2020. 12. 25. Javascript ES6+ Promise Promise Promise의 상태 unnsettled (미확정) 상태: pending. thenable하지 않다. settled (확정) 상태: resolved. thenable한 상태다. - fulfilled (성공) - rejected (실패) const promiseTest = param => new Promise((resolve, reject)=> { setTimeout(()=> { if(param) { resolve("해결") } else { reject(Eroor("실패")) } }, 1000) }) const testRun = param => promiseTest(param) .then(text => { console.log(text)}) //.then은 resolve 의미로 성공했을 때 .. 2020. 12. 22. Javascript ES6+ Class Class ES5의 프로토타입 메소드 대신 ES6+에서 더 편히라게 쓸 수 있는 Class 가 생겨났다. class의 기본 쓰임 // 클래스 리터럴 class Person1 { } console.log(Person1.name) // 기명 클래스 표현식 const Person2 = class Person22 { } console.log(Person2.name) // 익명 클래스 표현식 let Person3 = class { } console.log(Person3.name) ES5 버전의 프로토타입 function Person1 (name) { this.name = name } Person1.prototype.getName = function () { //prototype 메소드이다. return this... 2020. 12. 21. 이전 1 2 3 4 다음 반응형
