[30일 챌린지 Day-7] some,every,find,findIndex
·
개발/html, css, js
콘솔로 비교해보기 1. 기본 값 Psst: have a look at the JavaScript Console 💁 2. 결과 Psst: have a look at the JavaScript Console 💁 3. 리뷰 각 인터페이스 함수의 사용법을 숙지. 배열안에 ...으로 각요소추출, 없으면 무시하여 각요소를 새로운 배열에 담아줌
[30일 챌린지 Day-6] 검색, json 활용
·
개발/html, css, js
1. 기본값 Filter for a city or a state 2-1. 결과값 Filter for a city or a state 2-2 Filter for a city or a state 3. 리뷰 2-1 : fetch로 data 받아올때 ... 을 썼다. ... : 배열안에 요소가 있다면 요소만 추출하고 없다면 삭제한다. cities 에 정규표현식을 이용하여 정규표현식에 만족한다면 그 단어를 filter로 뽑아냄 numberWithCommas 안에 있는 정규식 : 3번째 숫자마다 , 를 입력함. 구글링 해보면 바로 나온다. displayMatches function에서 city와 state에 만족한다면 그 값에 클래스를 넣어주는 span을 HTML로 작성하여 넣어주고 그 값들을 li를 만들어 넣어준..
[30일 챌린지 Day-5] flex, classname 추가 활용
·
개발/html, css, js
1. 기본값 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 2. 결과 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 3. 리뷰 flex 를 통해 크기를 조절할수 있다. 5개의 panel에 flex 1을 준상태에서 클릭시 flex5로 바꿔준다면 상대적으로 커지게 된다. display : flex를 통해 가로로 배치했다. toggle을 통해 open 클래스가 있다면 클래스제거 없으면 클래스추가를 했다.
[30일 챌린지 Day-3] input값 적용하기
·
개발/html, css, js
1. 기본값 Update CSS Variables with JS Spacing: Blur: Base Color 2. 결과 Update CSS Variables with JS Spacing: Blur: Base Color 3. 리뷰 input과 change의 차이점 : input은 실시간으로 값을 받아들이지만 change는 마지막값 즉, 결과값만 받아들인다.
[30일 챌린지 Day-2] 시계 만들기
·
개발/html, css, js
기본값과 결과를 html로 띄어놓고 코딩해보세요 1. 기본값 2. 결과 3. 리뷰 처음 시침,분침,초침이 9시방향을 가리키고 있어서 12시방향으로 옮겨주기 위해 3시간, 15분,15초 씩 더해줬다. setInterval 로 1초마다 한번씩 값을 갱신하도록 작성했다. 초침은 60초에 360도를 움직이므로 1초에 6도 움직인다. 분침은 60분에 360도를 움직이므로 1분에 6도 움직인다. 여기에 60초에 1분이므로 60초에 6도움직이기 때문에 초/60 *6 을 추가한다. 시침은 12시간에 360도를 움직이므로 1시간 30도, 60분에 30도움직이고, 3600초에 30도 움직이므로 값을 추가한다.
[node.js] express, MySQL
·
개발/node.js
1. express Node.js를 사용해서 쉽게 서버 구성을 할 수 있게 만들어주는 클래스와 라이브러리 집합이다. express 설치 명령어 npm i express 설치 후 express 모듈 가져오기 const express = require("express"); 2. body-parser body-parser는 요청과 응답사이에서 공통적인 기능을 해주는 미들웨어다. 데이터를 body라는 객체 안에 담아서 요청 응답을 받을수 있게 해준다고 보면 된다. 설치 명령어 npm i body-parser 설치후 모듈 가져오기 const bodyParser = require("body-parser"); 3. ejs ejs는 node.js와 express에서 많이 사용하고 있는 템플릿 엔진이다. ejs는 우리가..