개발자연습노트

회원기능 동작방식  예를 들어 게시물들을 로그인한 사람만 볼 수 있게 만든다고 칩시다. 그럼 회원기능이 필요한데 어떤 식으로 회원기능을 만들면 되냐면 회원가입 : 1. 유저가 가입하면 아이디/비번을 DB에 저장해둠  로그인 : 1. 유저가 로그인시 아이디/비번을 서버로 보냄 2. 서버는 DB에 있는 아이디/비번과 유저가 보낸 아이디/비번이 일치하는 경우 입장권을 발급해줌  로그인이 필요한 서버기능 : 1. 유저는 서버에 GET/POST로 데이터 요청시 입장권도 함께 제시함 2. 서버는 입장권 확인 후 데이터나 페이지 보내줌 이런거 만들어두면 회원기능 끝입니다. 아이디/비번 이런거 DB에 저장하는건 여러분도 할 수 있으니까 패스하고오늘은 입장권을 어떤 식으로 만드는지 알아봅시다.      입장권이 뭐냐면 ..

pagination 지금은 글이 100개 있으면 아마 이렇게 하면 100개 전부 가져와서 보여주도록 코드짜놨는데 근데 그러면 DB쨩도 부담되고 유저 브라우저도 좀 부담이 되지 않겠습니까그래서 보통 웹서비스들은 글이 너무 많으면 글을 여러 페이지로 쪼개놓는데이걸 pagination이라고 부릅니다. 같이 만들어봅시다.  당연히 페이지네이션 만드는 강의를 들어야 만들 수 있는게 아니라 한글로 기능설명부터 하고 알아서 코드짜면 되는데 어떻게 돌아가는지 모르겠으면 다른 사이트를 참고하면 되는 것이고요  1. 일단 페이지 이동 버튼들을 만들어둡니다 2. 버튼1 누르면 첫글부터 5번째글 들어있는 페이지 보여주고 버튼2 누르면 6번째글부터 10번째글 들어있는 페이지 보여주고하면 끝입니다.  저는 글이 13개 있어서 그..

node 1. server.js 파일을 하나 만들어줍시다.  거기다가 서버코드짤 것임  2. 에디터 상단 terminal 눌러서 터미널을 열 수 있는데 거기다가 npm init -y 를 입력합시다.  package.json 파일 생성해주는 명령어입니다.    3. 터미널에 npm install express를 입력합시다.  express라는 라이브러리를 설치하는 명령어입니다.  4.npm install -g nodemon  npx nodemon server.js  5. server.js 파일안에 서버코드 작성 const express = require('express') const app = express() app.use(express.static(__dirname + '/public')); app.s..

글 삭제기능도 만들어봅시다.기능이 어떻게 동작하는지 글로 정리부터 해보면"글마다 있는 삭제버튼 누르면 DB에 있는 document 삭제하기"가 끝인데 근데 유저가 직접 DB를 조작하면 위험하니까 중간에 서버를 거치도록 합시다.  1. 글마다 삭제버튼이 있는데 누르면2. 서버로 이 글 삭제해달라고 요청을 날리고 3. 서버는 확인 후 DB에 있는 document 삭제 이러면 될 것 같습니다. 그리고 이런거 작성할 때 상세할 수록 더 좋은 코드 작성이 가능합니다.       AJAX  삭제기능은 똑같이 만들면 재미없으니까 좀 다르게 만들어보도록 합시다. 여러분들 서버로 GET요청 POST요청 날리는 법 배웠죠? 주소창에 URL 입력하거나 을 전송하거나 하면 됩니다.근데 그런걸로 요청을 날리면 항상 새로고침이 ..

글 수정기능을 만들어볼건데 실은 수정기능 만드는건 상세페이지 했던거랑 약간 비슷한 것 같은데 실력향상을 원하시면 강의끄고 직접 글 수정기능 만들어봅시다. 혼자 코드를 짜봐야 혼자 코드짜는 실력이 늡니다.  겁쟁이들은 저랑같이 해보고요      수정기능이 뭐냐면 수정기능이 뭔지 한글로 설명부터 해봅시다.다들 게시판서비스에서 글 수정같은거 해봤을거 아닙니까 1. 글마다 있는 수정버튼 누르면 글수정할 수 있는 페이지로 이동2. 그 페이지엔 글의 제목과 내용이 이미 폼에 채워져있어야함3. 전송누르면 그걸로 기존에 있던 document를 수정해줌 여기서 모르는건 기존 document 수정하는 법 정도인 것 같은데 1번부터 해보도록 합시다.      1. 글마다 있는 수정버튼 누르면 글 수정페이지 이동 버튼누르면 ..

게시판의 경우에 글제목 누르면 상세페이지 같은걸로 이동하지 않습니까 그래서 우리도 글마다 상세페이지를 만들어봅시다.한글로 기능설명부터하면 되는데근데 내가 그 기능이 어떻게 돌아가는지 몰라서 한글로 설명도 못하겠으면  다른 사이트의 상세페이지 기능은 어떻게 돌아가고 있는지 살펴보면 됩니다.     네이버 Vibe라는 음악감상하는 사이트인데 곡을 누르면 곡마다 상세페이지가 있습니다.  근데 URL 주목해보시면  /track/곡번호  이렇게 접속하면 거기에 맞는 곡의 상세페이지를 보여주는 식으로 만들어놨군요. 여기말고도 다른 서비스의 상세페이지들도 다 비슷하게 동작할걸요.그래서 우리도 요 시스템을 카피해보도록 합시다. 누가 /detail/글번호로 접속하면 그 글번호를 가진 글의 상세페이지를 보여줍시다. 자 지..

글쓰기 기능을 만들어볼건데알아서 한번 코드 짜보시면 되겠습니다. 안배운건데 코드를 어떻게 짜냐고요? 첨보는 기능하나 만들라고 했을 때 어떻게 해야되냐면 - 기능이 어떻게 동작하는지 한글로 상세히 정리부터 하고- 그걸 코드로 번역하기  이렇게 하면 처음보는 기능도 알아서 잘 만들 수 있습니다. 숙련된 프로그래머들도 다들 이렇게 합니다. 자바스크립트 기초강의에서 맨날 연습하던 것임      글작성 기능이 어떻게 동작하는지 정리부터 글작성기능은유저가 작성한 글을 DB에 저장하면 그게 글쓰기 기능 끝아니겠습니까이렇게 써놓고 그대로 코드로 번역만 하면 될거같은데  이렇게 코드짜면 금방 서비스 종료한다고 했습니다. 유저가 DB와 직접 통신하게 냅두면 유저가 DB에 이상한 짓을 할 수도 있기 때문에DB조작이 필요한 ..

글작성기능을 만들어볼건데 그 전에 개념설명을 하나하고 지나가야합니다.  1. 서버가 뭐냐면 강의 맨 처음에 쉽게 설명했는데서버는 그냥 요청이 들어오면 그걸 처리해주는 간단한 프로그램입니다.누가 웹툰달라고 하면 웹툰보내주고DB데이터 달라고하면 DB데이터 보내주는 프로그램일 뿐임반대로 DB에 데이터좀 저장해달라고 하면 데이터 저장해주는 것도 가능합니다.아무튼 서버는 누가 뭔가를 요청하면 그걸 처리해주는 프로그램일 뿐인데    2. 예의바르게 요청해야함 유저 마음대로 대충 서버에게 요청하면 서버는 데이터를 보내주지 않습니다.유저가 서버에게 뭔가 요청하려면 1. method 2. URL을 정확히 적어서 보내야합니다    method는 이런 것들이 있는데 이 중에서 마음에 드는거 하나 고르면 됩니다.GET은 서버..

저번시간에 DB에서 출력한 글제목을 유저에게 보내주는건 성공했는데 근데 데이터만 달랑 보내면 되겠습니까멋진 글목록페이지를 html로 하나 만들어서  그 안에 글제목들을 박아넣어서 유저에게 그 html  페이지를 보내보도록 합시다.  근데 그러려면 html안에 데이터를 꽂아넣는 법을 알아야하는데 그건 템플릿 엔진이라는걸 쓰면 가능합니다.그거쓰면 html 안에다가 서버에 있던 데이터들을 막 꽂아줄 수가 있습니다 템플릿엔진은 여러가지중에 고를 수가 있는데 우리는 이 중에서 가장 쉽고 간단한 ejs를 써볼 것입니다. 다른 템플릿엔진들은 새로운 문법 많이 익혀야되는데 이건 딱히 새로운 문법 익힐 필요없이 자바스크립트 문법그대로 사용할 수 있음     ejs 셋팅 템플릿엔진을 쓰려면터미널 열어서 npm instal..

DB에 게시물 한 두개만 저장해보도록 합시다.- mongodb.com 사이트 들어가서- collection 버튼 누르면현재 DB에 저장된 데이터들을 구경해볼 수 있는데저번시간에 forum이라는 데이터베이스안에 post 라는 컬렉션 (폴더)를 만들어봤습니다.  이제 심심하니까 여기다가 데이터 몇개만 저장해볼건데 게시판을 만든다고 했으니까 유저 게시물을 post 컬렉션에 임시로 몇개 만들어봅시다. insert document 버튼이 어딘가 있을텐데 누르면 데이터를 저장할 수 있습니다.  title : '어쩌구'content : '저쩌구' 이런 형식으로 대충 유저 게시물을 두어개 정도 저장해보도록 합시다. document에는 데이터이름 : 데이터값 형식으로 데이터를 저장할 수 있습니다. 자바스크립트 objec..