배열 쿼리 참조문서 1

* 웹의 기본 동작 방식 웹은 기본적으로 사용자 요청에 의해 시작된다. 사용자가 클릭과 같은 특정 이벤트(Event)를 발생시키면 해당 요청이 서버로 전송된다. 서버에서는 필요한 데이터를 데이터베이스에 요청하고 데이터베이스는 데이터를 서버에 전송한다. 마지막으로 서버는 사용자가 요청한 데이터를 클라이언트(브라우저)로 보낸다. * 과거의 웹 VS 현대의 웹 과거에는 사용자가 요청을 하면 서버는 HTML 문서 전체를 브라우저로 전송하고 브라우저는 HTML 문서를 해석해서 G화면에 렌더링했다. 그러나 현대에는 리액트 웹 프레임워크와 같은 SPA(Single Page App)이 주를 이룬다. SPA은 사용자 요청이 오면 초기에 HTML 문서를 한번만 전송하고 웹 화면의 변경이 필요하면 서버에서 데이터만 가져와서..

* 사진 Hover일때 마우스 포인터 두기 li:hover{ opacity: 0.7; transform: scale(1.02); cursor: pointer; } cursor: pointer 코드를 추가하면 마우스 Hover일때 손가락 모양이 생긴다. * 사진 클릭시 팝업창 띄우기 const li_collection = document.getElementsByTagName('li') Array.from(li_collection).forEach(li => { li.addEventListener('click', () => { alert('hello !') }) }); app.js 파일에 위와 같은 코드를 추가한다. 사진은 li 요소에 있으므로 모든 li 요소를 가져와서 반복문으로 순회하면서 각각의 요소에 c..

* 마우스 Hover li:hover{ opacity: 0.7; transform: scale(1.02); } style.css 파일 하단에 위 코드를 추가한다. 사진 위에 마우스가 위치하면 사진이 살짝 흐려지고 크기가 조금 커진다. * 음악 삽입하기 프로젝트 폴더에 듣고 싶은 음악을 추가한다. body 태그 바로 아래 위 태그를 추가한다. 해당 음악을 audio 태그로 가져와서 자동으로 플레이한다. 현재까지의 html 전체코드는 위와 같다.

* html 코드로 리스트 보여주기 body{background: white} console.log("hello world !") 이후 작업을 위해 위와 같이 style.css app.js 코드를 각각 변경한다. 사진 1 사진 2 사진 3 사진 4 사진 5 ul 태그는 쇼핑몰 의류 목록이나 넷플릭스 영화 목록과 같은 데이터 목록을 나열할때 많이 사용하는 태그다. ul은 unordered list의 약자로 순서가 없는 리스트라는 의미다. 한글문서나 PPT의 순서가 없는 목록과 같다. 사진 1 사진 2 사진 3 사진 4 사진 5 리스트를 추가한 현재까지의 코드는 위와 같다. 편집기에서 ctrl + s 키를 동시에 눌러 코드를 저장하면 브라우저 화면이 업데이트 되고 아래와 같은 사진 리스트가 표시된다. * 리..

* 비주얼 스튜디오 코드(vsc) 설치 비주얼 스튜디오 코드(vsc) 설치 가이드 비주얼 스튜디오 코드 설치하기 다운로드 사이트 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio C.. syleemomo.tistory.com * 프로젝트 루트 폴더 생성 윈도우 검색창에서 CMD를 검색하고 CMD 명령창을 오픈한다. 위와 같이 mkdir 명령어로 gallery라는 폴더를 생성한다. dir 명령으로 폴더가 제대로 생성되었는지 확인한다. 또..

* 원하는 레이아웃 설계하기 * 사진 리스트 중앙 정렬하기 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:..

csv 샘플 데이터 Sample CSV Data – SpatialKey Support Jump right in and try out SpatialKey using sample data! SpatialKey unlocks the full potential of time- and location-based information like nothing else out there. In minutes, you can upload a data file and create and share interactive time- and map-based a support.spatialkey.com 회사에서는 대량의 데이터를 쿼리할 일이 많다. 그래서 Mongo DB에서 배운 CRUD 내용을 활용하여 샘플 데이터에서 쿼리 ..

* 기능정의 회원가입로그인로그아웃사용자정보 변경사용자정보 삭제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..

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..