쥰뎁

Promise와 Async자바스크립트에서 비동기 처리를 다루기 위한 두 가지 주요 패턴인 'Promise'와 'async/await'는 각각 고유한 특징과 사용 방법을 가지고 있다.이 두 패턴은 비동기 작업을 더 쉽게 관리할 수 있도록 도와주지만, 사용 방식과 코드의 가독성 측면에서 차이가 있다.Promise'Promise'는 비동기 작업의 완료 또는 실패를 처리하기 위한 객체이다.'Promise'는 비동기 작업이 완료된 후의 결과를 약속(promise)하고, 그 결과에 따라 'then' 또는 'catch' 메서드를 통해 처리할 수 있다.// Promise를 사용하는 예제function fetchData() { return new Promise((resolve, reject) => { set..

화살표 함수와 일반 함수의 차이점자바스크립트에서 화살표 함수(Arrow Function)와 일반 함수(Regular Function)은 몇 가지의 차이점을 가지고 있다. 문법적 차이화살표 함수화살표 함수는 더 간결한 문법을 사용한다.const add = (a, b) => a + b; 일반 함수일반 함수는 'function' 키워드를 사용하여 정의한다.function add(a, b) { return a + b;} this 바인딩화살표 함수화살표 함수는 자신만의 this 바인딩을 가지지 않는다.대신, 화살표 함수는 자신이 정의된 위치의 'this' 값을 상속받는다.이를 렉시컬 스코핑(lexical scoping)이라고 한다.const obj = { value: 42, arrowFunctio..

호이스팅과 스코프호이스팅(Hoisting)과 스코프(Scope)는 자바스크립트에서 중요한 개념으로 변수와 함수의 선언과 접근 가능성을 이해하는데 필수적이다. 이 두 개념은 서로 관련이 있지만, 각각 다르다. 스코프(Scope)스코프는 변수와 함수가 접근 가능한 범위를 정의한다.스코프는 크게 세 가지로 나눌 수 있다.전역 스코프(Global Scope)코드 어디서나 접근할 수 있는 변수와 함수이다.전역 스코프에 선언된 변수는 'window' 객체의 속성이 된다.var globalVar = "I am a global variable";function globalFunction() { console.log(globalVar); // I am a global variable} 함수 스코프(Function Sc..

let, var, const 차이점변수를 선언하는데 사용되는 키워드이다.이들 간의 주요 차이점은 변수의 스코프, 재할당 가능성 그리고 호이스팅 방식에 있다.* 스코프(scope): 사전적 의미는 범위이고, 프로그래밍에서의 의미도 비슷한 개념으로 변수에 접근할 수 있는 범위로 재해석 하면 된다.* 호이스팅(hoisting): 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상  호이스팅과 스코프호이스팅과 스코프호이스팅(Hoisting)과 스코프(Scope)는 자바스크립트에서 중요한 개념으로 변수와 함수의 선언과 접근 가능성을 이해하는데 필수적이다. 이 두 개념은 서로 관련이 있지만, 각각jundev717.tistory.com va..

개요LeetCode문제 명Zigzag Conversion난이도Medium체감 난이도Medium풀이 시간1시간 정도 문제 설명문자열 "PAYPALISHIRING"은 다음과 같이 주어진 수의 행에 지그재그 패턴으로 작성됩니다.주어진 행의 수가 3이라면 다음과 같은 지그재그 패턴이 나옵니다.주어진 문자열을 다음과 같은 지그재그 패턴으로 바꿨다면, 행을 단위로 문자를 읽어 출력하면 됩니다.출력 값은 PAHNAPLSIIGYIR이 됩니다.입출력 예시입출력 예시 1입력 값s = "PAYPALISHIRING"numRows = 3기대 값PAHNAPLSIIGYIR설명위에서 설명함 제약 조건1 s는 영문자(소문자, 대문자)로 구성됩니다.1  풀이이 문제를 보고 주어진 문자열을 지그재그 패턴으로 정렬하고 위에서부터 한 행씩 ..

개요LeetCode문제 명Longest Palindromic Substring난이도Medium체감 난이도Medium풀이 시간1시간 20분 정도 문제 설명Given a string s, return the longest palindromic substring in s.문자열 s가 주어지면, 가장 긴 palindromic 문자열을 리턴하라. 여기서 palindromic 문자열을 한국어로 표현하기가 애매한데, 쉽게 말하자면 반으로 접었을 때 똑같은 모양이 나오는 데칼코마니라고 생각하면 된다. 입출력 예시입출력 예시 1입력 값s = "babad"기대 값bab || aba설명bab, aba은 길이가 동일하므로 둘 중 아무거나 상관없음. 제약 조건1 입력 값은 문자와 숫자로만 구성됨. 풀이본 문제가 상당한 난이도를..

들어가며shadcn은 Radix UI와 Tailwind CSS를 기반으로 한 재사용 가능한 컴포넌트 컬렉션이다.내가 아는 바로는 Bootstrap처럼 디자인 된 컴포넌트를 제공하기도 하며, cn 함수를 통해 여러 클래스를 합쳐 나만의 커스텀 컴포넌트를 만들 수도 있다. 이건 코드를 보면 이해가 빠르다. 백 번 듣는 것이 한 번 보는 것만 못하다: 백문불여일견이걸 사용해서 프로젝트 개발을 하고싶다면, 프로젝트를 생성할 때 다음과 같이 따라하면 된다. 프로젝트 생성 ( 본인은 Next.js, Typescript, TailwindCSS를 사용한다. )npx create-next-app@latest my-app --typescript --tailwind --eslint shadcn 셋업npx shadcn-ui@..

들어가며나, 그리고 지도 교수님을 위해본인은 2024년 2월에 4년제 대학에서 소프트웨어 공학을 전공하며 졸업했다. 졸업을 앞두고 4학년 1년은 할 것들이 정말 많았다. 힘든 만큼 내가 이룬 것도 있지만 말이다.몇 개월은 인공지능을 활용해 서비스 가능한 시스템을 졸업 작품으로 연구하고 개발했다. 또 몇 개월은 그 시스템을 인정받기 위해 논문을 두 차례 투고했다.한국컴퓨터정보학회(KSCI)에서 구두 발표하고 우수논문상을 수여받았고, 한국전자통신학회에 게재되었고 KCI에도 등재되었다.게다가, 이 졸업 작품이 성공적으로 개발되도록 방향을 정하는데 도움을 주신 지도교수님과 함께 특허도 출원했다. 내 이름으로 된 특허가 있다니,, 다시 생각해도 나의 지도교수님은 학생들을 위해서라면 가시밭길이라도 걸어가시는 분이셨..

들어가며자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않습니다.*본 블로그에 자바스크립트의 프로토타입을 정리한 게시글이 있습니다.이는 클래스 기반의 다른 언어에 익숙한 많은 개발자들을 혼란스럽게 했고, 자바스크립트에서는 클래스와 비슷하게 동작하게끔 흉내 내는 여러 기법들이 탄생했습니다. 이러한 니즈에 따라 결국 ES6에는 클래스 문법이 추가되었습니다. 클래스와 인스턴스의 개념 이해객체지향 프로그래밍에서 거의 반드시 등장하는 제1요소인 클래스라는 단어의 의미는 일반적으로 쓰이는 의미와 거의 흡사합니다.영어 사전에서 class는 "계급, 집단, 집합" 등으로 번역하는데, 프로그래밍 언어적으로도 이와 동일한 개념에서 접근하면 된다는 말입니다. 클래스의 개념을 이해하는건 정말 쉽습니다.* 객체..

자바스크립트는 프로토타입 기반 언어입니다. 우리와 친숙한 클래스 기반 언어에서는 '상속'이라는 개념을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 참조함으로써 상속과 비슷한 기능을 수행합니다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있습니다. 클래스 기반 언어에 익숙한 개발자라면 자바스크립트를 배척하는 이유로 프로토타입이 복잡하고 어렵다는 점을 들지만, 오히려 자바스크립트는 프로토타입이라는 개념을 제대로 이해하는 것만으로도 이미 숙련자 레벨에 도달할 수 있는 시야를 확보할 수 있는 셈이라고 합니다. 본 포스팅에서는 프로토타입에 대한 이해를 중점으로 글을 작성하고자 합니다. 프로토타입의 개념 이해c..