전체 글

안녕하세요! JavaScript의 클로저(closure)에 대해 설명드리겠습니다. 클로저의 개념: 클로저는 JavaScript의 강력한 기능 중 하나로, 함수가 선언될 때의 렉시컬 환경(Lexical Environment)에 대한 참조를 유지하는 함수를 말합니다. 이를 통해 함수는 자신이 선언될 당시의 환경 밖에서 호출되더라도 그 환경에 접근할 수 있습니다. 클로저의 특징: 외부 함수의 변수 접근: 클로저를 통해 내부 함수는 외부 함수의 변수에 접근할 수 있습니다. 은닉화와 캡슐화: 외부에서 접근할 수 없는 private 변수를 만들 수 있습니다. 상태 유지: 함수가 호출될 때마다 새로운 환경이 생성되지 않고, 기존 환경을 유지할 수 있습니다. 클로저의 예시: function makeCounter() {..

라이브러리 같은거 쓰는데 걍 import 했더니 window is not defined 어쩌구 할 때 하라는대로 import 했는데 안될 때 window가 없다고 해서 client 컴포넌트에서 import 했더니 브라우저에서는 되는데 서버측 window is not ... 일 때 1번 해결책 : next/dynamic "use client" import dynamic from 'next/dynamic'; const 작명 = dynamic(() => import('위치'), {ssr: false}); // 아래쪽에서 // 이런식으로 쓰면됨 그래도 안될 때 2번 해결책 useEffect(() => { import('위치') .then((module) => { const 작명 = module().default..

tsconfig.json 프로젝트 폴더에 만들고, { "compilerOptions": { "target": "es5", "module": "commonjs", } } 어떤 버전으로 컴파일 할 건지 명시 잘모르겠으면 es5 commonjs 하면됨 { "compilerOptions": { "target": "es5", "module": "commonjs", "noImplicitAny": true, "strictNullChecks": true } } noImplicitAny : any 타입 에러띄워줌 strictNullChecks : undefined, null 조작하면 에러띄워줌 기타 다른옵션들 { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es20..

물론입니다! enum은 열거형(Enumeration) 타입으로, 타입스크립트에서 일련의 관련된 값들을 친숙한 이름으로 그룹화할 수 있게 해줍니다. 이를 통해 코드의 가독성과 유지 보수성을 향상시킬 수 있습니다. 타입스크립트의 enum은 몇 가지 중요한 특징을 가지고 있습니다. 기본 Enum 사용 기본적으로, enum은 0부터 시작하여 멤버들의 번호를 할당합니다. 멤버에 수동으로 값을 할당하지 않으면 자동으로 증가합니다. enum Color { Red, // 0 Green, // 1 Blue // 2 } let c: Color = Color.Green; 이 경우 Color.Green은 1입니다. 수동 값 할당 enum의 각 멤버에 수동으로 값을 할당할 수 있습니다. 값은 숫자일 수도 있고, 문자열일 수도 ..

안녕하세요! 타입스크립트에서 기본 문법을 이해하는 것은 중요한 단계입니다. 특히 기본 타입에 대한 이해는 타입스크립트의 핵심입니다. 여기 타입스크립트의 주요 기본 타입들에 대해 설명하겠습니다. 1. Boolean 불리언 타입은 true 또는 false 값을 가집니다. let isDone: boolean = false; 2. Number 타입스크립트에서 모든 숫자는 부동 소수점 값입니다. 타입스크립트는 ECMAScript 표준에 따라 16진수 및 10진수 리터럴 외에도, ECMAScript 2015부터 도입된 2진수 및 8진수를 지원합니다. let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: nu..

변수 만들 때 타입지정 const name : string = 'kim' 변수명 : 타입명 이렇게 씀 타입 지정해놓으면 앞으로 타입이 틀렸을 때 에러남 타입관련 버그들을 사전 예방 가능 const name : string[] = ['kim', 'park'] const age : { age : number } = { age : 18 } 어레이나 오브젝트는 이렇게 지정 가능 const name :string | number = 'kim'; 2가지 이상 타입 들어올 수 있다면 위처럼.. type nameType = string | number; let name :nameType = 'kim'; type 키워드를 통해 타입을 변수처럼 담아서 사용 가능 function beautifulFunction(x :num..

안녕하세요! 타입스크립트를 사용하기 위한 환경 설정은 중요한 단계입니다. 이 과정에서는 타입스크립트를 설치하고, 개발 환경을 구성하는 방법을 다룹니다. 1. Node.js 설치 타입스크립트를 사용하기 전에 Node.js가 설치되어 있어야 합니다. Node.js는 타입스크립트 컴파일러를 실행하는 데 필요한 런타임 환경을 제공합니다. Node.js 설치: Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치합니다. 2. 타입스크립트 설치 Node.js가 설치되면, NPM(Node Package Manager)을 사용하여 타입스크립트를 설치할 수 있습니다. 일반적으로 타입스크립트는 전역적(global) 또는 프로젝트별(local)로 설치할 수 있습니다. 전역 설치: 모든 프로젝트에서 타입스크립트를 ..

물론이죠! 타입스크립트(TypeScript)의 기초를 이해하는 것은 타입스크립트를 배우는 데 있어 매우 중요한 첫걸음입니다. 여기 타입스크립트의 기초적인 개념들을 설명하겠습니다. 타입스크립트란? 타입스크립트는 자바스크립트의 슈퍼셋: 타입스크립트는 자바스크립트에 타입 시스템을 추가한 것으로, 모든 자바스크립트 코드는 타입스크립트에서도 유효합니다. 즉, 타입스크립트는 자바스크립트의 모든 기능을 포함하며 추가적인 기능을 제공합니다. 정적 타입 검사: 타입스크립트의 핵심 기능 중 하나는 정적 타입 검사입니다. 이것은 코드가 실행되기 전에 타입 오류를 찾아내어 더 안정적이고 예측 가능한 코드를 작성할 수 있게 도와줍니다. 클래스 기반 객체 지향 프로그래밍 지원: 타입스크립트는 자바스크립트의 프로토타입 기반 상속보..

안녕하세요! 자바스크립트에 대한 기본 지식을 바탕으로 타입스크립트를 빠르게 배우고자 한다면, 다음과 같은 커리큘럼을 추천합니다: 타입스크립트 기초 이해: 타입스크립트가 무엇인지, 왜 사용되는지에 대한 개요. 자바스크립트와 타입스크립트의 주요 차이점. 환경 설정: 타입스크립트 설치 및 기본 설정. IDE(예: Visual Studio Code)에서 타입스크립트 사용 설정. 기본 문법 학습: 기본 타입: 문자열, 숫자, 불리언, 배열, 튜플, 열거형 등. 인터페이스와 타입 별칭의 이해 및 활용. 함수와 메소드에 타입 적용하기. 고급 타입스크립트 기능: 제네릭스 이해 및 사용. 유니언, 인터섹션 타입스, 타입 가드. 데코레이터, 믹스인. 실제 프로젝트 적용: 기존 자바스크립트 프로젝트에 타입스크립트 도입하기...

link 사용시 주의점 1. import 할 것 import Link from 'next/link' export default function Page() { return Dashboard } 2. 뒤로가기 안되게 하고 싶으면(history에 안쌓음) replace 추가 import Link from 'next/link' export default function Page() { return ( Dashboard ) } 3. scroll 기억하고 싶으면 scroll={false} 추가: 기본값(true)은 최상단으로 올라감 import Link from 'next/link' export default function Page() { return ( Dashboard ) } 4. 뷰포트에 보이는 요소중 L..