Jaeilit

1. 이미지 미리보기 위 사진 inputValue 는 입력 값에 대한 state 이고, preview useState가 미리보기에 관한 state 입니다. imgPreview : state에 img file에 관한 정보들을 넣어둡니다. (미리보기를 위해서) deletePreview : delete를 누를시 setPreview 를 초기화 해줍니다. (삭제) 2. formDate 로 백엔드에 전송하기 백엔드에 axios 로 전송해야합니다. formData.append("key", value) 로 만들어준 뒤에, Axios post 요청 하면 됨, 주의사항 header에는 multipart/form-data 로 전송을 해야한다.

카카오 로그인 구현 로직 프론트엔드 기준 카카오에서 인가코드를 받아온다. 받아 온 인가 코드를 백엔드에 넘겨주고, 토큰을 념겨받는다. 1. 카카오 디벨러퍼에서 콜백URL을 설정 2. 받아 올 데이터들을 설정.. 3. 인가코드 받기 4. 인가코드 받기 (코드) 5. 인가코드 5. 인가코드

변경 전에는 useState를 반복적으로 인풋만큼 4개를 사용했다. 하지만 여러개를 하나로 압축시키는 법을 알고 나서는 하나로 썼다. 하나로 하는 방법 useState 하나에 값을 userid, username, password 등 나열한다. 이 값들은 input 의 name 속성과 일치해야 할 것이다. 그 inputvalue 들을 비구조화 할당으로 하나씩 까놓고 onChange 함수에 e.target.value 를 이용해서 e.target 또 한 까놓는다. name과 value로 지금 그 name은 아까 인풋의 name과 일치해놓은 그 부분이고 value는 값이 된다. 바뀐 값을 받아 올 setInputValue({}) 안의 불변성을 위해서 ...inputValue를 한번 불러온 뒤에 해당 값만 덮어씌..

const getCookie = (name) => { // 쿠키 값을 가져옵니다. let value = "; " + document.cookie // 키 값을 기준으로 파싱합니다. let parts = value.split("; " + name + "=") // value를 return! if (parts.length === 2) { return parts.pop().split(";").shift() } else if (parts === "; ") { return undefined } else { return parts.pop().split("=")[1] } } // 쿠키에 저장하는 함수 const setCookie = (name, value, exp = 1) => { let date = new Date..

참고 글 https://data-jj.tistory.com/53

import React, { useCallback, useEffect, useState } from "react" import _ from "lodash" export const InfinityScroll = (props) => { const { children, callNext, is_next, loading } = props const _handleScroll = _.throttle(() => { const { innerHeight } = window const { scrollHeight } = document.body // 스크롤 계산! const scrollTop = (document.documentElement && document.documentElement.scrollTop) || docum..

const date = (a, b) => { let dateA = new Date(a[res.data.postingDate]).getTime() let dateB = new Date(b[res.data.postingDate]).getTime() return dateA > dateB ? 1 : -1 } const date_sorting = res.data.sort(date) 최근 게시물을 위로 올리고싶을 때 사용하는 코드

웹소켓 vs REST (양방향 통신, 단방향 통신)

axios하면서 delete에 고민에 빠진 이유 1. axios 에서 delete 해서 삭제 할 id 값을 넘기면 url 로 넘기면 삭제가 되는데 그러면 어떻게 렌더링 해줄것인가? 왜 프론트에는 삭제가 안되있고 새로고침해야 삭제가 되어있나? -> 생각해보니 리덕스에서는 삭제를 안했다. axios.delete 는 서버에서 삭제 하는 명령어임. 2. 삭제는 과연 미들웨어 포함되어야하는가? -> delete는 즉시되야하지않은가 굳이 서버단을 기다렸다가 삭제해야하는가 라는 고민을 했습니다. 생각해보니 서버단을 제외하고 리덕스만 제외할때는 미들웨어가 필요가 없는데 서버도 지워야하니 미들웨어가 포함되어야한다. //액션함수 const delete_list = createAction(DELETE_LIST, (baske..

입력을 받는 곳을 제한함 정규식변수.test(값) const addBtn = () => { if (inputCheck.test(item)) { dispatch(basketActions.addListMiddlewares(item)) } else { window.alert("1~6글자 한글만 입력가능") return } } export const inputCheck = /^[가-힣]{1,6}$/ 참고하면 좋을 정규식표현 유효성검사 예제 https://beop07.tistory.com/7