본문 바로가기

전체 글88

[포스코x코딩온] 풀스택 부트캠프 7주차 정리 1 - Mysql연동, sequelize mysql 서버측에서 데이터베이스 중 하나인 mysql을 이용할 수 있게 하는 3 party pakage이다. 사용법은 아래 코드 참조. 아래서 볼 수 있듯이 연결된 DB 객체를 바탕으로 query라는 method를 이용해서 쿼리문을 그대로 적어주는 것이 문법이다. 다만 require("mysql2")로 import를 하면 콜백함수만 쓸 수 있고, promise는 사용할 수 없다. 콜백함수를 사용하는 이유 - (데이터베이스에 연결하는 것은 시간이 걸리는 작업이기 때문이다.(비동기), 밑에 있는 코드가 만일 데이터베이스의 결과를 이용하는 구문이라면, 즉 쿼리문이 실행되고 나서 실행되어야 하는 동작이라면, 해당 구문이 완료되기를 기다려야 하기 때문에 콜백함수를 이용한다.) const mysql = requi.. 2023. 12. 5.
[포스코x코딩온] 풀스택 부트캠프 6주차 정리 2 - 파일업로드, MVC 파일 업로드 파일 업로드 또한 form을 활용한다. 다만 form과 input에 적어주어야 할 속성이 있다. 프론트측 html 업로드 위 코드와 같이 form에는 enctype="multipart/form-data", input에는 type="file"로 설정해주어야 한다. * input의 multiple은 여러 파일을 첨부할 때 이용한다. 파일을 업로드하기 위해서는 서버에서 multer 라는 미들웨어를 이용, 저장 경로와 이름 등을 미리 설정해 줘야 한다. -서버측- const uploadDetail = multer({ // storage: 저장할 공간에 대한 정보 storage: multer.diskStorage({ // destination: 경로 설정 destination(req, file, do.. 2023. 11. 30.
[포스코x코딩온] 풀스택 부트캠프 6주차 정리 1 - form전송, 동적 form 전송 form 전송 front (브라우저)측에서 보낸 form값을 back(서버) 측에서 받는 것. form의 method 에 따라 서버측에서 받는 방식이 달라진다. input에서 type을 password라고 잡으면 한글로 입력해도 영어로 자동변환 되니까 알아두자. GET: GET방식의 경우 form 속성(프론트)에서 action:'/ 경로이름' method='GET'으로 설정 서버측에서 app.get('/경로이름', function(req, res) { req.query(에 저장.) }) 정보 가져오거나 검색할 때 쓰임. 서버값이나 상태 변경하지 않을 때 쓰임. URL 쿼리 문자열에 데이터를 실어 전송. POST: POST방식의 경우 form 속성(프론트)에서 action:'/경로이름' method='PO.. 2023. 11. 28.
[포스코x코딩온] 풀스택 부트캠프 5주차 정리 2 - 구조분해 할당, 스프레드 연산자, promise 구조분해 할당 간단하게 말하면 key - value,나 배열 구조를 변수에 할당하는 것. key - value쌍이 경우 변수 - value의 구조로 정의하는 것. // 객체 구조분해 (destructuring) const cookie = { choco: '초코맛', vanilla: '바닐라맛', mint: '민트', } const {mint, choco, vanilla} = cookie; // const {mint: flavor1, choco: flavor2, vanilla: flavor3} = cookie; flavor라는 이름으로 변수를 생성해 할당 // 윗줄의 코드는 const {mint, choco, vanilla} = {choco: '초코맛', vanilla: '바닐라맛', mint: '민트'}.. 2023. 11. 23.
[포스코x코딩온] 풀스택 부트캠프 5주차 정리 -1 (node.js, express.js) Node.js란? 크롬의 자바스크립트 엔진에 기반해 만들어진 js런타임 npm: node pakage manager, 노드 패키지를 관리해주는 틀 pakage.json: 패키지들이 서로 의존되어 있어, 문제가 발생할 수 있는데 이를 관리하기 위해서 필요한 것. 프로젝트에 대한 정보와 사용중인 패키지 이름. 정보가 담겨있는 파일. // 프로젝트를 시작할 때 사용. package.json 파일을 만든다. npm init // pakage.json에 default 값 삽입 npm init --yes // project에서 사용할 패키지를 설치하는 명령어 (프로젝트 별로 따로) npm install 패키지 이름 Node.js의 특징 single Thread라서 주어진 일을 하나밖에 처리 못한다. 그래서 에러를 .. 2023. 11. 21.
[포스코x코딩온] 풀스택 부트캠프 1차 프로젝트 회고록 -2 231116 내 담당이었던 전체 음식 메뉴를 스와이퍼를 이용하여 카드 슬라이드를 넘기는 형식으로 레이아웃을 구성. 하지만 전체 메뉴페이지보다는 메인 페이지에 어울리는 레이아웃이라는 의견이 있었다. 생각해보니 전체 메뉴는 메뉴가 한 눈에 들어오는 것이 나을 것 같아 그리드식의 레이아웃으로 재구성. (공들인 스와이퍼를 삭제하는 것이 마음 아팠지만, 미련없이 삭제했다.) 반응형의 경우 pc, 태블릿, 모바일 순으로 설정하였다. 또한 개별 카드간의 마진이 없어서 애니메이션이 적용될 때 답답하다는 의견이 있어 그리드 안의 gap또한 수정했다. 다만 width는 반응형 width인 %나 vw를 설정해도 상관 없지만 card의 경우 높이가 너무 작아지면 레이아웃이 깨지기 때문에 px이나 rem 같은 고정된 크기를 설.. 2023. 11. 19.

티스토리툴바