# JavaScript

dhgg321

자바스크립트를 사용하면 가끔씩 코드가 내가 생각했던 흐름대로 흐르지 않고 뒤죽박죽으로 실행되는 경우가 있다. 이는 자바스크립트의 이벤트 루프라는 개념때문이다. 이벤트 루프를 이해하지 못하는 것은 자바스크립트를 다루기 힘들정도로 중요한 개념이며 이벤트 루프에 대해 살펴보자. 자바스크립트는 싱글 스레드 자바스크립트는 단일(싱글) 스레드 언어이다. 이 말은 한 번에 하나의 작업만 처리할 수 있다는 뜻이다. 자바스크립트를 이용하다보면 여러가지 이벤트와 동시에 처리해아하는 경우가 많다. 동시성 문제를 해결하기 위해 자바스크립트는 이벤트 루프와 함께 비동기 프로그래밍 모델을 사용한다. 자바스크립트 내부 구조 ![](https://velog.velcdn.com/images/dhgg321/pos

dbswl330

자바스크립트에서 변수, 함수를 선언할 때, 해당 변수 또는 함수가 아무데서나 유효한 것이 아니다. 어떻게, 어디에 선언되었는지에 따라 유효한 범위가 있는데 이를 Scope 라고 한다. Scope 식별자 접근 규칙에 따른 유효 범위이다. 식별자에(변수,함수,클래스)에 접근할 수 있는 범위가 있다. 범위는 블록 또는 함수에 의해 나뉘어진다. (Block Scope, Function Scioe) 즉 스코프란 변수 또는 함수가 유효한 범위를 의미한다. Scope의 종류 Global (전역) Scope: 코드의 모든 범위에서 사용 가능 전역스코프를 제외한 모든 스코프는 지역 스코프이다. Local (지역) Scope: Function (함수) Scope: 해당 함수 안에서만 사용 가능 화살표 함수는 블록 스코프 Block (블록) Scope: 특정 블록(중괄

dhgg321

프로토타입(Prototpye) 자바스크립트에서 생성자 객체는 모두 prototype라는 객체가 기본적으로 내장되어 있다. Person이라는 생성자 객체를 만들고 prototype을 출력해보면 생성자 객체는 기본적으로 빈 프로토타입 객체를 내장하고 있는것을 확인할 수 있다. 프로토타입 상속 Person 생성자로 만들어진 ji와

wlfjd0627

Array 자료형 여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형 순서가 존재해서 인덱싱 가능 수정/자료 추가 Object 자료형 여러가지 자료를 한곳에 저장하고 싶을 때 사용하는 자료형 순서가 없어서 인덱싱 불가능 수정/ 자료 추가 연습 > car2 값들을 상품명, 가격 란에 각각 자바스크립트로 넣기

wecaners

==와 ===의 차이 는 동등 연산자라고 하고 비교하는 두 값이 같기하면 하면 타입이 달라도 같다고 판단을 한다. 는 일치 연산자라고 하며 비교하는 두 값의 값과, 데이터 타입까지 모두 동일 해야 같다고 판단 한다. 이런식으로 데이터 타입이 달라도 동등 연산자는 true를 출력하게 되고, 일치 연산자는 false를 출력하게 된다. 0 값은 falsy한 값이니까 첫번째 콘솔로그는 true를 출력하고, 일치 연산자에서 데이터 타입이 다른것끼리 비교하니까 0이 falsy한 값이어도 null과 undefined를 비교하면 어떻게 될까? 첫번째 케이스는 자바스크립트의 자동유형변화 때문에 true가 출력되고, 두번째 케이스는 일치 연산자는 데이터 타입까지 같아야 하기 때문에 false가

olosia

지난 시간에는 Change Case 라이브러리를 이용한 문자열 Case 변환에 대해 간단히 살펴보고, 코드 한땀 서비스에 대해 간단히 소개해드렸습니다. 오늘은 기본적인 사용법에 대해 간단히 정리해보려고 합니다. 기본적인 출발은 DB 에서 테이블 및 컬럼, 코멘트 정보를 쿼리한 결과를 기반으로, 각 언어별 코드 템플릿을 작성해주는 기능들을 제공하는것을 목표로 하였습니다. 스프링이 존재하지 않던 아주 아주 옛~ 날 Servlet 에서 JSP 로 넘어가던 그 시절에는 JDBC 를 통해 DB 에서 테이블 컬럼 정보를 조회해서, 동적으로 CRUD 기능의 화면을 구현해주는 솔루션을 개발하던 그런 회사들도 있었더랬죠. 그런 개념으로 저도 테이블명을 입력하면, 컬럼정보를 조회해서 JSP 코드 탬플릿 파일을 생성해주는 제너레이터를 작성해서 공통으로 활용하곤 했었는데요. 이젠 세상이 많이 변해서 말만하면 AI가 코드를 후딱 작성해

heonys

🤖 자바스크립트 엔진처럼 사고 하기 >내가 자바스크립트 엔진이라고 상상해 보자. 브라우저가 HTML 문서를 파싱하여 각각의 DOM 엘리먼트로 변환하는 것처럼 자바스크립트 엔진은 JS로 작성된 단순 텍스트 파일을 파싱하고 메모리에 적재한 후 실행할 것이다. 💡 자바스크립트 언어를 이루고 있는 구성 요소들 1) 문(Statement) 다양한 작업을 수행하는 실행 단위을 나타낸다 예를 들어, 변수 선언, 조건문, 반복문, 함수 호출 등이 문의 예시이다 2) 식(Expression) 식은 값을 생성하고 평가하는 하나의 코드 조각을 나타낸다 쉽게 말해 값을 표현하는 방법들은 전부 식으로, 값 자체도 식이며 변수 할당, 연산, 함수 호출 등을 포함한다 >🔎문과 식의 구분은 변수에 할당할 수 있는지로 판단하면 쉽다 식은 값을 반환하고 결과가 메모리에 저장되기 때문 하지만 모든 언어가 이런 것은 아니다 대표적으로 Rub

jaehe0413

javascript modern deepdive의 9장 내용입니다. 4개월전에 공부했던 내용인데 복습할겸 정리해봤습니다. 단축 평가 논리 연산 결과를 결정하는 피연산자를 타입 변환 없이 그대로 반환하는 것을 뜻합니다. 평가 도중에 결과가 확정된 경우 나머지 평가 과정을 생략합니다. 논리곱 (&&) 논리곱은 피연산자 모두 true일 경우 true를 반환하는데 hello는 true이고 hi가 논리 연산의 결과를 결정하기 때문에 hi를 반환하게 됩니다. 논리합 (||) 논리합은 피연산자중 하나만이라도 true인 경우 true를 반환하는데 hello가 true이고 hello가 논리 연산의 결과를 결정하기 때문에 hello를 반환하게 됩니다. 단축평가의 장점 if문 대체 단축평가 사용시 객체가 null or undefined 경우에 에러를 발생시키지 않음 ES11 이후 대체 0이나 ""도 false로 평가되어서 단축 평가를 사용할때에

toto9602

Bun 1.0 버전이 출시되었다고 합니다! 예전에 노마드코더 유튜브에서 Bun 소개 영상을 봤을 때는, 아직 개발 중이어서 '재밌어 보인다~' 정도만 생각하고 넘어갔었는데, 어느새 1.0 버전이 나왔군요..! :) 1.0 버전 나와서 궁금한 김에 + 캐릭터가 귀여운 김에 , Docs를 좀 읽어보려 합니다! What is Bun ? | Bun is an all-in-one toolkit for JavaScript and TypeScript apps. = Bun은 JS와 TS를 위한 all-in-one toolkit! +) bun이라는 단일 명령어로 실행이 가능하다는 게 장점! Bun으로 패키지 설치, 테스트 실행 등을 모두 실행할 수 있는 문서 예제 코드 Node JS와의 비교 자체 실행 결과에 따르면, 동일한 console lo

ouroborossnake

운영 WEB 서버에 JS와 CSS를 반영하면서 새로운 JS나 CSS 파일이 적용 안되는 경우가 있었다. 그 이유는 브라우저 캐시에 예전의 JS, CSS이 남아있기 때문이다. 다음 세가지 방법으로 해결 가능하다. 1. 강력 새로고침 크롬 강력 새로고침 단축키 : Ctrl + Shift + R 2. 캐시 지우기 Ctrl+Shift+Delete(Windows) 또는 Shift+Command+Delete(MAC)를 누르면 브라우저 캐시 및 쿠키를 삭제할 수 있는 화면으로 이동한다. Ctrl + F5키(혹은 Ctrl + Shift + R)를 눌러서 해당 페이지의 캐시를 삭제하면서 새로고침해서 수정한 js/css파일을 새로 가져올 수 있다. 하지만 사이트를 이용하는 모든 유저들에게 Ctrl + F5키를 눌러서 캐시삭제 후 사이트를 이용해달라고 할 수는 없다. 그러므로 아래의 방법을 이용해보자! 3. 변경 1) CSS나 JS 파일명 바꾸어 보기 수정 후 파일

riverhye

1. 반복문 특정 코드 반복할 때 1.1. for for(초기값; 조건문; 증감문) { 조건이 true면 해야 할 명령 } flow로 표현 ex. 변수를 for문 외부에서도 사용한다면 이렇게 for문 바깥에 쓰기도 한다. 하지만 대부분 for문 내부 초기값에 설정. if문처럼 중첩 가능. 가독성 해치지 않는 범위에서 사용하도록 노력. > 보통 변수는 i, j, k 순으로 사용 && 0부터 시작 1.2. while문 조건을 제어하는 구문이 기본적으로 없어서 실수하면 무한루프에 빠질 수 있다. while( //조건 ) { //조건일 때 반복 실행할 코드 } 초기값을 내부에 적을 수 없어서 외부에 변수 선언. ex. 1.

dnqkd707

CSS가 끝나고 JS를 새로 나갔다! 본격적으로 나가기 전에 개요부터 보려고 한다. JS 개요 스크립트(script) 언어 기본 프로그램의 동작을 사용자의 요구에 맞게 수행하도록 해주는 용도의 언어. 별도로 소스코드를 컴파일하지 않고, 인터프리터(interpreter)를 이용하여 소스코드를 한 줄씩 읽어 바로 실행. -> 컴파일에 소요되는 시간이 없음. 번역 속도가 빠른 대신 프로그램 실행 시간이 느림. 컴파일 과정이 없기 떄문에 프로그램을 실행시켜야만 오류를 알 수 있다. -> 코드가 문법적으로 틀리거나 수정할 필요가 있는 경우를 알려주지 못한다. 자바스크립트(JS)란 ? 브라우저에서 많이 사용하는 인터프리터 박식의 객체 지향 프로그래밍 언어. ECMA Script 표준을 따르는 대표적인 웹 기술이다. -> ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어. 자바스크립트 작성 방법 브라우저 콘솔에서 직접 작성

crata

이번 포스팅은 스프링 시큐리티등 현업에서 필수적으로 사용되는 공통 기능을 위한 모듈들은 고려하지 않고 오직 스프링 부트 입문자가 간단한 CRUD작업을 통해 부트에서의 데이터베이스와의 엑세스를 어떤 방식으로 하는지 찍먹을 해보는 목적으로 쓰였다. 따라서 부트만의 기본적인 특징을 알고 싶은 분들이 보면 도움이 될 것 같다. 1. 데이터베이스 정의에서의 스프링과의 차이점 스프링 프레임워크에서나 순수 자바 언어를 사용하여 데이터베이스와 연결을 하기 위해선 보통 oracle이나 mysql같은 데이터베이스 프로그램을 따로 사용해 데이터베이스의 ddl(database definition language)을 사용해 테이블을 만든이후에 자바나 스프링과 insert, select, update, delete등의 sql언어를 사용해 CRUD작업을 수행해야 한다. 즉, 자바로 구축된 백엔드 코드와 데이터베이스를 조작하기 위한 sql문이 서로 독립적으로 존재 한다. 하지만 스프링 부트에서는 엔

maetamong

💡 도형,크기, 색상으로 사고하는게 아닌 문자, 숫자같은 데이터로 사고하고 학습하자 String (문자 데이터) 문자데이터는 따옴표를 이용해 정의할 수 있다. Number (숫자 데이터) 정수 및 부동소수점 숫자를 나타낸다. 따옴표를 넣으면 string데이터가 되니 주의 Boolean (불린 데이터) true, false 두 가지 값밖에 없는 논리 데이터 Undefined 값이 할당되지 않은 상태를 나타낸다. Null 어떤 값이 의도적으로 비어있음을 의미한다. null은 의도적으로 값을 안 넣은 상태, undefined는 할당된 값이 없는 상태이다. 이 둘은 의도적이냐, 의도적이지 않느냐의 차이가 있다. Object (객체 데이터) 여러 데이터를 Key : Value 형태로 저장한다. Array (배열 데이터) 여러 데이터를 순차적으로

jink6111

Execution Context (실행 컨텍스트) 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 콜스택에서 처리하기 때문에 순서와 환경이 보장된다. (FILO: First in, Last out의 구조) Execution Context가 필요한 이유? 코드가 실행이 되면 먼저 전역 컨텍스트가 생성이 되어 전역 컨텍스트가 갖는 환경을 토대로 코드가 실행이 되고, 함수들이 실행이 되면 함수 내부에서 컨텍스트가 생성이되어 함수 내부에서의 환경을 토대로 코드가 실행이 되도록 하기위해 필요하다. 실행 컨텍스트의 정의가 뒤죽박죽인 언어로 개발은 안해봤지만 이런 실행 컨텍스트가 제대로 정의가 되지 않으면 지역별로 환경이 엉뚱하게 지정이 되어, 예상치 못한 값이 출력 된다거나 오류가 발생하지 않을까 싶다. 여기서 환경이란 생성된 지역에서의 변수나, 컨텍스트가 생성된 지역을 기준으로 내부 환경과 외부 환경에 대한 정보라고 할 수 있다.

dhgg321

클로저(Closures) 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 반환된 내부함수가 자신이 선언됐을 때 어휘적 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 말한다. 즉 함수가 생성될 당시 외부 변수를 기억하고, 생성 이후에도 계속해서 접근할 수 있는 구조를 클로저라고 한다. 어휘적 환경(Lexical environment) 클로저를 이해하기 앞서 흔히 말하는 렉시컬 환경에 대해 이해가 필요하다. 렉시컬 환경은 코드가 실행되는 특정 컨텍스트에 대한 식별자(변수, 함수 등)의 정보를 담고 있는 공간이다. > 렉시컬 환경이 생성되는 시점 *

wlfjd0627

앞의 포스팅에서 구현한 탭 메뉴이다 > 버튼 리스트 각각에 이벤트 리스너를 각각 발생시키고 있다 ➡️ 이벤트 버블링 활용하여 이벤트리스너 줄이기 복잡함 감소 이벤트리스너를 줄이면 램용량을 절약 가능 ==> 성능개선 이벤트 버블링으로 이벤트 리스너 줄이기 > 버블링 특성으로 인해 tab-button 에 걸어놓은 이벤트 리스너는 부모요소인 list 에도 동작한다 이를 이용하여 tapOpen 함수를 만들어 탭 클릭 시 작동 되어야 하는 동작들을 모아놓았다 하지만 여전히 길고 효율적이지 못한 코드 * ➡️ dataset을 통해 더 간결하게 사용 가능하다* dataset 인터넷 익스플로러 11+에서 동작 > html 내

dhgg321

자바스크립트에서 코드가 도달하기도 전에 미리 변수를 사용하거나 함수를 호출하는 경우가 있다. 이는 호이스팅 현상 때문인데 이 호이스팅에 대해 살펴보겠다. 호이스팅(Hoisting) 호이스팅은 자바스크립트에서 변수와 함수 선언이 본인 스코프에서 가장 위로 끌어올려지는 현상을 말한다. 변수와 함수 선언은 호이스팅되어 코드가 실행되기 전에 메모리에 저장되며 미리 참조하거나 호출할 수 있다. 하지만 호이스팅이 적용되는 것은 var, function 키워드의 선언 뿐이다. > 변수 생성 과정 선언 초기화 : undefined를 할당 할당 function function으로 선언된 함수는 호이스팅 되어 함수를 정의하기 전에 호출해도 에러를 발생하지 않는다. </b

suwonthugger

Javascript 생성자 함수에 의한 객체 생성 Javascript 생성자 함수에 의한 객체 생성 생성자 함수란? * 생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다 * Object 생성자 함수 / 빌트인 생성자 함수 Object 생성자 함수 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환, 이후 프로퍼티 or 메서드를 추가하여 객체를 완성할 수 있다 > 리터럴 방식과 비교했을 때 그다지 유용하진 않다 ㅋ ㅋ 빌트인 생성자 함수 자바스크립트는 Object 생성자 함수 이외에도 String, Number, Boolean, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수를 제공한다 생성자 함

brandmins

1. addEventListener 사용한 이벤트 처리 이전에 사용한 많은 이벤트 방식이 있는데 사용할 것을 권하지 않고 addEventListener를 사용할 것을 권장한다. element: 이벤트를 연결할 HTML요소 event: 연결하려는 이벤트의 종류를 나타내는 문자열 예: click, onclick, mouseover 등 handlerFunction: 이벤트가 발생했을 때 실행할 함수 다음과 같은 예제는 아래 참고하자. 2. DOM을 이용한 element 추가하기