![]()
타입스크립트를 사용해서 블록체인의 기술을 간단히 구현해 볼 것이다. 프로젝트 설정하기 create-react-app과 같은 도구 없이 처음부터 프로젝트 세팅을 직접 할 것이다. 우선 프로젝트 디렉토리를 생성한다. mkdir typechain npm은 node.js로 만들어진 모듈을 쉽게 설치하고 관리하게 해주는 패키지 매니저이다. node.js와 함께 설치된다. npm init 명령어를 실행하면 package.json파일이 생성되면서 패키지를 초기화시켜준다. npm init -y 타입스크립트를 설치한다. D 옵션을 통하여 dependencies에 추가할 수 있다. npm i -D typescript 타입스크립트를 사용한다는 것을 알리기 위해 tsconfig.json 파일을 만든다. 이것은 타입스크립트의 ..
클래스 추상 클래스는 다른 클래스가 상속 받을 수 잇는 클래스다. 인스턴스를 직접 만들 수는 없다. 상속받는 클래스의 타입을 알려주는 것이라고 생각하면 된다. 추상 메소드는 메소드를 클래스 안에서 구현하지 않는 것이다. 상속받는 클래스가 구현한다. 구분 선언한 클래스 내 상속받은 클래스 내 인스턴스 private ⭕ ❌ ❌ protected ⭕ ⭕ ❌ public ⭕ ⭕ ⭕ static 함수 별도의 인스턴스 생성 없이 바로 사용이 가능한 클래스 내부의 함수 인터페이스 인터페이스는 속성 타입을 특정할 수 있게 해준다. type과의 차이점 둘 다 추상클래스를 대체하여 상속 가능하다. 오브젝트의 모양을 알려준다. 인터페이스는 활용되는 범위가 type보다 작다. type은 객체 속성 타입을 특정하는 것뿐만 아니..
![]()
Call signiture Call signiture은 코드에 마우스를 올리면 나오는 타입 정보이다. type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 함수를 만들기 전 직접 call signiture를 만들어서 type를 미리 선언한 후 Overloading 하나의 함수가 여러개의 call signiture를 가지고 있을 때 발생한다. 동일한 이름의 함수에서 파라미터만 달라지고 비슷한 로직이 반복될 때 사용된다. 함수 내에서 파라미터의 타입에 맞게 각각 구현한다. 파라미터의 개수가 같을 때 type Add = { (a: number, b: number): number; (a: number, b: string): ..
리액트 강의를 들으며 어쩌다 보니 타입스크립트를 사용하게 된 경우라서 개념을 확실하게 하고 싶단 생각에 기초부터 다시 공부해보기로 했다. 타입스크립트 자바스크립트의 상위호환 언어로 타입 안정성을 보장해준다는 것이 가장 큰 장점이다. 따라서 런타임 에러를 방지할 수 있다. 코드에 타입을 명시하기 때문에 코드가 실행되기 전 에러를 발생시켜 사전에 제거할 수 있다. 타입스크립트로 코드 작성을 하면 컴파일 시 자바스크립트로 변환되고 브라우저는 변환된 자바스크립트 코드를 읽는 것이다. 타입스크립트는 타입을 굳이 명시하지 않아도 변수 선언 시 타입을 추론하기 때문에 한번 선언한 변수엔 다른 타입의 값을 할당할 수 없다. 타입스크립트의 타입 타입스크립트의 타입은 기본적으로 자바스크립트와 동일하다. 추가적인 몇개의 타..
![]()
노마드 코더 강의에 따라 넷플릭스 클론 코딩을 해보잣 페이지 이동 처리 - react-router-dom v6 사용 ; Header ( 헤더 ) styled component로 헤더 구성 기본적인 헤더 디자인을 만들었다. 추후 애니메이션 처리를 위해 로고는 svg 태그로 만들었다. 애니메이션 처리를 하고 싶은 컴포넌트는 모션 컴포넌트로 생성해줘야 한다. 애니메이션 효과 - 로고 색상 변경하기 1. variants를 생성한다. 2. 컴포넌트 props에 생성한 variants를 담는다. 3. 각 속성을 지정한다. 애니메이션 효과 - 메뉴 선택 강조 1. 강조 표시를 주는 Circle 스타일 컴포넌트를 각 메뉴에 추가한다. Home Tv Shows ; 2. react-router-dom의 Link를 사용하여..
![]()
Frame motion 리액트용 모션 라이브러리이다. https://www.framer.com/motion/ Documentation | Framer for Developers An open source, production-ready motion library for React on the web. www.framer.com Frame motion 설치 우선 framer-motion을 설치한다. npm i framer-motion 라이브러리를 가져온다. import { motion } from "framer-motion" 애니메이션 효과를 주고 싶은 태그의 앞에 motion 키워드를 붙여서 motion 컴포넌트를 만들어 준다. 만약 Frame motion을 사용하여 스타일 컴포넌트 만들고 싶다면 확장된..
![]()
앞서 만든 todo 리스트를 기반으로 이번에는 칸반보드 형식으로 만들어 볼 것이다. 드래그 앤 드롭 : react-beautiful-dnd 라이브러리 사용 드래그 앤 드롭을 구현하기 위해 라이브러리를 설치한다. npm i react-beautiful-dnd DragDropContext 드래그 앤 드롭을 가능하게 하고 싶은 앱의 한 부분이다. onDragEnd를 필수 프로퍼티로 갖는다. Droppable / Draggable 각각 드롭/ 드래그 할 수 있는 영역이다. 고유성을 가지기 위해 id를 갖는다. 자식 컴포넌트는 무조건 함수타입이여야 한다. 기본 구조는 다음과 같다. {(provided) => ( {(provided) => First} {(provided) => Second} )} 싱글보드 만들기 ..
![]()
간단한 ToDo리스트를 만들어 볼 것이다. ToDo form 생성 : React Hook Form 라이브러리 사용 form을 관리하고 유효성 검사를 하는데 성능이 뛰어나기 때문에 많이 사용되는 라이브러리이다. 리액트만 사용하는 것보다 훨씬 편하다. 우선 react hook form을 설치한다. npm i react-hook-form const { register, watch, handleSubmit, formState } = useForm({defaultValues:{email:"@naver.com"}}); 이 훅은 register watch handleSubmit formState setError setValue 등 다양한 함수를 제공한다. register함수 console.log(register("t..
![]()
Recoil은 state를 관리할 수 있는 리액트의 라이브러리이다. 다크모드나 로그인 여부같은 데이터는 어플 전체에서 공유되어야 하는 global state다. Recoil을 사용하지 않고 이 state에 접근하려면 상위 컴포넌트에서 하위 컴포넌트로 props로 state를 보내줘야 한다. 만약 가장 하위 컴포넌트에서 state를 바꿀 일이 생기면 불필요하게 모든 컴포넌트를 거쳐야 하기 때문에 비효율적이다. Recoil을 사용하게 되면 state를 객체화시켜 atom함수에 담아 어떤 컴포넌트에서나 바로 state를 읽고 쓰게 할 수 있다. Recoil 초기 설정 1. Recoil을 설치한다. npm i recoil 2. index를 RecoilRoot로 감싼다. ReactDOM.render( , docu..
![]()
※ 노마드 코더 "React JS 마스터클래스" 기반 프로젝트 기본 Setup 1. react-query 설치 ( react-query를 사용하면 데이터 fetching을 쉽게 할 수가 있다. 2. react-router-dom 설치 3. styled-components 설치 2. 각 route 생성 ( 각 코인 정보를 보여주는 Coin 과 코인 리스트를 보여주는 Coins) 공통 스타일 적용 : createGlobalStyle 사용 모든 컴포넌트에 기본적으로 적용되어야 하는 공통 스타일이 있다. 이는 createGlobalStyle이라는 스타일 컴포넌트를 통해 해결할 수 있다. 이 컴포넌트는 렌더링 될 때 전역 스코프에 스타일을 올려준다. import { createGlobalStyle } from "..
TS는 JS에서 새로운 기능만 더해진 언어라고 생각하면 된다. TS는 작동하기 전에 데이터타입을 확인하는 기능을 가진다. 변수를 사용할 때 어떤 데이터 타입인지 명시해줘야하고 해당 데이터 타입이 아닐 경우에는 바로 오류를 발생시킨다. const plus = (a:number, b:number) => a + b; 브라우저는 TS를 이해하지 못 하지만 컴파일 후 JS로 변환되기 때문에 문제없이 사용할 수 있다. TS를 기존 JS 기반의 프로젝트에 설치하려면 이것저것 재설정 해주어야 하기 때문에 그냥 새롭게 리액트 앱을 생성했다..ㅎㅎ npx create-react-app --template typescript 그리고 스타일 컴포넌트를 사용하기 위해서 몇가지를 더 설치해주었다. npm i --save-dev ..
