전체 글 198

[모던 자바스크립트 deep div] 12장 함수 ⭐

함수 프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 함수 f(x,y) = x+ y를 자바스크립트의 함수로 표현한 것 //f(x,y) = x+ y function add(x, y) { return x + y; } //(2, 5) = 7 add(2, 5); //7 함수 일련의 과정을 문으로 구현하고 코드 블록을 감싸서 하나의 실행 단위로 정의한 것 프로그래밍 언어의 함수도 입력을 받아서 출력을 내보낸다. 함수 내부로 입력을 받는 변수 → 매개변수(parameter) 입력 → 인수(argument) 출력 → 반환값(return value) 함수는 값이며, 여러 개 존재 가능! 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용 함수는 함수 정의(function definiton)을 통해 생성 함수 ..

[모던 자바 스크립트 deep dive] 11장 원시 값과 객체의 비교

원시 값과 객체의 비교 자바스크립트에서 제공하는 7가지 데이터 타입 숫자 문자열 불리언 null undefined 심벌 객체 타입 원시 타입과 객체 타입으로 구분 가능 데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유는? 원시 타입의 값, 즉 원시 값은 변경 불가능한 값 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 벼수(확보된 메모리 공간)에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하려면 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라고 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의..

[모던 자바스크립트 deep dive] 10장 객체 리터럴

객체 자바스크립트는 객체(object)기반의 프로그래밍 언어 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조 원시 타입의 값, 즉 원시 값은 변경한 불가능한 값이지만 객체 타입의 값, 즉 객체는 변경 가능한 값 객체는 0개 이상의 프로퍼티로 구성된 집합 프로퍼티는 키와값으로 구성 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수 일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 객체: 프로퍼티랑 메서드로 구성된 집합체 프로퍼티: 객체의 상태를 나타내는 값(d..

[모던 자바스크립트 deep dive] 9장 타입 변환과 단축 평가

타입 변환이란?명시적 타입(타입 캐스팅) 개발자가 의도적으로 값의 타입을 변환하는 것var x = 10; //명시적 타입 변환 //숫자를 문자열로 타입 캐스팅함 var str = x.toString(); console.log(typeof str, str); // string 10 //x 변수의 값이 변경된 것은 아니다. console.log(typeof x , ); // number 10 암묵적 타입 변환(타입 강제 변환) 개발자와 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것 var x = 10; //암묵적 타입 변환 //문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다. var str = x + ' ' ; consol..

[30 Days of HTML CSS] Day 01 Codedamn Nav Bar

종강 이후로 다시 하려고 codedamn 30 days of html css 챌린지를 들어갔더니 챌린지 Day16밖에 안보인다..뭔가 변해있다. 그래서 다시 재가입을 해도 Day16 밖에 없지만 그냥 하려고 한다. Codedamn Learn stat_minus_1 Practice stat_minus_1 Company stat_minus_1 Pricing Login Get started * { margin: 0; padding: 0; box-sizing: border-box; } @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;600;&display=swap"); /* #18181b - NavBar Background Col..

30Days of HTML CSS 2023.12.26

[30 Days of HTML CSS] Day 08 | Grid Template Rows and Columns

1 2 3 4 5 6 7 8 9 이 코드를 작성하면서 실수했던 점이 있다. class에는 .을 작성해야 했는데 #을 입력해 grid의 배경색이 안나타났다. 순간 아무리 찾아도 틀린게 없길래 #으로 작성했던 것이다. class는 . 을 작성해야한다. (헷갈릴것도 아닌데 ㅎㅎ..) gird 속성을 까먹다 보니 앞서 했던 예제들에 비해 시간이 좀 걸리긴 했다. 다시 정리해야겠다. https://codedamn.com/challenge/30-days-of-html-css 30 Days of HTML CSS - Codedamn Level up your coding skills with a daily coding challenge. Compete and share your progress every day and ..

30Days of HTML CSS 2023.11.24

[모던 자바스크립트 Deep Dive] 08장 제어문

제어문 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용 위에서 아래 방향으로 순차적으로 실행 제어문 사용하면 코드의 실행 흐름을 인위적으로 제어 가능 제어문은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점 있다. 가독성이 좋지 않으면 오류 발생하는 원인 ⭐ for문은 매우 중요하므로 확실히 이해하기⭐ 블록문 블록문은 0개 이상의 문으로 중괄호로 묶은 것으로, 코드 블록또는 블록이라고 부르기도 한다. 하나의 실행 단위로 취급 단독으로 사용할 수 있으나 일반적으로 제어문이나 함수를 정의할 대 사용하는 것 블록문이 사용되는 예제 문의 끝에는 세미콜론을 붙이는 것이 일반적 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. /..

[30Days of HTML CSS] Day 06 | Text-Overflow Property Lab

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsum velit natus maiores eum, incidunt libero. Porro, harum. Corrupti at porro, deleniti eveniet ipsa, quasi recusandae velit exercitationem assumenda asperiores perspiciatis! /* Add your styles here */ #container { width: 300px; } #text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } white-space 속성은 요소가 공백을 처리하는 법을 나..

30Days of HTML CSS 2023.11.22

[모던 자바스크립트 Deep Dive] 7장 연산자

연산자 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 지수 연산 등을 수행해 하나의 값을 만든다. 연산의 대상을 피연산자라고 한다. 피연산자는 값으로 평가될 수 있는 표현식 피연산자와 연산자의 조합으로 이루어진 연산자 표현식도 값으로 평가될 수 있는 표현식 // 산술 연산자 5 * 4 // 20 // 문자열 연결 연산자 'My name is' + 'Lee' // 'My name is Lee' // 할당 연산자 color = 'red' // red //비교 연산자 3 > 5 // false //논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연..

728x90