웹개발

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 7주차 (1): Cookie & Session

🍪Cookie🍪웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일클라이언트 측에 저장되므로 보안에 취약할 수 있다!이름, 값, 만료일, 경로 정보로 구성되어 있다.더보기 // 백엔드 쿠키 설정// cookie.jsconst express = require("express");const cookieParser = require("cookie-parser");const app = express();const PORT = 8080;// ver1. 암호화 되지 않은 쿠키// app.use(cookieParser());// ver2. 암호화된 쿠키// 실제로 암호화 쿠키를 사용한다면 비밀키도 .env로 관리하는 것이 좋다. 문자열은 아무거나 상관 없음app.use(cookieParse..

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 6주차 (2): 환경변수, Sequelize, Database 응용

환경변수운영체제나 소프트웨어에서 참조하는 변수로, 프로그램 동작에 영향을 주는 값들을 저장한다.💻 dotenv .env 파일에 키=값 형식으로 환경변수를 정의보안에 민감한 정보를 코드에서 분리할 수 있다!보안상 중요한 정보를 포함하므로 .gitignore에 추가하여 버전 관리에서 제외해야 한다.SequelizeNode.js에서 사용하는 ORM(Object-Relational Mapping)라이브러리개발자가 SQL 쿼리를 직접 작성하지 않고도 Javascript 객체를 통해 데이터베이스와 상호 작용할 수 있다!💻 모델 정의Sequelize.define(param1, param2, param3);// param1: 모델(테이블) 이름 설정// param2: 컬럼 정의// param3: 모델 옵션 정의💻..

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 6주차 (1): MVC 패턴, MySQL 연결

MVC: Model View Controller소프트웨어 설계와 관련된 디자인 패턴💡MVC 흐름💡Router와 MVC의 상호작용 💻 폴더구조- controller : view와 model연결 └ Cmain.js - model : 데이터 처리 └ index.js - routes : 경로 설정 └ index.js - views : UI관련 처리 └ 404.ejs └ index.ejs - app.js - .gitignore - package.jsonMySQL과 연결// model/User.jsconst mysql = require('mysql');const conn = mysql.createConnection({ host: 'localhost', user: 'sesac', password..

[새싹/코딩온] 풀스택 웹 개발자 취업 부트캠프 5주차 (2): Multer, Database

Multer: 파일 업로드💻 multer파일 업로드를 위해 사용되는 Node.js의 미들웨어💡 미들웨어란?  양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어.양쪽을 연결중간에서의 매개 역할// app.js// multer 불러오기const multer = require("multer");// multer 설정const upload = multer({ dest: "uploads/", // 어디에 저장 될지});const uploadDetail = multer({ storage: multer.diskStorage({ destination: function (req, file, done) { done(null, "uploads/"); // 어디에 저장..

동적 폼 전송 (fetch, ajax, axios) 유저가 서버에 원하는 데이터를 GET요청을 보냄. 주소창에 URL을 넣거나 Form태그를 이용해서 버튼으로 요청을 할 수 있음. 그러나 이 두개는 브라우저가 새로고침이 된다. 이게 싫으면 비동기 HTTP통신을 사용하면 된다.비동기 HTTP 통신이란?response와 request를 비동기 식으로 다룰 수 있다! ➡️ 이를 통해 웹 페이지 전체를 다시 로드하지 않고도 필요한 데이터만 갱신할 수 있다. 💻Ajaxjavascript를 이용해 클라이언트와 거버 간에 데이터를 주고 받는 비동기 HTTP통신JQuery를 통해 쉽게 구현이 가능하나 반대로 말하면 JQuery를 사용해야만 간편하고 호환성이 보장된다.// index.ejs// ----- ajax 요청..

EJSEmbedded Javascript자바스크립트가 내장되어있는 html파일템플릿 엔진: 문법과 설정에 따라 파일을 html 형식으로 변환 시키는 모듈 form 결과 확인하기 ()님 환영합니다. 비밀번호는 입니다. 홈으로 이동 // 내부에 JS코드 작성. // 값을 템플릿에 출력할 때 사용. //  EJS 설정// app.js// ejs views middleware settingsapp.set("view engine", "ejs"); // 템플릿 엔진 설정app.set("views", "./views"); // 뷰파일 폴더 경로 설정 미들웨어양 쪽을 연결하여 데이터를 주고 받을 수 있도록 중간에서 매개 역할을 하는 소프트웨어.서버와 클라이언트를 이어주는 중간..

1. 동기와 비동기동기 (synchronous): 작업을 순차적으로 실행하는 방식. 한 작업이 완료될 때까지 다음 작업은 대기.비동기 (asynchronous): 여러 작업을 동시에 처리 할 수 있다.2. 서버통신서버와 클라이언트 간의 데이터 교환 과정을 의미한다.데이터를 다 불러오기도 전에 실행될 수 있다.let data = 서버에서 데이터 불러오는 작업;console.log(data);기본 구조:서버: 리소스, 데이터, 또는 서비스를 제공하는 강력한 컴퓨터 시스템.클라이언트: 서버에 리소스나 서비스를 요청하는 장치 또는 소프트웨어 애플리케이션.통신 과정:연결 설정: 클라이언트가 서버에 연결을 요청요청: 클라이언트가 서버에 특정 데이터나 서비스를 요청처리: 서버가 요청을 처리응답: 서버가 처리 결과를 ..

Javascriptupgrade!  1. 구조 분해 할당 (Destructuring Assignment)벌써 한국어 부터 어렵다.배열이나 객체의 값을 개별 변수로 쉽게 추출할 수 있게 해준다. (코드가 더 간결해짐)배열의 구조분해 문법const arr1 = ['tomato', 'kiwi', 'orange']console.log(arr1[0])const tomato = arr1[0]const [a,b,c] = arr1 // arr1에 있는 애들을 분해해서 여기에 넣음console.log(tomato)console.log(a)const arr2 = ['red', 'orange', 'pink', 'yellow']const [red, orange, , yellow] = arr2 // pink만 사용하고 싶지 않..

jQuery 1. jQuery기초 & method123// jQuery 요소 선택 방법// $("CSS 선택자")console.log($('#div1'))cs">HTML 삽입미리보기할 수 없는 소스JS에 비해서 굉장히 축약되었다. 💫 값 가져오기 & 설정하기$(선택자).val();input과 같은 value 값을 가져올 수 있다.$(선택자).val("설정할 값");input과 같은 곳에 value 값을 설정할 수 있다.// input value 설정 및 가져오기// val()function getValue(){    let value = $('input').val() // 가져올때는 val()함수에 값만 비워두면 된다    alert(value)}function setValue(){    $('inpu..

Javascript1. 문자열 관련 메소드1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374// 문자열에서 사용하는 속성과 메소드// length// toUpperCase, toLowerCase, trim, indexOf, slice, replace, replaceAll, repeat, split let str1="Strawberry Moon"let ..