프로젝트
-
사진 갤러리 앱 2 - 플럭스박스(Flexbox)로 레이아웃(Layout) 하기프로젝트/사진 갤러리 앱 2021. 10. 6. 21:41
* 원하는 레이아웃 설계하기 * 사진 리스트 중앙 정렬하기 ul{ list-style: none; display: flex; justify-content: center; } style.css 파일에서 ul 선택자(selector)에 2~3번째 줄 코드를 추가합니다. 해당 코드는 flexbox를 이용해서 레이아웃을 하고, ul 태그 내부의 모든 리스트를 중앙 정렬합니다. flexbox는 기본적으로 리스트를 가로로 정렬하기 때문에 아래와 같이 보여집니다. * 사진 리스트 세로 중앙 정렬하기 flex-direction: column; align-items: center; 위 코드를 CSS ul 선택자 안에 추가한다. ul{ list-style: none; display: flex; flex-direction:..
-
할일목록(TODO) 앱 4 - API 설계 및 구현프로젝트/할일목록(TODO) 앱 2021. 10. 5. 20:23
* 기능정의 회원가입로그인로그아웃사용자정보 변경사용자정보 삭제todo 생성 (해당 사용자 기준)todo 목록조회 (해당 사용자 기준)todo 조회 (해당 사용자 기준)todo 변경 (해당 사용자 기준)todo 삭제 (해당 사용자 기준) * API 설계HTTP 메서드는 흔히 CRUD(Creat, Read, Update, Delete) 라고 하며, REST API 에서는 GET(데이터 조회), POST(데이터 생성), PUT(데이터 변경), DELETE(데이터 삭제) 를 기본적으로 수행한다. 아래와 같은 URL 주소를 Rest API 엔드포인트라고 한다. User 모델관련URLURL 설명HTTP 메서드/api/users/register회원가입POST/api/users/login로그인POST/api/users..
-
할일목록(TODO) 앱 3 - Mongoose 로 데이터 모델 설계 및 구현하기프로젝트/할일목록(TODO) 앱 2021. 10. 5. 19:25
https://mongoosejs.com/ Mongoose ODM v7.4.2Let's face it, writing MongoDB validation, casting and business logic boilerplate is a drag. That's why we wrote Mongoose. const mongoose = require('mongoose'); mongoose.connect('mongodb://127.0.0.1:27017/test'); const Cat = mongoose.model('Cat', { name:mongoosejs.com * 데이터 모델 설계 - Todo필드명설명데이터 타입비고author할일을 작성한 작성자ObjectId ref: 'User'title할일에 대한 제목Stri..
-
할일목록(TODO) 앱 1 - 서버 셋팅 및 Mongo DB 연동프로젝트/할일목록(TODO) 앱 2021. 10. 5. 10:54
* Node.js 설치 설치 사이트 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS버전 Windows Installer (.msi) 64bit 다운로드 * 프로젝트 구조 - 서버 todo - server - index.js - src - package.json - .gitignore - .git node_modules .gitignore 파일 * github 셋팅 윈도우 git 설치 가이드 [Git (1)] 윈도우 10 Git 설치 하기 [Git (1)] 윈도우 10 Git 설치 하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ Window 10 Git 설치 방법 ] ..