본문 바로가기
반응형

프로그래밍 개발247

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.
MySQL - CRUD CRUD INSERT CRUD 중 C인 Create에 속하는 생성기능에 대해서다. INSERT INTO topic (title,description,created,author,profile) VALUES('ORACLEL','ORACLE is...', NOW(),'k0502s_1','developer'); 위와 같은 형태로 데이터 표에 삽입할 수 있다. 위와 같은 형식으로 INSERT하여 데이터를 넣어보았다. INSERT을 실행 한 후 이름이 topic인 데이터 표를 SELECT * FROM topic이라는 명령어로 확인할 수 있었다. 더 원하는 데이터 추가를 같은 방식으로 계속 넣어 보았다. 결국 위와 같은 데이터 테이블이 완성되었다. SELECT CRUD 중 R인 Read의 읽기의 기능에 대한 것이다... 2021. 1. 2.
MySQL - 테이블 생성 테이블 생성 아래는 테이블을 만드는 코드의 수 많은 예들 중 몇 개일 뿐이다. 아래 코드 말고도 수 많은 코드가 존재하므로 검색으로 더 많은 기능 코드들을 찾을 수 있다. mysql> USE k0502s; Database changed mysql> CREATE TABLE topic( //topic이라는 이름으로 테이블 생성 시작 -> id INT(11) NOT NULL AUTO_INCREMENT, //첫번째로 적는 곳은 컬럼의 이름을 결정한다. -> title VARCHAR(100) NOT NULL, // INT(칸 수)는 정수만 오도록 설정하는 명령어 -> description TEXT NULL, // NOT NULL은 정보가 없어서는 안되게 하는 명령어 -> created DATETIME NOT NU.. 2021. 1. 2.
MySQL - 기본 서버 접속하기 mysql -uroot -p 위와 같이 CMD에 코드를 작성하고 엔터를 치면 패스워드를 입력하고 나온다. 패스워드를 입력하고 엔터를 치면 MySQL에 접속이 완료된다. -u 뒤에 나오는 root는 관리자 이름이다. root는 최상위 관리자이다. -p는 패스워드이다. 뒤에 패스워드를 입력해도 되지만 노출되기 때문에 -p만 쓰고 엔터를 치면 패스워드 입력창이 나오게 된다. 스키마(데이터베이스) 사용하기 mysql> CREATE DATABASE k0502s; //k0502s라는 데이터 베이스 창조 Query OK, 1 row affected (0.01 sec) mysql> SHOW DATABASES; //데이터 베이스 보여주기 +--------------------+ | Database | +-.. 2021. 1. 2.
MySQL - 다운로드 및 실행방법 다운로드 및 실행방법 아래 사이트에서 bitnami 라는 다운로드 사이트가 있다. WAMP 중 M이 MySQL이다. https://bitnami.com/stack/wamp/installer Install WAMP, Download WAMP show MD5 4693f36e1c49dd8f2d13bc031e6b8381 SHA1 e9eb910949151a5401689c4527c2267c3de166ee SHA256 db4b15a834f67f7746e08847823ff65ddb96d86746946c92664f518397372f0a bitnami.com 다운이 완료되고 인스톨까지 마쳤으면 아래와 같이 창이 등장한다. 혹은 인스톨 당시 인스톨한 드라이브로 찾아가 bitnami 파일 폴더를 찾아 스스로 실행시키면 된다... 2021. 1. 2.
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.
React.js - 리액트 개발 환경 구축하기 리액트 개발 환경 구축하기 1. node.js에 들어가 node.js 프로그램을 다운로드한다. 최신 버전보다는 안정화 버전을 다운받는 것이 좋다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 명령 프롬프트를 실행하여 npm과 react.js을 구축한다. npm -v을 입력하고 엔터를 친다. npm install -g create-react-app@2.1.8을 입력하고 다시 엔터를 치면 npm이 다운로드되어 깔린다. 이제 react을 설치할 준비가 되었으므로 create-react-app을 써주어 언터를 누르면 구축 준비가 된다. 이제 바탕화면에 react.. 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.
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.
JQuery Chain Chain jQuery의 메소드들은 반환값으로 자기 자신을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. chain의 장점 코드가 간결해진다. 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함. 예시 Jin seok kim 탐색(traversing) chain의 대상을 바꿔서 체인을 계속 연장시킬 수 있는 방법 너무 복잡한 chain은 코드의 가독성을 떨어 뜨릴 수 있다. 참고 사이트 http://api.jquery.com/category/traversing/ Traversing | jQuery API Documentation Create a new jQuery object with elements added to the set of m.. 2020. 12. 23.
JQuery 선택자 선택자란? jQuery wrapper에는 CSS 선택자가 위치할 수 있는데, 이를 통해서 제어하려는 엘리먼트를 빠르고 정확하게 지정할 수 있다. 예제 코드 - id 선택자 : #선택자 - class 선택자 : .선택자 - 엘리먼트 선택자: 엘리먼트 자체 - 다중 선택자 : #선택자, #선택자2 아래 코드에서 JQuery을 이용하여 선택자를 불러오는 것을 확인 할 수 있다. 아래 jQuery 사이트에서 더 다양한 선택자를 찾아볼 수 있다. 활용할 수 있는 이해만 하면 선택자를 다 외우지 못하도 활용할 수 있다. https://api.jquery.com/category/selectors/ Selectors | jQuery API Documentation Select all elements that are i.. 2020. 12. 22.
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.
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+ Generator Generator 중간에서 멈췄다가 이어서 실행할 수 있는 함수. function 키워드 뒤에 `*`를 붙여 표현하며, 함수 내부에는 `yield` 키워드를 활용한다. 함수 실행 결과에 대해 `next()` 메소드를 호출할 때마다 순차적으로 제너레이터 함수 내부의 `yield` 키워드를 만나기 전까지 실행하고, `yield` 키워드에서 일시정지한다. 다시 `next()` 메소드를 호출하면 그 다음 `yield` 키워드를 만날 때까지 함수 내부의 내용을 진행하는 식이다. 선언 방식 function* gene () { yield } const gene = function* () { yield } const obj = { gene1: function* () { yield } //메소드 함수 가능 *gene2 .. 2020. 12. 18.
Javascript ES6+ Iterator Iterator 반복을 위해 설계된 특별한 인터페이스를 가진 객체라고 할 수 있다. - 객체 내부에는 `next()` 메소드가 있는데, - 이 메소드는 `value`와 `done` 프로퍼티를 지닌 객체를 반환한다. - `done` 프로퍼티는 boolean값이다. Iterator 구현 예시 코드 객체 내의 프로퍼티를 iterable한 개체로 활성화 시켜주는 것을 확인 할 수 있다. const iter = { items : [10, 20, 30], count: 0, next () { const done = this.count >= this.items.length return{ done, value: !done ?this.items[this.count++]:undefined } } } console.log(i.. 2020. 12. 18.
Javascript ES6+ Iterable Iterable Iterable의 정의 내부 요소들을 공개적으로 탐색(반복)할 수 있는 데이터 구조. [Symbol.iterator] 메소드를 가지고 있다. 아래와 같은 코드들이 iterable한 예이다. const arr = ['a', 'b', 'c'] const set = new Set(['a', 'b', 'c']) const map = new Map([[false, 'no'], [true, 'yes'], ['well', 'soso']]) const str = '문자열도 이터러블하다' ※ Iterable의 의미는 내부 요소들을 공개적으로 반복 및 탐색할 수 있는 데이터 요소를 뜻한다. [Symbol.Iterable] 매소드를 가지고 있는 것이 특징이다. 개체 자신이 iterable한 경우 array,.. 2020. 12. 18.
Javascript ES6+ Map Map Map을 쓰는 이유 중 하나는 객체의 단점을 보안하기 위한 것이다. 객체의 단점 iterable하지 않다. (iterable의 의미는 순서대로 순환 및 반복한다는 흐름이다) 키를 문자열로 취급한다. 키값의 unique함을 완벽히 보장하지 못함. 프로퍼티 개수를 직접 파악할 수 없다. iterable하지 않다. const o = { a: 1, b: 2, c: 3 } for (let key in o) { console.log(key, o[key]) } /결과: // a 1 // b 2 // c 3 Object.prototype.method = function () { } for (let key in o) { console.log(key, o[key]) } //결과: //a 1 //b 2 //c 3 /.. 2020. 12. 16.
Javascript ES6+ Set set Array.prototype.pushUnique = value =>{ if(!this.include(value)){ this.push(value) } }return this const arr = [1, 2, 3] arr.pushUnique(5) arr.pushUnique(4) arr.pushUnique(3) console.log(arr) //결과: arr(5) {1, 2, 3, 5, 4} ///// const set = new Set([1,2,3]) set.add(5) set.add(4) set.add(3) console.log(set) //결과:Set(5) {1, 2, 3, 5, 4} set은 중복이 허용되지 않으며 순서를 보장하는, 값들로만 이루어진 리스트를 만드는 역할을 한다. 위의 결과를 .. 2020. 12. 16.
반응형

티스토리툴바