AR삽질러

JavaScript - 함수표현식과 화살표함수 (7) 1. 함수표현식 - 함수 표현식은 함수 선언과 다르게 함수의 이름을 생략하고 변수에 익명함수를 할당하는 방식이다.// 1. 함수표현식function funcA() { console.log("funcA");}let varA = funcA;varA(); 2. 익명함수 - 이름이 없는 함수로 주로 함수 표현식에서 사용된다.let varB = function(){ console.log("funcB");}  3. 화살표 함수 (Arrow Function) - 화살표 함수는 ES6에서 도입된 간결한 함수 표현식으로 일반 함수표현식보다 짥은 문법을 제공한다.// 2. 화살표 함수let varC = (value) => value + 1;console.log(var..

JavaScript - 함수 (6) 함수 - 함수는 특정 작업을 수행하는 코드 블록으로 함수를 사용하면 코드의 재사용성을 높이고 가독성을 향상시킬 수 있다. 1. 함수 호출// 함수선언function greeting() { console.log("안녕하세요");}console.log("함수 호출 전");greeting();console.log("함수 호출 후");  2. 직사각형의 넓이를 구하는 함수 - 매개변수와 반환값function getArea(width, height) {// 매개변수 function hello() { // 중첩함수 console.log("함수호출"); } hello(); let area = width * height; return area; // 반환값}let a..

JavaScript - 반복문 (5) 반복문(Loop, Iteration) - 어떠한 동작을 반복해서 수행할 수 있도록 만들어주는 문법으로 조건이 참일때 코드를 반복적으로 실행한다. 1. for - 반복 횟수가 명확할 때 주로 사용된다.// 1. 반복문for (let idx = 1; idx = 5) { break; }} 2. while - 주어진 조건이 참인 동안 코드를 반복해서 실행한다. 조건이 거짓이 될경우 반복을 종료한다.// 2. whilelet i = 1;while (i let i = 1 : 초기화while(i i++ : 반복이 끝날 때마다 i를 1씩 증가 3. do while - 조건이 거짓이더라도 코드 블록은 최소 한번이상 실행된다.let j = 1;do { console.log(j..

JavaScript - 조건문 (4) 조건문 - 특정 조건을 만족했을 때 실행되는 코드를 작성하기 위한 문법으로 if, switch 조건문이 대표적이다. 1. if - if 조건문은 주어진 조건이 참일때 특정코드를 실행하며 else if, else 를 사용해 여러 조건을 처리할 수 있다.// 1. if 조건문let num = 1;if(num >= 10){ console.log("num은 10 이상입니다.");}else{ console.log("num은 10 이하입니다.");} // 1. if 조건문let num = 6;if(num >= 10){ console.log("num은 10 이상입니다.");}else if(num >= 5){ console.log("num은 5이상입니다.");..

JavaScript - 연산자 (3) 연산자(Operator)  - 프로그래밍에서 다양한 연산을 위한 기호, 키워드(+, -, * , /, %) 1. 대입연산자 - 변수에 값을 할당하는데 사용된다.// 1. 대입연산자let var1 = 1; 2. 산술연산자 - 숫자간의 산술 연산을 수행let num1 = 5 + 2;let num2 = 5 + 2;// * / % 는 + - 보다 우선순위가 높다.let num3 = 5 * 2;let num4 = 5 / 2;let num5 = 5 % 2;let num6 = 5 + 2 * 10;console.log(num6); 3. 복합대입연산자 - 연산과 할당을 동시에 수행// 3. 복합 대입 연산자let num7 = 10;num7 += 20;num7 -= 20;num7 *=..

JavaScript - 형변환 (2) 1. 형 변환(Type Casting)  - 어떤 값의 타입을 다른 타입으로 변경하는 과정으로 형변환은 묵지적 형변환과 명시적 형변환이 있다. 묵시적 형 변환(암묵적 형변환)  - 개발자가 직접 설정하지 않아도 자바스크립트 엔진이 형변환을 하는것// 1. 묵시적 형 변환// 자바스크립트 엔진이 형 변환을 하는것let num = 10;let str = "20";const result = num + str;console.log(result); 명시적 형 변환  - 개발자가 직접 함수 등을 이용해서 형 변환을 한다.// 2. 명시적 형 변환// 개발자가 내장함수 등을 사용해 직접 형 변환을 명시한다.let str1 = "10";let strNum = Number(str1)..

JavaScript - 자료형Type (1) 1. 원시 타입(Primitive Types) 숫자형(Number)  - 정수 및 실수 형태의 숫자를 포함한다.// 원시타입(Primitive Types)// 1. Number Typelet num1 = 30;let num2 = 3.5;let num3 = -20;console.log(num1 + num2);console.log(num1 - num2);console.log(num1 * num2);console.log(num1 / num2);console.log(num1 % num2);  문자형(String)  - 텍스트 데이터를 포함하며 '', "", ``으로 감싸서 표현한다.let name = "arang";let age = '29';// 템플릿 리터럴let ..

JavaScript - 변수와 상수 (0) 1. 변수 var, letlet 동일한 변수 이름은 다시 선언할 수 없다.// 1. 변수 letlet age = 29;console.log(age);age = 30;console.log(age); var 동일한 변수 이름을 다시 선언할 수 있다.// 2. 변수 varvar name = "Arang";console.log(name);var name = "AR";console.log(name);2. 상수 const  - 상수는 선언과 동시에 초기화를 해줘야한다.// 3. 상수const number = 3;number = 5; 3. 변수 네이밍 규칙 1. camelCase  - 변수명은 소문자로 시작하고 단어의 첫글자는 대문자로 사용한다.  - 의미 있는 변수명 사용..

CSS - Flexbox 1. Flexbox - flex-direction의 디폴트는 row - inline block의 문제점을 해결하기위해 flexbox flexbox사용규칙 1) 자식에게 어떤것도 명시하지 않고 부모엘리먼트에게 명시한다. flex-direction, justify-content, align-items를 적용하고 싶다면 먼저 부모를 display:flex로 만든다. 2) flex컨테이너는 주 축(main axis)수평 와 교차축(cross axis)수 Flex Container는 두개의 축을 가지고 있다. 주요 Flexbox의 속성 flex-direction 주 축(main axis)를 정의한다. row row-reverse column column-reverse justify-con..

CSS - Classes, inline Block 1. lnline - inline 요소는 높이와 너비를 가질 수 없다. - padding 요소는 사방에 가질 수 있다. 위 상황에서 위 아래 margin을 적용하고 싶다면 inline요소를 block로 수정해야한다. hello hello line요소 - span : inline요소로 텍스트를 묶기 위해 사용 2. Class hello hello hello hello hello hello Class - .으로 시작하고 클래스 이름이 뒤에온다. ex) .className .class1 - 선택자로 해당 클래스가 적용된 모든 HTML요소에 스타일 규칙을 적용할 수 있다. - HTML요소에 클래스를 적용하면 class속성을 사용할 수 있다. ex) - Class..