개인공부

JS is Weird 문제 풀이

몫만을 구하고 싶을 땐 나머지를 제거해주는 내림함수 Math.floor() 를 활용한다.function solution(num1, num2) { return (num1 / num2)<<0;} 몫을 구하는 방식으로, 비트 연산자인 <<를 사용나

반복문에서 배열의 길이 또는 다른 반복 계산이 자주 사용되는 경우, 이를 반복문 외부에 캐싱하여 성능을 향상할 수 있습니다. 예제캐싱 전: 캐싱 후:arr.length를 반복문 외부에서 한 번 계산하여 length 변수에 저장하고, 이를 반복문 내부에서 사용하면 성능

의도치 않은 변수 값의 변조를 방지특히 외부 API 라이브러리와 연동하여 사용할 때 같은 변수명끼리 충돌이 생기는 것을 방지할 수 있다.효율적인 메모리 관리코드 블럭 안의 참조값들은 코드가 실행 될 때만 메모리에 할당되는 것이 효율적이다.자신이 속해있는 지역의 변수들을

실행하려는 JS 코드와 코드를 실행할 때 필요한 정보를 담고 있는 특수한 환경this의 바인딩, 스코프의 형성, 프로토타입의 형성실행 컨텍스트 두가지 타입으로 나뉨최상위 실행 컨텍스트코드를 실행하면 무조건 생성되는 컨텍스트로 웹에서의 윈도우 객체나 nodeJS에서의 g

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교

클로저 사용패턴 캡슐화(은닉화) 함수 팩토리: 특정 기능을 하는 함수를 고정할 때 비동기 프로그램 패턴 : 비동기적으로 코드를 실행할 수 있게 해줌 메모이제이션

가비지 컬렉션은 메모리 관리 방법 중 하나로, 프로그램에서 더 이상 사용하지 않는 동적 할당된 메모리를 자동으로 찾아 해제하는 프로세스를 말한다. 주요 특징시스템에서 더 이상 사용하지 않는 메모리 블록을 자동으로 회수프로그래머가 직접 메모리를 해제할 필요가 없어 메모리

1.this 자바스크립트는 렉시컬 스코프를 사용하기 때문에 함수의 상위 스코프가 정의 시점에 평가됨 하지만 this 키워드는 바인딩이 객체 생성 시점에 결정됨 1.1 상황에 따른 this 1.1.1 일반 함수 일반 함수로 호출할땐 this가 최상위 객체 (global, window)를 가리킨다. 1.1.2 메서드 메서드로 호출할떈 호출된 객체를 가리킨다....

\_\_proto\_\_: 모든 객체에서 존재하는 프로퍼티, 클래스에서 부모 클래스의 레퍼런스와 같은 역할을 함circular reference 서로가 서로를 참조하고 있는 상태

자바스크립트에서 클래스와 배열도 일급 객체이다. 이들은 일반 객체의 특성 외에도 추가적인 특별한 기능과 프로퍼티를 가지고 있다.클래스의 특별한 특성constructor 메서드:클래스의 인스턴스를 생성하고 초기화하는 특수한 메서드입니다.static 메서드와 프로퍼티:클래

비동기 함수(예: setTimeout, fetch 등)는 먼저 Call Stack에 들어간다.Call Stack에서 실행되면서 비동기 작업을 Web API로 넘긴다.비동기 함수 자체는 즉시 Call Stack에서 제거된다Web API는 브라우저에서 제공하는 기능으로,

Promise의 에러 처리 메커니즘과 성공 처리 메커니즘의 차이 요점을 정리reject를 명시적으로 호출하지 않아도 Promise 내부에서 에러가 발생하면 catch가 작동이는 Promise 내부의 암묵적인 try-catch 메커니즘 때문모든 예외는 자동으로 rejec

예제 코드 이 코드의 실행 순서와 각 부분의 동작을 설명하겠습니다: 콜 스택에 전역 실행 컨텍스트가 추가됩니다. console.log('1. 스크립트 시작')이 실행되어 출력됩니다. asyncFunction이 정의됩니다. setTimeout이 실행되고, 그 콜

중요한 차이점들실행 방식:Promise.all(): 모든 프라미스를 동시에 시작하고 병렬로 실행합니다.async/await: 기본적으로 순차적으로 실행됩니다.코드 구조:Promise.all(): 여러 프라미스를 배열로 묶어 한 번에 처리합니다.async/await: 각

script 태그의 defer와 async 속성은 외부 JavaScript 파일을 불러올 때 브라우저의 동작을 제어하는 중요한 속성입니다. 두 속성의 주요 특징과 차이점은 다음과 같습니다:HTML 파싱과 스크립트 다운로드가 병렬적으로 진행됩니다1.HTML 문서 파싱이

DOM에서의 이벤트 버블링(Event Bubbling) 현상의 주요 특징: 정의: 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 상위 요소들로 전파되는 현상을 말한다. 동작 방식: 가장 하위의 자식 요소에서 이벤트가 발생하면, 그 이벤트는 부모

git fetch원격 저장소의 최신 정보를 가져오지만, 로컬 브랜치에 병합하지는 않습니다.git pull은 git fetch + git merge의 조합입니다.git stash현재 작업 중인 변경사항을 임시로 저장하고 나중에 다시 적용할 수 있게 해줍니다.브랜치 전환

웹팩(Webpack)과 번들링(Bundling)에 대해 간단히 설명해 드리겠습니다:번들링(Bundling):번들링은 여러 개의 파일을 하나로 묶는 작업을 말합니다1.웹 애플리케이션을 구성하는 HTML, CSS, JavaScript 등 여러 모듈을 하나의 파일로 합치는

useState의 초기값으로 복잡한 계산이나 시간이 오래 걸리는 작업이 있다면, 이를 함수로 감싸서 전달할 수 있다. 이 경우, React는 첫 번째 렌더링에서만 이 함수를 호출하여 초기 상태를 계산하고, 이후에는 해당 함수가 호출되지 않는다.기본값(초기 상태)은 오직

깊은 복사(Deep Copy)깊은 복사는 객체의 모든 필드를 복사하여 새로운 객체를 생성하는 방식입니다. 이 방식은 객체의 모든 데이터를 복사하기 때문에 원본 객체와 복사된 객체가 독립적으로 존재합니다. 왜냐하면 깊은 복사는 객체의 모든 필드를 재귀적으로 복사하기 때문

타입스크립트에서 void와 undefined를 함수의 반환 타입으로 사용할 때 중요한 차이점이 있다:의미적 차이void: 함수가 의도적으로 아무것도 반환하지 않음을 나타낸다.undefined: 함수가 명시적으로 undefined를 반환함을 의미한다.타입 안전성void를

TypeScript는 컴파일 시에 옵셔널 속성의 존재 여부를 체크한다. 그러나 메서드의 경우에는 약간 다른 접근이 필요해 보인다. 컴파일 시 체크:TypeScript는 컴파일 시에 옵셔널 메서드를 포함한 모든 옵셔널 속성의 타입을 체크한다.이는 코드가 인터페이스나 타입

첫 번째 코드:super()를 인자 없이 호출. 이는 부모 클래스(Shape)의 생성자를 아무 인자 없이 호출color 속성을 자식 클래스(Rectangle)의 생성자에서 직접 설정부모 클래스의 생성자가 color를 초기화하지 않는다.두 번째 코드:super(color

양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해

문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요.예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2

이중 우선순위 큐는 다음 연산을 할 수 있는 자료구조를 말합니다.이중 우선순위 큐가 할 연산 operations가 매개변수로 주어질 때, 모든 연산을 처리한 후 큐가 비어있으면 0,0 비어있지 않으면 최댓값, 최솟값을 return 하도록 solution 함수를 구현해주

웹 브라우저가 HTML, CSS, JavaScript 파일을 화면에 표시하기 위해 수행하는 일련의 과정이다. 이 과정은 웹 페이지가 사용자에게 보이기 시작할 때까지의 모든 단계를 포함하며, 최적화하면 페이지 로드 속도를 향상시킬 수 있다. 아래는 크리티컬 랜더링 패스

깃 커밋 컨벤션은 개발자들이 프로젝트의 변경 사항을 일관되고 명확하게 기록하기 위한 규칙이를 통해 협업과 코드 리뷰가 더욱 효율적으로 이루어질 수 있다.커밋 메시지는 크게 세 부분으로 구성:제목 (Subject)본문 (Body)꼬리말 (Footer)각 부분은 빈 줄로

CSS에서 앰퍼샌드 기호(&)는 자체적으로 부모 선택자를 나타내지 않는다. 그러나 SASS(또는 SCSS)와 같은 CSS 전처리기에서는 앰퍼샌드 기호를 사용하여 부모 선택자를 참조할 수 있다. 이는 중첩된 규칙 내에서 부모 선택자를 나타내는 데 사용된다.부모 선택자 참

사용자의 브라우저 캐시 설정은 개발자가 직접 제어할 수 없다. 그러나 개발자는 서버 측에서 캐싱 전략을 설정하고, 웹 페이지가 폰트를 로드하는 방식을 최적화하여 사용자 경험을 개선할 수 있다.캐시 설정에 의존하지 않고도 폰트 로딩 문제를 완화할 수 있는 몇 가지 방법

등장 배경: React Hooks는 2018년 React 16.8 버전에서 도입되었다1. 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있게 해주는 기능이다.클래스 컴포넌트의 한계: 클래스 컴포넌트에서의 this 사용의 복잡성, 코드 재사용의 어려움 등

빌드는 소스코드 파일들을 컴퓨터에서 실행할 수 있는 소프트웨어로 변환하는 일련의 과정컴파일: 소스코드를 기계어로 변환패키징: 컴파일된 코드와 필요한 리소스를 하나의 패키지로 묶음테스트:빌드된 소프트웨어가 정상적으로 동작하는지 확인합니다.빌드된 파일을 서버로 전송한다.

자바스크립트는 정적 타입 언어이다.(x)자바스크립트는 동적 타입 언어로, 변수의 타입이 런타임에 결정자바스크립트에서 let으로 선언된 변수는 재할당이 가능하지만, 블록 레벨 스코프를 갖는다.(o)자바스크립트에서 this는 항상 함수가 선언된 위치를 기준으로 동작한다.(

고차 함수는 함수형 프로그래밍의 핵심 개념으로, 다른 함수를 인수로 받거나 함수를 반환하는 함수를 말합니다1. 이러한 특성으로 인해 코드의 모듈화, 재사용성, 그리고 가독성을 향상시킬 수 있습니다1.map: 배열의 각 요소에 함수를 적용하여 새로운 배열을 생성합니다1.

Computed 속성은 다음과 같은 상황에서 사용하는 것이 좋다:템플릿 내 복잡한 로직 간소화복잡한 계산이나 표현식을 템플릿에서 직접 사용하는 대신, computed 속성으로 분리하여 코드의 가독성을 높일 수 있다1.데이터 가공여러 데이터를 조합하거나 변형하여 새로운

watch는 Vue.js에서 제공하는 데이터 감시 기능이다. 데이터 변화 감지특정 데이터의 변경을 감시하고, 변경 시 정의된 함수를 실행1비동기 작업 처리: API 호출이나 서버 통신과 같은 비동기 작업을 처리하는 데 유용1깊은 감시 가능: deep 옵션을 사용하여 객

유저가 웹이나 모바일과 같은 네이티브 애플리케이션에 접속하면 데이터베이스에 바로 접속하지 않고 서버쪽 기술이 요청을 먼저 받음 -> (인증을 해줘야 하니까)데이터베이스에 접속해서 데이터베이스가 응답한 내용을 가공해서 웹이나 모바일에 프론트앤드를 변화시키면 사용자가 소비

이 코드는 Supabase에서 데이터의 개수를 효율적으로 가져오는 방법입니다124..select("\*", { count: "exact", head: true })의 의미는 다음과 같습니다:count: "exact": 정확한 행 개수를 계산하도록 요청합니다12.head

이런 식으로 useEffect 안에 handleStatusChange 함수를 정의useUserStatus 바로 아래에 정의하지 않고 useEffect 안에 정의한 이유?어떤 상황에서 useEffect 안에 함수를 정의해야 하는 것인지?\->handleStatusChan

Tailwind CSS의 JIT(Just-In-Time) 모드는 필요한 스타일을 실시간으로 즉시 생성하는 방식이다.기존 Tailwind 방식(정적 빌드)보다 더 빠르고 유연하게 동작하며, max-\[1280px] 같은 임의의 커스텀 브레이크포인트도 지원한다. ✅ 사용

크롤링(웹 스크래핑)은 웹사이트의 HTML을 직접 가져와서 원하는 데이터를 추출하는 것을 의미.반면, RSS 피드는 웹사이트가 공식적으로 제공하는 구조화된 데이터(XML) 포맷이기 때문에, 허용된 방식으로 데이터를 가져오는 것.RSS는 사이트가 공식적으로 제공하는 AP

Merge와 Rebase는 Git에서 브랜치를 통합하는 두 가지 주요 방법으로, 각각 다른 특징과 결과를 가집니다1.Merge는 두 브랜치를 통합하는 과정입니다1. 주요 특징은 다음과 같습니다:두 브랜치의 마지막 커밋과 공통 조상을 사용하여 새로운 커밋을 생성합니다3.

TypeScript는 JavaScript에 “정적 타입”이 추가된 언어이다. 따라서 TypeScript는 JavaScript와 타입 두 가지를 모두 포함하고 있는 큰 집합, 즉 JS의 상위 집합(Superset)이라고 할 수 있다.string , number , boo

인풋 객체에 대한 타입/ 특징을 미리 정의 특징?객체의 속성, 속성 타입함수의 파라미터함수의 파라미터, 반환 타입배열, 객체 접근법클래스 사용법특징implements VS extends extends는 클래스 상속 문법인데 인터페이스 확장에도 사용 가능함extends

테스트 주도 개발반복 테스트를 이용한 소프트웨어 방법론으로,작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현한다.짧은 개발 주기의 반복에 의존하는 개발 프로세스이며, 애자일 방법론 중 하나인eXtream Programming(XP

리액트 훅은 내부적으로 메모이제이션이 구현되어 있는가?useEffect함수형 컴포넌트에서 생명주기를 다룰 때 사용하는 리액트 훅생명주기? ⇒ 그 컴포넌트가 태어나고 죽을 때까지생명주기 ⇒ 그 컴포넌트가 렌더링되고, 화면에서 사라질 때까지생명주기가 체크하는것 ⇒ 생성,

주로 패키지의 역할과 사용 대상에 있습니다.코어 패키지로, 리액트에서 라우팅 기능을 제공하는 핵심 라이브러리입니다.브라우저, 네이티브, 서버 등 다양한 환경에서 사용할 수 있도록 설계되었습니다.react-router-dom과 react-router-native 같은 환

웹 브라우저와 서버 간의 양방향 통신을 가능하게 하는 프로토콜이다. 기존의 HTTP 기반 통신 방식(예: AJAX, REST API)은 클라이언트가 요청해야만 서버가 응답하는 단방향 통신이지만, 웹 소켓은 한 번 연결을 맺으면 서버와 클라이언트가 서로 자유롭게 데이터

클릭 시 바로 이동하는 로직 구현 시에 사용ex) 상품 리스트에서 상세 페이지 이동 시페이지 전환 시 추가로 처리해야 하는 로직이 있을 경우 useNavigate 사용ex) 로그인 버튼 클릭 시회원가입 되어 있는 사용자 -> Main 페이지로 이동회원가입이 되어 있지