Jaeilit

참고 글 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

DOC 사용 const onChange = (e) => { // input type file 비동기적으로 파일의 내용을 읽어들이는 데 사용됨 const reader = new FileReader() // 현재 input 의 files 정보를 onChange 함수와 useRef를 통해 읽어옴 const file = imgRef.current.files[0] // 바이너리 파일을 base64 encode 문자열로 반환 // 그 외 readAsText() 텍스트로 읽기 reader.readAsDataURL(file) // reader의 이벤트 핸들러 중 하나 // onloaded 읽기 동작이 성공여부를 떠나 완료되었을 때 발생 // 읽어온 결과를 result로 반환 받음 reader.onloadend = ()..

1. 리덕스 데이터 불변성이란? 2. 리덕스의 동작원리 설명할 수 있을 정도로 예를들면 지금 저보고 설명하라고하면 리덕스에서 store의 state 값을 변경해야 할 때는 dispatch 를 통해서 해당 action 에게 전달 합니다. 해당 action 생성함수는 데이터 변경에 대해서 로직을 짜고 실제 데이터 변경은 리듀서에서 이뤄진다. 예를들면 액션 생성함수에서 state.cnt + 1 해주세요 reduecer state.cnt = action.cnt 이런식으로 실제로 데이터를 입히는 곳 이라고 이해를 함. 헌데, 너무 허술하고 대충 알고 있는 느낌이 강해서 정확히 개념을 잡고 갔으면 좋을 것 같음 https://velog.io/@y1andyu/Redux-Redux-thunk-%EB%8F%99%EC%9..

회원가입 로직 useState 를 통해 필요한 정보들을 입력받고 dispatch 를 통해 signup 액션함수를 호출 액션 함수에서 회원가입에 필요한 정보를 저장하고 setUser({ user_name, password, nickname.. 등등}) 로그인 로직 로그인 버튼을 누르면 useState 를 통해 id 와 pwd 값을 dispatch 해서 login 액션함수로 넘겨줌. 리듀서에서 쿠키를 저장. setCookie(key"value") 그 다음에 action.payload user 정보를 state에 저장

1. 컴포넌트 나누기 page 부터 살펴보기 page 를 나누고 그 안에서 components 를 나누고 그 안에서 elements 를 나눠본다. 2. Image 라는 ele가 2가지 이상 용도로 사용 될 경우 style 을 용도 갯수 만큼 만들어서 사용 할 생각이였는데 이 방법이 아니라 props 값으로 바꿔준다. (input type이 아님 임시변수) 예를 들면 동그라미 이미지와 세모, 네모가 필요하다 생각했을 때 나였다면 이렇게 3개를 썼을 텐데 이 방법이 아니라 이렇게 하면 같은 타입이 바뀌지만 이미지를 사용하는 것 처럼 보여서 덜 혼동스럽다. 3. 이미지 size를 나눌때 styled.components 에서 속성을 줄 때 --size : %{(props) => props.size} px ; 이..