전체 글 (44) 썸네일형 리스트형 [포스코x코딩온] 웹개발자 풀스택 과정 6주차 회고 | MVC + MySQL + ES6 이전에 작성했던 MVC + MySQL 프로젝트 코드를 ES6 문법으로 바꿔보기 npm install mysql2 위에 명령어를 터미널에 입력하여 mysql2 모듈을 다운로드한다. 이전에 컨트롤러와 모델의 소통에서 작성된 콜백함수들을 없애고 코드의 가독성을 높이고자 callback기반인 mysql 모듈 대신 promise기반인 mysql2/promise를 불러와 컨트롤러와 모델의 소통을 비동기적으로 처리한다. package.json npm init을 통해 생성되는 프로젝트의 package.json파일에 "type": "module" 키와 키값을 정의해 준다. 해당 코드는 ES 모듈을 사용할 수 있게 해 준다. 'module.exports' 대신 'export default' 정의된 함수들을 모두 모듈로 내.. [포스코x코딩온] 웹개발자 풀스택 과정 6주차 회고 | MVC + MySQL 프로젝트 생성 실습 MVC 패턴으로 프로젝트를 생성하고 해당 프로젝트에서 사용되는 데이터들을 MySQL데이터베이스에서 불러오는 실습을 진행하였습니다. 실습 내용 폼 전송으로 회원가입, 로그인, 회원 정보 수정, 회원탈퇴 기능을 데이터베이스와 연동하여 구현해야 함. 데이터베이스에 CRUD 가 모두 사용되어야 함 Create (INSERT) : 회원가입 (정보 삽입) Read (SELECT) : 로그인 (정보 검색) Update (UPDATE) : 회원정보 수정 (정보 갱신) Delete (DELETE) : 회원 탈퇴 (정보 삭제) 실습 프로젝트 주소 구조 실습 프로젝트 폴더 구조 실습 프로젝트 데이터베이스 테이블 구조 데이터베이스에 테이블 생성하기 테이블은 MySQL Workbench툴에서 간단하게 생성해.. [포스코x코딩온] 웹개발자 풀스택 과정 6주차 회고 | MVC MVC (Model View Controller) 소프트웨어 설계와 관련된 디자인 패턴이다 디자인 패턴: 상황에 따라 자주 쓰이는 방법을 정리한 코딩 방법론 MVC 이용 웹 프레임워크는 PHP, Django, Express, Angular 등이 있다. 장점 패턴들을 구분해 개발한다. 유지보수가 용이하다. 유연성이 높다. 확장성이 높다. 협업에 용이하다. 단점 완벽한 의존성 분리가 어렵다. 설계 단계가 복잡하다. 설계 시간이 오래 걸린다. 클래스(단위)가 많아진다. MVC 흐름 Model : 데이터를 처리하는 부분 View : UI 관련된 것을 처리하는 부분 (사용자에게 보이는 부분) Controller : View와 Model을 연결해 주는 부분 Node.js MVC 구조 폴더구조 app.js 프로젝트에.. [포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고 | 데이터베이스 데이터베이스 중복되는 자료가 없는 데이터의 집합소(데이터를 저장하는 구조/자료의 모음) 데이터베이스 이전에는 파일 시스템(file system)을 사용했으나 해당 자료 모음 방식은 데이터의 중복이 있을 수 있으며 데이터가 불일치할 수 있다는 치명적인 단점들이 있었다. DBMS(DataBase Management System) 파일 시스템(file system)의 단점들을 보완하고자 만들어졌으며 DBMS들 중 관계형 데이터베이스 RDBMS(Relational DBMS)가 있다. 데이터베이스 용어 열/필드(column, attribute(속성)) 행(record, tuple(튜플)) 테이블(table, relation) key 데이터베이스에서 튜플을 찾거나 순서대로 정렬할 때 구분하고 정렬의 기준이 되는 속.. [포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고 | Node.js 파일 업로드 body-parser 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리다. Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와준다. express 4.x 부터 내장되어 있어 별도의 설치가 필요하지 않다. 다만, 멀티파트 데이터를 처리하지 못한다. 멀티파트 데이터 : 이미지, 동영상, 파일 등 따라서 multer라는 미들웨어를 사용한다. 파일 업로드 클라이언트 측에서 서버에게 파일 형태로 데이터를 전송할 수 있다 multer 미들웨어 파일 업로드를 위해 사용되는 미들웨어다. (express로 서버를 구축할 때 가장 많이 사용되는 미들웨어) multer 사용 시 태그의 enctype속성으로 "multipart/form-data"를 반드시 설정해줘야 한다. (즉, 데이터를 F.. [포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고 | 동적 Form 전송 form 전송 기본적인 form 전송은 이나 을 이용해 클라이언트가 작성한 값을 백엔드로 전송한다. 비동기 HTTP 통신 vs 동기 HTTP 통신 동기 방식 한 번에 하나만 처리한다 -> 페이지를 아예 이동해 서버가 데이터를 처리한다. 비동기 방식 서버에 데이터를 보내고 응답을 기다리는 동안 다른 일을 처리할 수 있다. 비동기 HTTP 통신 dynamic: 웹 문서가 정적으로 멈춰있는 것이 아니라 일부 내용이 실시간으로 변경되는 것 비동기 HTTP 통신: 폼의 데이터를 버서와 dynamic하게 송수신 하는 것 클라이언트(1) 로그인 클라이언트(2) 로그인 비동기 HTTP 통신 방법 Ajax Axios Fetch Ajax (Asynchronous JavaScript and XML) XML(Extensibl.. [포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고 | Form 전송 입력된 데이터를 한 번에 서버로 전송하기 위해 사용된다. (클라이언트가 서버에게 정보를 전달할 때 사용) 속성: action, name, target, method 폼 요소: , , , 등등 옵션1 옵션2 제출 속성 action="" : 폼을 전송할 서버 주소를 지정한다. name="" : 폼을 식별하기 위한 이름이다. method="" : 폼을 서버에 전송할 http 메소드를 지정한다. 속성값들: get: (폼에 입력한 정보가 url에 추가되어 보인다) post: (폼에 입력한 정보가 url에 표시되지 않는다) target="" : action 속성값에 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 한다. 속성값들: _blank , _self 요소 사용자가 다양하게 폼 태그를 입력.. [포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고 | JavaScript 비동기 처리 & JavaScript 고급 문법 JavaScript 비동기 처리 비동기 처리란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음코드를 먼저 실행하는 JavaScript의 특성을 뜻한다. 비동기 처리가 아닌 동기 처리 방식은 반대로 특정 코드의 연산이 끝날 때까지 기다리기에 웹을 실행하는데 상당한 시간이 소요될 수 있다는 단점이 있다. //setTimeout(code, delay); //delay 동안 기다리다가 code 함수를 실행한다 console.log(1); setTimeout(function () { console.log(2) }, 2000); console.log(3); // 출력될 결과 // 1 // 3 // 2 비동기 처리는 특정 코드가 실행되기까지 무한으로 대기하지 않고 바로 다음 코드를 실행하기에 자원을.. 이전 1 2 3 4 5 6 다음