오지이 오지이

# for-in for-in문은 데이터 타입 중 배열뿐만 아니라 Object에도 사용할 수 있는 반복문입니다. Object는 데이터를 저장할 때 키(key)를 사용하여 저장하고, 키를 이용해서 읽을 수 있습니다. for-in문은 Object 내에 정의된 키 값의 수만큼 코드 블록을 실행합니다. for (const key in object) { // 실행할 코드 블록 } 예를 들어 다음과 같이 사람의 정보를 담는 Object가 있습니다. Object 내에 선언된 키는 fname, lname, age가 있습니다. 이때 for-in문을 사용하면 반복문이 실행되면서 fname, lname, age를 key 변수에 할당하게 되고, 코드 블록 내의 person 객체에 key를 전달하여 저장된 데이터를 가져올 수 있..

반복문은 조건을 만족하는 동안 코드 블록을 반복적으로 수행합니다. 자바스크립트에서는 for-loop, for-in, for-of, while 같은 반복문이 있는데, 본 포스팅에서는 for-loop부터 살펴보도록 하겠습니다. let brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"]; 반복문을 사용하지 않고 brans 배열에 담긴 브랜드명을 콘솔 창에 모두 출력하려면 아래와 같이 배열의 처음 인덱스부터 마지막 인덱스까지 코드를 작성해야 합니다. console.log(brands[0]); // 애플 console.log(brands[1]); // 구글 console.log(brands[2]); // 페이스북 console.log(brands[3]); // 아마존 console.l..

프로그래밍 언어에는 비교, 논리, 그리고 문자열에 대한 연산이 존재합니다. # 할당 연산자 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당하는 것을 말합니다. 기본적인 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 등호(=)를 이용해서 할당하는 것입니다. let y = 1; // y에 1을 할당 let x = y; // x에 y를 할당. x는 y 값인 1이 됨 x = x + y; // x에 x + y를 할당. x = 1, y = 1 이므로 x = 2가 됨 x = x - y; // x에 x - y를 할당. x = 2, y = 1이므로 x = 1가 됨 x = 3; // x에 3을 할당 y = 2; // y에 2를 할당 x = x * y; // x에 x * y를 할당. x = 3, y = 2..

자바스크립트는 다음과 같은 6가지 기본 자료형 데이터 타입이 있습니다. String(문자열) Number(숫자) Boolean(참/거짓) Undefined Null Symbol # String 자바스크립트에서 String(문자열)을 쌍따옴표(" ") 혹은 홑따옴표(' ')를 사용해 변수에 할당할 수 있습니다. let name1 = "John Doe"; // 쌍따옴표를 사용해서 문자열 데이터를 저장 let name2 = 'John Doe'; // 홑따옴표를 사용해서 문자열 데이터를 저장 문자열 데이터 안에 쌍따옴표를 사용하려면, 문자열을 홑따옴표를 이용해서 할당해야 합니다. 문자열 데이터 안에 홑따옴표를 사용하려면, 문자열을 쌍따옴표를 이용해서 할당해야 합니다. let singleQuote = "He is..

자바스크립트에서는 데이터 타입에 상관없이 변수를 저장할 때 var 선언자와 let 선언자를 사용할 수 있습니다. 이중 실무에서는 오류를 최소화하기 위해서 주로 let 선언자를 사용합니다. 하지만 이미 개발된 많은 자바스크립트 프로그램이 var 선언자로 되어 있기 때문에 var 선언자에 대해서도 제대로 이해해야 합니다. # var 선언자 아래 코드는 var 선언자를 사용해서 x, y, z를 선언했습니다. var x = 5; // 변수 x에 5를 저장 var y = 6; // 변수 y에 6을 저장 var z = x + y; // 변수 z에 변수 x와 변수 y를 더한 값을 저장 var로 변수를 선언하면, 같은 자바스크립트 코드 안에서 동일한 변수명을 사용하는 것이 가능합니다. var x = 5; // 변수명 ..

한국의 경우 날짜를 표기할 때 년도-월-일 순으로 표기하지만. 미국의 경우는 월-일-년도, 유럽의 경우는 일-월-년도 순으로 표기를 합니다. 글로벌 사용자를 대상으로 하는 애플리케이션을 구축할 때는 어느 지역에서 접속한 사용자인지에 따라 날짜 포맷을 다르게 제공해야 합니다. 아래는 현재 날짜를 지정한 날짜 포맷으로 반환하는 함수입니다. function getCurrentDate(format) { let d = new Date(); let year = d.getFullYear(); // 년도 let month = d.getMonth() + 1; // 월 month = month.toString().padStart(2, 0); // 월이 10보다 작을 때는 앞에 0을 추가 let day = d.getDate..

날짜를 입력하는 경우 input type="date"를 이용할 수 있지만, 일반적으로 input type="date"의 경우 실무에서 요구하는 수준을 만족시키지 못하기 때문에 오픈소스로 구현된 라이브러리를 사용하는 경우가 많습니다. 직접 datepicker를 구현해 보도록 하겠습니다. 달력을 만들 때 주의해야 할 것은 선택한 년도가 윤년인지를 확인하는 것입니다. 윤년인 경우는 2월이 29일까지 있기 때문입니다. 보통 4년마다 윤년이라고 생각할 수 있는데, 4로 나누어 떨어진다고 모두 윤년은 아닙니다. 윤년인지 알기 위해서는 다음 조건을 확인해야 합니다. 4로 나누어 떨어지는 해는 윤년입니다. 4로 나누어 떨어지지만 100으로 나누어 떨어지면 윤년이 아닌 평년입니다. 4, 100, 400 모두로 나누어 떨..

# 리플로우(Reflow) 사용자가 웹 페이지에 처음 접속하면, 렌더링 과정을 거쳐서 화면에 모든 요소가 그려지게 됩니다. 이후에 사용자는 다양한 액션을 수행하게 되고, 여기서 발생하는 이벤트로 인해서 새로운 HTML 요소가 추가되거나, 기존 요소의 스타일이 바뀌거나 하는 변경이 일어나게 됩니다. 이런 변경을 통해 영향을 받게 되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 됩니다. 이러한 과정을 리플로우(Reflow)라고 합니다. 리플로우가 일어나는 대표적인 속성들로는 다음이 있습니다. position width height margin padding border border-width font-size font-weight line-height text-align overf..