캐나다 개발자

yarn add react-scroll-motion import { Animator, ScrollContainer, ScrollPage, batch, Fade, FadeIn, Move, MoveIn, MoveOut, Sticky, StickyIn, ZoomIn } from "react-scroll-motion"; const ZoomInScrollOut = batch(StickyIn(), FadeIn(), ZoomIn()); const FadeUp = batch(Fade(), Move(), Sticky()); {/* 기본 */} Let me show you scroll animation 😀 {/* 줌인->줌아웃 */} I'm FadeUpScrollOut ✨ {/* 페이드업 */} I'm FadeUp ⛅️ ..

타입스크립트 적용된 프로젝트 설치 npx create-react-app ts-react-tutorial --template typescript 1. 컴포넌트에 type 적용해보기 App.tsx import './App.css'; import Greeting from './components/Greeting'; function App() { const name:string = "kim jun ho" // 이름 = string const height:number = 120; // 키 = number return ( // props로 받는쪽에서 string, number를 지켜줘야지 props가 무사히 넘어간다 ); } export default App; Greeting.tsx import React from..

평소에 객체 만들때처럼 만들면 Typescript가 type을 줄수 없다. const obj = { name: "aa", age: 0, } 그래서 Interface라는 친구를 사용해서 type을 준다. 타입스크립트 Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. -> 이게 무슨말이냐면, interface를 내가 데이터처럼 누구 보여주려고 못쓴다. -> 이 인터페이스는 그냥 겉옷같은녀석이라, 다른 객체한테입혀서 보내줘야한다 추상 클래스의 추상 메서드와 달리 abstract 키워드는 사용할 수 없다. TS에서만 interface를 지원한다..

타입스크립트는 자바스크립트 문법을 그대로 이용할수 있지만, 타입 부분을 조금 업그레이드 해서 쓸수있는 JS의 업그레이드 버젼. JS문제점 5 - "3" 하면 "3"을 알아서 숫자로 바꿔서 계산해준다 - Dynamic Typing (편해보이지만, 프로젝트가 커지면 원하는 값이 없을때 에러찾기가 힘들다) TS 5 - "3" 에서 error를 띄워준다. 설치 npm install -g typescript 파일뒤에 js나 jsx 말고 ts를 붙히면 타입스크립트 파일이 된다. index.ts config 파일 생성 tsconfig.json 파일안에 넣을거 { "compilerOptions" :{ "target" : "es5", "module" : "commonjs", } } 브라우저는 ts파일을 못읽고 js파일을..

비제어 컴포넌트는 ref 를통해 form element에 접근한다. 그래서 input value에 접근할때가 최종적인 버튼을 누르는 상황에만 접근한다. 그래서 화면을 재 렌더링 하는 순간이 버튼을 누르는 그 순간이지만, 사용자의 입력의 가장 최신값에는 접근이 힘들다. 반면에 제어 컴포넌트는 사용자의 입력에 따라 state가 동기화 된다. 대표로 onChange()가 있고, input 유효성 검사를 할 때 용이하다. 항상 최신 값을 유지하는 특성에 따라, 현재 input의 value가 유효한지 안한지에 대해 검사를 실시간으로 한다. 그런데, 사용자 입력이 있을 때 마다 재 렌더링이 되어서, 불필요한 재 렌더링이 될 수도 있다.

https://11001.tistory.com/191 요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStor..

설치 npm i uuid 사용 import { v4 as uuid } from 'uuid'; const uuid = uuid(); // 랜덤값이 출력된다. v1 : timestamp + random value v3 : namespace + sha-1 v4 : random v5 : namespace + md5

Redux관련 포스팅은 많지만, 너무 어렵다.. 이 포스팅 하나로 최대한 간단하지만 최대한 많이 알리고싶은게 목적이다. 1. Redux는 왜 쓰는가? - useState가 불편해서.... 2. Redux vs Redux Toolkit - 항해 7기는 React Redux만 배운다 - Reduxjs Toolkit 은 React Redux를 보다 쉽고 짧고 편하게 쓰기 위해 나왔다. 실제로 코드량이 반토막난다. - 벨로퍼트님도 Redux Toolkit을 꼭 사용하자고 하신다. - 하지만 항해에서 안배우는거라 툴킷 잘못쓰면 다른 팀원들이 못알아보고 Redux를 사용 못하게 되는 불상사가 일어날지도 아래 마치면서 출처: https://ridicorp.com/story/how-to-use-redux-in-ridi..

명령형 프로그래밍 // double이란 함수는 그냥 들어오는 배열 내부의 값을 2배 하는 함수 function double (arr) { let results = [] for (let i = 0; i item * 2) } fun..

내가쓴 부분은 1도 없고, 스파르타 항해99에서 제공해준 정보이다. 왜 Redux를 쓰는가? useState가 불편하기 때문이다. 여러 컴포넌트에서 같은 state를 공유해서 쓰려면 부모 자식 컴포넌트를 반드시 거쳐야 하는데, Redux를 사용해서 state를 중앙에서 관리하면 원하는 컴포넌트에서 바로 가져와서 사용 할 수 있다. 개발을 하면서 사용할 수 있는 devtools의 퀄리티가 좋고, 많은 개발자들이 사용하는 라이브러리라서 자료가 많아 error 해결이 용이하다. 리덕스 모듈 용어 정리 Action type 어떤 행동을 의미한다. 여기서 행동이란, 가령 계산기 기능을 구현한다면 plus, minus 처럼 기능에 필요한 행동을 뜻한다. action type은 object = {} 다. 그리고 무조..