Projects (39) 썸네일형 리스트형 #5. 프로젝트 후기 https://github.com/chanmin-kim/spootify chanmin-kim/spootify Writing and Sharing Song Reviews with Others (node.js, express, bootstrap, mongoDB) - chanmin-kim/spootify github.com 전체적인 소스코드는 여기서 확인할 수 있다. 맨땅에서, express와 mongodb 그리고 bootstrap을 이용해 웹사이트를 만들어 본 것이 처음인데, 아무래도 몽고db에서 스키마를 정의하고 이것을 다루는 것이 쉽지 않았다. 기존에는 mongoDB 아틀라스를 이용해 클라우스 서비스를 이용했는데, 이번에는 mongodb를 개발용 컴퓨터에 직접 설치하고, mongoose로 query문을 .. #4. 삭제 기능 구현 삭제버튼을 누르면 작성한 리뷰가 삭제되도록 한다. 1) 비밀번호를 입력했는지 체크하고 2) 작성한 비밀번호가 맞으면 삭제하고, 메인페이지로 렌더링해준다 3) 작성한 비밀번호가 틀렸다면, 에러메시지를 띄운다. 우선 프론트엔드부터 구현하면 다음과 같다. function submitDelete(){ let confirm_password = $('#confirm_password').val(); if (!confirm_password) { alert("비밀번호를 입력하지 않았습니다"); return false; } $.ajax({ type: "DELETE", url: "/api/delete/", data: { confirm_password: confirm_password, }, success: function (.. #3. 리뷰 수정 기능 구현 리뷰 수정 페이지에서는 다음과 같은 기능들이 필요하다 1) 리뷰 수정 페이지를 렌더링해줄 때, 작성한 글 까지 같이 불러와 렌더링해준다 2) 그리고 작성한 내용을 인풋칸에 value로 넣어준다 3) 비밀번호를 입력하지 않았다면, 입력하도록 alert창을 띄워준다 4) 입력한 비밀번호가 틀렸다면, 비밀번호가 틀렸다는 alert창을 띄워준다 5) 비밀번호가 맞고, 수정할 내용을 모두 입력한 경우에만 수정한 내용을 저장한다. 우선 수정페이지를 어떻게 백엔드에서 렌더링하는지 살펴본다. // 수정페이지 : 상세페이지에서 수정 버튼을 누르면 글을 수정할 수 있는 페이지로 이동 app.get('/update/:id', (req,res)=>{ review = Reviews.findOne({_id: req.params... #2. 리뷰작성 화면 왼쪽 탭의 리뷰작성 버튼을 누르면 리뷰를 작성할 수 있는 페이지로 이동하게 된다. 1) 리뷰 작성 시 모든 칸이 작성되어 있는지 확인해주어야 하며 2) submit 버튼을 누르면 ajax 통신으로 post요청을 보내게 되어, Reviews 콜렉션에 작성한 리뷰가 저장되어야 한다. 3) 잘 저장되었다면 프론트엔드로 res.status(200)을 보내게 된다. 먼저 프론트엔드에서 1, 2번 기능은 다음과 같이 코드를 작성한다. jQuery로 각 input칸에 적힌 value들을 가져온다. 그 후 값들이 다 있는지 검사한 후에, 다 존재한다면 작성한 내용들을 post요청으로 보낸다. post요청이 잘 이루어졌다면, 백엔드로부터 성공 메시지를 받아 alert로 출력한 뒤, 메인화면으로 렌더링해준다. post요청.. #1. 메인화면의 구성 기본적인 CRUD를 중심으로 기능을 구현하였다. 우선 메인 화면을 구성하는 코드에 대해서 리뷰하고자 한다. 복잡한 로직은 사용되지 않았다. 1) 메인화면의 url로 들어왔을 때 index.html을 렌더링 해주고, 2) 이 때 db에서 작성한 글 목록을 불러와 서버사이드 렌더링을 해준다 이 부분을 코드로 구현하면 다음과 같다. // 메인페이지 : 홈화면, 작성한 글 목록을 최신순으로 보여줌 app.get('/', async (req, res) => { reviews = await Reviews.find().sort({created: -1}) if (reviews){ res.render('index', {reviews : reviews}); }else{ console.log("DB에서 데이터를 불러올 수 .. #0. 프로젝트 소개 Node.js환경에서 Express프레임워크와 MongoDB를 활용하여 간단한 곡 리뷰사이트를 만들었다. 프론트엔드는 bootstrap으로 만들어진 템플릿을 사용하였고, 글 수정, 작성, 삭제버튼에 대해서는 jQuery를 이용해 ajax통신으로 구현하였다. aws ec2 환경에 배포하였기 때문에 다음 주소에서 실제 사이트 작동을 확인할 수 있다. http://52.79.173.212/ #10. 프로젝트를 끝내며 https://github.com/chanmin-kim/react-firebase-linkedin chanmin-kim/react-firebase-linkedin react-firebase linkedin clone . Contribute to chanmin-kim/react-firebase-linkedin development by creating an account on GitHub. github.com 최종코드는 여기서 확인할 수 있다. 백엔드를 따로 구성하지 않고, firebase로 백엔드를 구성한 뒤, 프론트엔드는 React오 링크드인 클론앱을 만들어 보았다. React를 사용하면서 느낀 것은, 단순히 UI적인 측면에서의 가독성을 넘어, 백엔드(Firebase)에서 보내준 정보를 state에 담.. #6. 프로젝트 후기 https://github.com/chanmin-kim/flask-mongodb-kleague chanmin-kim/flask-mongodb-kleague flask-mongodb web application for scheduling k-league matches - chanmin-kim/flask-mongodb-kleague github.com 전체 소스코드는 여기서 확인할 수 있다. 3가지 기능을 주로 활용하였다. 1) JWT방식을 통한 로그인 2) Flask + MongoDB를 통한 CRUD 3) ajax 통신 (혹은 fetch) 먼저 1의 측면에서, 세션/토큰/소셜로그인의 방식이 있는데, 토큰을 사용해보는 것에서 배우는 것이 있었다. 각자 장단점이 있다고 생각하는데, 내가 서비스를 설계할 때는 .. 이전 1 2 3 4 5 다음
