소소한IT생각

학습을 끝까지 마친 경우, word, word_set, ws_rel_model 세개의 collection의 study_cnt 값을 1 증가시킨다.mongo 데이터베이스의 경우, $inc 를 사용하여 값을 증가시킬수 있다.await word_set_model.updateOne( {_id:req.query.id}, /* 필터링 조건 */ {$inc:{study_cnt:1}} /* study_cnt 값을 1 증가*/ ) update_study_cnt  라우터를 만들어 호출 하면 끝router.get('/update_study_cnt', async(req, res) => { console.log(req.session.username) if(r..

학습을 하는 화면은 뭔가 동적인 움직이 있으면 좋을 거 같다. 그래서 CSS 에니메이션을 테스트해 보고 코드를 만들어 주는 다음 사이트를 활용하여 구현하였다. Animista 사이트 안에서는 원하는 에니메이션을 선택하면 움직임을 바로 보여주어 테스트 해보고 원하는 에니메이션의 코드를 바로 보여주어 적용할 수 있다.  Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net 너무 현란한 움직임은 학..

단어와 뜻을 다 입력한 뒤, 저장 버튼을 구현하였다. 저장하는 내용은 제목(8월 모의고사)과 영단어와 뜻 목록을 데이터로 담아서 $.post 로 데이터를 전송하면 된다.아래는 save 버튼 클릭시 발생하는 이벤트 구현소스이다.$('.save-btn').click(function(){ if ($('.add_element').val() == ""){ alert("단어장 제목을 입력하세요.") $('.add_element').focus() return } var wm = $('.word_mean') if(wm.length == 0){ alert("입력된 단어가 없습니다.") return } ..

단어 세트를 입력할 때, 영어단어를 분리한 다음 오른쪽 빈칸에 한글 뜻을 자동으로 번역해서 넣어주기 위해, Google Translate API를 활용하기로 하였다. nodejs 패키지로는 @google-cloud/translate 를 제공하고 있다.먼저 구글 cloud에 가입을 하여 다음과 같은 절차로 API서비스를 셋팅한다. 서비스 이용료는 사용량에 따라 정해지는데 매월 500,000자까지는 무료로 이용할 수 있다.1. Google Cloud 프로젝트 설정Google Cloud Console에서 새 프로젝트를 생성하거나 기존 프로젝트를 사용합니다.Translation API를 활성화합니다.서비스 계정 키를 생성하고 JSON 파일을 다운로드합니다.자세한 내용은 아래 블러그 참조   Google Clou..

데이터베이스 설계 이후, 여러가지 일로 좀 많은 시간이 걸렸다. 어떻게 하면 좀더 편하게 단어를 입력할 수 있을까 하는 고민을 상당시간 하였고, 날 코딩으로 화면을 구성하는 것이 쉽지 않아서 시간이 좀 많이 걸렸다.설계를 완료하고 위의 이미지와 같은 방식으로 화면 구성을 하였다. 툴바의 + 버튼을 클릭하면 "학습창 추가" 화면이 보여지게 되고 순서대로 자료를 입력하면 된다.제목입력 이후, 두번째 필드에는 콤마(,)로 분리된 영어단어 리스트를 입력한 뒤, 망치 버튼을 클릭하면 아래쪽에 입력된 단어들이 표시가 되게 되게 만들었다. 오른쪽에 + 버튼을 클릭시 한개씩 단어를 아래쪽에 추가할 수 있고, X 버튼을 클릭하면 해당 단어가 삭제가 된다.망치를 클릭할때, 단어가 자동으로 펼쳐지게 되고, 구글 번역 API..

처음부터 JOIN이 쉽지 않은 Mongo DB를 선택하여 진행하다 보니 어떤 방식의 설계가 적합할지 고민이 들었다. 물론 $lookup을 사용한 조인이 가능하기는 하지만 가장 Mongo DB의 특성을 잘 살려 구현하고 싶었다.Mongo DB 의 데이터 디자인 방식에는 Embedding 방식과 Referencing 방식이 존재한다.Embedding 방식은 한마디로 모든 데이터를 하나의 collection에 중첩된 형태로 다 집어 넣는 방식이고 Referencing 방식은 관계형 DB와 비슷한 방식으로 별도 collection으로 나누어 저장하는 방식을 말한다.보통 다음의 5가지의 형태에 따라 Embedding 또는 Referencing방식을 선정한다.One-to-One : Key-Value 선호One-to..

노드 서버에서 로그인과 회원가입을 처리하는 router를 만들었다. /login 경로에서 로그인과 회원가입을 동시에 처리할 수 있도록 구성하였다.로그인시기본적인 null 체크mongoose에서 id와 password를 비교한 뒤 맞는 경우, 성공 메시지를 출력회원가입시기본적 null 체크email 형식체크(emailCheck함수)  mongoose에서 req.body 데이터를 적절한 구조로 만들어 저장 1. 라우터 소스 데이터베이스의 모델은 자유롭게 스키마를 변경할 수 있도록 {strict:false} 옵션을 사용했고, 데이터베이스상에 users 객체가 있는 경우와 없는 경우 동시에 사용할 수 있도록 user_model 변수를 생성const mongoose = require('mongoose');cons..

1. 디자인 구상약간은 움직임이 있는 세련된 화면을 구성하기 위해 기존에 나와 있는 샘플화면을 최대한 활용하여 개발하고자 했다. 화면 크기는 핸드폰으로 볼때 편안한 형태로 만들다 보니, width는 440px가 가장 적합했다. 로그인 화면은 아래 블러그에 나오는 로그인 디자인 중에 무난한 것을 사용하기로 마음 먹었다.   [CSS] 🎨 로그인 / 회원가입 페이지 디자인 스타일 모음Codepen에서 괜찮은 디자인을 뽐내는 CSS 템플릿중에 로그인 및 회원가입 페이지 디자인 요소들 모아 간추려 포스팅 해보았다. 급하게 CSS 템플릿을 찾으면서도 모던하면서도 준수한 디자인 예시를inpa.tistory.com 2. 구현이 완료된 화면약간의 signin 화면과 signup 화면은 한 페이지에서 진행할 수 있도록..

아들의 단어 암기에 도움이 될지도(?) 모르는 온라인 영어 단어장을 만들어 보기로 결심했다. 클래스카드라는 이미 훌륭한 단어 암기사이트가 존재함에도 나만의 특색 있는 단어장을 만들고 싶다. 1. 서버 선택다양한 서버운영 형태가 존재하겠지만, 비용이 가장 적게 드는 방식의 서버를 운영하고 싶었다. 대부분의 클라우드를 서버를 보면 매월 비용이 지급되는 형태로 적어도 1만원 이상의 비용이 지출됨을 알수 있다.선택한 방식은 자체 서버 운영을 하기로 했다. 처음에는 데스크탑PC에서 서버를 구축하고자 했으나 24시간 365일 서버를 운영하기 위해서는 전기료가 클라우드 서버를 이용하는 것 만큼 소요됨을 알 수 있었다.  집에서 굴러다니던 안드로이드 폰(A32)을 웹서버로 사용하기로 했다. 충전은 24시간 타이머에 연..

몽고디비의  레코드는  document로 저장이 된다.document 추가하기db.[Collection명].insert({JSON데이터}) # 한건 입력db.[Collection명].insert([{JSON데이터}, ...]) # 여러건 입력 document 전체 조회하기db.[Collection명].find() # 전체조회하기 document  조건으로 조회하기db.[Collection명].find({조건})ex) db.[Collection명].find({color: 'white'})db.[Collection명].findOne({조건}) # 조건에 맞는 한건만 조회 document 출력 항목 선택하기db.[Collection명].find({조건}, {Projection})..