TechLabs

Counter Refactoring 구현 방법을 동일하게 이용하여 코드를 다시 구현하였다. 구현 방법 구현 여부 document.querySelectorAll O forEach O addEventListener O currentTarget O classList O textContent O 목차 1. querySelectAll와 forEach를 이용하여 각각에 이벤트 부여하기 2. textContent 3. addEventListener와 event 4. target vs currentTarget (this) 5. classList와 add 1. querySelectAll와 forEach를 이용하여 각각에 이벤트 부여하기 querySelectorAll을 이용하면 같은 클래스 이름을 가진 태그들을 모두 가져..

Counter 만들기 초보자를 위한 40가지 자바스크립트 프로젝트 결과물을 참고하여 Counter를 제작하였다.

Color Flipper 만들기 초보자를 위한 40가지 자바스크립트 프로젝트 결과물을 참고하여 Color Flipper를 제작하였다. 구현 방법 구현 여부 arrays O document.getElementById O document.querySelector O addEventListener O document.body.style.backgroundColor O Math.floor O Math.random O array.length O

9086번 문자열을 풀이하는데 문자열의 길이에 \r이 잡혀서 계속 계산이 되는 문제점을 발견하였다. 그래서 파이썬에서의 인덱싱과 비슷한 기능을 찾았다. substring이라는 기능이다. 문자열.substring(시작 인덱스, 마지막 인덱스) // 마지막 인덱스는 포함하지 않는다 처음에는 length와 push를 이용하여 빈 배열에 넣어주고, 그 배열을 출력하려고 했는데 \r 이라는 변수 때문에 어떤 경우에는 제대로 돌아가지 않았다. 이러한 로직을 이용하여 코드를 작성하였다. // 이해 완료... const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "/input.txt"; let input = fs ..

1. 함수 선언 후 실행하기 함수는 선언 후 반드시 실행해야 사용할 수 있다. 실행은 소괄호를 이용한다. 함수 : 기능 수행 또는 계산을 수행하는 코드 집합을 의미한다. 함수 사용 : 호출 방법, 함수 선언 종류 // 0. 함수 정의하고 실행하는 방법 // 함수 정의하기. // const output = function () { // console.log("함수를 실행했습니다."); // }; // 함수 실행하기. // 함수명() // output(); 2. input 값 가져오는 dateFormMaker 함수 만들기 원하는 날짜를 가져오는 동적인 값을 만들기 위하여 함수를 만들어준다. 여기서 document.querySelector를 이용하는데 document는 객체의 일부이다. // 1. dateFo..

목차 1. 배열 만들기. 2. 변수로 제작하기. 3. 데이터 받아올 때 trim 이용하기. 4. 구조 분해 할당 5. splice로 기존의 배열 변경하기. 6. reduce로 배열의 요소에 함수 적용하여 하나의 결과값 반환하기. 1. map(Number)로 배열 만들기 데이터가 띄어쓰기로 여러 개 있는 경우, map(Number)를 이용하여 배열로 만들 수 있다. 배열은 반복문에 유용하다. 2. 변수로 제작하기 뭔가 길어지는 느낌이 나면 변수에 담아서 이용하기. 그렇지 않으면 시간 초과 뜨는 경우가 생길 수도 있다. const fs = require("fs"); const filePath = process.platform === "linux" ? "/dev/stdin" : "/input.txt"; let..

목차 1. parseInt와 Number 비교하기. 2. node.js로 데이터 입력받기. 1. parseInt vs Number 비교하기 아래의 코드를 살펴보면 parseInt와 Number의 차이점을 알 수 있다. let a = "제 1회"; console.log(Number(a)); // NaN console.log(parseInt(a)); // NaN let b = "2023년"; console.log(Number(b)); // NaN console.log(parseInt(b)); // 2023 let c = "2023"; console.log(Number(c)); // 2023 console.log(parseInt(c)); // 2023 let d = "123.45678"; console.log..

방법 1. 외부 모듈 prompt-sync 이용하기 백준에서는 외부 모듈 사용이 불가능하기 때문에 돌아가지 않는다. 데이터를 입력받고 싶은 경우에 이용하기. Step 1. npm을 이용하여 prompt-sync 모듈 설치하기. npm install prompt-sync 설치를 하면 .json 파일이 2개가 생기는 것을 볼 수 있다. Step 2. prompt-sync 모듈을 불러와서 원하는 데이터 입력받기. // const prompt = require("prompt-sync")({ sigint: true }); // 모듈 불러와서 진행하는 것이기 때문에, 백준에서 돌아가지 않는다. const prompt = require("prompt-sync")(); let [A, B] = prompt("두 수를 입..

1. 나만의 다이어리 만들기2. 나만의 웹사이트 만들기기능구현 여부상품을 3 X 4 형태로 잘 배열하기.O마우스를 올렸을 때 살짝 검음 화면 위에 상품 정보를 부드럽게 변화를 주면서 보여주기.O해더 만들고 웹사이트 제목에 애니메이션 주기.O메뉴바 만들고, 마우스 올릴 때마다 변화를 부드럽게 주기.O웹사이트 가로 사이즈가 작아질 때 상품 정보를 사진 아래에 보여주기.O웹사이트 가로 사이즈가 작아질 때 메뉴바를 해더 밑에 붙여주기.O 3. 수료증 발급