본문 바로가기

전체 글243

[Node.js] JWT, session, OAuth 회원가입 : 1. 유저가 가입하면 아이디/비번을 DB에 저장해둠 로그인 : 1. 유저가 로그인시 아이디/비번을 서버로 보냄 2. 서버는 DB에 있는 아이디/비번과 유저가 보낸 아이디/비번이 일치하는 경우 입장권을 발급해줌 로그인이 필요한 서버기능 : 1. 유저는 서버에 GET/POST로 데이터 요청시 입장권도 함께 제시함 2. 서버는 입장권 확인 후 데이터나 페이지 보내줌 session 방식 장점 매번 GET/POST 요청할 때 마다 DB를 조회해보기 때문에 하나하나의 요청마다 엄격하게 유저를 체크해볼 수 있음 단점 그 만큼 DB의 부담이 심해질 수 있음 그래서 유저가 많은 사이트들은 조금 더 빠른 Redis 같은 DB를 사용하기도 함 token 방식 번외 : OAuth 어떤 유저의 A 사이트의 사용권한.. 2023. 11. 11.
[Node.js] 페이지네이션 app.get('/list/1', async (요청, 응답) => { let result = await db.collection('post').find().limit(5).toArray() 응답.render('list.ejs', { 글목록: result }) }) app.get('/list/2', async (요청, 응답) => { let result = await db.collection('post').find().skip(5).limit(5).toArray() 응답.render('list.ejs', { 글목록: result }) }) app.get('/list/3', async (요청, 응답) => { let result = await db.collection('post').find().skip(10.. 2023. 11. 8.
[Node.js] 삭제기능 만들기 for (let i = 0; i { r.text() }) // 서버가 보낸 데이터 data .then((data) => { //삭제 시 새로고침해야 post가 사라진다, 그래서 숨겨버리기 e.target.parentElement.parentElement.style.display = 'none' }) }) } app.delete('/delete', async (요청, 응답) => { await d.. 2023. 11. 8.
[Node.js] AJAX, query string 우선 AJAX 를 이용해 POST 데이터 전송을 하려면 html 코드 아래에 script 태그를 넣고 document.querySelectorAll('.delete')[0].addEventListener('click',function(){ fetch('/url', { method : 'POST', headers : { 'Content-Type' : 'application/json' }, body : '데이터' }) }) 위와 같이 써주면 된다. AJAX 를 이용하면 새로고침 없이 데이터를 주고받을 수 있는 장점이 있다. body : JSON.stringify({a : 1}) array 나 object 데이터를 주고받고 싶으면 앞에 위와 같이 JSON.stringify 를 붙여주자. 서버로 데이터를 전송하.. 2023. 11. 8.
[Node.js] 수정기능 만들기 2 MongoDB 수정문법 updateOne 추가 문법 대충 { like : 10 } 이런 식으로 숫자 하나만 기록해봄 db.collection('컬렉션명').updateOne( { _id : new ObjectId('수정할 document _id') }, { $set: { like : 1 } } ) 이렇게 코드를 짜면 like 항목이 1로 변합니다. $set을 쓰면 기존 값을 덮어쓰기해줘서 그럼 db.collection('컬렉션명').updateOne( { _id : new ObjectId('수정할 document _id') }, { $inc: { like : 1 } } ) 그게 싫으면 $inc 하면 됨 그러면 1로 덮어쓰기가 아니라 +1을 해줬음 -1 적으면 -1 해줌 그래서 숫자 증감해주고 싶을 때는 $inc로 변경하면 되겠.. 2023. 11. 8.
[Node.js] 수정기능 만들기 1 server.js app.get('/edit/:id', async (요청, 응답) => { let result = await db.collection('post').findOne({ _id: new ObjectId(요청.params.id) }) console.log(result) 응답.render('edit.ejs', { result: result }) }) app.post('/edit', async (요청, 응답) => { try { let result = await db.collection('post').updateOne({ _id: new ObjectId(요청.body.id) }, { $set: { title: 요청.body.title, content: 요청.body.content } }) 응답.r.. 2023. 11. 8.
[Node.js] 상세페이지 만들기 2 (링크 만들기) 를 하면 html 에서 데이터를 띄워볼 때 array 나 object 값이어도 내용을 깨지지 않고 봐볼 수 있다. server.js try { let result = await db.collection('post').findOne({ _id: new ObjectId(요청.params.id) }) console.log(result) if (result == null) { 응답.status(404).send('이상한 url 입력함') } 응답.render('detail.ejs', { 글: result }) } catch (e) { console.log(e) 응답.status(404).send('이상한 url 입력함') } }) list.ejs 우선 list.ejs 파일에서 다음과 같이 a태그를 넣어서 자동으.. 2023. 11. 7.
[Node.js] 상세페이지 만들기1 (URL parameter) const { MongoClient, ObjectId } = require('mongodb') ObjectId 를 사용하기 위해 위의 코드로 수정해준다 app.get('/detail/:aaaa', async (요청, 응답) => { let result = await db.collection('post').findOne({ _id : new ObjectId('65438fd11b215d628373e1d9') }) console.log(요청.params) 응답.render('detail.ejs') }) :aaaa 를 뒤에 붙여서 유저가 임의로 뒤에 갖다붙힐 수 있도록 했고, 주의할 점은 아무것도 갖다붙히지 않으면 /detail 로 이동할텐데 이는 명시하지 않아서 에러가 났었음 요청.params 는 유저한테 요.. 2023. 11. 7.
[오늘도골대FC 홈페이지] 참고자료 및 구상 디자인 보호되어 있는 글 입니다. 2023. 11. 7.
[Node.js] 글 작성기능 만들기 2 (insertOne, 예외 처리) app.post('/add', async (요청, 응답) => { console.log(요청.body) await db.collection('post').insertOne({ title: 요청.body.title, content: 요청.body.content }) 응답.redirect('/list') }) 다음과 같이 DB 로 저장을 시킬 수 있다. 요청.body 를 출력하면 데이터가 object 자료형식으로 출력되는데, 요청.body.title 처럼 해당 데이터를 지정한 DB의 key 값에 매치시켜 저장할 수 있다. 저장된 후에 응답.redirect('/list') 를 하면 자동으로 페이지를 옮긴다. 하지만 위 코드는 서버에서 한 번 검열하는 기능이 없어 안정성면에서 떨어진다. app.post('/ad.. 2023. 11. 7.
[Node.js] 글 작성기능 만들기 1 (POST 요청) 글 작성 기능 동작 1. 유저가 글작성페이지에서 글을 작성해서 서버로 글을 보내고 2. 서버는 글을 받으면 잘썼나 확인해보고 3. 서버는 그걸 DB에 저장 write.ejs 파일 생성 후 글쓰기 전송 데이터를 보내기 위해서 (POST method 를 이용하기 위해서) form 태그를 사용. action 속성 열어서 /url 채우고 method 속성 열어서 POST 로 채운 후에 input 속성들에 이름을 붙여준다. 서버에서 글 받으면 잘 보냈나 확인해보려면 app.post('/add', (요청, 응답) => { console.log(요청.body) }) 이 코드를 넣을건데, 먼저 상단에 app.use(express.json()) app.use(express.urlencoded({extended:true}.. 2023. 11. 7.
[Node.js] RESTful API 1. Uniform Interface - 여러 URL과 method는 일관성이 있어야합니다. - 하나의 URL로는 하나의 데이터를 가져오게 디자인하는게 좋고 - 간결하고 예측가능하게 URL과 method를 만드는게 좋습니다. 2. Client-server 역할 구분 유저에게 서버역할을 맡기거나 DB를 직접 입출력하게 시키면 안좋습니다. 3. Stateless 셋째로 요청들은 서로 의존성이 있으면 안되고 각각 독립적으로 처리되어야합니다. 4. Cacheable 서버가 보내는 자료들은 캐싱이 가능해야합니다. 그러니까 자주 받는 자료들은 브라우저에서 하드에 저장해놓고 서버에 요청을 날리는게 아니라 하드에서 뽑아쓰는걸 캐싱이라고 합니다. 5. Layered System 서버기능을 만들 때 레이어를 걸쳐서 코드가.. 2023. 11. 6.
[Node.js] 여러 글을 한 번에 출력 (EJS 문법2) 여러 개의 글을 출력하기 위해서는 반복문을 사용 for (let i = 0; i 2023. 11. 6.
[Node.js] 웹페이지에 DB데이터 꽂기 (EJS, 서버사이드 렌더링) ejs 셋팅하려면 npm instas 입력 서버파일 상단에 app.set('view engine', 'ejs') view 폴더 만들고 list.ejs 이름으로 파일을 하나 만듦 ( html 과 동일하나 이 파일로 데이터를 보낼 수 있음 ) app.get('/list', async (요청, 응답) => { let result = await db.collection('post').find().toArray() // DB 에서 어떤 콜렉션에 있는 모든 DB 를 불러오는 코드 응답.render('list.ejs', { 글목록 : result }) } 위처럼 ejs 로 연결을 하기 위해서는 render 을 이용해주어 ejs 파일로 데이터 전송. (응답 은 2번 들어가면 안됨) ejs 파일에서 데이터를 받을 때에는.. 2023. 11. 6.
[Node.js] Node.js 웹페이지에 디자인 넣기 npm install -g nodemon 설치해서 자동으로 node server.js 가 실행되게 셋팅, 이후 nodemon server.js 한 번만 쳐주면 됨 public 폴더 만들고 안에다가 static 파일들을 넣어줌 app.use(express.static(__dirname + '/public')); 서버 파일 상단에 위 코드 쳐준다. html head 태그 안에 를 입력해서 css 파일을 쓸 준비를 마침 2023. 11. 2.

티스토리툴바