본문 바로가기
728x90

웹개발109

[Node.js] 마이페이지 만들기(로그인 상태에서만 이용 가능한 페이지) 저번에 로그인 기능을 만들었던 것에 이어 마이페이지를 만들어보자. 처음 로그인할 때는 passport.serializeUser()함수를 이용하여 세션을 생성해주었는데, 이번에는 세션정보로 DB에서 유저정보를 찾는 passport.desrializeUser()함수를 이용해야 한다. //이 세션데이터를 가진 사람을 DB에서 찾음 passport.deserializeUser(function(아이디,done){ db.collection('login').findOne({id:아이디},function(에러,결과){ done(null,결과) }) }); db의 findOne함수로 간단하게 작성할 수 있다. 미리 만들어둔 mypage.ejs를 get요청시 렌더해주여야하는데, 렌더하기전에 유저가 로그인했는지 판별할 필요.. 2023. 2. 23.
[Node.js] 로그인 기능 추가하기(Session 방식) 세션 방식의 로그인 기능을 추가해보자. 라이브러리 설치 npm install passport passport-local express-session 터미널에서 passport, passport-local express-session 이 세가지 라이브러리를 설치한다. const passport = require('passport'); const LocalStrategy=require('passport-local').Strategy; const session = require('express-session'); app.use(session({secret : '비밀코드',resave : true, saveUninitialized: false})); app.use(passport.initialize()); ap.. 2023. 2. 22.
[Node.js] 글 수정 기능 추가하기 edit 페이지를 추가하고 기존의 글을 수정할 수 있게 만들어보자. 우선 edit.ejs파일부터 만든다. app.get('/edit/:id',function(req,res){ db.collection('post').findOne({_id:parseInt(req.params.id)},function(에러,결과){ res.render('edit.ejs',{data: 결과}) }) }) 상세페이지를 만들었을 때와 마찬가지로, 경로 뒤에 id값을 파라미터로 받아서, 해당 글을 수정하는 페이지가 보이게 하자. /edit/:id 경로로 get 요청을 하면, DB에서 _id값이 (파라미터)id와 일치하는 데이터를 찾아 edit.ejs로 보내 렌더링한다. 번 글 수정하기 2023. 2. 22.
[Node.js] CSS파일 이용하는 법 CSS파일이나 이미지같은 자료들은 관습적으로 /public 폴더에 만든다고 한다. .html이나 .ejs파일의 헤더에 태그를 넣어 CSS를 사용할 수 있다. 그런데 public폴더를 사용한다는 것을 서버에도 알려주어야 한다. (server.js) app.use('/public',express.static('public')); 서버.js파일에 다음과 같은 코드를 추가하면 된다. 2023. 2. 19.
HTML을 조립식으로 사용하기 네비게이션 바를 보면 똑같은 모양의 navbar가 index, write, list페이지에 있다. 각 페이지마다 navbar 코드를 작성해도 작동은 되지만, navbar를 수정해야 하는 경우에는 모든 페이지에서 navbar를 수정해주어야 하는 문제가 생긴다. navbar를 따로 빼두고, 조립식으로 HTML을 만들어 보자. ejs를 이용한다. (ejs를 설치하지 않았다면 npm install ejs를 터미널에 입력해서 설치하고 시작하자) 작업폴더 내에 views폴더를 하나 만들고, 모든 페이지의 확장자를 .html에서 .ejs로 바꾼 후 views폴더로 이동시킨다. Todo App Home (current) Write List Disabled 그리고 navbar 코드만 잘라내서, nav.html파일로 저장.. 2023. 2. 19.
[Node.js] 글 상세페이지 만들기 글 제목을 클릭하면 상세페이지가 열리는것을 만들어 보자. 우선, 상세페이지는 하나만 있는것이 아니라, 글마다 하나씩 있어야 하기 때문에 경로를 /detail/:id로 했다. 그러면 '/detail/글번호 '경로로 해당 글번호에 해당하는 상세페이지를 볼 수 있다. (server.js) app.get('/detail/:id',function(req,res){ db.collection('post').findOne({_id:parseInt(req.params.id)},function(에러,결과){ console.log(결과); res.render('detail.ejs',{data:결과}) }) }) '/detail/:id' 경로로 오는 get요청을 처리해준다. 경로에서 콜론: 뒤에오는 것은 파라미터로, req... 2023. 2. 19.
[Node.js] 글 삭제 기능 만들기 삭제버튼을 누르면 해당 포스트가 삭제되도록 만들어 보자. 삭제 우선 list.ejs 파일을 보자. button태그를 이용해서 삭제버튼을 만들어주었고, 현재 글의 id값을 저장하기 위해서 버튼태그 안에 data-id를 적어주었다. (이렇게 안하고 그냥 태그에 글번호를 적어줘도 되기는 하지만 이 방법이 더 편하고 깔끔할 것 같다.) $('.delete').click(function (e) { var 글번호 = e.target.dataset.id; var 현재요소 = $(this); $.ajax({ method: 'DELETE', url: '/delete', data: { _id: 글번호 } }).done(function(결과) { //ajax요청성공시 실행할 코드 현재요소.parent('li').fadeOu.. 2023. 2. 19.
[Node.js] [MongoDB] 게시물에 번호달기(.updateOne) 게시물마다 번호를 달면 게시물들을 관리하기 좋다. 게시물 개수를 세기 위해서 DB에 'counter'라는 콜렉션을 하나 더 생성한 다음, {name: 게시물개수 totalPost: 0}를 작성해서 insert 해주었다. 이제 글을 작성할 때마다 'count' 콜렉션의 name:게시물개수인 요소의 tatalPost 값을 1 증가시켜주면 된다. app.post('/add', function (req, res) { res.send('전송완료') //console.log(req.body.title) db.collection('counter').findOne({'name' : '게시물개수'},function(에러,결과){ //name이 게시물개수인 데이터를 찾음(카운터 사용) var 게시물개수 = 결과.total.. 2023. 2. 16.
[Node.js] DB에서 데이터를 가져와 사용하기 DB에 저장한 데이터를 꺼내와 사용해보자. 앞서서... DB에 데이터를 저장했었다 const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); . . . app.post('/add', function (req, res) { res.send('전송완료') //console.log(req.body.title) db.collection('post').insertOne({'title':req.body.title,'date':req.body.date},function(에러,결과){ console.log.. 2023. 2. 14.
[Node.js] POST요청/ form 데이터 서버로 전송하기 이러한 write페이지를 미리 만들어 두었다. 오늘의 할 일 Due date 저장하기 form태그에 action='/add' method='POST' 을 설정하였다 그럼 폼 전송버튼을 누를 시 /add 경로로 POST요청을 하게 된다. (각 input에는 name도 붙여 주었음) 다시 서버로 돌아와서, const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({extended:true})); 데이터 처리를 쉽게하기위해 body-parser 라이브러리를 사용한다. 그래서 맨 위에 이 코드를 추가해주고, app.post('/add',function(req,res){ res.send('전송완료') console.log(req.body) .. 2023. 2. 13.
[Node.js] nodemon 사용하기 매번 이렇게 node 파일명으로 서버를 실행하고, ctrl+c로 끄고.. 하는것이 귀찮다 nodemon을 사용해 보자. npm install -g nodemon 을 입력해서 설치 해 주고 nodemon 파일명.js 를 입력하면... 오류가 뜬다. 이를 해결하기 위해서 windows powershell을 관리자권한으로 실행시킨 다음, executionpolicy를 쳐 보면 Restricted 라고 나오는데, set-executionpolicy unrestricted 를 입력해서 unrestricted로 변경해주면 된다. 그러고 나서, 다시 nodemon 파일명.js 를 입력하게되면? 잘 실행 된다. 이제 파일이 변경되면 자동으로 서버가 재가동된다. 2023. 2. 13.
[Node.js] GET 요청 처리하기 / GET 요청시 HTML파일 보내는 법 앞선 시간에 Node.js를 설치하고 express라이브러리도 설치하였다. ... 서버를 띄우기 위해 작성한 기본 템플릿. const express = require('express'); const app = express(); app.listen(8080,function(){ console.log('listening on 8080') }); (express 라이브러리 사용법에 따름) express라이브러리 첨부 및 사용, app.listen()으로 원하는 포트에 서버를 오픈하였다. (app.listen(오픈할 포트번호, function(){오픈시 실행할 코드});) const express = require('express'); const app = express(); app.listen(8080,fu.. 2023. 2. 13.
서버란 무엇인가? 서버란 무엇인가? '클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램' == 요청을 받으면 데이터를 보내주는 기계. (이모 여기 사이다 한병이요~ 요청하면 이모가 사이다를 한 병 갖다주는데 여기서 이모 역할.) 서버에는 아래 4가지를 요청할 수 있다. 1. 읽기(GET) 2. 쓰기(POST) 3. 수정(PUT) 4. 삭제(DELETE) GET을 한번 살펴보자. 웹페이지를 읽을 때 GET 요청을 사용한다. (유튜브 홈을 보고싶다고 유튜브 서버에 GET요청) GET요청을 하는 가장 쉬운 방법은 브라우저 주소창에 URL을 입력하는 것이다 (브라우저의 URL 입력란이 GET요청하는 곳이었음 ㅎㄷㄷ) 그래서... 서버는 어떻게 만드는데? 누가 youtube.com으로 접속하면 메인페이지H.. 2023. 2. 12.
OpenAI API를 이용하여 채팅 웹페이지를 만들다 이렇게 AI와 대화를 할 수 있다. openAI API를 사용해서 채팅 웹을 만드는 방법은 이 영상을 참고했다. 아직 제대로 공부하지 못해서 잘은 모르지만 따라 만들기에 너무 재밌을 것 같아서 만들어 봤다. 기본적으로 openAI 사용하는 방법은 영상을 따라했고 내가 할줄아는 HTML CSS JS로 채팅화면 꾸미기를 조금 해봤다. 아이폰 메세지 앱을 참고해서 비슷한 느낌으로 만들어보고자 했다. 색입히기, 마진, 패딩넣기는 그냥 하나씩 해보면서 맞췄다. 만들면서 몇 가지 신경 쓴 것들 배경 블러처리하기 아이폰 메세지 앱을 보면, 화면의 상단부분에는 메세지 내용이 블러처리가 돼서 보이고 상대방의 프로필이 나온다. (메세지들을 스크롤하면 블러부분에도 메세지가 올라가는 것이 흐리지만 보여야한다.) 이를 구현하기.. 2023. 2. 8.
[자바스크립트] 스와이프 기능과 터치 var 시작좌표 = 0; var 눌렀음 = false; $('.slide-box').on('mousedown', function(e) { 시작좌표 = e.clientX; 눌렀음 = true; }); $('.slide-box').on('mousemove', function(e) { if (눌렀음 == true) { $('.slide-container').css('transform', `translateX(${e.clientX - 시작좌표}px -${지금사진}00vw)`); } }); $('.slide-box').on('mouseup', function(e) { 눌렀음 = false; console.log(e.clientX - 시작좌표); if (e.clientX - 시작좌표 < -100) { $('.sli.. 2023. 2. 6.
슈팅게임 페이지 가꿔보기 전혀 꾸미지 않았었던 페이지를 부트스트랩을 이용해서 아주 기본적인 것만 만들어 주었다. title을 토리 슈팅게임으로 바꾸었다. 내브바에 "토리 슈팅게임" 제목을 적어주었고, 내 블로그 주소와 깃허브 주소 링크를 넣어두었다. 게임 설명을 alert창 파란색에 적어두고, 난이도를 선택할 수 있게 하였다. 비둘기가 떨어지는 속도를 level이라는 변수로 바꾸고, select form에서 난이도를 선택하면 그에 맞는 속도로 비둘기가 떨어지게 하였다. select form에서 input 이벤트가 발생하면 main(), createEnemy()가 실행되도록 하였다. 그래서 난이도를 선택해야 게임이 실행된다. (처음에는 createEnemy()는 원래대로 두었었는데, 그렇게 했더니 페이지가 로드되고 시간이 조금 지.. 2023. 2. 5.
자바스크립트로 슈팅게임을 만들다 어제 자기전에 유튜브 보다가 자바스크립트로 슈팅게임 만들기 영상을 봤는데 생각보다 따라해볼만 한 난이도라서 영상보면서 똑같이 만들어봤다. 더보기 '코딩알려주는누나'라는 유튜버께서 알려주는 슈팅게임 만드는 방법. 하나부터 열까지 다 알려주기때문에 나같은 초보자들도 잘 이해하면서 할 수 있다. https://yeomdonghwan.github.io/슈팅게임 tori-game 슈팅게임을 해보세요. 좌우 화살표로 움직이고 스페이스바를 눌러 토끼똥을 발사해보세요. ~토리가 비둘기를 무찌를 수 있게 도와주세요~ 블로그 깃허브 배경 이미지 출처 Freepik yeomdonghwan.github.io 영상에서 알려준 것 그대로 만들었기 때문에 내가 만든것이 아니라서 큰 의미는 없지만 자바스크립트로 이런것도 할 수 있구.. 2023. 2. 4.
[자바스크립트] sticky 활용하기 position: sticky; sticky를 이용해 보자. sfjeifjwiflwejewljwelfjwelfwje fejwfljw wejfewjflwel fewj lwejfw wejflwejfkljl wejflkwejflk wejfklwj image는 float:right, position: sticky가 설정되어있고 text는 float:left가 설정되어 있다. text가 왼쪽, image가 오른쪽으로 배치되었다 image는 sticky, top:100px로 설정을 해놓았기 때문에 스크롤해도 위에서 100px만큼 떨어진 위치에 고정되어있다. 이렇게 고정된 image는 부모태그 안에서 고정되어있게 된다. (부모태그가 끝나면 같이 스크롤되어 올라감) 애플 홈페이지를 구경하다 보면 스크롤 이벤트를 정말 .. 2023. 2. 3.
[자바스크립트] 브라우저 로컬 스토리지(localStorage)사용하기 브라우저에 데이터를 저장하는 방법을 알아보자. localStorage.setItem('ㅇㅇ','kkk'); localStorage.setItem('name',[1,2,3]);//안됨 var arr=[1,2,3]; var newArr=JSON.stringify(arr); localStorage.setItem('name',newArr); var 꺼낸거=localStorage.getItem('name'); var newArr=JSON.parse(꺼낸거); console.log(newArr[0]); 로컬스토리지는 key:value의 형태로 저장할 수 있다. 문자나 숫자만 넣을 수 있어서, Array, Object자료형은 저장을 할 수 없다. 이때는 JSON.stringify() 메소드를 이용해서 문자열의 형태로.. 2023. 2. 2.
[자바스크립트] sort,map,filter var arr=[4,203,44,3,29]; arr.sort(); 이런 array를 정렬하기 위한 sort메소드가 있다. 과연 잘 정렬되었을까? 정렬이 되긴 되었지만 우리가 기대하는 값이 나오지 않았다. 아마 맨 앞 문자 기준으로 정렬이 되지 않았나 싶다. 그럼 숫자순으로 정렬하려면 어떻게 해야할까? arr.sort(function(a,b){ return a - b; }); 이렇게 sort안에 콜백함수를 넣어주면 된다. 이 콜백함수는 자바에서 쓰던 compareTo와 비슷하다고 보면 될 것 같다. 리턴값이 음수인지, 양수인지에 따라 위치가 바뀌는데, a-b를 리턴하면 오름차순 정렬이 된다. var c_arr=['a','c','d','b']; c_arr.sort(function(o1,o2){ if(o1o2.. 2023. 2. 2.
728x90

티스토리툴바