ReactJS_MasterClass

노마드코더 React.js 마스터 클래스React.js 초급 코스를 먼저 들었는가 ? okstate, useEffect, props, state, create react app 등등 숙지필요html css 수업을 들었는가?javaScript 수업을 들었는가?이 수업은

dark mode, light mode같은 것들을 매우 쉽게 변경가능하여 생산성 향상에 도움을 준다.대부분의 대기업이 이용하고 있다.깃헙, 구글, 라이엇 게임 등등..styled components는 이해하기 쉽고 사용하기 편리하다. 아주 편리한 녀석이다.일단 얼마나

컴포넌트 설정 변경과 컴포넌트 확장 방법에 대해 알아보자여기서 background-color 를 변경 가능한 속성으로 지정하고 싶다.즉, 컴포넌트에서 color 를 결정하고 싶지 않다는 것이다.props를 사용할 것이다.즉 컴포넌트에 데이터를 보내는 방법이다. 원하는

컴포넌트의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을때button 태그로 설정되어 있지만, Link 태그로도 사용하고 싶을 때.즉 Link태그로 바꾸고 싶으면 어떻게 해야할까?as 라는 props를 보내면 된다.확인해보면a 라는 태그로 감싸지게 된다.그저 태그 부

styled component 에서의 animation을 배워보자.styled component 안에서 animaion을 주는 방법은 helper function을 import 해주는 것이다.const animation을 만든다이제 animationd을 적용하는 것이다

styled component 안의 element를 선택하는 방법2span을 위와같은 식으로 Emoji 라는 컴포넌트 이름으로 지정하여 hover 속성을 적용시킨다.hover 되면Emoji가 커진다.

styled component 사용 방법const 컴포넌트명 = styled.태그명\`\`;구현 방식return <컴포넌트명 />props 전달방법속성 : ${(props) => props.지정이름};<컴포넌트명 지정이름="원하는 props">style 확장

다크모드를 사용하기 위한 절반인 theme을 배워보자.component의 색을 일일히 변경하는 것이 아니라 원하는 것으로 바뀌게 해준다.theme을 실행하기 위해선 index로 가줘야 한다.import 시켜주고 theme provider로 감싸줘야 한다.일단 초기 세팅

TypeScript의 능력, ReactJS의 능력, Styled-Component를 짬뽕하는 시간이다.더 생산적이고 실수가 없는 개발자가 되기 위함이다.TypeScript란 javaScript를 기반으로 한 언어이다.JavaScript 와 문법은 같지만 새롭게 추가된

creare-react-app 을 이용해서 새로운 react app 을 만들기뒤에 typescript만 추가된 것이다.https://create-react-app.dev/docs/adding-typescript/터미널에 입력한다npm install --save

TypeScript에게 무엇인지 설명해주는 시간이다.object 에게 type을 설명해주는 시간이 필요하다.interface 안에 설명해준다.그 후 bhColor 의 타입이 CircleProps 즉, string 이라는 것을 써주면 된다.App 에서 Circle com

앞서 배웠던 친구는 반드시 props가 팔요했다. 하지만 선택적으로 바꾸려면?있을 수도 있고 없을 수도 있다는 의미이다.CircleCircleProps 에서 borderColor에 ?를 붙여서 undefined 될 수 있음을 명시한다.하지만 ContainerProps에

Component를 업데이트 하고 싶다면 state를 바꿔야 한다는 것을 알고 있다.state를 바꾸면 React가 새로고침 하는 것도 알고 있다.counter를 만든다고 가정해보자.useState에서 이용하는 값이 string 일 수도 number 일 수 도 있다고

리액트와 타입스크립트로 form 구현해보기이는 평범한 React, JS 코드이다. 다른 점은 오직event : React.FormEvent 로 타입을 지정해 준 것 뿐이다.

Themes 타입스크립트와 styled components 테마를 연결하기 Create declare file 확장자는 d.ts 파일이다. style.d.ts 파일을 만들어야 한다. 테마에 사용할 타입들을 넣어 놓을 파일이다. 먼저 default를 만들 것이다.

자바스크립트는 코드 실행 전 타입에 대한 정의가 존재하지 않는다. 따라서 타입스크리트로 언어 자체에 그 값들이 어떤 것인지 코드가 실행되기 전에 검사하여 실수를 수정할때까지 기다린다.타입스크립트는 자바스크립트와 완전히 같아 보이지만, 자바스크립트의 확장판으로서 콜론을

coinpaprika 라는 api를 제공하는 사이트를 통해 복습해보자암호화폐에 관한 정보를 전달받을 것이다,React Query를 사용하면 편리하지만, 스스로 데이터를 fetch해야 한다. 스스로 해낸 후 왜 리액트 쿼리가 만들어 졌고, 어떻게 도울 수 있는지 알아야

설정된 List 나 padding 을 다 0으로 설정하고 싶다.Reset.CSS가 필요하다.방법은 2가지가 있다.이것을 설치하거나전체 컴포넌트에 기본값 재 설정을 편리하기 위해styled-component에이런 것이 존재하는데, createGlobalStyle이란 한

hover 되면 색상 변경됨클릭하면 link통해 다른 페이지로 이동됨

API로부터 데이터를 fetch 해오기그 전에 typescript에게 우리의 데이터가 어떻게 생겼는지 알려주기 위한 과정이 필요하다.따라서 해당 정보를 바탕으로 interface를 만드는 과정이 필요하다.현재 Coins를 수정해서 fetch를 통해 API를 받아오고

Route States 암호화폐 아이콘을 가져오는 API를 추가로 사용하자. API URL 뒤에다가 그냥 원하는 코인의 symbol을 써주면 된다.

비트코인Detail 화면에 뿌려줄 데이터를 가져올 것이다.코인의 정보와 가격을 가져올 것이다현재 parameter에 존재하는 coinId를 이용할 것이다.useEffect를 이용해 코드가 한번만 실행되게 할 것이다.API를 가져오고 이후 React Query로 더 간단

필요한 데이터를 다 받아 왔으니 Screen Paint 하기Nested router는 route 안에 있는 또 다른 route 이다.nested route는 tab을 이용할 때 많은 도움을 준다.price 나 chart 탭을 선택하면 네이게이션 바 처럼 state나 U

Router 안에 Router 를 통해Total Suply 까지는 리 렌더링 되지 않고아래 Chart나 Price 를 누름에 따라 그 아래 부분만 리렌더링 된다.정말 멋지지chart 나 Price를 누름에 따라 URL이 바뀌고 아래 H1이 바뀐다.이제 tabs Comp

react query 사용법을 배우고 데이터를 시각해 해보자.리액트 쿼리에서는 감사하게도이 모든 것을 지워도 된다.react query 사용에 앞서서npm install react-query를 해주어야 한다.그리고 한줄짜리 코드인 query Client를 만들어야 한다

ReactQuery Part Two useQeury 훅으로 fetcher()를 이용해 state와 fetch 함수를 대신한다는 것을 알 수 있었다. 인자로 isLoading 과 data를 넣었는데 전자는 fetcher가 끝났는지 확인하는 것이고, data는 json파

react-query가 멋진 이유기본적으로 fetcher함수를 만들 수 있게 해주기 때문에fetcher 함수와 연결되어 isLoading과 같은 함수가 불렸는지 아닌지 알려준다그리고 함수가 끝났을 때는 결과 값을 넣어주어 data에 쉽게 접근가능하다강력한 캐싱 매커니즘

API에서 받아온 data 시각화 하기APEXCHAR란 자바스크립트 chart library 이다.다양한 차트가 있다.사용하기 위해선 명령어를 실행시켜야 한다.intergrations 에서 react 꺼로 들어가서 npm install 한다.npm install --s

Price Chart part Three apexcart options 이용해 디자인 보완 Chart.tsx

자료 실시간 업뎃react-helmet 은 무엇을 렌더 하든 그게 문서의 head로 가도록 한다.그 전에 typescript가 react-helmet의 type이 무엇인지 모르므로 알려준다.사용하면head를 바꿀 수 있다.

PriceChart

Recoil 전에 state management가 무엇인지 알아보자.라이트 모드와 다크모드를 바꾸는 스위치를 만들 것이다. Recoil 없이..그러면 얼마나 도움되는지 알 수 있겠지 ㅋㅋ!!직접 경험한다면 해결법을 더 잘 알 수 있다.왜 state management가

function 을 coins로 보내어 차트에서도 light 모드 dark 모드가 적용된 차트를 보이도록 하자.Router 가 function을 받고 싶다면 ,tsx 이므로 명시해야 한다.return을 아무것도 하지 않으므로 ()=> void가 타입이다.toggleDa

App component에서 보내는 것 대신Bubble에서 component들에게 필요한 것을 주는 것이다.그리고 이 Bubble 은 Atom 이라고 부른다 !!직접 연결하는 것이다, 특정 component에 종속되지 않는다.대략이렇게 동작한다.오직 value가 필요한

app에서도 chart에서도 atom의 값을 받아올 수 있다header 에서 atom값을 받아서 수정할 수 있다.매개변수로 atom을 받고 atom을 변경하는 함수이다.react의 setState와 같게 동작한다.이전 값을 바꿔주도록 하였다.아주 멋진 방법이다. 나의

만약 form을 제출해야 할 것이 많다면,,,input을 많이 만들어야 할 것이다email, name, password 등등..아마 이 cosnt toDo, setToDo 를 많이 만들어야 할 것이다.각각을 위해서..하지만 이걸 더 나아지게 할 수 있다. 리액트가 fo

니코가 이게 짱이라고 한다그리고 거기서 끝나지 않고많은 input이 있을 때, 그리고 form validation(검증)이 많을 때 좋다고 한다.누군가 계정을 생성하고 회원가입을 할려면많은 항목을 가지게 될 것이다.react-hook-form은 이러한 큰 규모의 앱을

이제 onsubmit을 대체해보자직접이게 예전 방식이다,.이는 우리가 작성한 코드가 진행 될 수 있도록 해준다.onSubmit 이벤트 안에 handleSubmit을 호출할 텐데 handleSubmit은 2개의 인자를 받는다.하나는 데이터가 유요할 때 호출되는 함수이다.

또 사용할 수 있는 것은 REGULAR EXPRESSION이다.https://regex101.com/이걸로 코드에다가 나의 문자열이 어떤 종류인지 알 수 있다.뒤는 naver.com을 포함하겠다는 것이다.위는 조건이다.이 모든 것을 정규식을 통해 사용할 수 있

어떻게 에러를 발생시킬 수 있는가서버에서 문제가 발생해서 에러를 발생시켜야 할 때가 있다.현재 배운 방법 이외에에러를 바생시킬 수 있는 추가적인 조건들을 알아보자,내가 원하는 규칙에 따라 검사할 수 있는것은 매우 유용하다,API를 활용해서 요청을 받고 확인할 수 있다.

useForm importcall useFromregister 함수를 form에 있는 모든 input에서 호출원한다면 검사 옵션 설정 가능.true 혹은 메세지 보내기 가능만든 함수를 이용해서 검사도 가능하다.옵션을 적는 한가지 방법은 그냥 다른 하나는 객체 리터럴을

위 함수는 빈 베열을 받는다.아래 함수는 atom 값을 변경할 수 있다.이렇게 두 개 함수를 따로 쓰는 것 보다 다른 방법으로 useRecoilState 함수로 더 편하게 atom을 받을 수 있다.이는 useState와 비슷하다.첫번째 인자는 값 저장, 두번째 인자는

코드를 분리하는걸 리팩토링이라고 한다.앞선 ToDoList를 Create ToDo와 TodoList 와 ToDo로 나눠보자이 때 atom을 이용해야 하는데,atom 에 toDoState를 옮긴다. interface와 함께..export 도 적는다.

사용자들이 버튼을 이용하여 toDo의 카테고리를 바꿀 수 있게 하는 기능을 추가해보자onClick을 주자

target의 경로를 찾는다눌린 곳을 찾는다old to do 를 새롭게 바꾸자.

이렇게 배열이 있다고 했을 때, 순서를 바꾸는 방법이 뭘까?1\. 원하는 위치의 인덱스를 구하는 것이다.2\. 해당 위치 이전의 모든 원소를 담은 배열을 만든다(front)3\. 해당 위치 뒤의 모든 원소를 담은 배열을 만든다(back)그리고 새 배열을 만든다 (fin

만든 atom을 Header 에서 수정할 수 있도록 하였다.

배운 모든 것들을 연습할 것이다리액트 라우터API로부터 정보 가져오는 리액트 쿼리styled-componentsprops타입스크립트애니매이션 구현(디자이너가 개발자에게 강력히 원할)좌우 스크롤, 확대 모션검색 기능리액트 쿼리, 리액트 훅