본문 바로가기

Server76

html 조립식으로 만들기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 웹사이트를 만들다가 다른 페이지에서 같은 UI를 만들게 되는 경우가 생긴다. (예를 들면 nav) 이런 경우 해당 UI를 변경하려면 각각의 페이지에서 모두 변경해야하는 불편함이 생긴다. 따라서 이런 불편함을 해결하기 위해서는 ejs 특유의 문법을 이용해서 하나의 html 파일을 만들고 해당 html을 include 해주면 된다. 1. 새로운 html 파일만들기 공통적으로 쓰이는 UI 코드를 복사해서 새로운 html 파일을 만든다. 🚨 주의할 점 🚨 1. ejs 파일에서만 적용된다. 2. ejs 파일에서만 적용되므로 view 폴더 내부에 해당 파일이 있어야한다. Navbar Home (current) pet beauty todo 작성하기 tod.. 2023. 9. 3.
todo 목록 상세페이지만들고 이동시켜보기(detail/1) 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 당장 블로그를 쓰고 있는 티스토리만 봐도 iosoo.tistory/entry/글 제목으로 오고 있다. 이렇게 특정 url 뒤 특정 값을 변경하면 해당 페이지로 이동하는 즉, 상세 페이지로 이동하는 코드를 작성해보려고 한다. 1. 상세 페이지 만들기 우선 detail.ejs를 만들어 상세 페이지를 디자인 해보자. 이전에 만들었던 list.ejs에서 불필요한 부분은 제외하고 모두 복사해서 아래와 같은 코드를 구성했다. Navbar Home (current) pet beauty todo 작성하기 [상세 페이지] 할일 제목 : 마감일 : 2. sever 구성하기 server.js 로 돌아가서 server를 구성해보자. 한글로 우선적으로 먼저 만들어보.. 2023. 9. 3.
AJAX로 삭제 후 UI 변화시키기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 삭제버튼을 클릭하면 todolist 목록 중 삭제 버튼이 클릭된 셀이 없어져야한다. 그 방법으로는 아래의 2가지 방법이 있다. 새로 고침하기 요소 제거해주기 1. 새로 고침하기 location.reload(); //새로고침 코드 $('.delete').click(function(e){ $.ajax({ method: 'DELETE', url: '/delete', data: { _id: e.target.dataset.id} }).done(function (result) { location.reload(); //새로고침 console.log('delete complete!'); }).fail(function (error) { console.log(.. 2023. 9. 3.
AJAX로 삭제요청하기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. 1. 삭제 버튼 만들기 - list.ejs 제목 : 마감일 : 삭제 //삭제 버튼 2. 삭제버튼 클릭 이벤트 리스너 만들기 - list.ejs $('.delete').click(function(){ }) 3. 이벤트 리스너 내부에 AJAX 사용해서 DELETE 요청 보내기 - list.ejs 💡 AJAX(Asynchronous JavaScript and XML)란? 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나이다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다 즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. Aj.. 2023. 9. 1.
게시물에 번호 부여하기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. MongoDB에 데이터를 저장할 때는 _id라는 값을 넣어줘야한다. 그렇지 않으면 이상한 값이 _id로 들어가버린다. 대부분 _id 값은 게시물의 개수에 따라서 부여(1번 게시물 id: 1 2번 게시물 id: 2 ...) 하는데 이렇게 하기 위해서는 하드코딩 또는 자동으로 1씩 증가해서 id를 부여해야한다. 다른 DB에는 자동으로 id 값을 증가시켜 추가해주는 Auto Increment라는 기능이 있지만 Mongo DB에는 해당 기능이 없기에 직접 만들어야한다. 그래서 우리가 할 방법을 간단하게 설명하면 아래와 같다. counter라는 Collection을 하나 만든다. counter에 totalPost라는 데이터를 저장한다. 누군가 post.. 2023. 8. 31.
HTML에 DB데이터 넣는 법(2) - DB데이터 읽기 해당 글은 이전 글들의 작업을 이어서 진행되고 있는 글입니다. DB에서 데이터를 가져올 때 사용하는 코드는 아래와 같다. db.collection('post').find(); // post 콜렉션에 저장된 모든 데이터를 가져와주세요..! 데이터를 array에 담아서 가져오는 코드는 아래와 같다. db.collection('post').find().toArray(function(error, result){ console.log(result) }) 사용자가 /list라는 URL로 접속했을 때 DB 데이터를 list.ejs 파일에 보내고 싶다면? app.get('/list', function(request, response){ db.collection('post').find().toArray(function(.. 2023. 8. 30.
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.
HTTP 응답 코드 종류와 HTTP 메소드 종류 HTTP 응답 코드 종류 100 Continue (클라이언트로 부터 일부 요청을 받았으며 나머지 정보를 계속 요청함) 101 Switching protocols 200 OK(요청이 성공적으로 수행되었음) 201 Created (PUT 메소드에 의해 원격지 서버에 파일 생성됨) 202 Accepted(웹 서버가 명령 수신함) 203 Non-authoritative information (서버가 클라이언트 요구 중 일부만 전송) 204 No content, (사용자 요구 처리하였으나 전송할 데이터가 없음) 301 Moved permanently (요구한 데이터를 변경된 타 URL에 요청함) 302 Not temporarily 304 Not modified (컴퓨터 로컬의 캐시 정보를 이용함, 대개 gif 등.. 2022. 3. 28.

티스토리툴바