본문 바로가기

전체 글396

HTML에 DB데이터 넣는 법(1) - EJS 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. DB에 데이터를 저장하는 이유는 필요할 때 데이터를 쓰기 위해서이다. 따라서 DB의 데이터를 가져와서 HTML에 넣기 위해서는 EJS라는 렌더링 엔진을 사용해야한다. EJS란? 서버 데이터를 HTML에 쉽게 삽입할 수 있도록 도와주는 HTML 렌더링 엔진이다. EJS 사용하는 법 1. 터미널에 npm install ejs 2. server.js 상단에 코드 작성 app.set('view engine', 'ejs'); 3. EJS 파일 만들기 EJS파일은 HTML과 똑같이 만들어서 사용하면 된다. 다만 다른 점은 EJS의 특별한 문법을 통해서 데이터를 중간중간에 넣어 쓸 수 있다는 점이다. 🚨중요한 점! EJS 파일은 views라는 폴더 내부에.. 2023. 8. 30.
Database에 자료 저장하기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. var db; MongoClient.connect('mongodb+srv://admin:qwer1234@cluster0.7jxmrtt.mongodb.net/?retryWrites=true&w=majority', { useUnifiedTopology: true }, function (error, client) { if (error) {return console.log(error)}; db = client.db('todoapp'); //todoapp이라는 데이터베이스에 접속해주세요. db.collection('post').insertOne({ _id: 1, date: 2023.08.29, title: 노드노드}, function (error, r.. 2023. 8. 30.
Mongo DB 초기 셋팅하기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 1. 가입하기 (링크) 2. 가입 시 답변해야할 것들 답변하기 3. 무료 프랜 선택 + 지역을 서울로 설정해주기 4. Database Access - Add New Database User를 선택하여 DB 접속용 아이디/비번을 생성한다. 여기서 주의할 점은 Buit-in-Role에서 Atlas admin을 선택해주어야한다.!!! 5. Network Access 메뉴에서 IP를 추가하기 테스트이기 때문에 allow access from anywhere을 클릭한다. 6. Database / collection 만들기 7. DB 접속하는 URL 찾기 admin: 부분은 이전에 4번에서 만든 DataBase의 admin과 password를 입력해주어.. 2023. 8. 29.
폼에 입력한 데이터를 서버에 전송하는 법(POST) 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 준비물: 우선 부스트스트랩으로 ToDoList 폼을 만들어보자. 글 작성페이지 오늘의 할일 날짜 Submit STEP01 - form 태그 셋팅 [write.html] 오늘의 할일 날짜 Submit action="/add" method="POST" : /add 경로로 POST를 요청함. 위의 세팅과 더불어 각각의 input 태그 내부에는 name을 작성해주어야 body-parser로 정확한 데이터를 뽑아내서 사용할 수 있다. STEP02 - body-parser 설치 [server.js] const express = require('express') const app = express() //body parser 라이브러리 설치 const b.. 2023. 8. 24.
서버에서 HTML 파일전송해보기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 1. 누군가 / 라는 경로로 방문을 하면 아래의 함수를 작동해라 app.get('/', function(request, response){ }); 2. index.html라는 파일을 전송해라 app.get('/', function(request, response){ response.sendFile(__dirname + '/index.html'); }); 이렇게 하고 http://localhost:8080 해당 url을 방문하면 미리 만들어진 html 파일을 보여준다. [응용] 안녕하세요 홈페이지입니다. 펫 뷰티 2023. 8. 22.
control + c로 서버를 끄지 않고 실시간으로 서버에 적용하기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 이전 글을 보면 control + c로 서버를 껐다가 켜서 서버에 반영했다. 이번에는 라이브러리를 이용해서 서버를 껐다 켜서 반영시키지 않고 바로 반영해보자, 1. nodemon 설치 npm install -g nodemon // 위의 코드로 진행 시 오류가 발생하면 아래의 코드를 작성해보자. sudo npm install -g nodemon 2. nodemon 활성화 nodemon server.js 서버로 사용중인 js 파일을 nodemon 명령어 뒤에 작성해준다. 이렇게 하면 코드를 변경해도 새로고침만 하면 바로 변경된 코드가 적용된다. 2023. 8. 22.
내 서버에 GET 요청 처리하기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 1. 서버 열기 [server.js] const express = require('express'); //express 라이브러리를 첨부해주세요. const app = express(); //첨부한 라이브러리를 이용해서 객체를 만들어주세요. // 8080port에 서버를 연다. app.listen(8080, function(){ console.log('8080 포트에 입장하셨습니다.'); }); http://localhost:8080 2. get 요청하기 .get('경로', function(요청 내용, 응답할 방법){ //실행 코드 }) [server.js] // 누군가 /pet이라는 경로로 방문을 하면 pet관련 안내문을 띄워준다. app... 2023. 8. 21.
Node.js 설치 + express 라이브러리 설치하기 1. Node.js 설치하기 https://nodejs.org/ko/download 해당 사이트로 접속해서 본인 운영체제에 맞는 설치파일을 다운로드한다. 설치를 확인하고 싶다면 본인의 터미널에 아래의 명령어를 작성하고 버전이 나타나는지 확인한다. 2. vscode로 express 다운로드하기 1) express를 다운로드할 폴더를 열고 새 터미널을 연다. 2) npm init을 작성해서 npm을 이용해서 라이브러리를 다운로드 할 환경을 세팅한다. (npm은 라이브러리 설치를 도와주는 도구이다.) 3) 그후 enter를 눌르면서 entry point가 나오는데 여기에 내가 원하는 파일명(server.js)을 작성해서 엔트리 포인트를 설정해준다. 4) npm install express를 입력해서 라이브러리.. 2023. 8. 18.
Node.js 란? 웹 페이지를 만들 때 사용하는 HTML이라는 언어가 있고 함께 쓰는 언어인 JavaScript라는 언어도 있다. JavaScript는 HTML을 조작하고 클릭을 통해 이벤트를 발생시키도록 하는 언어이다. 그렇다면 이 JavaScript는 누가 구동시킬까? 바로 '브라우저'가 구동시킨다 브라우저 엔진(JavaScript) 크롬 V8 파이어폭스 Chakra IE SpiderMonkey 여러 브라우저 엔진들 중에서 크롬의 V8이 너무 잘 작동해서 구글에서 V8을 따로 출시하게 된다. 이게 바로 Node.js이다. 즉, Node.js란 JavaScript 실행창, 실행환경이다. (= 런타임) Node.js를 사용하면 브라우저가 아닌 로컬 PC에서도 자바스크립트를 실행시켜줄 수 있다. Node.js의 특징 - N.. 2023. 8. 17.
[TODOLIST] 와이어 프레임 1. main 2. add 3. detail 2023. 8. 13.
Sticky를 활용해서 넘어가는 카드 UI 만들기 (애플 뮤직사이트) 우선 해당 프로젝트를 진행하기 위해서는 Sticky라는 속성에 대해서 알아야한다. Sticky란 : 스크롤이 되어서 해당 요소가 화면에 나오면 해당요소를 고정시킨다는 특징이 있는 속성이다. : fixed와 뭐가 다르냐고 물으면 fixed는 항상 화면에 고정되는 특징이 있는 속성이지만 sticky는 스크롤이 되어 해당 요소가 화면에 나오면 해당 요소를 고정한다는 점이 다르다라고 할 수 있다. sticky를 사용하려면 sticky 효과를 주고싶은 요소에 아래의 작업이 필요하다. .box { position: sticky; /*포지션을 sticky로 설정*/ top: 400px; /*sticky가 될 상단 위치를 정해준다.*/ } 💡 sticky가 될 위치를 정해주지 않으면 해당 속성을 실행되지 않는다! 프로.. 2023. 8. 4.
LocalStorage를 활용해서 장바구니 추가, 삭제 기능만들어보기 [미리보기] 위의 기능을 작동 시키려면 아래의 로직대로 하면 좋을 것 같다. 하나씩 천천히 해보자! 로직 💡 로직💡 버튼이 클릭된 셀의 상품 정보를 가져오기 해당 A 키 값으로 로컬스토리지에 저장된 값이 있는지 확인하기 해당 A 키 값으로 저장된 것이 없다면 바로 저장하기 해당 A 키 값으로 저장된 것이 있다면 다른 방법으로 저장하기 저장된 값 가져와서 JSON 파싱해서 새로운 배열 변수에 저장하기 저장된 배열에 push로 추가할 상품의 정보를 추가하기 추가된 배열을 JSON으로 만들어서 다시 로컬 스토리지에 저장하기 장바구니 HTML 만들기 장바구니 HTML 페이지가 로드가 되었을 때 A 키 값으로 저장된 값이 없을 때의 HTML 추가하기 장바구니 HTML 페이지가 로드가 되었을 때 A 키 값으로 저장.. 2023. 8. 3.
HTML추가 후 이벤트가 작동이 안될 때 JS로 버튼 HTML을 추가하고 클릭 이벤트를 만들었는데 작동이 되지 않았다. 이럴 때의 해결 법은 이벤트 버블링으로 상위 요소에 클릭 이벤트를 걸어서 실제로 클릭한 요소가 버튼일 때 이벤트를 진행시키는 것이다. 2023. 8. 3.
LocalStorage 기존에 데이터를 저장하는 방법으로는 변수를 배웠다. 하지만 변수를 수정하고 브라우저 창을 나갔다 들어오면 수정된 변수는 없어진다. 그렇다면 만약 브라우저를 나갔다 들어와도 데이터가 휘발되지 않으려면 어떻게 해야할까? 이에는 2가지 방법이 있는데 1. 서버를 만든다. / 2. LocalStorage를 이용한다. 우리는 서버를 만들 수 없다는 가정하에 LocalStorage를 사용해보려고 한다. LocalStorage 란? LocalStorage이외에 다른 브라우저 저장공간도 있는데 같이 알아보자. LocalStorage 문자, 숫자만 key / value 형태로 저장가능하다 5MB까지 저장이 가능하다. 브라우저에 재접속해도 영구적으로 데이터가 남아있다. O Session Storage 문자, 숫자만 key.. 2023. 8. 3.
Array에 자주 쓰는 sort, map, filter Array 정렬 (sort) [오름차순] var num = [7,3,5,2,40]; num.sort(function(a, b){ return a - b }); console.log(num); //[2,3,5,7,40] [동작원리] 1. 변수의 매개변수 a와 b는 num 배열의 요소를 처음부터 하나씩 읽어낸다. (a: 7 b: 3 / a: 3 b: 5 / a: 5 b: 2 ...) 2. return 옆에 쓰여진 수식의 결과로 a와 b 중 어느 것을 뒤에 보낼지를 결정한다. 3. return 옆에 쓰여진 수식의 결과가 양수라면 a를 b 보다 뒤로 보낸다. 4. return 옆에 쓰여진 수식의 결과가 음수라면 b를 a 보다 뒤로 보낸다. 위의 원리를 응용하면 내림차순은 아래와 같이 응용할 수 있다. [내림차순.. 2023. 8. 1.
Ajax 활용(코딩애플 URL 활용) 지난번에 배웠던 JS로 HTML 만들기와 AJAX를 활용해서 더보기 버튼을 누르면 새로운 상품이 나타나는 실습을 해보겠다. [결과물] body 기본틀 1. JS로 HMTL만들기(카드 3개 만들기) // 데이터 var products = [ { id: 0, price: 70000, title: 'Blossom Dress', img: 'https://image.msscdn.net/images/style/detail/7671/detail_7671_1_500.jpg' }, { id: 1, price: 50000, title: 'Springfield Shirt', img: 'https://image.msscdn.net/images/style/detail/13007/detail_13007_2_500.jpg' }, .. 2023. 8. 1.
Ajax Server란? : 유저가 데이터를 요청하면 데이터를 보내주는 프로그램이라고 생각하면 편하다. 주의할 점은 데이터를 요청할 때는 정해진 규칙에 따라서 요청해야한다. 1. 어떤 데이터인지 URL로 잘 기재한다. 2. 어떤 방법으로 요청할지 (GET/POST등) 데이터를 보내준다. GET/POST를 요청하는 방법 위의 코드와 같이 URL과 전송 방법을 잘 결정해서 form태그에 작성하면 된다. 하지만 위의 코드처럼 데이터를 요청하면 브라우저가 새로고침되는데 이때 깜빡임 효과가 발생하여 사용자 경험에 영향을 줄 수 있습니다. 따라서 이를 해결하기 위해서 나온 것이 Ajax이다. Ajax Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 브라우저 기능 jQu.. 2023. 7. 31.
arrow function 문법 기본 사용법 var pants = [28, 30, 32]; pants.forEach(function(a){ console.log(a) }); 위 코드에서 function을 다른 기호로 변경할 수 있는 JS 문법이 있다. 그게 바로 arrow 문법이다. 해석하면 화살표인데 아래의 코드를 보면 왜 화살표 문법인지 알 수 있다 . pants.forEach((a) => { console.log(a) }); function을 => 이 기호로 변경해서 사용할 수 있다. 생략하기 pants.forEach((a) => { console.log(a); }); // 괄호 생략하기 - 매개변수가 하나일 경우 괄호를 생략해서 사용할 수 있다. pants.forEach(a => { console.log(a); }); //중괄호.. 2023. 7. 31.
Select 3 : forEach, for in 반복문 우선 이전에 만들었던 코드는 사이즈가 늘어나거나 변경되면 그때마다 태그를 추가해주어야한다. 따라서 서버에서 데이터를 받았다고 가정하여 for 반복문을 통해서 줄여보자. 반복문 for으로 확장성 있는 코드 만들기 이전 코드 function changeSelect() { var selectedProduct = $('.form-select').eq(0).val(); if (selectedProduct == '셔츠') { $('.form-select').eq(1).removeClass('form-hide'); $('.form-select').eq(1).html(''); $('.form-select').eq(1).append("95", "100", "105", "110") } else if (selectedPro.. 2023. 7. 31.
Select 2 : 자바스크립트로 html 생성하는 법 실제로 웹사이트를 운영하게 된다면 이전에 사이즈를 입력했던 것처럼 하드코딩할 수 없다. 왜냐하면 매번 사이즈가 변경될 때마다 HTML을 변경해야하는데 만약 하나의 옷이 아니라 100개의 옷의 사이즈가 변경된다면 시간이 오래 걸리기 때문이다. 따라서 그런 경우를 생각해서 확장성있게 코드를 짜보자. JS로 HTML을 생성하는 방법 방법1. 태그를 먼저 만들고 만들어진 태그에 텍스트 입력하여 div에 추가하기 방법2. 한번에 태그와 텍스트로 이루어진 요소를 만들고 div에 추가하기 방법3. 변수에 요소를 바로 말들고 append로 추가하기 바지 옵션을 추가하고 바지 옵션을 선택하면 기존의 사이즈 옵션들을 변경 시키기 로직 1. 바지를 선택하면 옵션 보여주기 2. 기존의 옵션들을 모두 없애기 3. JS로 HTM.. 2023. 7. 31.
Select 1: 인풋 다루기 select 란? : 옵션 메뉴를 제공하는 드롭다운 리스트를 정의할 때 사용하는 태그이다. : 사용자로부터 입력을 받기위한 form에 사용할 수 있다. 형태 아메리카노 카페라테 카페오레 에스프레소 select를 활용해서 기존에 많이 사용되는 기능 구현해보기 아래의 영상처럼 셔츠를 선택하면 사이즈 select가 나오는 기능을 구현해보자. 상품선택 모자 셔츠 우선 없던 UI 생기려면 먼저 만들고 숨겨 놓다가 필요한 순간에 보여주면 된다. 따라서 아래와 같이 이미 새로운 select를 만들어 놓고 숨김처리 해놓으면 된다. 1. 미리 UI 만들고 숨김처리 index.html 상품선택 모자 셔츠 95 100 105 110 main.css .form-hide{ display: none; } 2. 정해진 타이밍에 맞.. 2023. 7. 31.
Array 와 Object 이전에 우리는 데이터를 담는 변수에 대해서 배웠다. 만약 여러 개의 데이터를 저장해야 한다고 가정한다면 변수는 데이터 개수에 따라서 선언되어야하는 번거로움이 생긴다. 이런 상황을 해결하기 위한 자료형에는 Array와 Object가 있다. Array 기본 형태 var 변수명 = [값1, 값2, 값3, 값4 ...]; // 예시 var carName = ['소나타', '아반떼', '산타페', '셀토스']; 접급 변수명[인덱스] carName[1] // '아반떼' 추가 변수명[인덱스] = 값5; carName[4] = '쏘렌토' //['소나타', '아반떼', '산타페', '셀토스', '쏘렌토'] 수정 변수명[인덱스] = 값3-2; carName[3] = '그랜저' //['소나타', '아반떼', '산타페', '.. 2023. 7. 31.
dataset HTML에는 사용자 몰래 정보를 저장하고 출력하는 기능이 있다. 그게 바로 dataset이다. 사용법 컨테이너 입니다. 저장 컨테이너 입니다. 출력 // dataset 출력 document.querySelector('.container').dataset.id // 출력: 0 2023. 7. 30.
이벤트 버블링과 이벤트관련 함수들 이벤트 버블링이란? 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상을 말한다. 로그인하세요 만약 위의 코드로 구성 되어 있는 웹 사이트에서 loginPage를 클릭하면 white-bg와 black-bg에 걸려있는 이벤트까지 작동 된다는 의미이다. 따라서 이 이벤트 버블링을 막기 위해서는 이벤트 리스너 내부에서 쓰이는 함수 들에 대해서 알아야한다. 이벤트 리스너 내부에서 쓰이는 이벤트 함수들 document.querySelector('.black-bg').addEventListener('click', function(e){ e.target; e.currentTarget; e.preventDefault(); e.stopPropagation(); }) 이벤트 리스너 내부에.. 2023. 7. 28.
탭기능 만들며 배우는 for 반복문 탭기능 만들기 탭 기능또한 다른 UI 와 같이 미리 원하는 수의 버튼과 해당 버튼에 따른 콘텐츠를 미리 만들어 놓고 해당 버튼이 클릭 되었을 때 해당 버튼에 맞는 콘텐츠를 보여주면 된다. 탭 기능 - HTML Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping 탭 기능 - css ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padd.. 2023. 7. 27.
JS 파일을 따로 선언했는데 실행이 되지 않는 경우 문제 jqeury를 사용하면서 js 파일을 따로두어 프로젝트를 진행할 때 js 파일에 있는 내용들이 실행 되지 않는 상황이 발생했다. 해결 위의 코드를 jquery 설치 코드보다 늦게 작성해야한다. 일찍 작성할 경우 js 파일 내부에 있는 jquery 문법을 인지하지 못하기 때문에 실행이 되지 않는다. 2023. 7. 27.
브라우저에서 끝까지 스크롤 했다는 것을 확인하기 div 내부에서 끝을 체크한 것과 로직은 비슷하지만 로직을 실행할 대상이 다르다. div 내부에서는 div를 대상으로 scrollTop, scrollHeight, clientHeight를 구해서 연산을 했지만 브라우저에서는 html 태그를 대상으로 scrollTop, scrollHeight, clientHeight를 구해서 연산을 해야한다. // div(.lorem) 대상 var scrollAmount = document.querySelector('.lorem').scrollTop; var scrollRealHeight = document.querySelector('.lorem').scrollHeight; var divHeight = document.querySelector('.lorem').client.. 2023. 7. 26.
스크롤 이벤트로 만드는 재밌는 기능들 스크롤 바를 내리면 로고를 작게 만들기 1. 스크롤을 해도 nav가 없어지지 않도록 navbar를 고정해주자. .navbar { position: fixed; width: 100%; z-index: 5; } 2. 스크롤이 되도록 임의적으로 높이가 큰 div를 만들어주자. 3. 기본적인 로고의 폰트사이즈를 키워보자. .navbar-brand { font-size: 30px; } 4. scroll 이벤트리스너를 통해서 유저의 스크롤 정도를 파악해보자 5. 200px까지 내릴 수록 로고의 폰트가 작아지고 다시 0px로 올릴 수록 로고의 폰트가 커지도록해보자 window.addEventListener('scroll', function(){ if (scrollY < 200){ let changeFontSize =.. 2023. 7. 25.
코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 2 이전 글에 이어서 이번에는 다음 사진 버튼을 만들어 보려고 한다. 위의 기능을 하려면 아래의 로직을 따라야 한다. STEP 01 현재 이미지가 몇 번인지 저장하기 STEP 02 현재 이미지의 번호에 따라서 다음으로 넘어갈 이미지 정하기 + 넘기기 STEP 01 var currentImg = 1; 위의 코드로 현재 이미지의 번호를 저장한다. STEP 02 $('.next').on('click', function(){ if (currentImg == 1){ $('.slide-container').css('transform', 'translate(-100vw)'); currentImg += 1; } else if (currentImg == 2){ $('.slide-container').css('transfor.. 2023. 7. 25.
코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 캐러셀이란? : 아래의 GIF처럼 이미지 슬라이드를 뜻한다. one-way UI 만들기 STEP 01 시작화면 만들기 STEP 02 최종화면 만들기 STEP 03 원할 때 최종화면으로 변하도록 JS로 만들기 STEP 04 transition: all 1s; 추가 STEP 01 시작화면 만들기 1 2 3 .slide-container { width: 300vw; /* 브라우저 폭의 3배 */ transition: all 1s; } .slide-box { width: 100vw; /* 브라우저 폭의 1배 */ float: left; /* 왼쪽으로 배치 */ } .slide-box img { width: 100vw; } STEP 02, STEP 03, STEP 04 해당 버튼들이 눌렸을 때 오른쪽으로 이미지 .. 2023. 7. 24.