전체 글

리액트 강의를 들으며 어쩌다 보니 타입스크립트를 사용하게 된 경우라서 개념을 확실하게 하고 싶단 생각에 기초부터 다시 공부해보기로 했다. 타입스크립트 자바스크립트의 상위호환 언어로 타입 안정성을 보장해준다는 것이 가장 큰 장점이다. 따라서 런타임 에러를 방지할 수 있다. 코드에 타입을 명시하기 때문에 코드가 실행되기 전 에러를 발생시켜 사전에 제거할 수 있다. 타입스크립트로 코드 작성을 하면 컴파일 시 자바스크립트로 변환되고 브라우저는 변환된 자바스크립트 코드를 읽는 것이다. 타입스크립트는 타입을 굳이 명시하지 않아도 변수 선언 시 타입을 추론하기 때문에 한번 선언한 변수엔 다른 타입의 값을 할당할 수 없다. 타입스크립트의 타입 타입스크립트의 타입은 기본적으로 자바스크립트와 동일하다. 추가적인 몇개의 타..

노마드 코더 강의에 따라 넷플릭스 클론 코딩을 해보잣 페이지 이동 처리 - 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 ..

리액트에서 스타일을 입히는데 현재 가장 많이 쓰이는 기술은 styled components 이다. 우선 사용을 위해 설치를 해준다. npm i styled-components 스타일 컴포넌트 사용 전 우리가 흔히 사용하는 방법이다. function App() { return ( ); } 태그에 일일이 스타일 속성값을 넣어주거나 클래스명을 따로 부여하고 css파일에서 작업해야 한다. 같은 스타일을 입힌다고 했을 때 스타일 컴포넌트 사용하게 되면 아래와 같아진다. import styled from "styled-components"; const BoxOne = styled.div` background-color: tomato; width: 100px; height: 100px; `; function App(..

git add 시 다음과 같은 에러를 마주하였다. 발생에러 발생이유 윈도우의 줄바꿈 문자(CRLF)와 리눅스의 줄바꿈 문자(LF)가 다르기 때문에 발생한다. 깃은 리눅스 기반으로 처리하기 때문에 LF만 코드로 처리한다. 해결방법 줄바꿈 문자를 변환해주어야 한다. git config --global core.autocrlf true