본문 바로가기

FE26

[CSS] FlexBox FlexBox # flexbox란 기존의 웹페이지는 float, position 같은 속성으로 레이아웃을 구성하였다. 그러나 웹페이지의 레이아웃이 복잡해짐에 따라 레이아웃을 좀 더 간단하게 표현할 방법이 필요했고, 이에 CSS3에서 flexbox가 추가되었다. flexbox를 사용할 경우 레이아웃을 좀 더 유연하게 배치할 수 있다. # 사용법 및 특징 1. 부모 요소에 display: flex; item1 item2 item3 .container { display: flex; } 부모 요소(컨테이너)에 display: flex;를 CSS로 넣어주면 자식 요소(아이템)들은 가로 방향으로 배치된다. 아이템들은 자신의 내용물의 width 만큼 가로 길이를 차지하고, height는 컨테이너의 높이만큼 늘어난다... 2022. 10. 29.
[JavaScript] 메모리와 값의 복사 메모리와 값의 복사 # 원시 값과 객체가 메모리에 저장되는 방식 자바스크립트의 데이터 타입은 크게 원시 값과 객체로 구분할 수 있다. 원시 값은 메모리에 저장될 때 원시 값의 실제 값이 저장되고, 객체는 메모리에 저장될 때 객체의 참조 값(= 메모리의 주소)이 저장된다. 1. 원시 값이 메모리에 저장되는 과정 let age; age = 20; age = 21; age라는 변수에 원시 값인 숫자를 할당하는 과정이다. age는 let으로 선언되고 나서 가장 처음으로 undefined가 할당된다. 그리고 20이라는 값이 할당되면, 새로운 메모리 공간에 20이라는 저장되고, age는 참조하던 메모리 공간 주소를 변경한다. 즉, 원래의 메모리 공간의 값이 바뀌는 것이 아니라, 20이라는 새로운 메모리 공간이 생기.. 2022. 10. 27.
[JavaScript] 구조분해할당 구조분해할당 # 구조분해할당 객체의 속성 또는 배열의 값을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트의 표현식이다. 객체와 배열에서 사용할 수 있다. 1. 객체 구조분해할당 객체의 속성을 변수로 사용하기 위해서는 다음과 같이 코드를 적어야 한다. const user = { id: 123, name: "kim", age: 20, }; const id = user.id; const name = user.name; const age = user.age; console.log(id, name, age); // 123 "kim" 20 구조분해할당을 이용하면 간단해진다. const user = { id: 123, name: "kim", age: 20, }; const { id, name, age } = .. 2022. 10. 26.
[JavaScript] scope와 var, let, const scope와 var, const, let 1. 스코프(scope) : 유효범위 변수가 선언되고 나면 그 변수를 사용할 수 있는 범위가 정해져있다. 예를 들어, 함수 내부에서 선언된 변수는 함수 내부에서만 사용할 수 있고 가장 바깥에서 실행된 변수는 어디서든 사용할 수 있다. 이렇게 변수를 참조할 수 있는 유효한 범위를 스코프라고 한다. 1.1 전역 스코프 const text = "hello"; console.log(text); // hello 코드의 가장 바깥, 즉 전역에서 선언한 변수는 어디서든 참조할 수 있다. 1.2 함수 스코프 const text = "hello"; function add(){ const a = 0; const b = 1; return a + b; }; console.log(a);.. 2022. 10. 25.
[JavaScript] callback 함수 callback 함수 # 일급 객체 자바스크립트에서 변수의 값이 될 수 있는 것을 일급 객체라고 한다. const num = 1; // 숫자 1은 일급 객체이다. const plus = function (x, y) { return x + y; }; // 함수 plus는 일급 객체이다. 숫자는 변수의 값이 될 수 있으므로 숫자는 일급 객체이다. 함수는 변수의 값이 될 수 있으므로 함수는 일급 객체이다. 자바스크립트는 함수를 일급 객체로 지원하는 언어이다. # callback 함수 함수는 일급 객체이다. 즉, 함수는 변수의 값이 될 수 있다. 함수는 변수를 입력값으로 받는다. 즉, 함수는 또 다른 함수의 입력값이 될 수 있다. A함수가 B함수의 입력값으로 사용되었다면, A함수는 callback 함수로 동작한.. 2022. 10. 24.
[JavaScript] 데이터 타입과 타입 변환 데이터 타입과 타입 변환 # 데이터 타입 구분 데이터 타입 설명 원시 타입 숫자 숫자 문자열 문자열 boolean true / false undefined 변수가 선언되었을 때 암묵적으로 할당되는 값 null 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 symbol ES6에서 추가된 타입 객체 타입 객체, 함수, 배열 등 1. 숫자 자바스크립트에는 하나의 숫자 타입만 존재한다. 모든 수를 실수로 처리한다. console.log(1 === 1.0); // true 1과 1.0은 같은 숫자로 처리한다. 정수로 표시되는 숫자라도 사실은 실수로 처리하기 때문이다. console.log(10 / 0); // Infinity console.log(- 10 / 0); // -Infinity console.lo.. 2022. 10. 23.

티스토리툴바