nodejs 3

온라인 영어 암기 단어장 만들기(5) - 단어입력화면 만들기

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

온라인 영어 암기 단어장 만들기(3) - 로그인, 회원가입 로직추가

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

React JS 처음 시작해보기

윈도우 환경에서 개발 환경을 준비하고 간단한 앱을 실행해보자.맨 처음, nodejs 를 설치 해보자. 다음의 링크에서 최신버전을 다운받아 설치한다. 모든 설치옵션은 그냥 default로 설치 Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 설치가 되고 나면 다음의 링크에서 Visual Studio Code를 설치한다. Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debuggi..

Programming/NodeJS 2024.06.04
반응형