전체 글 (441) 썸네일형 리스트형 [42일차] 20210512 팀프로젝트 시작 , 논의 자습, 팀프로젝트 시작, 논의 3명이 한 조가 되어 원하는 서버를 만들어보는 일주일 프로젝트를 준비한다 ! 우리 조는 이런저런 컨셉을 정하다가 일단 게시판 형태로 만들며 컨셉을 생각해보기로 했다. 일단 오늘 집에가서 할 일을 정했다. 한 분은 로그인, 회원가입 부분, 나는 게시판의 글쓰기, 수정, 삭제 부분, 다른 한 분은 댓글을 하기로 했다 ! 최근 배운 내용들이라 다행인데 그 외의 것들을 더 추가해 보고싶다 path modules 정리하기 uxicode.tistory.com/entry/nodejs-path-%EB%AA%A8%EB%93%88 nodejs - path 모듈 path 모듈 - http://nodejs.sideeffect.kr/docs/v0.10.0/api/path.html path.reso.. [41일차 복습 및 정리 2] JavaScript 회원가입 로그인 express ajax axios로 server 만들기 / reloading 없는 event 구현하기 아래에서 사용한 코드는 ↓↓ github.com/ohse-emily/JavaScript_join_login ohse-emily/JavaScript_join_login Contribute to ohse-emily/JavaScript_join_login development by creating an account on GitHub. github.com 1. text 글자 길이 제한하기 text 글자 길이 제한은 주민등록증, 전화번호, 핸드폰 번호 등, 정해져 있는 형식에 주로 쓰인다. 회원가입할 때 이름을 20글자로 제한 두는 방법 views - user - join.html join.html 회원가입 PAGE 아이디 비번 이름 // [41일차 복습 및 정리 1] JavaScript 로그인 실패 시 alert, 회원가입 이미지 업로드, image upload, 이미지 nunjucks html 뿌리기, 이미지 예외조건처리 오늘 수업 : ajax(axios)를 사용해서 로그인, 회원가입 server html에 reloading없이 alert 등을 바로 띄우는 기술 (?) 을 공부함. 1. 로그인 시 DB에 있는 Data와 비교해서 로그인 실패(alert) 구현하기 routers - user - user.controller.js login_check 기존 코드 let login_check = async (req,res)=>{ let userid = req.body.userid; let userpw = req.body.userpw; let result = await User.findOne({ where:{userid, userpw} }) req.session.uid = userid; req.session.isLogin = tr.. enctype란? enctype의 속성 / nunjucks post로 서버에 이미지 보내기 <form method="post" enctype="multipart/form-data"> enctype = encoding type 말 그대로 인코딩의 형태를 지정해주는 것 태그와 함께 쓰이며 form 안의 data 가 server로 제출될 때 해당 데이터를 어떻게 인코딩할지 인코딩되는 방법을 명시 한다. ** method가 post일 경우에만 사용 가능 기본 frame enctype="____" 안에 들어갈 속성값 3가지 속성값 설명 application/x-www-form-urlencoded 기본값, 모든 문자들을 서버로 보내기 전 인코딩됨을 명시 multipart/form-data 모든 문자를 인코딩하지 않음을 명시 보통 form 요소가 파일, 이미지를 서버로 전송 시 주로 사용 text/plain 공백 문자 (space)는 "+" 기호로 변환, 그 외의 나머지 문자는 모두 인코딩되지 .. [41일차] 20210511 JavaScript ajax axios 회원가입 이미지 추가, reloading없이 로그인 성공 실패 여부 alert / node.js express sequelize ajax npm install moment / multer / next(); / 회원가입 로그인 할 때 DB 비교해서 성공 / 실패 로직 만들기 routers - user - user.controller.js 기존 코드 let login_check = async (req,res)=>{ let userid = req.body.userid; let userpw = req.body.userpw; let result = await User.findOne({ where:{userid, userpw} }) console.log(result) req.session.uid = userid; req.session.isLogin = true; req.session.save(()=>{ res.redirect('/'); }) } result 콘솔로그 확인 result = user가 login 할 때 입력.. Github PUSH ERROR 403 The requested URL returned error / remote: Permission .git denied to / Fetal : unable to access 5. git push origin master github 저장소로 PUSH ! 넣기 Push 할 때 많이 뜨는 ERROR 403 remote: Permission to ohse-emily/JavaScript.git denied to LSH7875. fatal: unable to access 'https://github.com/ohse-emily/JavaScript.git/' : The requested URL returned error: 403 주의할 점 * 여기서 ERROR 403이 뜬다면 이는 github에 코드를 PUSH할 때 해당 주소에 대한 권한이 없기 때문에 거절당한다. 해결 방법 (1) 1. git remote set-url origin https://github-username@githu.. [40일차 복습 및 정리] JavaScript express node.js Ajax axios 사용하기 / Ajax란? Ajax server mySQL DB 사용법 =====================AJAX 이론 ====================== 1. AJAX 란? Ajax 뜻 : Asynchronous Javascript and XML = 비동기식 자바스크립트와 xml asynchronous 미국∙영국[eɪˈsɪŋkrənəs]발음듣기 형용사 동시에 존재[발생]하지 않는 Ajax 는 비동기 통신을 위해 만들어진 JavaScript의 라이브러리 중 하나이다. 브라우저가 가지고 있는 XMLHttpRequest객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부 데이터만 load하는 기법이다. 이로써 효율적인 시간과 자원을 아낄 수 있다. http는 한번 page loading 할 때마다 모든 내용을 받아지고 준비되면 보여준다. (로딩 시간이 있으면 .. [40일차] 20210510 Ajax란? server express node.js ajax axios 사용해보기 Ajax Asynchronous Javascript and XML , 비동기식 자바스크립트와 xml - 비동기 통신을 위해 만들어진 JavaScript의 라이브러리 - 브라우저가 가지고 있는 XMLHttpRequest객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지의 일부 데이터만 로드하는 기법. - JavaScript를 사용한 비동기 통신, Client 와 server간 XML DATA를 주고받는 기술 => JavaScript를 통해 server에 데이터를 요청하고 JavaScript를 통해 결과를 받는 것 html 문제 사항 - page 한 번 load할 때마다 모든 내용을 받아서 준비되면 보여줌 (로딩하는 시간이 걸림) AJAX - page loading없이 page를 가져오기 Ajax가 어떻.. JavaScript node.js express sequelize mySQL 사용해서 로그인, 회원가입 server 서버 만들기 총정리 지금까지 배운 내용 안보고 만들어보기 -> 틀린부분 체크** + 총 정리 1. Visual studio - terminal 환경설정 1-1. 아래 명령어 실행 npm init npm install express nunjucks body-parser sequelize sequelize-cli mysql2 npx sequelize init 1-2. 생성된 파일들 중 쓰지 않을 파일 (migrations, seeders) 삭제 1-3. config 의 development 부분의 정보 내 것과 일치하게 변경 1-4. models파일의 index.js 내용 중 필요없는 부분 삭제 2. server.js 작성 및 server 접속 test 2-1. server.js 파일 만들고 기본 코드 작성 (server.js.. [39일차 복습 및 정리] JavaScript Class, 자바스크립트 클래스, node.js express sequelize로 로그인, 회원가입, 로그아웃 등 연습 JavaScript Class란? - Class란 "특별한 함수" - Class란 객체를 생성하기 위한 템플릿, prototype을 이용하여 만들어짐 - Class는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 method를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태 (멤버 변수) 와 매서드(함수)로 구성된다. Class basic frame class Rectangle{ constructor(height, width){ this.height = height; this.width = width; } } 함수 선언과 다르게 클래스 선언은 hoisting이 일어나지 않는다. 클래스를 사용하기 위해서는 클래스를 먼저 선언해야한다. const a = new Rectangle(); class.. [39일차]20210507 CLASS, 클래스 / static method, 정적 매서드 / super, 상속에 대해 / server 회원가입 , 로그인하기 Class에 대해 더 배우기 ! function Person(name,age){ this.name=name; this.age=age; } let foo = new Person ('foo', 20); let jay = new Person ('jay', 21); 이렇게 만들면 여러개 객체를 만들 수 있음 -> 조금 불편함 -> CLASS 만들어진 이유 함수 안 this.name / this. age는 바로 붙는다 Class는 어떠한 객체를 만들기 위해, 어떠한 틀을 만들고 클래스, 함수 사용해서 new라는 생성자 이용하게 되는 것 = ? ? class Person{ constructor(name,age){ this.name=name; this.age=age; } } let foo = new Person('f.. [38일차 복습 및 정리] sequelize, 시퀄라이즈 세팅하기, 사용법 / Router 이용해서 server 만들 때 파일 쪼개기, 나누는 방법 1. Visual Studio Terminal 세팅 1-1 . 아래 명령어 실행하기 npm init npm install express nunjucks sequelize sequelize-cli mysql2 npx sequelize init 모두 성공적으로 다운, 설치하면 config, migrations, models, node_modules, seeders, package-lock.json, padkage.jon 파일이 생긴다. -> 필요하지 않은 migrations, seeders 삭제 ! 1-2. models - index.js 에서 필요없는 부분 삭제하고 아래만 남겨둔다. 'use strict'; const fs = require('fs'); // const path = require('path.. [38일차] 20210506 sequelizes setting 시퀄라이즈 세팅, 사용하기, 저번시간 공부한 거 빠르게 복습하는 시간! 1. npm init 2. npm install express nunjucks sequelize sequelize-cli mysql2 3. npx sequelize init npm - 다운받기 npx - 다운받은 걸 설치하는 거, 실행할 때, 결과물 얻어내려고 할 때 아래 두 파일이 생김 -> 두 파일 분석할 줄 알아야함. config - config.json models - index.js models-index.js 'use strict'; // const path = require('path'); const Sequelize = require('sequelize'); // const basename = path.basename(__filename); con.. [37일차 복습 및 정리] MySQL sequelize 시퀄라이즈 세팅, Node.js express CRUD 시퀄라이즈 사용법 Sequelize 세팅 0 . npm init 명령 first 1. npm install express nunjucks sequelize sequelize-cli mysql2 설치하기 책에는 install morgan / npm i -D nodemon 도 적혀있다. npm install nodemon -> 은 나중에! server 켰다 껐다 연습해야해서 -nunjucks : html render를 위한 패키지 -Sequelize-cli : sequelize 명령어를 실행하기 위한 패키지 -mysql2 : MySQL과 Sequelize를 이어주는 드라이버 역할 (DB프로그램x) 2. npx sequelize init npm - 우리가 다운받지 않은 상태에서 폴더 다운 받는 개념 (기본적인 틀 제공) npx.. github remote origin already exists 에러 / 저장소에 코드 추가 에러 해결 방법 github에 코드를 넣을 때 자주 발생하는 에러 github remote origin already exists 4. git remote add origin [url주소] git hub의 내 저장소, repository로 보내기 git hub에서 본인이 만든 저장소의 주소를 복사 해서 git remote add orgin url주소 명령어 입력하면 된다. * 여기서 ERROR 가 많이 나온다. git remote add origin [url주소] 를 정상적으로 입력해도 나의 github저장소에는 코드가 잘 도착하지 않았다. -> 다시 위의 명령어를 입력하니 ERROR: remote origin already exists. 라고 나온다. 이 때 해결 방법은 기존의 했던 것을 삭제하고 1. git remo.. [37일차] 20210504 sequelize 세팅하기(visual studio) , sequelize 사용해보기 1. npm install express nunjucks sequelize sequelize-cli mysql2 설치하기 nodemon - 편하고 좋은 것 (server 껏다 켰다 연습하기 때문에 지금은 안쓸 것!) 2. npx sequelizes init (폴더, 폴더 안 파일들을 줌) npm - 우리가 다운을 받지 않은 상태 - 폴더를 다운받은 것 - 기본적인 틀 제공 npx - install 해서 다운받은 폴더를 실행시켜서 세팅해준 것 * config 폴더 안 config 파일 존재, models 폴더 안 index.js 파일 존재 config - 접속 정보를 저장해주는 객체 실 서버의 정보를 development 연습(test server)은 test 상품 정보는 production에 담아 달라 .. [36일차 복습 및 정리] sequelize 찍먹, mySQL JOIN에 대해 (mySQl left join, right join, inner join, full outer join) 오늘 수업은 sequelize 이론, db스키마 등 큰 그림(?) 그리는 걸 배웠다. Sequelize 는 orm 의 일종이다. sequelize는 다양한 dbms에 사용 가능하다. (dbms들이 보통 테이블 형태이기 때문) Orm(Object Relational Mapping ) 이란 ?? = DATA를 객체로 표현하는 것 (JavaScript의 객체를 공부 더 해봐야겠다. ) * mapping - 엑셀 (객체(?)) 처럼 똑같이 사용되는 ? * 매핑 매핑(mapping)이란 하나의 값을 다른 값으로 대응시키는 것을 말한다. 한자로는 사상(寫像)이라고 한다. '맵핑'이 아니라 '매핑'이 올바른 표기법이다. 매핑은 지도를 뜻하는 맵(map)에서 나온 말이다. 지도에 표시한 정보가 현실 세계와 1:1로 대.. [36일차 복습 및 정리2] MySQL JOIN 정리 (left join, right join, inner join, full outer join, union etc. ) 먼저 mySQL에 data가 있어야 join이 가능하기 때문에 database와 tables를 만들어 준다. join은 교집합의 의미이므로 tables는 최소 2개 이상 만들기! Visual Studio 에서 sql 파일을 만들고 아래 코드를 작성 CREATE DATABASE databaseName; use databaseName; CREATE TABLE board( idx INT(11) NOT NULL AUTO_INCREMENT PRIMARY KEY, subject VARCHAR(100) NOT NULL, userId VARCHAR(50) NOT NULL, content TEXT, today DATETIME DEFAULT CURRENT_TIMESTAMP, hit INT(11) DEFAULT 0 ) AU.. [36일차] 2021053 sequelize database 스키마 작성해보기/ JOIN ---------------------------------------------------- 또 비대면 1주일 연장~---------------------------------------------------- 공지사항 : 수요일에 쉼. 비대면으로 수업 진도 늦춰진다고 한다. 이번주 - sequelize 데이터베이스도 한 객체이다라고 생각하고 만든게 orm orm 이란? 데이터를 객체로 표현한다는 것 / mapping 엑셀처럼 객체처럼 똒같이 사용한다. 모든 mysql같은 dbms는 테이블형태로 생겼다 - 그래서 sequelize 사용 가능 324p... 관계 정의하기 만약 게시판을 만들어야 한다면 순서 데이터베이스 - 스키마 (씨퀄라이즈 관계 정의하기와 맞닿아있음) 회색 - table 명 / 흰색 -.. [36일차 예습 숙제] Sequelize 시퀄라이즈란?? Sequelize, 시퀄라이즈 MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리 MariaDB, PostgreSQL, SQLite, MSSQL 등 다른 데이터베이스도 같이 쓸 수 있다. 시퀄라이즈는 ORM으로 분류된다. ORM : Object Relational Mapping - JS Object 와 DB의 관계를 mapping 해주는 도구 Sequelize를 쓰는 이유 JavaScript 구문을 알아서 SQL로 바꿔주기 때문이다. SQL 언어를 직접 사용하지 않아도 JS만으로 MySQL을 조작할 수 있고, SQL을 몰라도 MySQL을 어느정도 다룰 수 있게 된다. -------------------------------------------------------------실습-----------.. [35일차 복습 및 정리] callback 콜백 함수 / 동기, 비동기 방식 처리 / then, catch, finally/ Promise, Promise.all / try..catch, async, throw, await 오늘 알게 된 것 JavaScript는 prototype 기반 언어이다. (함수도 객체 지향도 아니다. 객체지향적이긴 함) 동기와 비동기 방식 동기 방식 A 가 요청하면 server가 이를 처리할 때까지 다른 요청은 받지않음 A요청 -> B요청 이 있었다면 처리도 A -> B 이 순서로 차례로 함 단점 : 비효율적.. ex) console.log 비동기 방식 A 가 요청하면 A의 요청 처리 전까지 다른 요청이 와도 모두 동시에 처리함 A요청 -> B요청하면 -> 먼저 처리할 수 있는 것부터 처리를 시작 장점 : 효율적 ex) setTimeout ↓↓↓ , 지도 - screen에 나온 부분만 먼저 로딩해서 보여주기 console.log('start1'); // 1. 첫 번째로 실행됨 // start1 출력.. [35일차 복습 및 정리] JavaScript async, await 사용법 async, await 공부 전 알아야할 Promise 객체 ↓↓↓ blckchainetc.tistory.com/83 [35일차 복습 및 정리] JavaScript Promise 란? 사용법 / Promise.all / .then .catch .finally 정리 이전 글 : callback 함수 / Callback hell, 콜백함수의 지옥 포스팅 ↓↓ Promise 그 유명한.... Callback Hell 콜백함수의 지옥 현상을 극복했다는 평을 받는 promise, 반드시 알아두어야 하는 객체! /* Pr.. blckchainetc.tistory.com ----------------------------------------------------------------------------------.. [35일차 복습 및 정리] JavaScript Promise 란? 사용법 / Promise.all / .then .catch .finally 정리 Promise를 이해하기 전 알아야할 callback 함수 / Callback hell, 콜백함수의 지옥 etc. ↓↓ blckchainetc.tistory.com/85 [35일차 복습 및 정리] callback 콜백 함수 / 동기, 비동기 방식 처리 / then, catch, finally/ Promise, Promise.a 오늘 알게 된 것 JavaScript는 prototype 기반 언어이다. (함수도 객체 지향도 아니다. 객체지향적이긴 함) 동기와 비동기 방식 동기 방식 A 가 요청하면 server가 이를 처리할 때까지 다른 요청은 받지 blckchainetc.tistory.com -----------------------------------------------------------------.. [35일차 복습 및 정리] JavaScript try... catch... finally 란? 사용법, 특징, 예외처리, throw도 함께 써보기 연습 try .. catch... finally 1. 기본 frame try{ 내가 실행할 코드 }catch(e){ // e 또는 err 또는 error 아무거나 변수명으로 입력! 코드에 에러가 발생되면 여기에 실행할 코드 (error handling) } 1. 설명 1. try { ... } 의 코드 실행 -> 에러가 없다면 try 만 실행하고 catch는 건너 뛴다. -> 에러가 있다면 -> 2. try{ ... } 코드 실행이 중단되고 catch{ ... } 로 제어 흐름이 넘어감. -> 에러가 나도 catch에서 에러 처리하기 때문에 스크립트는 죽지 않는다. try 안의 코드를 실행, 예외(exception)이 발생(throw) 할 경우의 응답을 지정한다. throw = 예외가 발생하는 경우 무엇을 할.. [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과 같은 내장 생성자 함수들은 모두 함수로 정의되어 .. 이전 1 ··· 10 11 12 13 14 15 16 다음
