끄적끄적 메모장

회사에서 새로운 프로젝트를 맡으면서 새로운 프레임워크로 개발을 하게 되었다. Next.js 라는 React 라이브러리 프레임워크인데 이걸 왜 사용해야 하는지 어떻게 사용해야 하는지에 대해서 공부를 해보자 ! Next.js란? React 라이브러리의 프레임 워크이다. 기본적으로 React는 CSR(Client-Side Renderting)를 사용하고 있습니다. Next.js는 SEO(Search Engine Optimization)를 위한 SSR(Server-Side Rendering)를 사용하고 있습니다. CSR같은 경우 모든 JS 파일을 로드하고 사용자는 웹을 보게 됩니다. 이때까지 사용자는 많은 시간을 대기해야합니다. 이를 SEO에서는 서버에서 JS파일을 로딩함으로써 클라이어트 측에서는 JS파일을 로..

타입스크립트로 처음으로 프로젝트를 시작할때 tsconfig.json파일을 생성하여 기본 세팅을 해줘야 한다. tsconfig.json파일에 들어가는 요소들에 대해서 알아보자 { "include": ["src"], "compilerOptions": { "outDir": "build", "target": "ES6", "lib": ["ES6", "DOM"], "esModuleInterop": true, "strict": true, "allowJs": true, "skipLibCheck": true } } ● include : [ src ] 타입스크립트가 src의 모든 파일을 확인한다는 것을 의미한다. ● outDir 자바스크립트 파일이 생성될 디렉터리를 지정해 준다. ● target 어떤 버전의 자바스크립트로..

생성자는 클래스 초기화를 위하여 특별한 코드 블록을 가질 수 있습니다. 즉, 생성자는 클래스가 new 표현식에 의해 인스턴스화되어 객체를 생성할 때 객체의 레퍼런스를 생성하기 전에 객체의 초기화를 위해 사용되는 코드의 블록입니다. 따라서 생성자는 자바 클래스의 멤버가 아니며, 멤버가 아니므로 상속되지 않는다. 따라서, 오버라이딩의 대상이 될 수 없으며, 일반적인 메소드 호출방법으로 호출할 수 없습니다. 또한, 클래스의 상속솬계에서 초기화를 수행할 수 있도록 부모 클래스의 생성자를 호출하는 특징이 있다.

타임스크립트에서는 Interface가 있다. 아래의 예시 언어를 봐보자 type Player = { name: string; team: Team; health: Health; }; interface Player { name: string; team: Team; health: Health; } 위 코드처럼 type Player 와 interface Player 는 둘 다 타입스크립트에게 오브젝트의 모양에 대해서 설명하고 있습니다. 단, interface는 오브젝트의 모양을 설명할 때만 사용할 수 있습니다. 또한 Interface와 type은 상속할때 쓰는 방식이 다릅니다. 먼저 type은 상속할때 아래와 같은 문법을 활용하며 type User = { name: string; }; type Player = ..

TypeScript에서 접근 제한자가 있습니다. 접근제한자란? 말 그대로 접근을 제한하기 위해 사용됩니다. 클래스 및 인터페이스 등에 대한 접근을 통제하는 역할을 합니다. 접근 제한자는 Public, Private, Protected와 같이 세 가지 종류가 있습니다. 접근제한자 public protected private 클래스 내부 O O O 자식 클래스 내부 O O X 클래그 인스턴스 O X X 먼저 Private를 활용한 예시를 보자 class MyClass { private privateVariable: number = 10; private privateMethod(): void { console.log('This is a private method.'); } } 위 코드와 같이 private키워..

JavaScript는 Java에 비해서 객체지향을 지원을 하지 않으며 추상클래스와 추상메소드를 문법적으로 지원하지 않지만, JavaScript의 기본 문법을 활용하여 유사한 추상클래스와 추상메소드 동작을 구현하는 방법을 알아보자. 먼저 개념에 대해서 공부해보자. 추상메소드란? 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 말합니다. 그러므로 추상 메소드는 구현부가 없고, 선언부만이 존재합니다. 자바에서 추상 메소드를 추상 클래스란? 추상 메소드를 하나 이상 포함한 클래스이며, 정의되지 않은 추상 메소드를 포함하고 있으므로, 인스턴스를 생성할 수 없습니다. 그러므로 추상 클래스는 상속만 가능합니다. class AbstractClass { abstractMetho..

다음으로 좀더 간단하게 표현할 수 있는 TypePlaceholder에 대해서 알아보자. 코드로 가기전 Concrete 타입과 Generic 타입에 대해서 알아보도록 하자, Concrete 타입이란? 1) number, boolean, string, void, unknown 같은 많이 사용하였던 타입들을 말합니다. Generic 타입이란? 1) Generic 이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 2) 정적 type언어는 클래스나 함수를 정의할 때 type을 선언해야 합니다. 3) Generic은 코드를 작성할 때가 아니라 코드를 수행될 때 (런타임) 타입을 명시합니다. 4) 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시합니다. (일반적으로 T, U, V ...를..

함수에 대해서 알아보도록 하자. function add(a: number, b: number):number { return a + b; } 위 코드와 같이 add의 함수가 있습니다. 이 함수를 좀 더 간단하게 줄일 수 있습니다. ※ return 값의 타입인 number 은 생략이 가능합니다. const add = (a: number, b: number) => a + b; 위 코드와 같이 함수(=>)를 활용하여 좀 더 간단하게 함수를 줄일 수 있습니다. 만약 number 같이 중복되는 함수들이 많아진다면 number를 굳이 쓰지 않고 생략하는 방법은 없을까요? type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 위 코..