JavaScript 실행컨텍스트란?

실행 컨텍스트자바스크립트 코드가 실행될 때의 환경을 정의하고 관리하는 역할을 합니다. 실행컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트가 있습니다. 전역 실행 컨텍스트는 자바스크립트가 처음 실행될 때 생성되는 컨텍스트입니다. 이 컨텍스트는 프로그램이 종료될 때까지 유지되며, 전역에 선언된 변수나 함수가 모두 포함됩니다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근이 가능합니다.(자바스크립트는 싱글 스레드로, 전역 실행 컨텍스트는 1개만 존재) 함수 실행 컨텍스트는 함수가 호출될 때마다 생성되는 컨텍스트를 의미합니다. 각 함수는 자신만의 실행 컨텍스트를 가지며, 이 컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효합니다. 함수가 종료되면 그 함수의 실행 컨텍스트..

• format_list_bulleted 기술면접 준비
• · 2025. 4. 2.
• textsms

[Next.js/app router] 에러를 관리해보자!

프로젝트 구현에 본격적으로 들어가기 전에 에러를 관리할 방법들을 정리해보려한다Next.js 공식문서 Error Handling 에러 타입에 따라 분류하기1. 예상된 에러 (Expected Errors)서비스 정상 작동 중에 발생할 수 있는 에러를 의미한다ex. 폼 검증 실패, API 요청 오류 등 2. 예상치 못한 예외 (Uncaught Exceptions)정상 흐름에서 발생하지 않아야하는 예외 상황을 의미한다  서버액션에서 에러 처리하기서버액션에서 발생하는 에러의 경우 try/catch문을 지양하고 특히 form을 사용하는 경우 useFormState (React 18 이하), useActionState (React 19 이상)를 사용해 모델링하는 것을 권장한다 useFormState 사용 예시// a..

• format_list_bulleted Next.js
• · 2025. 4. 1.
• textsms

클로저란?

Q.클로저에 대해 설명해주세요JS에서 함수가 선언될 때의 스코프를 기억해 함수 생성 후에도 그 스코프에 접근할 수 있는 기능입니다.클로저는 JS의 함수가 일급객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다. 예시 코드function outerFunction(outerVariable) { return function innerFunction(innerVariable) { console.log('Outer Variable: ' + outerVariable); console.log('Inner Variable: ' + innerVariable); };}const newFunction = outerFunction('outside');newFunction('inside'); 실행 결과더보기Ou..

• format_list_bulleted 기술면접 준비
• · 2025. 3. 13.
• textsms

[JavaScript] 최대공약수 구하기 (유클리드 알고리즘)

유클리드 알고리즘두 수의 최대공약수(GCD)를 찾는 효율적인 방법 원리숫자 A와 B에서 A를 B로 나누었을 때, 나머지가 R이라면 A와 B의 최대공약수는 B와 R의 최대공약수와 같다.이 과정을 나머지가 0이 될 때까지 반복하면, 마지막으로 나눈 수가 최대공약수다. ex. 48과 18의 최대공약수 찾기48 ÷ 18 = 2 나머지 12 -> 48과 18의 최대공약수 = 18과 12의 최대공약수18 ÷ 12 = 1 나머지 6 -> 18과 12의 최대공약수 = 12와 6의 최대공약수12 ÷ 6 = 2 나머지 0 -> 나머지가 0이 되었으므로, 6이 최대공약수 구현function findGCD(a, b) { // 음수인 경우 절댓값 사용, 양수인 경우 생략 가능 a = Math.abs(a); b ..

• format_list_bulleted 알고리즘
• · 2025. 3. 11.
• textsms

Next.js로 포트폴리오 만들기 2 - 다크모드 개선기 (Extra attributes from the server: data-theme,style 에러 해결, 서버에서 클라이언트 정보를 아는 법)

Extra attributes from the server 에러다크모드를 추가해둔 사이트에서  Extra attributes from the server: data-theme,style 에러가 발생했다서버에서 렌더링된 html 파일과 다른 data-theme, style 속성이 있어 발생하는 에러다 suppressHydrationWarning ...suppressHydrationWarning으로 hydration mismatch로 발생하는 에러를 무시하도록 설정할 수 있지만, 다른 원인으로 hydration mismatch가 일어났을 때도 경고를 무시할 수 있으므로 다른 방법을 찾아보고싶었다 enableColorScheme {children}ThemeProvider에서 enableColorScheme..

• format_list_bulleted 포트폴리오
• · 2025. 3. 10.
• textsms

Next.js로 포트폴리오 만들기 1 - next-themes로 다크모드 구현하기

포트폴리오 사이트를 만들기 시작했다지금까지는 기획상 애니메이션 등 보여지는 요소들을 많이 구현해보지 못했는데 포트폴리오는 보여지는게 목적이다보니 궁금했던 모션이나 상호작용 등을 활용해보려한다 첫번째로 다크모드를 처음 시도해보려한다 next-themesNext.js에서 다크모드를 비롯한 테마 변경을 쉽게 구현할 수 있도록 하는 라이브러리클라이언트 측에서 localStorage 또는 class 속성을 사용해 테마를 적용하고 유지하도록 한다 주요 기능 및 이점- useTheme() 훅을 사용해 테마를 간편하게 변경할 수 있음- 사용자가 선택한 테마를 localStorage로 유지- class 기반 테마를 지원해 tailwindCSS를 활용할 때 유용- system 옵션을 사용해 사용자의 OS 테마 설정에 따라..

• format_list_bulleted 포트폴리오
• · 2025. 3. 4.
• textsms