* 조건문의 기본작성법 if (조건){ // 코드블록 } 조건문은 if 라는 키워드를 사용하고 조건을 검사한 다음 조건이 참(true)이면 코드블록을 실행한다. let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', ''); if (year == 2015) alert( '정답입니다!' ); 해당 조건문은 사용자로부터 입력을 받아 year 변수에 저장한다. 조건문의 조건을 검사하여 year 변수값이 2015이면 경고창을 띄워준다. 해당 조건문은 코드블록이 한줄이므로 중괄호({})를 생략할 수 있다. if (year == 2015) { alert( "정답입니다!" ); alert( "아주 똑똑하시네요!" ); } 해당 조건문은 복수의 코드문이 들어가 있으며 경고창..

변수 (Variable) 프로그램 전체에 걸쳐서 변경하고 싶은 값 또는 변경 가능한 값이다. 프로그램에서 공통적으로 사용된 값 중에 변경될 가능성이 다분한 값을 변수로 선언하면 된다. 변수를 사용하는 이유 console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this site !') console.log('syleemomo has authorization to this si..

배열 쿼리 참조문서 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 내용을 활용하여 샘플 데이터에서 쿼리 ..