[Next.js/TS] 사용성과 안정성을 고려한 Toast 알림 구현 기록

오르미에서 공통적으로 사용할 Toast 시스템을 구현한 기록입니다! 지금까지 라이브러리를 사용해 아주 간단하게 토스트 알림을 사용했지만, 이 프로젝트에서는 구현해야할 디자인 요구사항이 명확하다보니 직접 시스템을 만들어보자 생각이 들었습니다.복잡한 요구사항이 없다면 생각보다 간단하게 구현할 수 있으니 혹시 라이브러리 사용을 고민하며 글을 보신 분이 계시다면 ㅎㅎ 한번 도전해보세요! 개요고려한 점1) 개발자의 사용성- 추후 리액트 경험이 적은 팀원이 백엔드 개발을 마무리한 후 프론트엔드 개발에 합류할 계획이 있습니다. 이에 복잡한 로직을 고려하지 않고 간단하게 토스트 알림을 사용할 수 있도록 만들고자 했고, 코드 가독성과 안정성을 높일 수 있는 설계를 위해 고민했습니다.2) 서비스 사용자의 UX- 너무 많은..

• format_list_bulleted 팀 프로젝트/오르미
• · 2025. 5. 9.
• textsms

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