본문 바로가기
728x90

분류 전체보기259

[자바스크립트] 배열 - 개념 배열 (array) 배열이란 여러개의 데이터를 담는 집합 자료형으로, 자바스크립트에서는 이름과 인덱스로 참조되는 정렬된 값의 집합을 배열이라 일컫는다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다. 자바스크립트에서 배열의 특징은 아래와 같다. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있다. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다. 자바스크립트에서 배열은 Array 객체로 다뤄진다. 배열의 생성 자바스크립트에선 배열을 생성하는 방식으로 배열 리터럴 방식과 Array객체를 통한 생성 두가지가 있다. 배열 리터럴 .. 2023. 10. 24.
[자바스크립트] 객체의 생성과 사용 객체 (Object) 자바스크립트는 객체(object) 기반의 언어이며, 자바스크립트를 이루고 있는 대부분이 객체이다. 그렇기 때문에 자바스크립트에서의 객체는 무엇이며, 어떻게 생성하고 사용하는 지는 매우 중요하다. 객체란, 키(key)와 값(value)으로 구성된 프로퍼티(Property, 속성)들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다. 또한, 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다. 이와 같이 객체는 데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드(method)로 구성된.. 2023. 10. 24.
[자바스크립트] Function - Closure 함수의 Scope 클로져(Closure)에 대해서 알아보기 전에 Scope에 대한 개념을 먼저 짚고 넘어가야 한다. scope란 범위라는 의미로 프로그래밍에서도 범위의 의미를 가지고 쓰인다. 구체적으로, 자바스크립트에서 스코프란 식별자 접근 규칙에 따른 유효 범위를 뜻한다. 여기서 식별자란 변수, 함수, 클래스 등이 있다. 즉, 스코프란 선언된 식별자가 영향을 끼칠 수 있는 범위라고 이해하면 된다!! (아래의 스코프 주요 규칙 참고!!) 자바스크립트에서는 변수의 스코프를 두가지 종류로 나눌 수 있다. 식별자가 중괄호 내에서만 영향을 끼치면, block scope라고 하고 함수 내에서만 영향을 끼치면 function scope라고 한다. 스코프의 주요 규칙 안쪽 스코프에서 바깥쪽 스코프로 접근할 수 있지만.. 2023. 10. 23.
[자바스크립트] Function - 개념 Function (함수) 프로그래밍에서 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 함수라고 한다. 이러한 함수를 이용하여 반복적으로 수행되는 코드 덩어리를 하나의 함수로서 정의하고 해당 작업이 필요할 때마다 호출하여 사용한다. 자바스크립트에서는 이러한 함수도 하나의 데이터 타입(typeof function() {} === function)으로서 다룬다. 그렇기 때문에 함수를 변수에 대입하거나, 객체의 프로퍼티의 value로서 집어 넣어주기도 하고, 매개변수로도 넘겨줄 수 있는 것이다. 함수의 정의 자바스크립트에서 함수의 정의는 function 키워드를 통해 선언하며, 구성요소로는 아래와 같다. 함수의 이름 소괄호 안에 쉼표로 구분되는 함수의 매개변수(parameter) 중괄호로 둘러싸인 실행.. 2023. 10. 23.
[자바스크립트] String - Method String Method 자바스크립트에서는 문자형 데이터를 객체화한 String 객체를 제공함으로써, String 타입의 변수 또한 String 객체에 내장되어 있는 속성 및 함수를 사용할 수 있다. 또한, 문자열 타입은 immutable하기 때문에 String 객체의 메소드들은 문자열의 원본을 변화시키지 않고, 새로운 string을 만들어 리턴한다. 문자열 찾기 메소드 문자열 안에서 원하는 문자열을 찾을 수 있는 메소드이다. 메소드마다 반환 값이 다르므로 상황에 맞춰서 유용하게 사용할 수 있다. indexOf() / lastIndexOf() 문자열에서 원하는 문자의 index를 반환하는 메소드이다. 처음으로 발견한 문자의 위치를 반환하고, 문자열의 오른쪽에서부터 찾고 싶을 경우, latIndexOf().. 2023. 10. 23.
[자바스크립트] String - 개념 String 문자열은 여러 유용한 메소드를 제공하기 때문에 프로그래밍 언어에서 정말 많이 사용하는 변수 타입이다. 문자열의 생성 방법은 아래와 같이 두가지가 있다. //방법1. new String() const str1 = new String('John'); //방법2. 문자열 리터럴 : '', "" const str2 = 'John'; // or "John" 이 때에, 주의할 점은 문자열 리터럴 방식으로 선언된 변수의 타입은 String이고, new 객체 생성자를 통해 선언된 변수의 타입은 Object라는 점이다. 그렇기 때문에 두 변수의 비교 연산을 수행하면 다음과 같은 결과가 나온다. const str1 = new String('John'); const str2 = 'John'; // or "Joh.. 2023. 10. 23.
[자바스크립트] Number Number 타입 자바스크립트의 primitive type 중 하나로, 정수와 실수 모두 Number 타입에 해당한다. 그렇기 때문에 정수이든, 실수이든 Number 타입의 변수는 항상 64bit floating point 데이터로 저장된다. Number 타입을 사용할 때의 주의할 점은 정밀도(precision)이다. 정수와 실수에 따른 정밀도는 다음과 같다. 정수 : 15자리까지는 정확도 유지 실수 : 소수점 이하 17자리 까지 정호가도 유지 실수간의 연산은 언제나 100% 정확하지 않다. 정밀도 문제에 대해서 정확히 인지하고 있어야 Number 타입의 데이터를 다룰 때 원하는 결과를 도출 할 수 있다. 자바스르립트에서 Number가 가질 수 있는 가장 큰 값은 1.8E308이다. 그 이상의 값은 Bi.. 2023. 10. 22.
[자바스크립트] 템플릿 리터럴 Template Literal 템플릿 리터럴은 표현식과 문자열의 조합을 편리하게 할 수 있게 하기 위해, 내장된 표현식을 허용하는 문자열 리터럴이다. ES6부터 추가된 기능으로 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어, 이러한 기능이 추가되었다. 템플릿 리터럴은 다음과 같이 불리기도 한다. Template literal Template Strings String Templates Back-Tics Syntax Template literal Syntax(Back-Tics) 템플릿 리터럴은 일반 문자열을 .. 2023. 10. 22.
[자바스크립트] 데이터 타입의 종류 자바스크립트의 데이터 타입 자바스크립트는 느슨한 타입(loosely typed)의 동적(dynamic)언어이다. 그렇기 때문에 자바스크립트의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당)이 가능하다. 그렇다하더라도, 자바스크립트의 타입에 대해서는 알고 있어야 한다. 동적 타입을 제공하지만, 값이 할당되는 순간에는 해당 변수의 타입이 정해지고, 이 때 어떠한 타입으로 정해지는지를 정확히 알고 있어야 원하는 결과대로 동작하는 코드를 작성할 수 있다. 자바스크립트에서는 여러가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본타입이라고 한다. 자바스크립트의 기본 타입은 원시 타입과 객체 타입으로 구분된다. 원시타입 원시타입으로는 다음과 같다. Type Descript.. 2023. 10. 21.
[자바스크립트/JavaScript] 연산자 연산자 연산자란 이름 그대로 연산을 수행하는 기호를 뜻한다. 대표적인 예시로, 사칙 연산을 수행하는 +, - , / , * 연산 기호가 바로 산술 연산자에 해당하는 연산자이다. 그리고 연산자를 통해 연산을 당하는 주체를 피연산자라고 하고, 피연산자의 개수에 따라 연산자는 아래와 같이 분류할 수 있다. 이항연산자(binary operator) : 피연산자 2개 단항연산자(unary operater) : 피연산자 1개 삼항연산자(ternary operater) : 피연산자 3개 자바스크립트에서 위의 예시에서의 산술 연산자 이외에도 대입, 부호, 증감, 관계(비교), 논리, 비트연산자가 존재한다. 대입연산자 대입 연산자는 이름 그대로 해당 값을 대입해주는 연산자이다. 연산 기호는 등호(=)를 사용하고 등호의 .. 2023. 10. 20.
[HTML] Tag - Image 이미지 태그란 이미지 태그는 HTML에서 이미지를 불러오기 위해 사용하는 태그이다. 이미지 태그를 이용하면 아래의 네이버의 웹페이지처럼 웹 페이지의 로고, 검색버튼 이미지, 메일 이미지 등을 구현할 수 있다. 의 속성 이미지 tag는 empty tag이기 때문에 여느 태그만 사용하여 생성한다. 이미지 태그는 여러 속성을 가지고 있다. src 속성 src 속성은 img 태그에서 필수로 입력해야 하는 속성이다. HTML에서 이미지는 모두 외부에서 가지고 오는 것이기 때문에 "어디"에서 가지고 오는지를 이미지 태그의 src 속성에 명시해주어야 한다. 이미지의 경로는 해당 파일이 저장되어 있는 로컬 저장소 일 수도 있고, 웹 주소일 수 도 있다. 주로 사용되는 이미지 포맷은 크게 3가지로 다음과 같다. .jpg.. 2023. 10. 20.
[HTML] Tag - DIV&SPAN DIV & SPAN div와 span 태그는 HTML에서 정말 많이 사용되는 중요한 태그이다. 두 태그의 공통점은 다른 요소들을 담는 용도(Container)로서 주로 사용된다는 것이다. 이를 통해 div와 span 태그를 이용하여 화면 레이아웃 상의 구역을 나누는 용도로 사용되는 것이다. HTML은 웹사이트의 구조를 설계하는 언어이기 때문에 이러한 div, span 태그가 얼마나 중요한지를 알 수 있다. 그렇다면 div와 span 태그의 차이점은 무엇일까? 두 태그의 결정적 차이점은 div는 sytile property의 display가 block이고 span은 inline이라는 것이다. 간단하게 말하면, div는 태그가 끝맺을 때, 줄바꿈을 한다는 것이고 span은 줄바꿈하지 않고 이어나간다. 또 다.. 2023. 10. 20.
728x90
반응형

티스토리툴바