web devloper (udemy)

h 태그를 크기조정을 위해 사용하면 안됨.텍스트 크기조절은 css통해서.head 하나당 body 하나.순서 매기고 싶을 때 : ol단순 bullet point 로 만들 때 : ulul 이든 ol이든 태그걸어줬으면 li 태그로 리스트 표시해줘야함.같은 폴더안에 있는 ht

head태그 내 link태그 생성하여 html문서와 연결시켜줘야함.https://htmlcolorcodes.com/rgb 조합찾기 1) text-align : 문자의 위치 결정.ex) left, center , right2) font-weight : 문자의 굵

1) 유용한 CSS 속성들 1) 불투명도와 알파 채널 _**1-1 ) alpha rgba(red, green, blue ,alpha) 0 < alpha < 1 '1' 은 전혀 투명하지 X '0' 은 완전히 투명 O alpha는 배경의 투명도만 설정할 뿐이고 해

1) 부트스트랩은 무엇일까? 세계에서 가장 유명한 CSS 프레임워크. 프레임워크: 건물을 세울때에 필요한 뼈대. 시간절약 good. 온갖 웹사이트에대한 프레임워크나 시작점 제공. 컴포넌트 -> 앱에 넣어서 사용할 수 있는 다양한 조각모음들. (버튼, nav bar

1. 자바스크립트 기초 1) 기본요소 및 콘솔 _**1) Primitive Types Number String Boolean Null Undefined > Mac 기준 크롬창에서 상단의 -> 개발자정보 -> 자바스크립트 콘솔 이용 JS has one

1. 자바스크립트 객체 리터럴(Literals) 1) 객체 리터럴 개요 > JS Objects Objects are collections of Properties Properties are a key-value pair Rather than accessing da

1. 콜백과 배열 > G O A L S Use the new arrow function syntax. Understand and use there methods: -> forEach -> map -> filter -> find -> reduce -> so

1) DOM 이란? 1) DOM 개요 > Document Object Model The DOM is a Javascript representaiton of a webpage. It's your JS "Window" into the contents of a webp

1) AJAX 와 API 1) JSON > Java Script Object Notation 지속적으로 데이터/정보를 전송하는 포맷. 사용자끼리 전송하거나 API에서 브라우저로 전송할 수 있음. 자바스크립트 객체 구문을 기반으로 하며 중괄호와 key:value 형

1) 터미널 완벽 정리 1) 터미널 명령을 알아야 하는 이유 1) 속도 -> The terminal takes some getting used to. but i can be MUCH faster than using a CUI. 2) 접근성 -> The termin

Expressis a "fast, unopinionated, minimalist web framework for Node.js". It helps us build web apps !It's just an NPM package which comes with a bunch

GETUsed to retrieve information.Data is sent via query string.Information is plainly visible in the URL!Limited amount of data can be sent.데이터를 가져올 때

1) 모델 만들기 > insertMany( ) > mongoose 데이터베이스 2) 프로덕트 인덱스 (Products Index) ![](https://velog.

1) 데이터베이스 개요 > What is MONGO? According to Mongo's homepage, it is "the most popular database for modern applications". It is commonly used in combi

seeds 폴더 생성seeds 폴더 내 파일들은 메인 앱과는 무관하며 데이터베이스 내에서의 데이터 조작/확인을 할 때 사용.cities 파일에는 1000개의 임의의 도시명,인구증가비율,위도/경도,인구,인구순위,주 이름 이 기재된 객체 존재seedHelpers 에는 캠프

미들웨어는 body를 파싱할 때 사용Express middleware are functions that run during the request/response lifecycle.내장 JSON 미들웨어를 이용해 request.body를 파싱함.또한 Express 정적

throw error개발자가 직접 오류 정의하기.Express에서는 다른 미들웨어처럼 오류처리 미들웨어 함수를 정의할 수 있음.주의점은 오류 처리 함수를 만들 때 4개의 인수를 전달해야함.err, req, res, next 해당 4개의 인수를 모두 기입해야 오류 처리

form 제출에 대한 유효성 검사1) 부트스트램 'Validation ' 이용Form 형식이 있는 곳에 script 태그로 맨 밑에 붙이기&lt;주의점>1) const forms = document.querySelectorAll('.needs-validation')

Embed the data directly in the document !사용자가 두가지나 그 이상의 여러가지 항목을 가질 때 사용.one option is to store your data separately, but then store references to do

1) Farm 모델과 Product 모델 정의하기 > farm 스키마와 Product 스키마 상호 연결 2) 새로운 Farm 모델 작성하기 > const Farm = require('./models/farm'); ![](https://velog.velcdn.co

캠프그라운드 모델에 review 객체 아이디 추가하기. (one to Many) ex) 송리단길 맛집 xxx - reivew : xxxxx개 클라이언트 유효성 검사 : 부트스트랩 이용 (novalidate, required, class="validated-form")

1) Express 라우터 개요 > Express 라우터 사용시 라우트를 파일로 옮기고 분류가 가능해짐. 라우터 객체는 미들웨어와 라우터의 인스턴스이다. 그래서 라우터를 하나의 작은 앱으로 본다. 라우트와 미들웨어가 존재하고 완전한 앱을 만들기 위해 다른 라우터와

세션 활용시 무상태 프로토콜 HTTP에 상태성 부여 가능.하나의 요청에서 다른 요청으로 전달하면서 경로를 추적하기 원함.(로그인한 사용자 이름, 누군가의 체크아웃 전 장바구니 상태 등)쿠키와 세션이 그러한 기능을 담당.하지만 세션은 서버측에 존재.따라서 세션이 존재하는

1) 캠프그라운드 경로 빠져나오기 > app.js 파일을 간소화 시키기 위해 campground 경로를 사용하는 메소드만 별도로 저장 주의점: routes 폴더 기준 밑에 호출된 변수들은 두번에 걸쳐 해당 파일들에 접근해야하므로 ' .. / '_ 등의 방식으로 '

Passportpassport 사용시 여러 인증 방법을 더할 수 있음.예를들어 깃헙, 구글 , 트윗등을 통해 인증절차를 밟는다는둥.Authentication is the process of verifying who a particular user is.we typica

1) Passport 개요 > Node앱에 인증을 추가해줌. 사용자를 로그인시킬 때 사용하는 여러 전략 제공. > Passport-Local Mongoose Mongooose 데이터베이스에서 Passport 구현을 쉽게 해줌. 2) 사용자 모델 작성하기 3)

캠프그라운드 스키마에 'author' 프로퍼티 추가데이터베이스에 저장시 author 항목 추가새로운 캠핑장 생성시 추가한 유저의 이름 뜨게 만들기.campground.author = req.user_id;show.ejs에 유저네임 작성현재 'A'란 사람이 'B'가 만든

Controller컨트롤러는 MVC에서 나옴.모델 뷰, 컨트롤러 프레임워크.모델은 데이터를 전부 집어넣은 것. (모델 안에 데이터 존재)뷰 콘텐츠는 사용자에게 보이는 레이아웃을 의미.컨트롤러는 앱의 핵심 기능을 담당.로직이 컨트롤러로 들어오면 뷰를 렌더링하고 모델에서

1) Multer 미들웨어 현재까지 만든 폼에 파일 입력값 넣을시 작동 안 될 수 있음. 디폴트 html 폼 사용시 파일을 업로드해도 작동 안 될 수 있음. 인코딩 타입 속성과 관련된 문제. 지금까지 만들었던 건 url 인코딩 폼. 파일 업로드 하기 위해선

MapboxMapbox에서 토근 생성하기참조: www.mapbox.comenv파일에 해당 토근 정보 추가프로덕션 단계에서 API키를 .env 파일에 추가시 동일한 툴과 과정으로 키 지정 가능Mapbox에 존재하는 mapbox-sdk 라는 Node 클라이언트 설치경도,위

clusterMap 파일 생성참조: https&#x3A;//docs.mapbox.com/mapbox-gl-js/example/cluster/index.ejs로 가져오기.미리 등록한 cities 파일 내 경도,위도 사용캠핑장 마다 경도,위도를 랜덤으로 부여하여(coord

1) 홈페이지 스타일링 >home.ejs > home.css

1) Mongo의 Injection 1 - SQL injection or No SQL Mongo injection 데이터베이스 쿼리를 만들기 위해 사용자 입력의 일부를 사용하는 SQL쿼리를 작성. ex) statement = "SELECT" + FROM users

1) Mongo Atlas 설정하기 > Atlas Mongo 데이터베이스를 직접 인터넷 상으로 제공하고 우리가 쓰게 될 서버인 Heroku로 연결. 개발 DB와 제작DB 분리 필요. 제작 DB 생성시 Mongo의 로컬 데이터베이스와는 전혀 무관함. Mongo의