함수의 정의함수는 다음과 같은 구조로 정의된다.function functionName(parameter1, parameter2, ...) { // 함수 본문 return result; // 선택적}function 키워드로 시작한다.functionName 자리에는 함수의 이름이 들어간다.괄호 () 안에는 매개변수(파라미터)를 정의할 수 있다.중괄호 {} 안에 함수의 본문 코드를 작성한다.return 문은 필수는 아니고, 함수의 결과값을 반환한다.함수 호출정의된 함수는 아래처럼 호출할 수 있다.functionName(argument1, argument2, ...);함수 이름 뒤에 괄호를 붙여 호출한다.괄호 안에 인수(어규먼트)를 전달할 수 있다.매개변수와 인수매개변수(Parameters): 함수 정의 시..

컴포넌트는 HTML, CSS, JavaScript 로직을 감싸는 단위이다. 복잡한 UI를 관리하기 쉽도록 작은 컴포넌트들로 분리함으로써 UI의 다른 위치에서도 재사용할 수 있게 된다.컴포넌트를 사용하는 이유컴포넌트는 재사용 가능한 Building Blocks이다.컴포넌트가 없다면 방대하고 복잡한 HTML파일이 빠르게ㅔ 축적되어 작업 처리가 어려워진다.비슷한 코드는 함께 저장된다.

개요객체는 여러 데이터 조각을 구조화하여 저장할 수 있게 한다. 이 때, 데이터의 순서는 중요하지 않으며, 키-값 쌍으로 데이터를 저장한다. 이러한 키-값 쌍은 프로퍼티라고 불린다.프로퍼티는 키(key)와 값(value)으로 구성되며, 키를 사용해 데이터를 읽거나 수정할 수 있다.객체 생성하기프로퍼티가 없는 빈 객체는 다음과 같이 생성한다.let object = {};프로퍼티를 갖는 객체는 다음과 같이 key: value쌍을 콤마로 구분하여 생성한다. 이 때 key를 '나 "로 묶지 않음을 유의한다.const person = { firstName : "길동", lastName : "홍" };객체에서 만드는 모든 키는 내부적으로 모두 문자열로 변환된다.프로퍼티에 접근하기객체를 생성한 뒤에는 점 표기법 또는..

다른 프로그래밍 언어와 마찬가지로 자바스크립트에도 Array가 존재한다. 배열은 데이터를 그룹으로 묶는 방법이다. 이 때 배열은 원시 타입이 아니고 객체 타입이다.배열이란?배열은 값의 순서 있는 집합이다!배열 생성let array = [];let colors = ['red','orange', 'yellow'];let colors = [true,'hello', 1];자바스크립트의 배열의 경우, 여러 타입의 데이터들을 하나의 배열에 저장할 수 있다.배열의 인덱스Array 객체는 문자열처럼 인덱스를 사용해 배열의 각 요소에 접근할 수 있다. 이 때 인덱스의 범위는 0 ~ 배열 크기 - 1이다.let colors = ['red','orange', 'yellow'];/* read */console.log(colo..

1.10) 반복문반복문은 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법이다.기본 형태기본 형태는 이처럼 생겼다.for (초기식; 조건식; 증감식) { // 실행문}초기식: 반복문 내에서만 사용할 수 있는 변수(couter 변수)를 초기화하기 위해 사용하는 식이다.조건식: 반복을 계속할지 판단하는 기준을 설정하는 식이다. 조건식이 true일 경우 실행문이 실행되며, false가 되면 반복문이 종료된다. 일반적으로 변수의 값이 특정 범위를 만족하는지 확인하는 조건이 들어간다.증감식: 한 번의 반복이 종료될 때마다 counter 변수를 업데이트(증가/감소)하기 위해 사용된다.예제for (let i = 0; i 특수 키워드break: 조건식이 true인 경우에도 강제로 종료하고 싶다면 break를 ..

비교 연산자프로그래밍에서 코드는 입력된 값에 따라 의사 결정을 내리고, 작업을 수행해야 한다. 이러한 의사 결정을 가능하게 하는 게 조건문이다. 조건문에서 사용되는 비교 연산자와 등호 연산자를 공부해보자.부등호 연산자비교 연산자는 비교 연산자 양 옆의 두 값(피연산자)을 비교하여 true 또는 false를 반환한다.> : 크다(greater than): 작다(less than)>= : 크거나 같다(greater than or equal to): 작거나 같다(less than or equal to)예제1 > 2 // false2 문자열 비교이 때 피연산자에는 숫자뿐만 아니라 문자열도 들어갈 수 있다. 문자열이 들어가는 경우, 문자의Unicode 값을 기준으로 판단한다.'a' a와 b는 Unicode 값으로..

Javascript의 원시타입에는 Null과 Undefined도 포함된다. 두 단어 모두 '아무것도 없다' 혹은 '문제가 있다'라는 부정적인 의미를 가진 것 같지만, 사용 목적과 의미는 명확히 구분된다.Nullnull은 어떤 값이 의도적으로 비어있음을 표현할 때 사용하며 다음과 같은 특징을 갖는다.객체로 취급: null의 자료형을 확인하면 typeof null === "object"로 출력된다. 이는 JavaScript의 오래된 설계 상의 버그로, null은 실제로 객체는 아니다.Falsy값: 불리언 연산에서는 false으로 취급되는 falsy값이다.의도적 사용: 특정 변수가 아무 객체도 가리키고 있지 않음을 명시적으로 표현하고자 할 때 사용한다.let value = null; // '값이 없다'는 것을..

요소의 color나 shape을 사용자와의 상호작용을 통해 변경하도록 할 수 있다.trainsiton: 속성 5s;주로 호버와 함께 쓰인다.

문자열 다루기 - MDN문자열 제대로 다루기 -MDN문자열의 개요자바스크립트에는 문자열이라는 원시 타입이 존재한다. 문자열에는 단어, 문장등을 저장할 수 있다.문자열의 선언 방법문자열을 작성할 때에는 따옴표('), 쌍따옴표("),백틱(`)으로 문자열을 반드시 묶어줘야 한다. 이 때 따옴표는 문자열의 시작과 끝에 사용하며, 반드시 쌍을 이뤄야 하고, 같은 문자여야 한다.잘못된 예시const badString1 = This is a test;const badString2 = 'This is a test; // "종료되지 않은 문자열 리터럴" 에러가 발생함const badString3 = This is a test';const badString4 = 'This is a test";따옴표로 묶이지 않은 텍스트는..

참고CSS 프레임워크최신 'CSS 프레임워크'왜 공부해야 하는지, 각 프레임워크에 어떤 특징이 있는지 알고 공부하면 좋을 것 같아서 작성해둔다... 앞으로 프레임워크 하나씩 공부해나가면서 추가해볼 예정.CSS 프레임워크란?프론트엔드 개발자들은 CSS를 사용해 다양한 디자인을 구현하지만, 규모가 큰 애플리케이션에서는 반복 작업이 많아지기 때문에 DRY 원칙(Do not Repeat YourSelf) 을 지키기 어렵다. 이러한 비효율성을 줄이고 일관성 있는 디자인을 위해 많은 개발자가 CSS 프레임워크를 활용한다.CSS 프레임 워크의 장점개발 시간 단축: CSS 프레임워크를 사용하면 모든 CSS 스타일을 개발자가 작성하지 않아도 되므로 빠르게 작업을 시작할 수 있다.일관적인 모양 제공: CSS 프레임워크는 ..

HTML로 테이블 기본 구조 만들기테이블의 기본 요소테이블은 행과 열로 구성된 구조화된 데이터 집합이다. 테이블을 사용하여 다양한 데이터를 한눈에 보기 쉽게 정리하고, 관련된 정보를 빠르게 찾을 수 있다. 테이블은 표형식의 데이터에 사용해야 하며, 웹 페이지 레이아웃을 목적으로 사용하는 것은 좋지 않다!: 테이블의 전체 구조태그는 표를 만들어주는 HTML 태그이다. 기본적으로 표를 만들기 위해서는 가장 바깥에 태그를 작성하고 그 안에 tr, td, th 태그를 넣어서 만들어야 한다.태그비고테이블을 만드는 태그테이블의 헤더부분 셀테이블의 행을 만드는 태그테이블의 열을 만드는 태그 : 테이블 데이터 셀td는 테이블 데이터 셀 또는 테이블 데이터를 줄인 말로 테이블 안의 가장 작은 컨테이너이다.: 행(row..