React 설치 이 글에서는 무작정 리액트를 시작하는 법을 포스팅 하겠다. 윈도우라면 cmd창을, 맥이라면 터미널 앱을 연다 아래와 같이 설치를 진행한다. npm install -g create-react-app create-react-app my-app cd my-app npm start create-react-app 은 리엑트 프로젝를 만들기 위해 따로 설정해야할 기본 세팅을 자동으로 해주는 세트아이템 정도로 생각하면 된다. 프로그래밍을 배우기 위해 컴퓨터를 사는데 메인보드, 그래픽카드, 램 등을 따로 사서 조립해도 되지만 편리함을 위해 조립 PC를 살 수도 있다. create-react-app는 리액트를 하기위해 필요한 여러 라이브러리를 편리하게 세팅해주는 조립PC라고 생각하자. npm start를..

TypeScript를 사용하여 Stack을 구현해 보겠다. 배열(Array) 타입을 쓰면 너무 쉬우니 배열을 쓰지 않고 해보자. Stack(이하 스택)이 무엇인지는 위키에 잘 나와있다. 스택 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 스택(stack)은 제한적으로 접근할 수 있는 나열 구조이다. 그 접근 방법은 언제나 목록의 끝에서만 일어난다. 끝먼저내기 목록(Pushdown list)이라고도 한다. 스택은 ko.wikipedia.org 기본 설계 일단 스택이라는 클레스에는 많은 것이 필요할 수 있겠지만 기본적으로 3가지가 필요하다 size //지금 스택에 얼마나 많은 value들이 있는지 알려주는 변수 push(string):void // string 값 하나를 스택에 넣는 ..

개요 Node js는 프론트에서 끄적이던 자바스크립트를 서버단으로 가져와 훌륭한 백엔드를 구성할 수 있도록 도와준 고마운 아이였다. 하지만 인간은 그것으로 끝나지 않고 끊임없이 Node js의 불편한 점들을 개선할 프레임워크들을 만들어 왔다. 그래서 Node js 계열에도 몇가지 웹 프레임워크가 생겨났다. 그 중 대가리를 뽑으라면 역시 Express 일 것이다. 하지만 Express도 프레임워크단에서 지원해 주는 기능이 매우 협소했다. 편리함을 추구하는 닝겐들에겐 그 next를 원하게 했다. 그래서 등장한 아이가 Nest JS 이다. NestJS는 NodeJS 프레임워크인 Express나 Fastify 위에 올라타 해당 프레임워크의 기능도 쓸 수 있으면서 나름의 체계를 가지고 독자적인 프레임워크 규칙들을..

개요 별점을 주는 기능은 매우 흔하게 쓰이는 컴포넌트지만 구현하기는 꽤 까다로운 기능이다. 마우스를 별에 가져가면 별점이 자동으로 올라가게 만들거나, 클릭을 통해 별점을 지정하는 등 다양하게 만들 수 있다. React에는 react-star-rating-component react-star-rating-component React component for star (or any other icon based) ratings www.npmjs.com 위와 같은 라이브러리가 있다. 하지만 Typescript를 지원하지 않아서 React + Typescript 프로젝트를 진행하거나 간단한 구현을 원한다면 이 포스팅을 참고 하시길 바란다. Html 요소 별점을 나타내는 html 요소에는 많은 방법이 있다. 실제..