KEEP CODING

목표 마우스를 따라 내려오는 메뉴 만들기 내가 만든 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 const ul = document.querySelector('.cool'); const lists = document.querySelectorAll('.cool > li'); const triggers = Array.from(lists).map(list => list.querySelector('a')); const background = document.querySelector(".dropdownBackground") function dropDown() { const dropdown = thi..

목표 event의 특징에 대해 알아본다(bubbling, capturing) addEventListener의 변수에 대해 알아본다(capture, once) 특별한 목표가 없어서 코드를 따라서 작성했다. 1 2 3 4 5 6 7 8 const divs = document.querySelectorAll('div'); function logText(e) { console.log(this.classList.value); e.stopPropagation(); // stop bubbling } divs.forEach(div => div.addEventListener('click', logText, {capture: false})); cs div들에 addEventListener를 통해 클릭하면 console에 c..

목표 sticky nav 만들기(position: sticky를 사용하지 않음) nav가 맨 위에 있을 때, 왼쪽의 로고가 나타나도록 한다. 내가 만든 코드 1 2 3 4 5 6 7 8 9 10 11 12 const nav = document.querySelector('nav'); const logo = document.querySelector('.logo'); function setStickyNav(e) { nav.style.position = "sticky"; const navTopCoord = nav.getBoundingClientRect().top; if (navTopCoord = topOfNav) { document.body.classList.add('fixed-nav'); document.bo..

목표 SpeechSynthesis를 사용해 입력한 문장을 읽어주는 기능을 구현한다. 음성의 종류, 속도, 높이를 조절할 수 있도록 한다. 새롭게 알게된 것들 SpeechSynthesisUtterance utterance = 발화 무엇을 말할 것인지를 의미함 / 6가지 속성을 가진다. lang 언어 pitch 소리의 높이 rate 속도 text 읽을 내용 voice 음성의 종류 volume 소리의 크기 developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance SpeechSynthesis web speech API를 컨트롤 할 수 있는 인터페이스. 장치에서 사용가능한 합성 음성에 대한 정보를 검색하고, 음성을 일시중지 및 기타 명령 수행하는데 사용..

목표 link위에 마우스가 올라갔을 때, highlight가 마우스를 따라다니도록 한다. 사이트의 툴팁 메뉴ink위에 마우스가 올라갔을 때, highlight가 마우스를 따라다니도록 한다. 코드를 작성하기 전에 1 2 3 4 5 6 7 8 9 10 11 12 .highlight { transition: all 0.2s; border-bottom: 2px solid white; position: absolute; top: 0; background: white; left: 0; z-index: -1; border-radius: 20px; display: block; box-shadow: 0 0 10px rgba(0,0,0,0.2); } Colored by Color Scripter cs highlight 클..

데이터 모델링의 순서 1. 업무파악 하려고 하는 일을 의뢰인과 개발자가 잘 협력해서 알아내는 과정. 원하는 기능이 무엇인가? 산출물 : 요구사항 분석서 2. 개념적 데이터 모델링 하고자 하는 일의 개념들과 그 개념들 사이의 관계를 밝힌다. 산출물 : ER 다이어그램(ERD) 3. 논리적 데이터 모델링 관계형 데이터 베이스에 맞는 표로 개념들을 전환한다. 산출물 : 관계형 데이터 모델 4. 물리적 데이터 모델링 어떤 데이터베이스 제품을 사용할지 선택 데이터베이스 제품에 최적화된 코드를 작성, 실제 표를 만든다 산출물 : 표를 생성할 수 있는 SQL 코드 업무파악 의뢰인과 개발자 사이에 오해를 줄이고 서로 원하는 것을 동기화 하기 위해서는 많은 대화가 필요하다. 말로만 의견을 나누는 것 보다 UI를 같이 그..

실제 장치의 geolocation 정보를 가져와 화면에 방향과 속도를 나타낸다 Geolocation : 경도, 위도, 방향(북쪽에서 몇도?), 속도 의 정보를 가지고 있다. Chrome 에서 경도, 위도는 바꿀 수 있지만 방향과 속도는 바꿀 수 없다. iOS simulator를 사용해 코딩 결과를 확인할 수 있다. navigator.geolocation.getPosition(); 현재 위치를 알려준다 navigator.geolocation.watchPosition(); 장치의 위치가 바뀔 때 마다 자동으로 호출되어 위치를 알려줌 출처 : developer.mozilla.org/ko/docs/Web/API/Geolocation/watchPosition getPosition()도 위의 watchPositio..

참고할 사이트 https://sql-joins.leopard.in.ua/ join의 형태를 그림으로 나타낸 사이트 Join을 하기 전에... table은 한 가지 주제만 가지고 있어야 한다 -> 중복이 없는 것을 목표로 table을 처음부터 잘 설계해둬야 나중에 고생하지 않는다. 위의 topic table은 중복되는 자료가 있다. 아래처럼 세 테이블로 나눠서 저장하면 수정이 편해지고, 용량도 덜 차지할 수 있다. 하지만 보기가 불편해진다. 이 세 테이블을 위의 큰 테이블처럼 한번에 보기 위해서는 JOIN이라는 기능을 사용하면 된다. JOIN은 어떤 조인인지(LEFT JOIN, RIGHT JOIN...) 명시해주고, ON뒤에는 두 자료를 연결할 때 기준이 되는 key들을 적어주면 된다. LEFT JOIN ..

Javascript만을 이용해서 음성인식 기능을 구현해본다. 새로운 문장이 아래로 추가된다. 컴퓨터에 마이크가 연결되어 있지 않아서 영상을 보면서 코딩을 따라해봤다. 1 2 3 4 5 6 7 8 window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; // instance 생성 const recognition = new SpeechRecognition(); // true이면 음절을 연속적으로 인식, false면 한 음절만 기록함 recognition.interimResults = true; recognition.start(); Colored by Color Scripter cs SpeechRecognitio..

오늘 만들 site에 필요한 기능 site에 webcam을 통해 찍는 영상을 가져온다 영상을 사진으로 찍는다 사진을 다운로드 한다 filter를 적용한다(redEffect, rgbSplit, greenScreen) 사용한 기능들 npm canvas canvas를 다뤄보지 않아서 영상을 보면서 코딩을 따라해봤다. 구현 순서대로 코드들을 정리해본다. 코드를 작성하기 전에 실시간으로 webcam -> video로 보여주기 위해 서버를 구동해야 한다. node.js를 다운로드 후 폴더에서 git BASH를 실행, npm start 라는 명령어를 통해 node server.js를 실행한다. index.html 1 2 3 4 5 cs script.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15..