전체 글 68

Reduce, map() 을 이용해 코딩테스트 풀기

1. 문제 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두 배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. let numbers = [1, 2, 3, 4, 5] 2. 풀이방식 내가 이 문제를 보고 들었던 풀이방식은 'for문을 돌려서 두 배씩 곱하면 되겠다' 라고 생각이 들었다. function solution1(numbers) { var answer = []; for (let i = 0; i < numbers.length; i++) { let x = numbers[i] * 2; answer.push(x) } return answer; } 3. 해설 다 풀고 제출 후 다른 사람들의 풀이를 보니 배울 점이 많았다. 2가지 방법이 있었는데, r..

개발일지 2023.10.24

2023.10.23. TIL JavaScript 3주차 (2)

실행 컨텍스트 실행할 코드의 환경 정보를 모아놓은 객체 1. 배경지식 (1) 콜스택이란? Stack : Last in, first out (LIFO) Queue : First in, first out (FIFO) (2) 함수 정의방식 A. 함수 선언문 function a () { /* ... */ } a(); // 실행 ok B. 익명 함수 표현식 var b = function () { /* ... */ } b(); // 실행 ok C. 기명 함수 표현식 var c = function d () { /* ... */ } c(); // 실행 ok d(); // 에러! (3) 함수 vs 메서드 독립성을 기준으로 차이가 납니다. a. 함수명(); b. 객체.메서드명(); 구분 기준 : [] or . (4) AS..

개발일지 2023.10.23

2023.10.20. TIL JavaScript 3주차 (1) 데이터 타입

1. 데이터 타입 (Data type)의 종류 // 1. 데이터 타입(Data type) // (1) 기본형 (Primitive type) // a. Number // b. String // c. Boolean // d. null // e. undefined // f. Symbol // (2) 참조형 (Reference type) // A. 객체 (Object) // a. Array // b. Function // c. Date // d. RegExp // e. Map, WeakMap // f. Set, WeakSet 기본형과 참조형을 나누는 기준? 1. 값의 저장방식 기본형 : 주소값을 복제 참조형 : 주소값 묶음의 주소값을 복제 2. 불변성 여부 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 ..

개발일지 2023.10.20

CSS 그리드(grid) 양쪽 여백 남기고 중앙정렬하는 법

body { text-align: center; } .box { display: inline-block; width: 85%; /* 이 값으로 여백 크기 조절 */ } .wrap { display: grid; 그리드로 양쪽 마진값을 주는 방법도 있지만, 전체를 묶어서 폭을 조절할 수도 있다. 생각보다 방법은 너무 간단한데, 먼저 부모 요소에 text-align: center; 를 주고 자식에게 display: inline-block을 넣어주면 가운데 정렬이 된다. 이 상태에서 width값을 조절해주면 양 옆 여백값을 표현할 수 있다. 그리고 그 밑에 그리드를 쓰고싶은대로 쓰면 된다.

개발일지 2023.10.19

addEventListener

기본 문법 addEventListener("이벤트종류", 함수) 이벤트 종류 구분 종류 설명 1 mouseover 마우스 커서가 진입하는 순간 2 mouseout 마우스 커서가 나가는 순간 3 mousedown 클릭한 순간 4 mouseup 마우스 버튼을 떼는 순간 5 mousemove 마우스 커서가 움직이는 순간 6 keypress 키를 누르는 순간, 누르고 있는 동안 7 keydown 키를 눌렀을 때 8 keyup 키룰 눌렀다가 떼는 순간 9 focus 포커스되었을 때 10 blur 포커스에서 벗어났을 때 11 click 클릭 후 손을 떼면 발생 12 resize 브라우저 창 크기 조절할 때 발생 13 load 로드가 완료되었을 때 발생 14 unload 다른 페이지 이동이나 탭을 닫을 때 발생 15..

JavaScript 2023.10.13

2023.10.13. TIL JavaScript 2주차

A. ES6 1. 구조분해할당 (1) 배열의 경우 let arr = ["value1", "value2"]; let [a, b] = arr; console.log(a, b); 값을 할당해줄 수 있다. (2) 객체인 경우 1번 예시 let {name, age} = { name: "abc", age: 30, }; console.log(name); console.log(age); 각 순서에 맞게 요소를 할당한다. 리스트가 초과되면 이후 데이터는 undefined로 표기된다. 2번 예시 let user = { name: "abc", age: 30, }; let {name: newName, age: newAge} = user; console.log(newName); console.log(newAge); name이라..

개발일지 2023.10.13

2023.10.12. TIL JavaScript 1주차

0. 기본 // : 주석 (메모 기능으로 사용) control + / : 선택 영역 전체 주석처리 터미널에서 node (파일명).js 로 실행 1. 변수의 5가지 주요 개념 변수 이름(myVar) : 저장된 값의 고유 이름 변수 값("Hello World") : 저장된 값 변수 선언(var, let, const) : 변수를 사용하기 위해 컴퓨터에 알리는 행위 변수 할당 : 변수에 값을 저장하는 행위 변수 참조 : 변수에 할당된 값을 읽어오는 것 var myVar = "Hello World" 변수 선언: var let const 똑같은 변수명으로 다시 선언 O X X 재할당 O O X 2. 데이터타입1 RUN 할 때 데이터 타입이 결정된다. 객체는 중괄호로 배열은 대괄호로 3. 형 변환 (1) + 연산자는..

개발일지 2023.10.12