봄날은 갔다. 이제 그 정신으로 공부하자

이번 글은 백엔드에서 프론트로 데이터를 전달하는 방법에 대해 기록하도록 하겠습니다. node.js에서 데이터를 읽어와 ejs로 전달 quiz table에서 퀴즈 정보를 읽어와 퀴즈 ejs로 넘겨주는 예제 입니다. // 퀴즈 상세보기로 이동 router.get('/detail_quiz/:qid', function(req, res){ if(!req.session.user){ res.render('login'); return; } var params = req.params; var qid = params.qid; var sql = 'SELECT * FROM quiz WHERE qid = ?'; var param = [qid]; conn.query(sql, param, function (err, rows, fi..

현재 저는 제 맥북에서 node.js 웹서버 작업을 하고 있습니다. 로컬에서 작업 시 이미지를 보여지도록 처리하기 위해서는 아래와 같은 작업이 필요합니다. 이미지 관리 폴더 생성 이미지를 관리하는 "public/image" 폴더를 만들어줍니다. 이렇게 만들어진 "public/image" 폴더를 이미지 파일들을 복사해줍니다. 이미지 get 기능 구현 모든 경로에서 공용으로 사용가능하도록 index.js 파일에 아래와 같은 코드를 추가합니다. // index.js var router = express.Router(); ... app.use(express.static('public')); ... router.get('/images/:imageName', function(req, res){ var imgName..

이번 글은 팝업을 띄우는 작업 입니다. 부트스트랩에서 지원하는 모달 팝업을 사용하면 좋은데, 제가 무얼 잘 못했는지 잘 안되네요... 제가 초보인걸 알고 그런가봐요 ㅠ_ㅠ 며칠동안 끙끙대면서 여기저기 수정해봐도 부트스트랩의 모달 팝업이 동작하지 않네요. ㅠ_ㅠ 그래서 css를 사용해서 모달 팝업을 생성해보았습니다. 음... 웹 서버 만드는게 처음이다보니 배워야 할게 너무 많네요. 에고고... css 만드는 부분은 아래 사이트를 참고하였습니다. https://as-you-say.tistory.com/288 css 사용을 위한 사전 준비 css는 공용으로 사용해야 하므로 프로젝트 폴더에 "public" 폴더를 만들고 public 하위에 "css" 폴더를 만들어줍니다. css 폴더에 mypopup.css 파일..

개발 환경을 구성하고 DB연결하고 라우터 처리까지했으니 이제 세션 관리 기능을 개발해야 합니다. 힘드네요... 세션이란? 세션은 서버에 저장되는 key-value 형식의 데이터로 세션은 서버에서만 생성 할 수 있어 사용자의 로그인 상태를 확인할 때 사용 됩니다. 세션의 동작 서버측에서 세션을 생성할 땐, 클라언트에게 SID(session ID)를 발급합니다. SID가 발급되면 connect.sid 쿠키가 생성된 것을 확인 할 수 있습니다. 서버측엔 해당 클라이언트가 사용할 세션을 저장합니다. 클라이언트에 SID 쿠키가 저장되어 있으니 클라이언트로부터 request가 오면 request의 쿠키로부터 SID를 확인 할 수 있으므로 해당 클라이언트의 세션을 매핑해 사용할 수 있습니다. 세션 사용 방법 Expr..

이제 슬슬 코딩에 들어가네요. node.js는 기본적으로 시작 파일인 index.js에서 라우터 관리를 하는데 서비스를 개발하다보면 라우터가 100개 이상이 되는 경우가 자주 생깁니다. 이런 경우 index.js의 코드 복잡도가 매우 증가하므로 관리 차원에서 기능별로 쪼개서 관리할 필요가 있습니다. 이 글에서는 복잡도 관리를 위해 "setting" 라우터를 별도로 분리해서 관리하는 방법에 대해 설명합니다. setting 경로 담당 파일 생성 "routers" 폴더 생성 "routers" 폴더에 setting.js 파일 생성 index.js에 setting 라우터 분산을 위한 코드 추가하기 index.js 파일에 setting 라우터 처리를 위한 코드를 아래와 같이 추가합니다. 아래와 같이 추가 시 이제 ..

이번 글에서는 기본적인 query를 node에서 어떻게 사용해야 하는지에 대해 기록하도록 하겠습니다. 여기에서는 기본적은 query에 대해서만 설명하고 추후 개발하는 웹서버가 점점 형태를 갖추어 가면서 조금 복잡한 query를 다루게 되면 별도의 글로 남기도록 하겠습니다. 글에서 사용되는 quiz 테이블의 정보는 다음과 같습니다. CREATE TABLE `quiz` ( `qid` INT NOT NULL AUTO_INCREMENT, `createdAt` DATE NOT NULL, `category` VARCHAR(16) NOT NULL, `contents` VARCHAR(256) NOT NULL, `answer` VARCHAR(256) NULL, `comment` VARCHAR(256) NULL, CONS..

이번 글에서는 이전 글에서 설치한 mysql을 프로젝트에서 사용할 수 있도록 기본 설정을 한 후, DB를 생성하고 서비스에 사용될 table들을 만들고 프로젝트에 연결해주고 마지막으로 DBeaver을 연동하는 부분까지 설명합니다. 이전 글에서 mysql을 설치하였기 때문에 제대로 설치되었고 현재 어떤 상태인지 확인 $ brew services list mysql이 시작되어 있지 않다면 아래 명령어를 사용해 mysql 실행 $ brew services start mysql 아래 명령어를 통해 root 비밀번호 설정하기 $ mysql_secure_installation root 권한으로 mysql 접속 $ mysql -u root -p db 생성하기 mysql> create database newquizdb..

"node.js로 웹서버 만들기" 시리즈는 제가node.js를 사용해 웹서버를 만들면서 공부하는 내용을 잊어버리지 않고 기억하기 위해 기록하는 글 입니다. 이번 글은 그 첫번째 글로 내 Mac에 node.js와 웹 서버 개발에 필요한 각종 라이브러리들을 설치하는 부분에 대한 기록 입니다. 사전 작업 (작업 환경 설정) 가장 기본이되는 node.js와 mysql을 command 창에서 아래 명령어를 사용해 설치합니다. $ brew install node $ brew install mysql 아래 경로에서 코딩에 사용할 Visual studio code를 다운로드 받아 설치합니다. https://code.visualstudio.com 아래 경로에서 DB Tool인 DBeaver을 설치합니다. https://..