본문 바로가기
  • 삽질하는 자의 블로그
17. 이벤트에 함수 여러 개 동작시키기 함수 여러개 달고싶다면 중괄호 안에 함수를 실행시키고 ; 를 통해 구분시키면된다. onClick = {()=> { 함수1(); 함수2(); 함수3(); } } 예시 { setEditMode(null); setEditTodo(""); }} > 2023. 2. 4.
16. 타이머 만들어 보았다. import React, { Fragment, useRef } from "react"; import { useState, useEffect } from "react"; let initial = true; function Solution() { const inputMin = useRef(); const inputSec = useRef(); const [min, setMin] = useState(0); const [sec, setSec] = useState(0); // useRef 로 받아오고, 계산을 다시 해서 min ,sec 로 넣어줘야겠다. const [start, setStart] = useState(false); const startTimer = () => { setStart(true); const.. 2023. 1. 18.
15. 리액트 [인증] - 클라이언트 보호와 보호된 API 기능 사용 1. 클라이언트 보호 : 인증토큰이 없다면, 강제로 페이지에서 벗어나는 클라이언트 보호를 실현한다. 1) 들어가면 튀어나가게 만들기 import { useCookies } from "react-cookie"; import { useHistory } from "react-router-dom"; const ProfileForm = () => { const [cookies] = useCookies(["auth-cookie"]); // 쿠키 빼보고 const history = useHistory(); let isAuth = false; if (cookies["auth-cookie"] !== "undefined") { // 없으면 너 인증안됐다 isAuth = true; } if (!isAuth) { // 안됐으.. 2022. 12. 22.
14. 리액트 [인증] - 파이어 베이스 Auth편(3) 1. 로그인 상태를 유지해보자 with React-Cookie 리액트 쿠키 : https://www.npmjs.com/package/react-cookie react-cookie Universal cookies for React. Latest version: 4.1.1, last published: a year ago. Start using react-cookie in your project by running `npm i react-cookie`. There are 539 other projects in the npm registry using react-cookie. www.npmjs.com 서버에서 받아온 인증서를, 어딘가에 저장해야한다. 선택지는 두가지, 1. 로컬스토리지 2. 브라우저의 쿠키 3.. 2022. 12. 22.
13. 리액트 [인증] 파이어 베이스 Auth편(2) 1. 여러가지 인증 방식 (구글, 네이버, 깃허브 등등..) 중에, 일반적인 Email 과 Password 를 사용한 인증을 해보겠다. https://firebase.google.com/docs/reference/rest/auth?hl=en&authuser=0#section-create-email-password Firebase 인증 REST API firebase.google.com 우측 사이드바에 보면, 인증에 관한 목록들이 쭉 나와있다. 1) You can create a new email and password user by issuing an HTTP POST request to the Auth signupNewUser endpoint. [POST 리퀘스트로 보내라] 2) https://iden.. 2022. 12. 22.
12. 리액트 [인증] - 인증의 기본 원리, 파이어 베이스 Auth편(1) [인증의 기본 원리] 인증은 크게, 서버사이드 인증 방식과 토큰 인증 방식을 가진다. 1. 서버사이드 인증 방식 서버측에 사용자들의 정보를 저장하고, 유저가 정보를 제출하면, 확인하고, 그에 따라 응답한다. 정보는 데이터베이스나, 디스크 등에 저장되어 관리된다. 사용자로부터 로그인 요청이 오면, 인증이 되었을 경우, 클라이어언트의 상태를 계속 유지하게 된다. (인증 상태, 즉 사용자 정보 유지) 이 경우를 Sateful(상태성) 이라고 한다. 로그인 사용자가 늘어 날 경우 세션을 유지하는 메모리와, CORS 오류 등으로 인해, 소규모에서만 적용이 가능하다. 또한, 백엔드와 프론트엔드 간의 커넥션이 긴밀하지 않을 경우, 언제든 해킹의 위험이 있다. 2. 토큰 기반의 인증 방식 서버측에 사용자들의 정보를 저.. 2022. 12. 22.
11. 항상 [로딩 State] 을 신경쓰자! FETCH 등의 비동기 함수를 사용한다면, with Redux 비동기 함수를 사용한다면, 항상 대기중인 경우가 생긴다. 0.1초, 길게는 1초 동안의 그 시간동안, 멈춰있다면, 한국인의 유저경험에는 충족치 않을것이다...! 그 짧은 시간이라도, 항상 로딩 State 를 적용하여, 로딩 시간동안 무언가 행동을 보여주도록 하자 1. 로딩 스테이트 Slice 만들기 with redux-toolkit redux-toolkit 을 사용한다면, UI(ui를 띄우는) State 를 만들어서, 그에따라, 로딩, Modal 등의 알림창이 나오는 형태를 만들면 편하고 훌륭하다. // ui 전용 redux-toolkit 의 slice import { createSlice } from "@reduxjs/toolkit"; const initialState = { getFetchLoadin.. 2022. 12. 22.
10. 현실적인 커스텀 훅 만들기, WITH. validation, onBlur 이벤트리스너 골머리가 아프다 함수, 상태 를 반환하는 커스텀 훅 을 이용하여 Validation 이 있는 수백개의 INPUT 이 있는 컴포넌트를 리팩토링 해본다. 해봤는데 더 복잡하다. 이렇게 사용할 것은 아니지만... 연습으로 한번 보도록 하자. 1. 간단한 Input 컴포넌트 : input이 있고, validation 을 거쳐, 나온 State 로 error가 나오면 error를 표시하는 컴포넌트 import styles from "./basic-form.module.css"; import AlertFun from "./alert"; import { useEffect, useState } from "react"; function BasicForm() { const [inputText, setInputText] =.. 2022. 12. 14.
9. 훅의 사용 유의사항과 커스텀 훅에 대하여 중복되는 함수 및 중복되는 코드가 있을때, helper(나는 이렇게 지었다) 폴더 안에 넣어둔 파일안에 넣고, "아웃소싱" 을 하는 [ 코드 리팩토링 ] 을 하여, 깔끔한 상태를 유지하려 한다. 리팩토링을 하고 싶은데, 그 안에 Hook 이 들어있다면? "Hook 이 포함된 상태의 함수"를 리팩토링해야한다. 이때, Hook 을 포함하는 리팩토링 코드를, "커스텀 훅" 이라고 한다. 1. 훅을 아웃소싱? 훅의 사용 유의사항을 보자 1. HOOK 은 반드시 "리액트 컴포넌트 함수"안에서 사용해야한다. 리액트 컴포넌트 밖에 정의한 "리듀서 함수", "next의 SSR", "API" 등.. 다른곳은 안된다. 2. HOOK 은 반드시, "컴포넌트 함수의 최상위에 사용해야한다" 콜백 함수, 중첩 함수 같은, 하위 .. 2022. 12. 14.
8. State의 작동 방식 1. useState 는 언제 상태를 업데이트 하는가? function Demo(){ const [x, setX] = useState(false) function change(){ setX(true) console.log(x)// false } } useState 는, "State 의 변화를 스케쥴링" 한다. 여러개의 상태변화라면, "A 를 B 로 바꾸려는 스케쥴", "B 를 C 로 바꾸려는 스케쥴"을 "지정하고, 수행한다." 그리고 컴포넌트가 전부 "재평가" 가 될때, 그 이후 State는 업데이트가 된다. 가장 흔한 실수로 const [enteredName, setEnteredName] = useState("before N") function submitHandler(){ setEnteredName(.. 2022. 12. 14.
7. 리액트의 최적화 With React.memo(), useCallback(), useMemo() 서론. 리액트가 작동하는 방식 리액트는 오로지 "컴포넌트" 에만 초점이 맞추어져 있다. 1) 컴포넌트 끼리 props 를 넘긴다던가 [ props 전달 ] 2) 컴포넌트의 State 를 변화시킨다던가 [ internal-component State ] 3) 컴포넌트를 Context 를 사용해 State 를 변화시킨다던가 [ wide-data State] 이런 것들이 변화되면, 리액트는 [ 컴포넌트를 재평가, 재실행 ] 하게된다. 또한 그 과정에, 화면에 표시해야 할 것들이 있다면, 리액트는 React-DOM 에 그것을 알린다. 리액트DOM 리액트 DOM은 Real DOM 과는 달리 가상 DOM 이다. 리액트로부터 받은 "스냅샷"을 현재의 "스냅샷" 과 비교해, [ 다른 요소들만을 비교해 추가, 삭제, 변.. 2022. 12. 14.
6. className, style 다루기 리액트에서는 class 대신 className 을 사용한다. 또한 하나씩 지정할때에는, module.css 를 사용한다. .css 는 "전체 적용"을 불러오기에, .module.css 를 적극 활용하는 중이다. 사용하는 방법 몇가지를 알아보자. 1. className 의 지정 import styles from "./...module.css" 2. 동적 className 의 지정 1. 동적 className 을 지정할때, "" 없이, 지정해야 한다는 점을 명심 import styles from "./...module.css" const condition = true; let dynamaicStyle; if (conditions) { dynamaicStyle = styles.red;// "" 없음을 명심 }.. 2022. 12. 12.

티스토리툴바