Welcome ! (441) 썸네일형 리스트형 [35일차 20210430] 비동기 / 동기 / 콜백함수 / promise / promise.all / async await --------------------------------------------------------------1교시---------------------------------------------------------- promise / 콜백함수 / 동기 / 비동기 개념 동기 방식 A가 요청하면 server가 응답할 때까지 기다리는 거 - > server도 다른 요청을 안받고 A의 요청을 처리할 때까지 B의 요청을 처리 안함 ex) console.log에 찍히는거 비동기 방식 A가 요청하면 server가 응답할동안 A는 개인 일, server도 할일 함. A의 요청 진행과 무관하게 B의 요청 들어오면 처리함 ex) console.log('start1'); setTimeout(()=>{ console.l.. [34일차 복습 및 정리] node.js proto prototype 이란 ? __proto__ / Prototype Object 분석 오늘 공부한 내용 proto, prototype ???? 기억도 잘 나지 않는 ㄷ ㅏ...... 다시 보면서 하나하나 복습해보자............... prototype JavaScript는 Class 라는 개념이 없다. 그래서 기존의 객체를 복사(Cloning) 하여 새로운 객체를 생성하는 prototype 기반의 언어이다. prototype 기반 언어는 객체 원형인 prototype을 이용하여 새로운 객체를 만들어 낸다. 이렇게 생성된 객체도 또 다른 객체의 원형이 될 수 있다. prototype은 객체를 확장하고 객체 지향적인 프로그래밍을 가능하게 함. prototype은 크게 두가지로 해석 됨 1. prototype 속성 2. proto 속성 (객체멤버) 요 두가지의 차이를 이해하려면 JS의 .. [34일차] 20210429 proto prototype Object etc function Person(){ this.eyes=2; this.nose=1; } //새로운 객체 생성 let kim = new Person(); let park = new Person(); console.log(kim.eyes); this = Person this = 자기 자신 Function과 Object의 차이 ? JavaScript 한해서 차이는 없다. 객체도 결국 함수이다. console.log(kim.eyes) //2 -> 이렇게 된 이유 Person Function 이 kim , park 에 적용됨 실질적으로 변수 4개 만든 것 kim이라는 변수에 eyes라는 것을 가져온다. function Person(){ this.eyes=2; this.nose=1; } //새로운 객체 생성 let k.. JavaScritp : proto, prototype 프로토, 프로토타입이란? JavaScript는 클래스라는 개념이 없다. 기존의 객체를 복사 (cloning)하여 새로운 객체를 생성하는 프로토타입 기반의 언어 이다. 프로토타입은 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있게 함. Class 상속 가능 Prototype은 상속 불가 -> Prototype Chian 을 형성하여 상속함. ㅇProto (비표준) 속성 : 이 속성은 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 숨은 링크로 참조하는 역할 클래스 기반 언어 vs 프로토타입 기반 언어 두 템플릿의 목적은 같다 = 객체를 생성할 수 있는 프레임 워크 역할을 하는 것 객체는 함수를 통해 만들어진다. Array, Function, Object, String과 같은 내장 생성자 함수들은 모두 함수로 정의되어 .. [33일차 복습 및 정리] node.js connection pool 이란? 노드 제이에스 커넥션 사용법 Connection pool (CP) 소프트웨어 공학에서 데이터베이스로의 추가 요청이 필요할 때 연결을 재사용할 수 있도록 관리되는 데이터베이스 연결의 캐시이다. ( ? ) 쉽게 생각하면 DB에 미리 연결된 connection을 미리 만들어 놓은 후 Pool에 보관하였다가 필요할 때 pool 에서 connection을 가져다 사용한 후 다시 server에 반환하는 것 사이트에서 client가 ----요청 ---> 백엔드 서버에서 DB서버에 접속해서 query 를 실행하게 된다. CP를 사용하면 접속 / 연결의 과정을 최소한으로 줄일 수 있어서 소요 시간, 서버 자원을 아끼고 과부하를 줄일 수 있다. 필요할 때 빌리고 다 쓰면 돌려줘서 원활하게 만든다. 어제까지 배운 DB와 연결하는 connection은 .. [33일차] 20210428 node.js connection pool 이론 / 코드 --------------------------------------------------------1교시 이론수업-------------------------------------------------- Client -------------------요청 get (http규격)-------> Server -----------------query문(ex. select * from ...)---------> DB Client server도 안됨 과부하를 어느정도 해소하고 싶어서 connection pool 이라는 거 Pool 개념의 일종 어떤 서버든 왠만한 bd접속은 connection pool로 이루어져 있음. DB - 접속할 때 mysql + connection 사용 Server -----query 사.. [32일차 복습 및 정리] 라우터 / middle-ware 사용해서 node.js express 서버 분산 관리 middle-ware, 미들웨어란? / next() 사용법 Router, 라우터는 node.js express로 서버를 만들 때 필수가 아니지만 쓰면 좋은 점 -> 파일들을 분산시켜 관리에 용이함. 오늘 라우터, 미들웨어를 배웠는데 이해가 잘 되지않아서 다시 찾아봤다. Middle ware (softward glue) = pipe 의 기능 middle ware란 양 쪽을 연결하여 데이터를 주고 샆을 수 있도록 중간에서 매개 역할을 하는 소프트웨어, 네트워크를 통해 연결된 여러 개의 컴퓨터에 있는 많은 프로세스들에게 어떤 서비스를 사용할 수 있도록 연결해주는 소프트웨어이다. 3계층 client / server 구조에서 middle ware 가 사이에 존재. 웹브라우저에서 데이터베이스로부터 데이터를 저장하거나 읽어올 수 있게 공통 서비스 및 기능을 애플리케이션에 제.. [32일차] 20210427 라우터 middle ware 사용해서 express server 분산시켜 만들기 배움 라우터 없어도 서버를 만들 수 있지만 많은 정보 (?) 가 들어갈 수록 떠 깔끔하게 + 더 관리를 잘 하도록 쓰는거다. middle ware url 바로 써서 보내기 -> get input form -> post Client가 req 요청 보낼 때 app.get('/', ()) 이 처리되기 전 middle ware 를 거침 (라우터) 사실 * 도 middle ware 이다. (쉽게 설명위해 위와같이 설명) /* middle ware */ const express = require('express'); const app=express(); app.get('/', (req,res)=>{ res.send('Good morning'); }) app.listen(3000,()=>{ console.log('erve.. [31일차 복습] req, res 배열, 객체 연습 교실을 바꿔서 1. mysql, node.js 설치 2. js terminal 명령들 npm init npm istall express npm install nunjucks chokidar npm install body-parser npm install mysql npm install dotenv 3. mysql source + path 까지 다시 연습을 후딱 하게 되었는데 좋은 연습이었다. 그동안 게시판 만드느라 까먹었던 내용들 다시 블로그 보면서 복습할 수 있었다. 앞으로 방향 앞으로 배울 것은 라우터, ajax, javascript 심화문법, db접목한 to do list 을 배울 예정 blckchainetc.tistory.com/71 Router, 라우터란? API란? AJAX란? 비동기란? 특징.. Callback 함수, 콜백 함수란 ? 사용 이유 특징 : non-block , 비동기 (asynchronous) 방식이다. -> 어떤 일을 다른 객체에게 시키고 그 일이 끝나기를 기다리지 않고 그 객체가 다시 나를 부를 때까지 내 할일을 하고 있을 수 있음. 콜백 함수를 써야하는 경우에 콜백함수를 쓰지 않는다면 콜백함수 과정이 끝나기 전에 다른 프로세스를 진행하게 되는 경우가 있다. 값을 읽기 전에 출력을 해버려서 undefined가 뜬다. 내용이 복잡할 수록 callback이 많아지므로 구조를 잘 짜서 함수를 쓰는게 좋다. 참고사이트 dalkomit.tistory.com/65 [Node.js 강좌] 10. Callback 함수란 무엇인가 ? Callback 함수 흔히 Node.js 에 대한 정보들을 검색하다 보면, Callback 지옥에 빠진다 ! .. Router, 라우터란? API란? AJAX란? 비동기란? 특징과 장점들 ROUTER, 라우터란? Routing defines the way in which the client requests are handled by the application endpoints. Implementation of routing in Node. js: There are two ways to implement routing in node. js which are listed below: By Using Framework.J The express. Router() function is used to create a new router object. This function is used when you want to create a new router object in your program t.. Node.js express로 서버 만들기 / 순서, 절차 정리 계속 업데이트 중 Node.js express로 서버 만들 때 다운 순서 간략히 -> 1. mysql, node.js, JS 설치 2. JS terminal 에서는 npm init npm install express npm install nunjucks chokidar npm install body-parser npm install mysql npm install dotenv 3. mysql prompt 창에서는 source +path; *mysql 다운 / 명령어 정리 blckchainetc.tistory.com/68 mySQL MariaDB 다운로드 / 사용법 / 명령어 총 정리 / 날짜 함수 date_format() now() 계쏙 업데이트 중 mariaDB 다운로드 및 설치 Mariadb 설치 방.. Git & Github 사용법 / 명령어 정리 / git 사용해서 github에 파일 올리기 / clone 다운받기 / 협업 시 사용방법 / git 다운로드 (계속 업데이트 중 🌱) 먼저 할일 : 1. git 다운받기 git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.com -> 클릭하면 자동으로 다운받아진다. 자동 다운이 실행안되었을 경우 'Click here to down.. mySQL MariaDB 다운로드 / 사용법 / 명령어 총 정리 / 날짜 함수 date_format() now() 계쏙 업데이트 중 mariaDB 다운로드 및 설치 Mariadb 설치 방법 offbyone.tistory.com/199 Windows 10에 MariaDB 설치하기 개발용으로 Windows 10 PC에 MariaDB 를 설치해 봅니다. 1. http://mariadb.org/ 에 접속하여 다운로드 페이지로 들어갑니다. 2. 실제 다운로드 URL은 https://downloads.mariadb.org/ 입니다. 현재 안정 버전은.. offbyone.tistory.com Maria DB 다운 주소 https://downloads.mariadb.org/downloads.mariadb.org/ Downloads - MariaDB downloads.mariadb.org 비밀번호 입력 (아무거나!) --------.. [31일차] 20210426 게시판 만들기 점검 , order by idx ---------------------------------------------------------1교시---------------------------------------------------- 교실을 바꿔서 다시 1. mysql, node.js, JS 설치 2. JS terminal 에서는 npm init npm install express npm install nunjucks chokidar npm install body-parser npm install mysql npm install dotenv 3. mysql prompt 창에서는 source +path; ---------------------------------------------------------2교시---------------.. input type checkbox 전체 선택 / 해제 JavaScript 로 만들기 getElementsByName 사용 게시판 All 번호 제목 작성자 수정 날짜 작성 날짜 조회수 {% for item in board_db %} {{item.idx2}} {{item.subject}} {{item.writer}} {{item.motoday}} {{item.today}} {{item.hit}} {% endfor %} 돌아가기 글쓰기 게시판을 만들다가 checkbox 를 쭈르룩 만들고 전체 선택 / 해제를 하기위한 JavaScript 는 위와 같다. 기본 참고한 예제는 ↓↓↓↓ select all 개 고양이 getElementsByName 으로 name="animal"인 elements의 NodeList를 만들고 forEach구문을 사용해서 각각의 요소 (checkbox)에 적용 참고글 hianna.tistory.com/432.. alert, confirm, prompt 이후 form submit action 제어하기 무력화 시키기 게시판 글쓰기에 제목, 작성자, 내용이 NULL 값, 빈값이라면 창을 띄워서 입력하라고 나오게 만들기 팝업창이 뜨고 확인버튼을 누르면 계속 뒤로 가기가 자동으로 되어서 (action="/writedone") 이 실행이되어서 이를 고치쳐다 발견한 명령어 글 작성하기 제목 : 작성자 : 내용 : 돌아가기 event.preventDefault(); 을 써주면 된다! 근데 처음 table만들 때 내용에는 NOT NULL 을 안썼어서 저렇게 JS 설정을 해줘도 내용이 없어도 action 이 그대로 취해진다. 팝업창 띄우는 방법 3가지 confrim(); 입력창 + 확인 버튼+ 취소 버튼 alert () 확인버튼 prompt(); 확인 버튼 + 취소 버튼 [30일차 복습2 / 숙제 ] node.js express서버 구축, 게시판 만들기 수정, 삭제, 조회수 올리기 - mysql DB연결 *{ margin:0; padding:0; } a{ text-decoration: none; } ul,li{ list-style: none; } 1. DB 연결부터 다시 해보기 SQL by vs CREATE DATABASE homepage7; use homepage7; CREATE TABLE board( idx INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY, subject VARCHAR(100) NOT NULL, writer VARCHAR(50) NOT NULL, content text, today datetime default CURRENT_TIMESTAMP, hit INT(11) ) AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4; auto_i.. [JavaScript] input type="text" 글 쓰지 못하게 막기 readonly disabled 차이 node.js 게시판 만들기 서버에 보내줄 modify.html readonly 여기서 넣은 요걸 수정하지 못하게 막는 방법 readonly 만 넣어주면 된다 그럼 다른건 수정이 되지만 "글 번호" text 부분은 text background 등이 다른 text 들과 같지만 클릭해서 수정이 안된다. disabled disabled 경우 아예 클릭도 안되고 회색으로 막혀 있음. * 주의사항 form 안에 disabled 해버리면 아예 disabled 시킨거라 form전송 값으로 전달이 되지 않는다. -> sumbit 했을 때 subject, writer, content 값만 전송이 /modifydone (action) 일로 됨. 그래서 나는 readonly를 써야겟다. [30일차 복습] node.js로 서버, 게시판 만들기 node.js template css 연결하기 mysql DB 연결하기 배열 for item in 변수 endfor node.js html +css : nunjucks template에 css 연결하기 node.js (server) 에 html을 연결한다는 것은 html을 server가 가져오는 것 css도 일반html에 이렇게 그대로 쓰면 X server가 html을 가져오듯 css를 가져와야함 express 안의 기본값으로 구현 가능 JS 추가 내용 app.use(express.static('public')); app.use(express.static('public')); //정적파일 = css, js, image, 동영상 // express 야 나 정적파일들은 (public) 안에 있는 내용으로 만들꺼야 express의 use?? or static??이라는 method를 활용 - 안에는 해당 css가 들어갈 폴더.. nunjucks 정리 if, for문 % 변수, 배열, 요소 nunjucks Nunjucks의 변수 {{ }} nunjucks에 건네주는 쪽에서 {{변수}} 를 넣어 줘야 한다. if, else, endif 프로그래밍에 사용할 연산자를 사용할 경우 {% %} 을 사용한다. {% for [변수] in [배열]} {{[변수],[요소]}} {% endfor %} block, endblock include와 같은 개념 A.html {% block content %} {% endblock %} B.html {% extends "A.html" %} {% block content -%} (B.html에서만 보여줄 내용들 ㅇㅇㅇㅇㅇㅇ) {% endblock %} -> A.html 의 블록 부분에 B.html에서 보여줄 내용들이 보이게 된다. set 설정에 사용하는 거 set t.. [30일차] 20210423 node.js로 게시판 만들기 mysql연결, create table by Visual Studio CRUD 기본 -------------------------------------------------------------------1교시------------------------------------------------------- Nunjucks if, for문 {% for [변수] in [배열]} {{[변수],[요소]}} {%forend %} velog.io/@pkbird/Nunjucks-basic Nunjucks 정리 Nunjucks의 완전 기초적인 기능만 정리해보았다. velog.io nunjucks template에 css연결하기 res.render('join',{ name:req.body.user_name, id:req.body.user_id, pw:req.body.user_pw, }) 가져와서 뿌려.. mySQL Primary key PK 뜻, 의미, 특징 정리 Primary Key (PK), 기본키 - 해당 테이블에서 가 ~ 장 기본적인 값 (행을 고유하게 구분해 주는 최소의 정보) - 단일값(Unique) ex)주민등록증처럼 - 하나 이상의 컬럼이 그룹화되어 기본키로 쓰일 수 있음 (그 column, 여러개의 컬럼들의 그룹을 *candidate key 라고 함. ) - 한 테이블에 세 개의 candidate key(회원번호, 주민번호, - 기본키는 null 상태가 될 수 없다. - 모든 테이블에는 PK가 반드시 존재해야하며 단 1개만 존재해야 한다. - 관계형 db상 모든 테이블은 반드시 하나의 기본 키를 가져야함. (최선) - 관례상 테이블의 첫 번째 컬럼을 pk로 하지만 반드시는 아님. - create table 명령어 사용할 때 꼭 잊지말자. pk만들기.. [29일차 복습 정리] express로 서버 만들기 html, mariaDB 연결하기 1. 오늘 한 최종js, html2개, env 외우기 2. 어제 한거 app.post 부분 외우기 3. 다시 새로운 파일 만들어서 따라 해보기-> 내일.. 4. 숙제하기 1. 외우자 express-> nunjucks -> body-parser -> mysql -> dotenv ------------------------------------------------------안보고 쳐보기 1----------------------------------------------------------- -> connection 부분 보고침 -> 문제 : env - database, password 부분만 안됨. -> 문제 해결 ! .env 파일을 views 파일 안에 넣어놓아서 안됐다. JS require('dot.. 이전 1 ··· 13 14 15 16 17 18 19 다음
