이번 글에서는 타입스크립트에 유사한 타입 별칭과 인터페이스에 대해 알아보고 그 둘의 차이점에 대해 알아보자. 타입 별칭 (Type Alias) 타입 별칭은 새로운 타입을 생성한다는 개념이라기 보다는 정의한 타입에 대해 쉽게 참고할 수 있도록 이름을 부여한 것이다. 타입 별칭은 type 키워드를 사용하여 선언할 수 있다. type Person...

Vue에서 상태관리에 필수적인 store에 대해 알아보자. store와 vuex store는 애플리케이션 전역에서 접근 가능한 중앙 집중식 데이터 저장소이다. 한마디로 API를 통해 받은 데이터와 컴포넌트를 제어하는 값들을 한 곳에서 관리하려고 만든 구조이다. store는 데이터의 흐름을 단방향으로 제어한다. vuex는 vue의 상태관리 라이...

프로젝트 파일 들어가서 npm init 실행하면 package.json 파일 생성 npm react react-dom npm i -D webpack webpack-cli npm i -D babel-loader @babel/core npm i -D @babel/preset-env npm i -D @babel/preset-react...

해시테이블 (Hash Table) 자료 구조의 종류 중 하나로 key와 value를 가지는 자료구조 형태이다. 배열은 key값에 숫자만 가능하지만, hash table에서는 문자열 또한 key값이 가능하다. hash function을 통해 빠른 탐색O(1)이 가능하다. 해시 함수 (Hash function) key와 연결되어 있는 valu...

카카오톡에서는 다양한 기능의 sdk를 제공한다. 이번 포스팅에서는 그 중에서 카카오톡 공유하기 sdk를 nuxt 환경에서 어떻게 사용할 수 있는 지 순서대로 알아보자! 참고로 나는 nuxt2 + composition API + typescript 환경에서 진행했다. 1. 애플리케이션 등록 먼저 카카오톡 sdk 를 사용하기 위해서는 카카오톡 개발자...

react + typescript를 사용해서 props를 전달하면 다음과 같은 에러메시지가 뜬다. 아래에 나와있듯이 props: any 를 사용하면 문제가 해결된다. 그치만 타입스크립트에서 any는 가급적 안쓰는 것이 좋기 때문에 interface를 사용해 props의 타입을 지정해주어 해당 타입 에러를 없애보자! props를 전달 받을 자식 ...

리액트 프로젝트를 시작하기위해 git repository를 clone하고 npm run start 명령어를 입력했더니 다음과 같은 에러가 발생했다. 별다른 에러에 대한 설명이 없어서 잠시 당황했지만 npm install을 하지 않앗다는 걸 깨달았다. 프로젝트 시작 전에 매번 하는 일인데도 가끔 까먹는다 🥲

Semantic Tag? html에는 Semantic Tag라는 것이 존재한다. w3schools.com에서Semantic Tag 는 다음과 같이 정의한다. 💡 What are Semantic Elements? 시멘틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다. non-semantic 요소들의 예: <div> 와...

타입스크립트 시작하기 - static 웹페이지 프레임워크를 사용하지 않고 그냥 static 웹페이지 개발시에 타입스크립트 사용하는 방법에 대해 알아보자. node.js 설치 npm install -g typescript 로 타입스크립트 설치 프로젝트 생성 프로젝트에 tsconfig.json 파일 추가한 후 아래 내용 추가 {...

1. Blog App 만들기 1-1. 중요한 변수를 담을때는 useState() 블로그에는 포스팅되는 글들은 제목, 내용과 같이 중요한 데이터를 담고있다. 중요한 데이터들은 React Hook중 하나인 useState()를 사용해 데이터를 저장하는 것이 좋다. 그렇다면 중요한 변수의 기준이 뭘까? 값이 변경되자마자 html에 반영되어야...