SMALL

분류 전체보기 85

JS : 호이스팅이란? (+ 스코프)

호이스팅(Hoisting) 변수나 함수의 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상 스코프 : 변수나 함수의 유효 범위 (변수가 어디서 접근 가능한지 정의한다.)변수나 함수를 어느 위치에서 참조할 수 있는지를 나타내며, 스코프에서 벗어난 위치에서 참조할 경우 Reference Error가 발생한다.스코프는 크게 전역 스코프와 지역 스코프로 나누며, 모두 렉시컬 스코프 규칙에 따라 결정된다.렉시컬 스코프 (=정적 스코프) : 변수가 어디에 정의 되었는지에 따라 스코프가 결정되는 매커니즘1. 전역 스코프 : 코드 어느 곳에나 접근할 수 있는 변수2. 지역 스코프 (로컬 스코프) - 함수 스코프 : 함수 내에서만 접근할 수 있는 변수 (함수 외부에서는 접근이 불가하다) ex) var 는 함수 스..

JS : 데이터 타입 (객체타입 : Array, Object)

이전 글 (원시타입) : https://jini-dev.tistory.com/66 JS : 데이터 타입 (원시타입 : Boolean, undefined, null, Symbol)이전 글 : https://jini-dev.tistory.com/65 변수에 값을 할당할 때 그 값의 타입에 따라 자동으로 타입이 결정된다. 타입을 확인" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/65" data-og-jini-dev.tistory.com객체 타입 : Object Type 여러 속성들의 집합을 나타내며 여러 값들을 저장할 수 있다.값이 아닌 참조 값( 실제 값(데이터)이 저장되어 있는 위치(메모리)의 주소..

JS : 데이터 타입 (원시타입 : Boolean, undefined, null, Symbol)

이전 글 : https://jini-dev.tistory.com/65 변수에 값을 할당할 때 그 값의 타입에 따라 자동으로 타입이 결정된다. 타입을 확인" data-og-host="jini-dev.tistory.com" data-og-source-url="https://jini-dev.tistory.com/65" data-og-url="https://jini-dev.tistory.com/65" data-og-image="https://blog.kakaocdn.net/dna/oaxAa/hyYMTBMsCP/AAAAAAAAAAAAAAAAAAAAAF1kNrozzh5JMB4N5MpCUp-mQr1PNGTfmhtLA7yDn7sE/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=PeK%2B%2Fz2zNXkawdFqQEKfEY4Lz00%3D

JS : 데이터 타입 (원시타입 : Number, String) + (정적타입언어 vs 동적타입언어)

Type : 자료형 자바스크립트는 동적 타입 언어로, 변수를 선언할 때 타입(자료형)을 따로 지정하지 않는다.=> 변수에 값을 할당할 때 그 값의 타입에 따라 자동으로 타입이 결정된다.정적 타입 언어변수의 타입을 명시적으로 선언한다.=> 컴파일 시점에 변수의 타입이 결정되는 언어장점 : 코드 작성 단계에서 타입 오류를 사전에 방지할 수 있어 안정성이 높고, 코드의 가독성이 좋다.단점 : 자유도가 낮고 타이핑을 엄격히 해서 초기에 개발 속도가 상대적으로 느릴 수 있다.=> 코드의 안정성과 유지보수성이 중요한 대규모 프로젝트의 경우 사용ex) Java, C, TypeScript 등동적 타입 언어변수의 타입을 명시적으로 선언하지 않고 값에 의해 타입을 추론한다.=> 런타임 시점에 변수의 타입이 결정되는 언어장..

JS : 변수 선언하기 (변수명 규칙, 변수명 작성 관습)

변수 선언하기 변수 키워드 (var, let, const) + 변수 명let age = 20 ; - const를 제외한 변수는 선언 시 값을 할당해도 되고 분리하여 할당해도 된다.(변수 키워드를 사용하지 않고 선언한 경우 var를 이용해서 선언한 것 처럼 동작하고 엄격모드에서는 동작하지 않는다)- let과 var 변수를 선언만 하면 자동으로 초기 값이 undefined 가 할당된다.let age; // 변수 선언// 만약 이 상태에서 age를 콘솔로그에 출력하면 할당된 값이 없기 때문에 undefined를 출력한다.console.log(age); // undefinedage = 20; // 할당console.log(age); // 20 1. var- 변수를 재선언, 재할당이 가능하다.- 함수 스코프를 가..

JS : 주석 작성하는 방법(단일 행 주석, 다중 행 주석, JSDoc)

주석은 개발자들끼리 보고 소통하기 위해서 작성하는 것이다.컴퓨터는 읽지 않아서 (코드로 인식하지 않아서) 출력되지 않는다. Ctrl + / 단축키를 눌러도 주석으로 만들 수 있다. 1. 단일 행 주석 (//)// 주석을 작성하는 방법 입니다.console.log(); // 코드 옆에 주석 작성 가능 2. 다중 행 주석 (/* */)/*이렇게여러 줄을 작성할 수 있는데 *//** * 별을 누른 상태로 엔터하면 * 자동으로 맨 앞에 별이 생깁니다 * 코드를 설명하는 역할을 합니다 */ JSDoc위와 같이 /** */ 이렇게 주석을 달아서 코드를 설명하는 경우설명한 코드 위에 마우스를 올리면 주석으로 작성한 코드 설명을 함께 확인할 수 있다./** * 이것은 숫자 타입 입니다. */const a = 123;​..

JS 실행하는 방법과 콘솔 출력 종류

출력 : console.log(); 콘솔로그 안에다가 원하는 것을 입력한 후 실행한다. 설치한 Extention( Run Code)를 실행하기 위해단축키( Ctrl + Alt + N ) 를 누르거나 마우스 우클릭을 해서 아래와 같이 Run Code 를 실행한다. 출력화면자바스크립트 실행하기 1. 인라인 스크립트태그 내부에 인라인으로 작성하는 방법이다.코드가 길어지면 코드 가독성이 저하되고, 유지보수가 어렵다.코드 재사용의 어려움이 발생한다. Click me! 2. 내부 스크립트스크립트 태그를 감싸서 내부에 코드를 작성하는 방법이다.반드시 body 태그 최하단에 작성되어야 한다. Click me! JS 코드를 body 태그의 최하단에 작성해야 하는 ..

JavaScript란? : JS의 동작 및 BOM API(alert, confirm, prompt)

JavaScript 란 웹 페이지에서 동작하는 프로그램을 만들 때 사용하며, 정적인 웹 페이지를 동적인 웹 페이지로 개발할 수 있게 해준다. 웹 페이지에서 사용하기 위해 개발되었다.자바스크립트는 브라우저 또는 노드 환경에서 실행된다.자바스크립트 엔진 : 브라우저 내부의 인터프리터(현재 구글에서 개발한 V8 엔진이 높은 성능을 가지고 있음)노드 환경 : 브라우저 외에서 JS를 실행할 수 있게 해주는 환경인터프리터 : 사용자가 작성한 언어를 컴퓨터가 이해할 수 있는 언어로 변환 해주는 것 자바스크립트의 동작 1. 데이터 저장 (변수 값 지정)2. 값 계산 (연산, 조건문, 반복문, 자료형 내장 함수 등)3. 결과 반영 (DOM API, BOM API)DOM API : 문서 내 객체 모델을 제어함 (elem..

VSC 유용한 Extension들

VSC 에서 사용하는 Extension들 모음(추가 예정!)JavaScript 코드를 실행하기 위한 환경 1. Code Runner링크 : https://marketplace.visualstudio.com/items/?itemName=formulahendry.code-runner Code Runner - Visual Studio MarketplaceExtension for Visual Studio Code - Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml,..

💻Dev/Tool 2025.05.08

Algolia : 알골리아 사용해서 검색 기능 api 만들기 (Firebase 연동)

알골리아 사용해서 검색 기능 API 만들기 api 만드는 법을 잘 알고 작성한 코드가 아닙니다 ㅠㅠ ( 알골리아 UI 안썻습니당!! ) 정답은 아니고 적용한 내용 작성하는 글이니까 참고만 해주세용 알골리아 사용 이유더보기소극장 예매 플랫폼 프로젝트에서 검색 기능 API 를 구현하게 되었는데Firebase(firestore) 에서 공연들의 title을 가져와서 검색하는 기능으로 만들었었다.그런데 중간 부분 문자열이나 공연 명 외의( 판매자 명 등)을 검색하는 기능의 구현 어려움이 있어서찾아보다가 알골리아를 알게되어 적용했다알골리아 사용 이전 코드import { NextResponse } from "next/server"; // Next.js 를 써서 응답을 보낼때 쓰는 것import { adminDb } ..

🖤Dev : BE/Server 2025.05.08
LIST