study/TIL

1. DOM DOM : Document Object Model. HTML 요소를 JavaScript Object 처럼 조작할수있는 모델이다. DOM을 사용해 HTML로 구성된 웹페이지를 동적으로 움직이게 할 수있다. 1) HTML에 JavaScript 적용하기 태그를 사용한다. 태그는 등장과 함께 실행된다. 웹 브라우저는 작성된 코드를 해석하다 요소를 만나게 될때 HTML 해석을 멈추고 요소를 먼저 실행한다. (참고)12/21 TIL 기록 (1) 를 안쪽에 삽입하는 경우 브라우저가 코드를 순서대로 읽다가 html요소를 읽기 전에 script 요소를 읽고 html 해석을 잠시 멈추게 된다. script 요소에는 html 요소를 콘솔로 출력하는 코드가 있지만 현재 html은 아직 해석되지 않은 상태이다. 따..

🚂 JavaScript 복습하기 - 아직 잘 이해하지 못했거나, 잘 몰랐다가 새로 알게된 부분들을 정리했다. 💡 암묵적 타입 변환(implicit coercion) 개발자의 의도와 상관없이 표현식을 평가하는 도중, 코드의 문맥을 고려한 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것. 숫자 타입의 피연산자가 문자열 타입의 연산자와 + 연산자와 함께 실행될때 +는 문자열 연산자로 동작함. 숫자 타입의 피연산자는 문자열 타입으로 암묵적 변환됨. 숫자 타입의 피연산자가 문자열 타입의 연산자와 +를 제외한 산술연산자(-, *, /, %)와 함께 실행될때 산술연산자는 문자열 타입의 피연산자를 숫자 타입으로 암묵적 변환함. 📂 암묵적 타입 변환의 예시 1. 문자열 타입으로 암묵적 타입변환 2. 숫자 타..

1. 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. => 지금은 간단하게 외부 함수의 변수에 접근할 수 있는 내부 함수 정도로 생각할것 1) 클로저 함수의 특징 (1) 함수를 리턴하는 함수 2번의 경우, 1번과는 달리 함수의 호출이 두번 발생한다. => 즉, plus2의 리턴 값은 함수 형태이다. 클로저 함수는 함수를 리턴한다. 이것이 클로저의 형태를 만든다. (2) 외부함수의 변수에 접근이 가능한 내부 함수 클로저는 리턴하는 함수에 의해 스코프가 구분된다. 클로저의 핵심은 스코프를 이용해 변수의 접근 범위를 닫는 것이다. 위의 예시 코드에서 a는 외부 함수이고, b는 내부함수이며 각각의 스코프는 분리되어 있다. 이미지에서 볼수있듯이 외부 함수는 내부 함수의 변수(이미지에서는 b)에 접근..

1. 원시 자료형 객체가 아니면서 메서드를 가지지 않는 데이터. 원시 자료형은 모두 데이터가 하나의 정보를 담고 있다. 데이터 보관함 한칸 안에 하나의 데이터를 넣을 수 있는 것이다. 1) 원시 자료형의 종류 String Number Bigint Boolean Undefined Symbol null 2) 원시 자료형의 특징 - 모든 원시 자료형은 하나의 데이터를 담고 있다. - 모든 원시 자료형의 값은 변경이 불가능하지만 변수에 다른 데이터를 할당할 수는 있다. - 원시 자료형의 값을 변수에 할당하면 변수에는 실제 값이 저장된다. - 원시 자료형이 할당될 때는 변수에 값(value) 자체가 담긴다. 📂 정리 let a = 10; let b = a; b = 100; // a의 값은? => 10 consol..

1. 객체 객체는 다양한 타입의 답을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 객체는 변경 가능한 값이다. const object = { name: 'harry', age: 20 } - 0개 이상의 프로퍼티(속성)으로 구성 - 프로퍼티는 키(key)와 값(value)로 구성되어있으며 객체의 상태를 나타내는 값 - 메서드는 함수가 객체의 프로퍼티 값이 되는 경우. 프로퍼티를 참조하고 조작할 수 있는 동작을 말함 1) 객체의 값에 접근하기 (1) Dot notation 객체.속성 형태로 사용. 정해진 속성의 이름이 있을때만 사용할 수 있고, 속성이 동적으로 변할때는 사용할 수 없다. (2) Bracket notation 객체[속성] 형태로 사용. 속성의 값이 동적으로 변할때에도 사용할수 있다. 주의..

1. 배열 배열은 여러개의 값을 순차적으로 나열한 자료구조를 뜻한다. 1) 요소와 인덱스 const arr = ['year', 'month', 'day']; - 요소(element) : 배열의 값. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. - 인덱스(index) : 요소가 배열에서 자신의 위치를 나타내는 0 이상의 정수. 즉 배열의 순서. 💡 console.table() console.table() 사용시 배열 요소와 인덱스 값을 표 형태로 한눈에 볼 수 있다. 2) 배열 요소에 접근하기 arr[0]; // 'year' arr[1]; // 'month' arr[2]; // 'day' 배열 요소에 접근할때는 대괄호 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다. 위 ..

하루 늦은 TIL 겸 일일 회고...! 전날 만들었던 계산기 목업에 자바스크립트를 추가해 실제 계산기처럼 동작하도록 만들었다. 앗 계산기 가능하니까 실제 계산기가 맞나 아무튼 이번에는 계산기를 구현한 코드 내용과 이해한 내용을 정리해보려고 한다. 📂 두가지 값만 가지고 연산하는 계산기 1. 첫번째 숫자 입력 if (action === "number") { firstOperend.textContent = buttonContent; } 클릭된 버튼이 숫자버튼이라면 첫번째 값에 입력한 버튼의 숫자값을 할당한다. 2. 두번째 숫자 입력 if (action === "number") { // 첫번째 숫자가 0이 아니라면(입력된 값이 있다면) 버튼을 클릭했을때 두번째 칸에 버튼에 적힌 숫자를 입력 if (firstO..

우선 오늘 만든 계산기 목업~!~!~! 왼쪽은 심플한 파스텔톤이고 오른쪽은 윈도우95 컨셉으로 css를 작성했다. 또 모든 레이아웃은 flex를 사용해서 구현했다! See the Pen calculator mockup by moondrop0816 (@moondrop0816) on CodePen. See the Pen Untitled by moondrop0816 (@moondrop0816) on CodePen. 모든 레이아웃을 flex로 구현하면서 어려웠던 점은 역시 크기를 맞추는 일었다. 맨 아래 0 버튼의 경우 기본 사이즈의 2배만큼의 크기를 차지해야하는데 flex-grow만 사용했을때는 뜻대로 되지 않았다. 그래서 큰 버튼의 경우 기본 사이즈를 위해 주었던 flex-basis를 auto로 변경하고 w..

1. 레이아웃 1) 와이어프레임 웹 또는 애플리케이션을 개발할때 레이아웃의 뼈대를 그리는 단계. 와이어로 설계된 모양을 의미하며 단순한 선, 도형으로 인터페이스를 시각적으로 묘사한 것이다. 단순하게 레이아웃과 제품의 구조를 보여주는 용도로 사용한다. 와이어프레임의 가장 큰 목적은 화면의 영역을 구분하는 것이다. => 각 영역에서 사용할 주요 태그를 메모하는 방식으로 와이어프레임을 작성하면 편하다! 2) 화면을 나누는 방법 (1) 수직분할 - 화면을 수직으로 구분하여 콘텐츠가 가로로 배치되도록 요소를 배치한다. (2) 수평분할 - 분할된 각각의 요소를 수평으로 구분하고 콘텐츠가 세로로 배치되도록 요소를 배치한다. 3) 레이아웃 리셋 HTML 문서가 가진 기본적인 스타일이 레이아웃을 잡는데 방해되지 않도록 ..

1. CSS 개요 CSS (Cascading Style Sheets)는 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일 시트 언어이다. 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. 1) CSS와 프론트엔드 개발 사용자 인터페이스(UI : User Interface)는 사용자가 컴퓨터와 상호작용하는 시스템이다. 사람과 사물 또는 시스템 사이에서 의사소통을 할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체를 뜻한다. 이전에는 사용자가 애플리케이션과 소통하기 위해 명령어 인터페이스(CLI :Command Line Interface)를 사용하였다. 원하는 기능을 이용하기 위해서는 컴퓨터 자판 등을 이용해 명령 문자열을 입력하여 체계를 조작..