TechLabs

Review Carousel 만들기 구현 방법 구현 완료 array O DOMContentLoaded X addEventListener O array.length O textContent X 앞에서 counter와 비슷한데, 좀 더 복잡한 구조로 이루어져 있다. 먼저, infoObject와 imgArray라는 데이터의 정보를 담은 객체와 배열을 만들어주었다. 그런 다음에 forEach + addEventListener를 이용하는데, forEach를 버튼과 info items에 두 개를 중복하여 돌려주면서 조건문을 이용하여 왼쪽 버튼인 경우에는 왼쪽으로 변경되게 만들고, 오른쪽 버튼인 경우에는 오른쪽으로 변경되게 만들면 된다. 조건은 버튼의 id를 기준으로 나눠주었다. 또한 나머지 값을 이용하여 범위를 벗..

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..

여러 번 시도한 끝에 (계속 fork했다가 취소했다가 없앴다가 난리도 아니였다.) 이 블로그를 보고 한번에 해결하였다. 그래서 링크를 남겨둔다. 천천히 따라하면 한 번에 성공 가능해보인다. HTML 삽입 미리보기할 수 없는 소스 완성된 결과물이다. pins에 잘 고정되어서 나오고 있다.

방법 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("두 수를 입..