나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/타입스크립트

타입스크립트로 스택(Stack) 기능을 구현해봤습니다. 스택은 LIFO로 Last In First Out, 마지막으로 들어온 데이터가 처음으로 나가는 구조입니다. // 스택 추상화 인터페이스 interface Stack { readonly size: number; push(value: string): void; pop(): void; search(num: number): string; } // 추가될 노드 타입 생성 type StackNode = { value: string; next?: StackNode; } // 스택 클래스 class StackImpl implements Stack { private _size: number = 0; // _size 값을 외부에서 접근하지 못하게 묶습니다. priva..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트에서 새로운 타입을 정해줄 수 있는 interface와 Type Alias(타입별칭) 에 대해 공부했습니다. 1. interface // interface interface Snacks { readonly name: string; // readonly는 해당 값이 할당된 후에 수정이 안되도록 합니다. price: number; sale?: boolean; // '?' 선택속성 (있을수도 없을수도 있습니다) } const snack1: Snacks = { name: 'Shrimp crackers', price: 1000 }; const snack2: Snacks = { name: 'Pocachip', price: 1500, sale: true }; interface로 Snacks 라는 과자 타입..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 타입 추론과 타입 단언에 대해 공부했습니다. inference : 타입 추론으로서 타입을 따로 지정해주지 않아도 타입스크립트에서 똑똑하게 타입을 추론해줍니다. // Type Inference // 타입을 명시하지 않아도 처음 생성시 문자열로 생성이 되어 string으로 타입 추론이 됩니다. let string = 'We are the world!'; string = 100 // 문자열 타입에 숫자를 할당하여 오류가 발생합니다. // 함수의 인자도 마찬가지로 기본값 매개변수가 숫자라면 숫자로 선언됩니다. function write(number = 1000) { return number; // 1000 } write('number'); // 숫자가 아닌 문자열을 넣으면 오류가 발생합니다. ass..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 Intersection Type에 대해 공부했습니다. 유니온 타입은 여러개의 값중에 하나를 선택하여 사용하는 것이었다면 인터섹션 타입은 반대로 하나를 선택하는것이 아닌 모든 값을 다 합치는 타입입니다. // Intersection Types // 상품이라는 타입을 지정해줍니다. type Item = { name: string; description: string; }; // 가격이라는 타입을 지정해줍니다. type Price = { price: number }; // shopping이라는 함수에는 Item 타입과 Price 타입이 같이 들어가야 합니다. function shopping(product: Item & Price) { console.log(product.name, product.d..

2021. 3. 4.

코딩 기록/타입스크립트

타입스크립트 유니온 타입에 대해 공부했습니다. 하나의 타입에 여러개의 값을 지정해줄 수 있습니다. 선언할 때, 발생하는 케이스중에서 하나를 선택하면 됩니다. // Union Type type Rating = 'string | number'; // string과 number를 같이 타입으로 지정해줍니다. const first: Rating = 1; function ratingPrint(rating: Rating) { console.log(rating); }; ratingPrint(1); // 1 ratingPrint(일등); // '일등' 기본 예시입니다. 이렇게 하나의 타입에 여러개의 타입이나 값을 지정해줄 수 있습니다. 문자열 그 자체를 선언해줄수도 있어 만약 다른 문자열이 들어가게되면 오류가 발생합니..

2021. 3. 4.

코딩 기록/기타

더보기 [ 2023.01.27 내용추가 ] → 저는 현재는 Setting Sync를 사용하지 않고 vscode에 github 계정을 로그인하여 vscode 자체 기능인 [확장 및 설정 동기화]를 이용하고 있습니다. 이유는 다른 컴퓨터에서 적용하고 할때 Setting Sync를 사용하면 가끔 오류가 나서 다시 지정해주는 경우도 있고, vscode 자체에 로그인 기능이 생긴 뒤로 자체 동기화가 잘 이루어지기에 굳이 Setting Sync를 사용할 필요성을 못느끼고 있습니다. :) VSCode를 사용하면 settings.json 설정 파일에 이것저것 추가하게 됩니다. 해당 파일의 내용들을 저장하고 다른 컴퓨터에서도 똑같이 불러와서 사용할 수 있는 Settings Sync 확장 익스텐션을 알아보겠습니다. 설정저..

2021. 2. 20.

코딩 기록/기타

작업을 하다보면 VSCode 에서 다른 코드를 찾아보거나 다른 작업을 같이 하는 경우에 에디터가 여러개 켜놓는 경우가 있습니다. 그 때, 파일끼리 헷갈리는 상황이 생기는 경우가 있어서 작업들마다 해당하는 프로젝트의 메인 컬러로 상단 타이틀바의 색상을 바꿔놓으면 프로젝트들을 구분하기가 쉬워집니다. 방법은 간단합니다. vscode 설정에서 settings.json을 보시면 사용자부분과 작업 영역부분을 설정해줄 수 있습니다. 보통은 사용자 부분에는 각자 개발자 본인들만의 사용자 설정이 있고 타이틀바의 색은 공통이 아닌 프로젝트마다 다르게 해줄 것이기 때문에 작업 영역 부분에서 코드를 추가해주시면 됩니다. { "workbench.colorCustomizations": { // 상단 타이틀바 글자색 "titleB..

2021. 2. 20.

코딩 기록/리액트

리액트를 이용하여 웹페이지를 구현하는데 빠르게 아이콘을 사용하고 싶을때 react-icons를 사용할 수 있습니다. react-icons.github.io/react-icons/ React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io 사용방법을 알..

2021. 2. 20.

코딩 기록/Next.js

Next.js 에서 _app.js 를 이용하여 공통 레이아웃을 사용해보겠습니다. 저는 타입스크립트를 사용하는 프로젝트를 만들었기 때문에 _app.js가 아닌 _app.tsx파일입니다. 우선 Components 폴더에 공통적으로 사용할 레이아웃 컴포넌트인 AppLayout.tsx 파일을 만들어줍니다. import React from 'react'; import Header from './header'; type AppLayoutProps = { children: React.ReactNode; }; function AppLayout({ children }: AppLayoutProps) { return ( ); } export default App; 이렇게 App 컴포넌트에서 공통적으로 meta와 title을..

2021. 2. 19.