JS

JS

JS 절대경로 설정법

js 절대경로 설정법 먼저 최상단에 jsconfig.json 파일을 생성한다. 내부에 아래와 같은 코드를 입력한다. { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 이렇게 jsconfig.json을 설정했을 경우에는 로컬 서버를 한 번 껐다가 다시 켜야 적용이 된다. 모든 경로가 src 폴더를 기준으로 적용되기 때문에 경로 생략이 가능하다. import Greeting from "components/01"; // 경로의 맨 앞에 './'을 생략할 수 있다. 이런 설정 외에도 많은 간편한 설정으로 코드를 간결하고 쉽게 작성할 수 있게 되므로 잘 활용하도록 해야한다. 더보기 출처 및 참고 1. [React] 파일 절대 경로 설정 (jscon..

JS/클론 코딩

배열 안의 개수 만큼 랜덤 숫자 만들기: Math.random

Math.random Math.random은 0~1 사이의 랜덤한 숫자를 제공한다. 0~10까지의 숫자는 Math.random에 10을 곱해주면 된다. Math.random() * 10 // 하지만 뒤에 소수점 자리 숫자까지 모두 나온다. 그러므로 0~10까지 중 정수 숫자만 얻기 위해서는 Math.floor로 소수점 뒤의 자리 숫자는 모두 제거해야한다. Math.floor(Math.random() * 10) // 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 중 하나 이를 응용하여 배열 안에서 랜덤하게 요소를 가져오려면 배열의 길이를 곱해주면 되는 것이다. const example = [0, 1, 2, 3, 4] Math.floor(Math.random() * example.length) ..

JS/클론 코딩

시계 숫자 두 개로 만들기

padStart padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환한다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다. function getClock() { const date = new Date(); let hours = String(date.getHours()).padStart(2, "0"); let minutes = String(date.getMinutes()).padStart(2, "0"); let seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`; } 더보기 출처 및 참고자료 1. 노마드코..

JS/클론 코딩

form의 장점과 단점, 그리고 주의할 점(preventDefault)

form의 기능 html에서 태그의 기본 브라우저 기능은 submit이다. form 태그 아래에 input과 버튼이 있고, input 안에 값을 입력한 뒤에 엔터를 누르면 자동으로 submit이 가능하다. 그러므로 form 태그를 사용할 경우에는 따로 버튼의 event를 만들지 않고 form 자체의 submit 이벤트를 사용하는 것을 권장한다. 장점 단점 따로 로직을 만들지 않고 쉽게 유효성 검사를 할 수 있다. 기본적으로 submit을 인식하면 웹페이지가 새로고침 되므로 많은 랜더링을 발생시킬 수 있다. (preventDefault 필요) 브라우저에서 기본으로 수행하는 동작 제어하기(preventDefault) 브라우저에서 기본으로 수행하는 동작을 제어하기 위해서는 preventDefault를 사용해야..

JS/알고리즘(코테)

프로그래머스 코딩테스트 LV.0 - 왼쪽 오른쪽

왼쪽 오른쪽 https://school.programmers.co.kr/learn/courses/30/lessons/181890# 나의 풀이 function solution(str_list) { let lIdx = str_list.indexOf('l') let rIdx = str_list.indexOf('r') let subL = str_list.slice(0, lIdx) let subR = str_list.slice(rIdx+1) if(!str_list.includes('l') && !str_list.includes('r')){ return [] } else if(!str_list.includes('l') && str_list.includes('r')){ return subR } else if(str_..

JS/알고리즘(코테)

프로그래머스 코딩테스트 LV.0 - 외계어 사전

외계어 사전 https://school.programmers.co.kr/learn/courses/30/lessons/120869 나의 풀이 function solution(spell, dic) { return dic.filter(a => spell.every(b => a.includes(b))).length ? 1 : 2; } 모든 spell의 요소들이 dic 배열 안에 포함되는지 확인하고, 포함되는 것은 배열의 길이가 생기고, 포함이 되지 않으면 길이가 0이므로 삼항 연산자로 반환하였다. 다른 사람의 풀이 function solution(spell, dic) { return dic.some(s => spell.sort().toString() == [...s].sort().toString()) ? 1 :..

주디_JUDI
'JS' 카테고리의 글 목록 (3 Page)