본문 바로가기

반응형

Welcome !

(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 = 예외가 발생하는 경우 무엇을 할..

반응형