캐나다 개발자

메소드 - patch, put, delete, post, get 1. get, delete는 body부분을 비워줘도 된다 2. patch, puth, post는 바디부분에 빈 값이라도 있어야 한다. 3. method(api주소, {바디}, {헤더}) 순서 // 헤더 - 인증이 필요할때 아래처럼 사용 가능(MyToken 은 쿠키에서 가져옴) const msg = await api.delete(`api/articles/${payload}`,{ headers: { 'Authorization': `Bearer ${myToken}`, } }); // patch의 경우 body 부분을 최소 빈 객체로라도 묶어서 보내준다. const data = await api.patch(`/api/articles/${id}/do..

1. 리액트의 핵심 모듈 두가지 // 리액트 컴포넌트를 HTML Element에 연결 import ReactDOM from 'react-dom' //리액트 컴포넌트 만들기 import React from 'react' 2. a 태그와 Link Router의 차이 a태그는 이동되면 이동되면서 서버로부터 파일들을 새로 다시 가져온다. Link는 페이지가 이동되면서 서버로부터 파일을 안가져오고, 있는 파일중에 필요한 파일만 골라서 렌더링을 해준다. 3. NavLink - 태그가 눌리면 active라는 클래스가 붙는다. 그래서 그 클래스에 스타일을 주면 내가 어떤 링크를 클릭했는지 알수 있다. // App.jsx import {NavLink} from 'react-router-dom' import './App...

useParam을 사용하면 현재 경로를 가져올수 있다. 가져온 경로는 객체안의 배열로 감싸져 있다. 주로 필요한건 value값이라 value를 아래처럼 꺼내줄 수 있다. const navigation = useParams(); const emptyValue = Object.values(navigation); console.log(emptyValue[0]);

라우팅을 하다보면 연결된 주소안에서 또 라우팅을 해야할 경우가 있다 최상단 경로에 와일드 카드로 주소를 주고(아래) 그 다음경로부터는 아래처럼 준다. 만약 어딘가에서 Link나 Navigate 할일이 있으면, 아래처럼 평소같이 들어가면 된다, ID: 0{id} {category} {title} {content} {time}

에러를 줘야하는 타이밍에 아래처럼 throw new Error("에러메세지") 하면 된다. export const loadUsers = createAsyncThunk(LOAD_USER, async()=>{ const datas = await getDocs(collection(db, "newUser")); throw new Error("error"); const data_list = []; datas.forEach((doc)=>{ data_list.push({id: doc.id, ...doc.data()}); }); return data_list; })

설치 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..