본문 바로가기

반응형

블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기

(184)
[47일차]20210520 팀프로젝트 리뷰 / oAuth 2.0 Passport 찍먹 / 내일 다시 정확하게 배우기로 함. 세호님 팀 REVIEW 외부 API / 오늘의 날씨 / 테트리스 비동기를 사용한 적 ? 이 있나... ajax, url 안바꾸고 바로 화면 전환 되는 / API를 가져오는 (아래 그림 설명) 동기 방식은 요청(REQ)를 딱 한번 할 수 있다. 비동기 방식은 요청(REQ)를 여러번 할 수 있다. -> 동기와 비동기의 차이 우리팀 REVIEW 회원가입 시 비번,아이디,이메일,폰넘버 등 을 체크하고 맞지않으면 alert 띄우기 -> 요런건 server에 보내기 전, Client쪽에서 체크 후 alert하는게 좋다. - server, client 둘다 처리는 가능 테이블 하나로 댓글, 대댓글 기능을 함. 고칠 것 write after view 에 textarea 붕붕 떠다님 ... -> 수정 완료 ! 클릭 후에..
[45일차] 20210517 팀프로젝트 css 오늘의 목표 ! CSS 시작 ! 최대한 많이 하기 - layout top, bottom.html에 연결 - views- index.html은 경로가 달라서 html 해당 파일에 style 추가해서 처리 - my info, info_modify 파일 제외 css 기본 틀 완성 ! 내일 학원에서 - 고칠 것 : userid 다를 때 글 안써지는 거 pull 이후 없어져서 다시 만들기 - css 마무리 목표 ! 0. 로그인, 회원가입 , db연결 ok 1. 게시판 글쓰기 db연결, ok 2. 수정 ok 3. 삭제 ok 4. 게시판 글 번호 차례대로 나오게 하기 ok 5. 댓글 ok 6. 내가 쓴글이 아니면 수정, 삭제 안되도록 만들기 ok 7. 조회수 ok 8. 새로고침할 때 조회수 안올라가게 만들기 9. 게..
20210515 팀프로젝트 주말 계획! 오늘 토요일, 팀원들과 카페에서 겅부 즁 목표 ! 0. 로그인, 회원가입 , db연결 ok 1. 게시판 글쓰기 db연결, ok 2. 수정 ok 3. 삭제 ok 4. 게시판 글 번호 차례대로 나오게 하기 ok 5. 댓글 ok 6. 내가 쓴글이 아니면 수정, 삭제 안되도록 만들기 ok 7. 조회수 ok 8. 새로고침할 때 조회수 안올라가게 만들기 9. 게시판 게시물 클릭했을 때 기존 댓글들 뜨도록 + 대댓글 기능 - 동철님 10. 비회원으로 들어가기 readonly - 로그아웃 빼기 11. write, modify = 내용 없으면 작성 안되게 설정 ok 12. - 회원가입 완료 시 회원의 이미지 뜨게 ok - info 정보에 이미지 넣기/ table구조 변경 ok 13. 좋아요 (수 + ( boolean) ..
[44일차]20210514 서버 만들기 팀 프로젝트 2일차 게시판의 기능들(?) 은 거의 만들었는데 이제 세부 기능들 만들기 오늘 작업할 목표 ! 0. 로그인, 회원가입 , db연결 ok 1. 게시판 글쓰기 db연결, ok 2. 수정 ok 3. 삭제 ok 4. 게시판 글 번호 차례대로 나오게 하기 ok 5. 댓글 ok 6. 내가 쓴글이 아니면 수정, 삭제 안되도록 만들기 ok 7. 조회수 ok 8. 새로고침할 때 조회수 안올라가게 만들기 9. 게시판 게시물 클릭했을 때 기존 댓글들 뜨도록 + 대댓글 기능 - 동철님 10. 비회원으로 들어가기 readonly 11. write, modify = 내용 없으면 작성 안되게 설정 ok 12. - 회원가입 완료 시 회원의 이미지 뜨게 ok - info 정보에 이미지 넣기/ table구조 변경 ok 13. 좋아요 (수 + ..
[43일차] 게시판 만들기 팀프로젝트 시작날 ! 각자 코딩을 해온 부분을 github를 통해 합쳐보았다. pull, fetch, clone 부분은 이제 조금 익숙해졌지만 merge 부분, branch 등은 아직 어렵다.. 오늘 할 일 0. 로그인, 회원가입 , db연결 ok 1. 게시판 글쓰기 db연결, ok 2. 수정 ok 3. 삭제 ok 4. 게시판 글 번호 차례대로 나오게 하기 ok 5. 댓글 ok 6. 내가 쓴글이 아니면 수정, 삭제 안되도록 만들기 ok 7. 조회수 ok 8. 새로고침할 때 조회수 안올라가게 만들기 9. 게시판 게시물 클릭했을 때 기존 댓글들 뜨도록 + 대댓글 기능 - 동철님 10. 비회원으로 들어가기 readonly 11. write, modify = 내용 없으면 작성 안되게 설정 ok 12. 이미지 내용 올려서 - 바로 보..
[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..
[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 할 때 입력..
[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..
[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 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 -----------------------------------------------------------------..

반응형