본문 바로가기

Front-end

[Javascript] var와 let와 const 차이 그리고 var 변수 단점 자바스크립트의 변수 - var / let / const 자바스크립트는 ECMA에서 표준을 정한다. let : ECMA6에서 새로 생긴 문법 const : ECMA6에서 새로 생긴 문법 이며, 선언된 변수는 일정한 상수 값을 유지 var : 예전 버전부터 계속 존재하던 문법 scope: 해당 코드가 사용될수 있는 범위 일반적으로 블록{ } 사이에 선언된 코드는 밖으로 나올 수 없는데, 이것을 block scope 라고 한다. function askQuestion() { let answer = "나는 밖으로 못나가요."; var answer1 = "나는 밖으로도 나갈수 있어요"; } 함수 안에 선언된 let과 var를 밖에서 호출한다면 let은 에러를 반환하고, var은 호출이 가능하다. var은 같은 이름.. 더보기
[Jquery] Serialize와 SerializeArray의 개념 (Feat.Ajax) Serialize 와 SerializeArray 개념 에 대해서 알아보자. 먼저 Serialize에 대한 개념을 살펴보자. Serialize는 우리 나라 말 로 직렬화 이다. 직렬화는 컴퓨터 과학과 데이터 전송 분야에서 중요한 개념이다. 직렬화는 데이터 구조나 객체를 바이트 스트림 또는 다른 형태로 변환하는 프로세스를 말한다. 이 프로세스를 통해 데이터나 객체를 파일로 저장하거나 네트워크를 통해 전송하고, 나중에 복원할 수 있다. 데이터 저장 객체나 데이터 구조를 파일 또는 데이터베이스에 저장할 때 사용된다. 이후에 데이터를 읽어와 복원할 수 있습니다. 데이터 전송 객체를 네트워크를 통해 다른 시스템으로 전송할 때 사용된다. 객체를 직렬화하여 전송하면 원격 시스템에서 객체를 복원할 수 있다. 캐시 직렬화.. 더보기
[JavaScript] 연산자의 우선순위 자바스크립트 연산자의 우선 순위 자바스크립트의 연산자 우선수위에 대해서 알아보자. 하나의 연산식에 둘 이상의 연산자가 있는 경우 실행 순서는 연산자의 우선순위(precedence)에 따라 결정된다. 자바스크립트에는 기본적인 사칙연산 외에도 다양한 연산자가 있는데, 이 모든 연산자에는 우선순위가 매겨져 있다. 우선순위 숫자가 클수록 먼저 실행이 된다. 순위가 같으면 대부분은 왼쪽부터 시작해서 오른쪽으로 연산이 수행되는데, 간혹 = 이나 ** 같은 몇몇 연산은 반대로 하는 경우도 있으니 잘 알아두자 ! 🔸 우선순위연산자 유형기호 표 21 그룹 (...) ... 17 논리 NOT ! ... 17 typeof typeof ... 16 거듭제곱 ... ** ... 15 곱셈 ... * ... 15 나눗셈 ... .. 더보기
[JavaScript] 즉시 실행 함수 (IIFE) 자바스크립트 즉시실행함수 (IIFE) 자바스크립트의 즉시 실행 함수에 대해서 알아보자. function sayHi() { console.log('Hi!'); } sayHi(); 일반적으로는 이렇게 함수를 먼저 선언한 다음에 선언된 함수 이름 뒤에 소괄호를 붙여서 함수를 실행하는데 때로는 함수가 선언된 순간에 바로 실행을 할 수 있다. 즉시 실행 함수 (function () { console.log('Hi!'); })(); 함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식이다. 이렇게 하면 함수가 선언된 순간 바로 실행이 된다 ! 함수 선언과 동시에 즉시 실행되는 함수를 즉시 실행 함수(IIFE - Immediately Invoked Function Expr.. 더보기
[JavaScript] JavaScript vs ECMAScript 차이 JavaScript vs ECMAScript 자바스크립트와 ECMAScript 의 차이점이 궁금해서 정리해 보았다. 둘의 차이점에 대해서 알아보자. 첫 번째, JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준이다. ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만들어낸 '결과물' 이라고 생각하면 된다. 참고로, ECMAScript가 JavaScript화 하기 위해 등장하긴 했지만, ECMAScript는 JavaScript 뿐만아니라 모든 스크립트 언어(scripting languages)가 지켜야 하는 표준이다. 두 번째, JavaScript는 ECMAScript를 기반으로 .. 더보기
[JavaScirpt] DOM 트리 DOM 트리 요소 노드에 대한 이동 프로퍼티 프로퍼티 유형 결과 element.children 자식 요소 노드 element의 자식 요소 모음(HTMLCollection) element.firstElementChild 자식 요소 노드 element의 첫 번째 자식 요소 하나 element.lastElementChild 자식 요소 노드 element의 마지막 자식 요소 하나 element.parentElement 부모 요소 노드 element의 부모 요소 하나 element.previousElementSibling 형제 요소 노드 element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 element.nextElementSibling 형제 요소 노드 element의 다음(next) 혹.. 더보기
[Javasciprt] console.log 와 consle.dir console.log 와 consle.dir 대부분의 브라우저에 있는 개발자 도구는 console.log와 console.dir 메소드를 지원한다. 두 메소드 모두 파라미터로 전달받은 값을 콘솔에 출력하는 역할을 한다. 두 메소드의 차이점에 대해 알아보자 const str = 'Codeit'; const num = 123; const bool = true; const arr = [1, 2, 3]; const obj = { name: 'Codeit', email: 'codeit@codeit.kr', }; function func() { console.log('I love Codeit!'); } console.log('--- str ---'); console.log(str); console.dir(str);.. 더보기
[JavaScirpt] 자바스크립트 기초 - 변수 선언(var,let,const), 함수스코프, 호이스팅 자바스크립트 기초 상수(const) 란? 변하지 않는 고정된 값이다. const PI = 3.14; let으로 선언하면, 재할당이 가능하다. const로 선언하고, 재할당 하려고 하면 오류가 발생한다. (재할당 불가) 예를들면, 구글의 검색창에 항상 같은 값만 들어가는게 아니고, 사용하는 사용자에 따라 검색을 하고자 하는게 매 순간 바뀌기때문에 키워드를 변수로 선언하는게 맞다. 하지만 검색버튼을 눌러 정보를 검색하는 동작을 수행할 때 부터는, 중간에 해당 키워드값이 변할일이 없고, 변하면 안된다. 검색기능이 시작되는 시점부터는 키워드가 상수로 선언되어야 한다. 입력값에 따라 상대적으로 다양한 변수가 존재하지만, 코드가 동작하는 순간에는 결국 상수로 쓰이는 경우가 많다. 객체의 프로퍼티나, 배열의 요소들이.. 더보기

티스토리툴바