ALL

[1달 1독] Clean Code(클린 코드)

#노마드코더 #북클럽 #노개북 꼭 끝까지 읽어야징..!

[TIL]2022-0105 (WED)

JavaScript Type conversion & implicit type coercion : 명시적 형 변환 & 묵시적 강제 형 변환 let n = 10 + "10"; // n = "1010" let n = "40" - 1 // n = 39 let n = "40" - "30" // n = 10 + : 피연산자 중 하나 이상이 문자열이면, 문자열로 연결한다. - : 문자열을 숫자열로 변환하여 계산한다. (*,/ 도 포함) implicit type coercion 으로 인해 버그가 발생하는 경우도 있으니, 내용을 알고있으면 해결에 도움이 될 수 있다. Truthy & Falsy values (Boolean type) : 잠재적 true 혹은 false values Falsy values : 0, ' ',..

[TIL]2021-1230 (THU)

오늘 한 일 my SQL : 데이터 베이스의 활용 table : 데이터 표, filed : 그 표를 채운 각각의 data show tables //tables 안에 들어있는 모든 table 확인 select * from 000 // 000 테이블 안의 * 전체 내용 select a from b //b 테이블 안의 a select a from b //where : 조건 where point >= 2000 //크기비교 where week in (2,3) //포함 : week이라는 필드내용 안에 2와 3이 포함 where week != 2,3 // 제외 where date between '11-11' and '12-11' // 범위 where email like '%daum.net' // 'daum.net'이..

[TIL]2021-1227 (MON)

오늘 한 일 노마드코더 html&css 클론코딩 챌린지 제출 (https://hyejj19.github.io/BongBongTalk/) Vanila JS로 제이쿼리의 fadeOut을 구현. setTimeOut으로 delay를 주었다. function fadeOut(){ el.style.opacity = 1; (function fade() { if ((el.style.opacity -= .1) < 0) { el.style.display = "none"; } else { setTimeout(fade, 40); } })(); } setTimeout(fadeOut,1000); 출처 : https://gist.github.com/chrisbuttery/cf34533cbb30c95ff155 css media que..

[TIL]2021-1223 (THU)

오늘 한 일 [JS] JS상에서 linear-gradient 만드는 방법​ document.body.style.background = linear-gradient(270deg, ${color1},${color2});​​ document.body.style.background 로 배경에 접근, 문자열 리터럴에 배열 내 랜덤컬러 1,2를 넣어 linear-gradient를 만들 수 있다.​ const color1 = colors[Math.floor(Math.random() * colors.length)​​ 배열 내에서 랜덤하게 요소 고르기 : 난수를 만들고, 범위는 배열의 길이만큼, 소수점 뒤는 버려서 숫자로 만들어줌. [알고리즘] : 선형탐색과 이진탐색 선형탐색 : 만약 배열이 있다면, 그 배열에 순서대로..

[TIL]2021-1222 (WED)

오늘 한 일 JS Date객체와 Math.floor를 이용해 d-day counter 만들기 연습 Date의 인수로 문자열을 전달하면 지정된 형태로 날짜와 시간을 반환한다. const xmasDay = new Date(`${new Date().getFullYear()}-12-25:00:00:00+0900`); 나머지 연산자 : x % y >> x를 y로 나누고 남은 몫의 나머지. 삼항 연산자 : `${days < 10 ? `0${days}` : days}d`; 조건이 참 혹은 거짓일 때 실행할 식. [데이터구조] : 해시테이블 해시란? 어떤 길이의 임의 데이터를 고정 길이의 데이터로 매핑하는 것. 해시테이블은 key = value의 형태. 키를 검색하면 value를 얻을 수 있어서, 시간복잡도가 O(1)..

[JS]2021-1115 자바스크립트 .createElement() & .appendChild - HTML 요소 추가하기

document.creatElement() document 객체의 메소드로, HTML 요소를 생성할 수 있다. const bgImage = document.createElement("img"); //img태그 생성 부모노드.appendChild() 특정 요소에 자식 요소를 추가할 수 있다. document.body.appendChild(bgImage); //body 내부에 bgImage를 추가 배열 내의 랜덤 이미지 화면에 출력하기 const images = [ "0.jpg", "1.jpg", "2.png" ]; const chosenImage = images[Math.floor(Math.random() * images.length)]; const bgImage = document.createElemen..

[JS]2021-1114 자바스크립트 Math - Random number 랜덤 숫자 생성 /반올림, 올림, 버림

nomadcoders VanilaJS #6.0~2 강의를 정리한 내용입니다. Math.random() 랜덤한 숫자를 만들 수 있는 함수. 0이상 1 미만의 난수(부동소수점)을 랜덤하게 만든다. See the Pen Untitled by hyejj19 (@hyejj19) on CodePen. Math.floor() 소수점 이하를 버림하는 메소드. 참고 : .ceil() 올림 / .round() 반올림. 소수점 이하를 버림으로써, 정수를 만들 수 있다. 난수의 범위를 생각해 Math.random * n을 하면, 원하는 범위의 정수 난수값을 얻을 수 있다. See the Pen random2 by hyejj19 (@hyejj19) on CodePen. 이를 배열에 적용해, 새로고침 시 배열 내의 랜덤한 내용이..

[JS]2021-1114 padStart() - 문자열 시작 채우기(문자열을 채워 원하는 길이로 만들기)/ String() - 숫자를 문자열로 바꾸기

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. padStart() "1".padStart(4,"0"); // "0001"을 출력 String에서만 사용 가능한 함수로, 특정 문자열을 원하는 길이만큼, 원하는 문자열로 채울 수 있다. 사용 방법은 padStart(원하는 길이, 채우고자 하는 문자열) 자매품으로 padEnd()도 있다. String(number) number를 string으로 변환할 수 있다. string(556); //"556" 을 출력 Date 객체의 현재시간들은 number이기 때문에 padStart() 적용을 위해서 string 으로 변환해야한다. 그리고 .padStart를 적용해 자릿수가 2 미만일 경우 앞에 "0"을 붙여 출력하도록 한다. const ..

[JS]2021-1114 Date - 자바스크립트로 현재 시간 불러오기/ setInterval(),setTimeout() - 타이머 함수

nomadcoders VanilaJS #5.0~3 강의를 정리한 내용입니다. new Date() new Date()를 호출하면, Date 객체를 불러온다. 이 함수를 인수 없이 호출하면 현재 날짜, 시간이 저장된 Date 객체를 반환한다. function getTime() { const date = new Date(); //new Date()는 Date 객체를 불러옴, 이 함수를 인수 없이 호출하면 현재 날짜 및 시간이 저장된 date 객체가 반환된다. clock.innerText =`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`; //Date 객체의 여러 메소드를 활용해, 현재 시간 값을 얻어올 수 있음. 이를 innerText로 화면에 ..