오블완(15)
-
Nextjs와 기본 인증 (accessToken, refreshToken)
1. 인증 API 관리 클래스 설계class ApiClient { constructor(baseURL) { this.baseURL = baseURL; } // 기본 API 요청 메서드 async request(endpoint, options = {}) { const url = `${this.baseURL}${endpoint}`; const response = await fetch(url, { ...options, credentials: 'include', // 쿠키 포함 }); if (response.status === 401) { // AccessToken 만료: RefreshToken으로 갱신 시도 const refreshed = ..
2024.11.21 -
타입스크립트 as와 satisfies 비교
특징as 단언 (assertion)satisfies 연산자초과 프로퍼티 검사무시함검사함타입 강제성강제로 타입을 변경하며, 이는 개발자가 책임짐애초에 타입에 엄격하게 부합해야 함런타임 영향없음주요 용도임시적으로 타입 단언이 필요할 때정밀한 타입 체크 및 코드 안정성 확보 예를 들어, 아래 코드는 validPerson이라는 객체가 Person 타입을 만족하는지 검사하는 용도로 쓰인다.type Person = { name: string; age: number };const validPerson = { name: "철수", age: 30, job: "Developer",} satisfies Person; // 에러 - 'job'은 타입에 정의되지 않은 속성 satisfies가 없었다면(4.9버전 미만), ..
2024.11.20 -
디자인 패턴의 필요성
소프트웨어 개발에서 디자인 패턴은 단순한 코딩 기법을 넘어, 문제 해결의 프레임워크를 제공한다. 즉 코드의 품질을 높이고 유지보수를 쉽게 하기 위해 사용되며, 선배 개발자들이 맞닥뜨렸던 반복적인 문제들을 해결하기 위한 모범 답안을 모아놓은 것이다. 디자인 패턴을 적용하면 다음과 같은 이점이 있다. 코드의 가독성 향상 코드 또한 하나의 문서이기 때문에, 다른 사람이 읽기 쉽도록 작성되어야 한다. 디자인 패턴은 널리 알려진 구조와 이름을 제공하여 코드의 의도를 더 쉽게 이해할 수 있게 한다. 예를 들면,싱글톤(Singleton) 패턴을 사용하면 "이 객체는 시스템 전체에서 하나만 존재해야 한다"는 의도를 바로 파악할 수 있다.옵저버(Observer) 패턴은 "이벤트 기반 시스템에서 데이터를 업데이트한다"는..
2024.11.19 -
React로 타이머 hooks 간단히 개발하기
import React, { useRef, useState } from 'react';export const useTimer = () => { const [time, setTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(); const startTimer = () => { if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); } }; const..
2024.11.18 -
AWS CloudFront
AWS CloudFront는 CDN 서비스로, 전세계에 분산된 서버 네트워크를 통해 콘텐츠(웹페이지, 이미지, 동영상 등)를 사용자에게 빠르고 안전하게 전달한다. 주요 기능 1. 콘텐츠 캐싱 및 빠른 전송전 세계에 위치한 엣지 로케이션(Edge Location)을 통해 사용자와 가장 가까운 서버에서 콘텐츠를 제공하여 지연 시간을 줄이고 속도를 높인다. 2. 보안 강화AWS Shield와 통합되어 DDoS(분산 서비스 거부) 공격을 방어한다.HTTPS를 지원하여 데이터를 안전하게 전송한다.WAF(Web Application Firewall)와 통합 가능하여 애플리케이션 보안을 강화한다. 3. 탄력적인 스케일링트래픽이 갑자기 증가하더라도 탄력적으로 확장하여 안정적인 콘텐츠 제공이 가능하다. 4. 비용 효..
2024.11.17 -
placeholder-shown이 안먹는 경우
css에서는 placeholder-shown을 통해 자바스크립트 없이도 스타일을 분기처리 할 수 있다. 하지만 그게 안된다면 placeholder props가 input에 전달 안된 것은 아닌지 점검해보자
2024.11.16