분류 전체보기 (87) 썸네일형 리스트형 [Visual Studio Code] 문자 자동 완성 문자를 입력하고 엔터를 했을 때, 입력된 문자로 시작된 클래스명, 사용했던 단어 등을 추천받는데 엔터를 치면 이게 자동으로 입력된다. 나는 이게 불편하여 설정을 smart로 변경했다. Preferences → Settings에서 Accept Suggestion On Enter의 설정을 변경하는데 설정에는 on, smart, off가 있다. on은 Enter로도 제시된 단어를 선택하여 사용할 수 있고, off는 tab으로만 제시된 단어를 선택하여 사용할 수 있다. [JavaScript30] Day 12 Key Sequence Detection wesbos라는 단어가 완성되면 이벤트가 실행된다. const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => { // console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); if(pressed.join('').includes(secretCode)) { console.log('DING DING!'); cornify_add(); } console.log(pressed); }); CSS Blending Mode (mix-blend-mode) mix-blend-mode SAMPLE 정의 요소의 내용이 배경과 혼합되는 방법을 지정 문법 mix-blend-mode: color; mix-blend-mode: color-burn; mix-blend-mode: color-dodge; mix-blend-mode: darken; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hard-light; mix-blend-mode: hue; mix-blend-mode: inherit; mix-blend-mode: initial; mix-blend-mode: lighten; mix-blend-mode: luminosity; mix-blend-mode: multiply; mix-blend.. [JavaScript30] Day 11 Custom Video Player 특별할 건 없지만, 쉽게 접할수 있는 동영상 컨트롤러 만들기 // Get our Elements const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButtons = player.querySelectorAll('[data-skip]'); cons.. [JavaScript30] Day 10 Hold Shift and Check Checkboxes Shift키를 누른 상태에서 아래의 다른 체크박스를 클릭하면 두 체크박스 사이의 모든 체크박스가 선택되는 기능입니다. 체크박스가 클릭 될때마다 실행되는 handleCheck라는 함수를 만듭니다. handleCheck에서는 Shift키를 누른채로 클릭을 했을 때, inBtween을 체크해서 true인 체크박스들 모두가 선택되도록 해준다. const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); //console.log(checkboxes); let lastChecked; function handleCheck(e) { // check if they had the shi.. [JavaScript30] Day 9 Dev Tools Domination 위와 같이 스크립트를 이용하여 왼쪽 텍스트를 클릭하면 오른쪽 텍스트처럼 변경될 때, 실제로 변경되는 내용을 확인하는 방법 스크립트가 실행되는 해당 소스에서 우클릭 → Break on → attribute modifications 버튼으로 스크립트 실행을 재개하거나 버튼으로 다음 단계의 스크립트를 확인할 수 있습니다. 위와 같이 보여주어 현재 실행되고 있는 스크립트를 알 수 있습니다. console // Regular console.log('hello'); // Interpolated console.log('hello I am a %s string', '💩') // 두번째것을 %s에 삽입 // %s 대신 ES6 문법 사용하는것도 가능 const poop = '💩' co.. [JavaScript30] Day 8 Fun with HTML5 Canvas const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.strokeStyle = '#bada55'; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; let isDrawing = false; let lastX = 0; let lastY = 0; function draw(e) { console.log(e); } canvas.addEventListener('mousemove', draw); 마우스를 캔버스 위에.. [JavaScript30] Day 7 Array Cardio Day 2 // const isAdult = people.some(function(person) { // const currentYear = (new Date()).getFullYear(); // if(currentYear - person.year >= 19) { // return true; // } // }); const isAdult = people.some(person => (new Date()).getFullYear() - person.year >= 19); console.log({isAdult}); const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19); consol.. [JavaScript30] Day 6 Type Ahead 자동 완성 기능 만들기 검색어의 일부를 입력했을 때 나올 수 있는 검색 결과를 미리 보여주는 기능이다. // 도시, 주, 인구 등의 자료가 들어있는 파일 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json'; const cities = []; //보통의 메서드를 사용하는 방식 fetch(endpoint, function() { console.log(data); }); fetch는 일반 함수를 사용하는 것과는 약간 다른 형식으로 사용한다. fetch는 promise를 return하기 때문에 .. [JavaScript30] Day 5 Flex Panel Gallery flex css 설정하기 .panels { display: flex; /* 자식요소가 필요로하는 만큼의 공간 */ } .panel { display: flex; flex: 1; justify-content: center; flex-direction: column; /* flex-direction : 주축 방향 설정 */ } /* Flex Children */ .panel > * { display: flex; flex: 1 0 auto; /* flex-grow flex-shrink flex-basis가 축약된 것 */ justify-content: center; /* justify-content : 주축을 기준으로 아이템을 어떻게 수평정렬할지 설정 */ align-item.. [JavaScript30] Day 4 Array Cardio Day 1 이번 강의에서는 할 수 있다고 생각되면 비디오를 중지하고 직접 시도해 보라는 얘기가 나와 할 수 있는 부분들을 해결했다. 아래는 내가 직접 해결해본 코드들이다. 4번은 못 풀었음. 6번은 문제 이해를 못했음. 8번은 해결은 했으나 검색해서 해결. // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const birth = inventors.filter( el => el.year >= 1500 && el.year < 1600 ? el : '' ); console.log(birth); // Array.prototype.map() // 2. Give.. [프로그래머스 JavaScript] Level1 직사각형 별찍기 - 정수 n과 m이 주어집니다. - *을 가로길이가 n, 세로 길이가 m인 모양으로 출력합니다. [초기 코드] 초키 코드를 확인해보면 date는 (n, m)이고 이것을 a = Number(n), b=Number(m)으로 해놨습니다. process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); console.log(a); // 5 console.log(b); // 3 }); 이제 한 줄에 n개의 *이 찍힐 수 있도록 repeat을 이용하고, 방금 전 생성한 한 줄을 m번 반복해줍니다. process.stdin.setEnc.. [JavaScript30] Day 3 CSS Variables :root { --base: #ffc600; --spcing: 10px; --blur: 10px; } img { padding: var(--spcing); background: var(--base); filter: blur(var(--blur)); } .hl { color: var(--base); } css 사용자 정의 속성 변수는 이름 앞에 --를 붙여 사용 var()를 사용하여 변수를 정의 querySelectorAll로 선택된 리스트들은 배열이 아닌 NodeList로 배열에서 사용하는 map, reduce 등의 일부 메서드는 사용할 수 없음 const inputs = document.querySelectorAll('.controls input'); function handl.. [JavaScript30] Day 2 JS and CSS Clock function setDate() { console.log('Hi'); } setInterval(setDate, 1000); // 1초마다 hi라는 콘솔이 찍히는지 확인 function setDate() { const now = new Date(); const seconds = now.getSeconds(); console.log(seconds); } setInterval(setDate, 1000); function setDate() { const now = new Date(); const seconds = now.getSeconds(); const secondsDegrees = ((seconds / 60) * 360) + 90; // 초침의 시작은 12부터라서 90도를 더.. [JavaScript30] Day 1 JavaScript Drum Kit window.addEventListener('keydown', function(e) { /* body */ }, capture?: bollean); window.addEventListener('keydown', function(e) { console.log(e); }); window.addEventListener('keydown', function(e) { console.log(e.keyCode); }); window.addEventListener('keydown', function(e) { const audio = document.querySelector('audio[data-key="65"]'); }); window.addEventListener('keydown',.. Chrome과 Edege의 height 차이 원래 디자인은 첫 번째 이미지입니다. 그런데 Level 2라는 곳에 마우스를 올리면 Level 2 상단이 양옆보다 1px이 줄어든 것을 볼 수 있습니다. 메뉴바 차체에는 70px이라는 정확한 높이를 준 상태입니다. 그 위쪽의 배너는 요소들과 padding으로만 높이가 만들어진 상태였습니다. 오류 해결방법으로는 메뉴바의 background-color는 투명색인 상태였는데, 이 부분의 background-color를 흰색으로 넣어주는 것도 있었습니다. 하지만 오류의 원인을 찾아보기 위해 살펴보니 이 오류의 문제점은 메뉴바 위쪽의 배너에 있었습니다. 이 부분에 정확한 px값을 입력하니 문제가 해결되었습니다. 전체 높이값을 입력하거나, 텍스트가 있는 박스의 높이를 지정하거나, 텍스트의 line-height를 정.. [프로그래머스 JavaScript] Level1 이상한 문자 만들기 - 한개 이상의 단어로 이루어진 문자열 s가 주어집니다. - 공백은 꼭 한칸이 아닐수도 있습니다. - 단어의 짝수번째 알파벳은 대문자, 홀수번째 알파벳은 소문자로 리턴합니다. - 짝수/홀수의 기준은 공백으로 나눠 진 단어 기준입니다. 문장을 단어 기준으로 나눠줍니다. function solution(s) { var answer = '' var arr = s.split(/\s(?=\w)/) return answer; } 저는 뒤에 단어를 가지고있는 공백을 기준으로 나눴습니다. 그럼 아래와 같이 arr이 만들어지게 됩니다. 이제 단어별로 각각의 홀수/짝수 인덱스를 구분하여 대문자/소문자로 바꿔줍니다. function solution(s) { var answer = '' var arr = s.split(/\s.. [프로그래머스 JavaScript] Level1 시저 암호 - 문자열 s와 거리 n이 주어집니다. - 공백은 그대로 공백 입니다. - s는 알파벳 소문자, 대문자, 공백입니다. - n은 1 이상, 25이하인 자연수입니다. 공백을 제외한 문자들을 변경 function solution(s, n) { s.replace(/[a-z]/gi/, function() {}) } 변경 될 문자는 원래 문자를 n이라는 숫자만큼 뒤에 위치한 문자 ('z'는 1만큼 밀면 'a') 문자의 코드를 charCodeAt()으로 확인 function solution(s, n) { s.replace(/[a-z]/ig, function(c) { var code = c.charCodeAt() var newCode = 0; newCode = code > 64 && code < 91 ? ((code .. [프로그래머스 JavaScript] Level1 문자열 내 마음대로 정렬하기 - 문자열로 구성된 리스트와, 정수 n이 주어집니다. - 각 문자열의 n번째 글자를 기준으로 문자열을 오름차순 정렬합니다. - 만약 n번째 글자가 같다면, 사전 순으로 문자열을 배치합니다. 문자열을 오름차순으로 정렬 function solution(strings, n) { strings.sort(function(a, b) { a - b }) } 문자열의 n번째 글자를 기준으로 오름차순 정렬 function solution(strings, n) { strings.sort(function(a, b) { a[n] - b[n] }) } 이때, n번째의 글자가 같다면, 사전 순으로 정렬 사전 순으로 정렬할 수 있는 메서드로는 localeCompare()이 있습니다. localeCompare()는 메서드는 배열의 .. [JavaScript] localeCompare() 기준 문자열과 참조 문자열의 정렬 순서를 숫자로 반환합니다. 앞은 -로 뒤는 +로 같을 경우 0을 반환하게 됩니다. // TEST 1 'a'.localeCompare('c'); // TEST 2 'check'.localeCompare('against'); // TEST 3 'a'.localeCompare('a'); // TEST 4 'a'.localeCompare('A'); // TEST 5 'b'.localeCompare('A'); TEST 1 'a'는 'c'보다 사전상으로 앞에 있기 때문에 -1을 반환합니다. TEST 2 'check'는 'against'보다 사전상으로 뒤쪽에 있기 때문에 1을 반환합니다. TEST 3 'a'와 'a'는 같이 위치에 정렬되기 때문에 0을 반환합니다. TEST 4 & T.. 이전 1 2 3 4 5 다음
