컴퓨터언어(271)
-
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 -
pnpm 모노레포 구성하기
Next.js 15와 TypeScript를 사용하고, 패키지 매니저로 pnpm을 활용하여 모노레포를 구성해보자. 보통 이러한 설정은 여러 사이트를 포함하는 apps 폴더와 디자인 시스템 등을 담는 packages 폴더로 구성한다. 1. 프로젝트 초기화 및 pnpm 설치 먼저, 프로젝트 루트를 생성하고 pnpm을 설치한다.mkdir my-monorepocd my-monoreponpm install -g pnpmpnpm init 2. pnpm 워크스페이스 설정 루트에 pnpm-workspace.yaml 파일을 만들고, apps와 packages 폴더를 워크스페이스로 지정한다.packages: - 'apps/**' - 'packages/**' 3. 디렉토리 구조 설정 apps와 packages 폴더..
2024.11.13 -
자바스크립트변수 var! 값을 재사용하기 위해 저장해두는 메모리 공간 변수호이스팅?
변수 = 메모리 공간 자체 변수는 값이 아닙니다. 그 값을 담고 있는 공간입니다. 그리고 그 변수의 이름은 공간을 가리키는 주소입니다. 프로그램은 인간이 문제를 해결하는 과정을 컴퓨터로 고대로 옮겨놓은 것 뿐이야. 기계이기 때문에 더 빠르게 반복할 수 있고 천문학적인 숫자를 쉽게 다룰 수 있다는 장점이 있지! 하지만 컴퓨터는 사람의 두뇌 연산과 살짝 차이가 있어. 사람 컴퓨터 두뇌라는 하나의 시스템에서 연산과 기억을 모두 수행 (물론 뇌 안에서도 영역이 있다만 여기서 그것까지 다루지 말자) [연산을 위한 CPU]와 [기억을 위한 메모리]로 나뉨 프로그램이 동작하는 원리는 매우 단순해. 매번 발생하는 새로운 정보를 기존 정보와 융합하는 거야. 사람이랑 똑같지 않아? 우리도 원래 알던 거에 새로운 정보를 추..
2021.07.18