캐나다 개발자

설치 npm i immer yarn add immer 사용 import produce from 'immer'; 왜 리액트에서 불변성을 지켜야하나? https://hsp0418.tistory.com/171 리액트에서 불변성을 지켜주는 이유는 리액트가 상태 업데이트를 하는 원리 때문입니다. 리액트는 상태값을 업데이트 할 때 얕은 비교를 수행합니다. 즉 객체의 속성 하나하나를 비교하는게 아니라 참조값만 비교하여 상태 변화를 감지합니다. 이런 이유로 배열이나 객체를 업데이트 할때 setState([...state, newState]), setState({...state, [key]: value}) 이런식으로 배열이나 객체를 새로 생성해서 새로운 참조값을 만들어서 상태를 업데이트 합니다. 이런 행위가 불변성을 지..

https://doqtqu.tistory.com/303 설치 npm install universal-cookie --save yarn add universal-cookie --save Cookie는 왜 사용? 브라우저에 값을 저장하기 위해서. 저장된값은 수정, 삭제 그리고 가져와서 사용도 가능하다. 예) 로그인 된 사람에게 우리는 미니프로젝트 1주차에 토큰을 지급했다. 그 토큰이 유저들의 웹 브라우저 쿠키에 저장되어 있어서 그 사람이 모든 페이지를 이용 가능했다. 만약 쿠키에 로그인 된 사람의 정보(토큰 혹은 그 어떤거)가 저장이 안되있으면, 로그인 후, 메인페이지 구경하다가 다른 페이지를 보러갔는데 또 로그인 하라는 문제가 발생한다. Cookie.js // 설치된 패키지 import import Coo..

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko npm i redux-devtools-extension ComposeWithDevTools로 감싸준다. import { createStore,applyMiddleware} from "redux"; import rootReducer from './modules' import thunk from "redux-thunk"; import { composeWithDevTools } from 'redux-devtools-extension'; const middlewares = [thunk]; const enhancer = composeWithDe..

yarn add bootstrap zxcvbn 더보기 PasswordStrengthMeter.jsx -> 이 컴포넌트 쓰려면 비밀번호를 props로 넘겨줘야함. import React from 'react' import zxcvbn from 'zxcvbn' export default function PasswordStrengthMeter({password}) { const testResult = zxcvbn(password); const score = testResult.score * 100/4; const funcProgressColor = () =>{ switch(testResult.score){ case 0: return '#828282' case 1: return '#EA1111' case 2: ..

항해 99의 기술매니저님이신 예매니저님은 정말 대단한거같다.. 실력도.. 끈기도.. import React, { useState } from "react"; import styled from "styled-components"; const App = () => { const [target, setTarget] = useState(0); // 마우스오버 된 대상 const [mouseIn, setMouseIn] = useState(false); // 모든 컴포넌트에서 마우스 오버 여부 확인 const onMouseOverHandler = (event, item) => { setTarget(item); // 마우스를 오버했을 때 해당 item의 값으로 target 변경 setMouseIn(Boolean(ev..

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가 유효한지 안한지에 대해 검사를 실시간으로 한다. 그런데, 사용자 입력이 있을 때 마다 재 렌더링이 되어서, 불필요한 재 렌더링이 될 수도 있다.