담쟁이 담쟁이

state를 다루는 것이 비슷하다면 여러개 선언하는 것이 아닌 다음과 같이 한개의 state에 선언해준다. const [state, setState] = useState({ author: "", content: "", emotion: 1, }); handle 함수를 두고 target의 이름을 가져와서 해당 target만 변경하도록 진행한다. const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; 1 2 3 4 5

JWT란 Json Web Token의 약자로 token방식의 인증을 할 때 사용한다. Jwt를 사용하는 이유로는 1. Token을 client에서 저장하기 때문에 서버에서 관리할 필요가 없어 서버의 확장성에 용이하다. 2. 무결성이 장점으로 토큰을 HMAC(Hash-based Message Authentication) 기법으로 발급하기에 토큰의 정보를 변경하는 행위가 불가능하다. 하여 보안적인 측면에서 client가 변조된 값으로 server에 접근하기 어렵다. JWT는 크게 3가지로 구성이 되어있는데 aaaa.bbbb.cccc (header).(payload).(signature) 로 구성되어있다. header Token의 타입과 Hash알고리즘을 지정하는 정보를 가지고 있다. { "typ":"JWT"..

보내는 쪽 import { useNavigate } from 'react-router'; const goToDetail = (s) => { navigate('/detail', {state : {id : s.championInfoList }}); }; navigate에 state로써 객체를 전할해 주면 된다. goToDetail(s)} /> 받는 쪽 import {useLocation} from 'react-router-dom'; const {state} = useLocation(); state.id 로 접근하면 된다.

nginx의 config 설정을 변경해주어야한다. nginx의 default.config는 대부분 /etc/nginx/conf.d 에 있다. 들어가서 server { listen 80; server_name localhost; #access_log /var/log/nginx/host.access.log main; location / { root /usr/share/nginx/html; index index.html index.htm; } location 부분을 location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } try_files를 추가해준다.

import Counter from "./Counter" fuction App(){ return ( ) } const Counter = (props) = { console.log(props) } 콘솔에 찍어보면 {initialValue : 5} 라고 전달 된다. 여러개를 보내고 싶다면 를 한다면 {a : 1, b : 2} 가 찍힌다. props를 기본 값을 설정할 수 있다. const Counter = ({ initialValue }) => { Counter.defaultProps = { initialValue : 0, }; } 자식 component를 바로 props로 보내서 적용시켜줄수도 있다. const Container = ({children}) => { return ( {children} ) }..

react의 컴포넌트를 만드는데 유용한 문법이다. 태그를 사용하든 component를 사용가능하다. import MyHeader from './MyHeader.js' 를 하였다면 를 사용할 수 있다. 1. 닫침 규칙 반드시 모든 태그를 닫아줘야한다. 로 열자마자 닫을수 있다. (self closing) 2. 반환은 반드시 하나의 부모를 가져야한다. 반드시 최상위 태그로 묶어서 보내줘야한다. 없이 보내고 싶다면 import React from "react"; 로 감싸줄수 있다. 혹은 도 가능하다. inline style 방식 const style = { App:{ backgruondColor : "black" } } 를 통해 내부에서도 style을 만들어서 사용가능하다.

import './index.css'; 하나만 import 하였고 분명히 import 하지도 않는 css 파일을 적용이 되는 것을 볼수 있다. 이는 상위 js에서 import가 되었을 가능성이 높다. module 화를 통해서 css를 분리해보자. 간단하다. css 파일 명에 module을 붙여준다. Main.css -> Main.module.css module을 안붙여주면 적용이 되지 않는다. 그 후에 import를 해준다. import style from './css/Main.module.css'; className은 다음과 같이 style. 으로 진행하면된다. LOLDUO 여러개의 className을 적용시키고 싶다면 className={s.now === selected ? `${style.Champ..

npm install react-router-dom 를 통해 react-router를 설치해준다. index.js 예시이다. import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import style from './css/Main.module.css'; import './css/App.css'; import App from './App'; import Detatil from './Detail'; import { BrowserRouter, Routes, Route } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElem..