crabLab

fileUpload 및 fileDelete aws의 s3를 이용한 파일 업로드 및 삭제시 여기의 코드를 사용하면 손쉽게 이용할 수 있다. 코드에서 받는 e는 input 의 onChange라는 이벤트를 사용하는데, 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용 할 수 있다. 추가로 이 객체의 e.target은 이벤트가 발생한 DOM 인 input DOM 을 가르키게된다. 이 DOM 의 value값, 즉 e.target.value를 조회하면 현재 input 에 입력한 값이 무엇인지 알 수 있다. //fileUpload import AWS from "aws-sdk"; const OnFileUpload = e => { const ACCESS_KEY = process.env.REACT_A..

유저에게 텍스트를 보여주는 경우 줄바꿈을 해야하는 경우가 있다. 이 경우는 css에 white-space: pre-line을 주면 된다. 우선 react에서 텍스트를 넣는 방법은 텍스트입니다!띄어쓸거야 /// >>텍스트입니다!띄어쓸거야 모두가 알듯한 이런 방식으로 넣어주면 된다. 하지만 줄바꿈 기호는 다른 프로그래밍언어들과 비슷하게 \\n 이다. 텍스트입니다!\\n띄어쓸거야 /// >>텍스트입니다!\\n띄어쓸거야 하지만 당연하게도 \n을 바로 쓰면 줄바꿈이 먹히지 않는다. 따라서 이럴때 쓰는 것이 중괄호이다. {텍스트입니다!\\n띄어쓸거야} /// >>error 왜 error가 날까? jsx문법에서의 중괄호 중괄호는 jsx코드 사이에 자바스크립트 문법을 이용하고 싶을 때 사용한다. 따라서 {}를 쓴다면 ..

프론트 작업을 하다보면 input에 숫자만 적을 수 있게 해야하는 경우가 종종 있다. 회원가입의 비밀번호 이벤트 등록시 물품의 금액을 적음 이런 경우 크게 두가지 방법이 있어 정리해보고자 한다. input의 type:number 를 사용하는 방법 아주 간단하고 심플한 방법이다. 이 방법의 장점은 추가로 최소값과 최대값도 손쉽게 설정할 수 있다는 점이다. 다만 이렇게 할 경우 input 창에 불필요하게 화살표가 나오게 되는데 간단한 해결방법은 css를 추가하는 것이다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margi..

cafe24라는 호스팅을 이용한 쇼핑몰 운영자들의 자사몰 홈페이지에 플로팅버튼을 띄우는 작업을 한다. 인증코드 발급 우선 쇼핑몰 운영자가 앱을 최초 실행시키면 클라이언트에서 cafe 24측에 인증코드를 요청한다. 이때 필요한 정보는 {mallid} : 해당 쇼핑몰ID를 입력합니다. {client_id} : 개발자 센터에서 생성한 앱의 client_id를 입력합니다. {state} : 위변조 방지를 위해 입력하는 값으로 코드 반환시 같은 값이 반환됩니다. {redirect_uri} : 개발자 센터에서 생성한 앱의 Redirect URL을 입력합니다. {scope} : 해당 접근 토큰으로 접근할 리소스 서버의 권한을 입력할 수 있습니다. 이렇게 5가지인데 이 정보들을 통해 cafe24 측에서 제시한 GET ..

해결방법 final 2. useRef 사용 import { useEffect, useRef } from "react"; import { useState } from "react"; export default function StateTestT() { const [memberId, setMemberId] = useState(1); const memberIdRef = useRef(); memberIdRef.current = memberId; const updateMemberId = () => { // (1) memberIdRef.current = memberIdRef.current + 1; console.log(memberIdRef.current); memberIdRef.current = memberIdRe..

해결방법 1. 함수형 업데이트 해결방법 중 하나는 useState의 인자로 값이 아닌 업데이트된 최신의 state와 함께 함수를 전달하는 방법이다. react의 setState코드를 보면 다음과 같이 값을 받거나, 이전 state와 함께 함수를 전달받을 수 있도록 되어있다. // React Hooks // ---------------------------------------------------------------------- // based on the code in // Unlike the class component setState, the updates are not allowed to be partial type SetStateAction = S | ((prevState: S) => S); ..

프론트 작업을 하면서 정말 나를 끈질기게 괴롭히고 또 이해하기 힘든 제일 큰 문제가 하나 있었다. 바로 useState의 비동기 문제이다. 구글링을 아무리 하고 구현을 아무리해도 안되고, 또 어쩔때는 됐었다. 그나마 useEffect를 사용해서 매번 해결은 했었지만 불완전한 이해를 바탕으로 한 사상누각이었고 무엇보다 나 자신이 확신이 없었다. 모든게 완전하게 이해를 못했어서 발생한 일이었다. 심지어 어떨때 비동기문제가 발생하고 어떨때 안 발생하는지도 몰랐으니 그야말로 슈뢰딩거의 비동기였다.. 그래도 이제는 useState의 비동기 문제를 조금은 이해하고 해결할 수 있게 되어 정리를 해본다. 문제 상황 import { useState } from "react"; export default function ..

scale 애증의 scale이다. 왜 애증이냐면 진짜 시간을 많이 쏟았기 때문이다.. 특히 그래프 하나에 두 개의 데이터셋을 넣는게 상당히 어려웠다. 물론 알고나면 엄청나게 간단하다.. 뭐든지 공식문서와 기초가 중요하다. 여기서 나오는 것들은 다 축을 의미한다. 즉, 이름은 크게 중요하지 않다. x 나는 가로축을 x라는 이름으로 커스텀했다. 기본적으로 들어가야할 속성은 axis: “x” postion: “bottom” 이다. 또 유용하게 쓸 수 있는게 ticks가 있는데 각 value마다의 스타일링을 할 수 있다. ticks: { // minRotation: 45, padding: 5, autoSkip: true, maxTicksLimit: 15, // label 조정 }, y 나는 세로축을 y라는 이름..

현재 존재하는 차트 관련 라이브러리들은 여러개가 있지만 그 중에서 제일 인기가 많고 또 레퍼런스도 많으며 무엇보다 공식문서가 잘 정리되어 있는 chart.js를 사용하기로 했다. 특징 CANVAS 베이스로 빠른 렌더링 오픈소스 무료 제공이지만 지속적인 유지보수와 새로운 버전 출시 초보자도 쉽게 사용할 수 있을정도로 잘 정리된 문서 정말 작은 라이브러리 용량 (713 byte) 매우 적은 메모리 사용 사용 방식 내가 사용한 chart.js의 방식은 컴포넌트 내부에 chart 컴포넌트들을 따로 만들고 그 컴포넌트에 필요한 정보들(labels, data)들을 props로 전달해 렌더링하는 방식이다. 여기서 labels는 가로축, data는 세로축을 의미한다. 나의 경우 각 이벤트 마다 서버로부터 데이터를 받는..

이벤트 수정시 쿠폰의 경우는 등록보다 훨씬 복잡하다. 저장된 쿠폰 읽기 저장된 쿠폰 수정하기 새로운 쿠폰 저장하기 저장된 새로운 쿠폰 수정하기 쿠폰 삭제하기를 고려해야한다. 그리고 각 경우마다 date의 형태가 다 다르다. 거기다 수정과 읽기를 오갈때마다 date의 형식을 바꿔주는데 이때 비동기와 연관되어 비동기 통신, 형식 바꾸기, 바로 렌더링하기의 순서를 맞춰주는것이 나에게는 꽤나 힘든과정이었다. 전에 썼던것을 다시 인용해보면 이 부분이 어려웠던 이유는 날짜의 형식이 tz, date, 문자열(YYYY-MM-DD HH:mm)이 계속해서 바뀌었고 이 바뀐 데이터를 바로 유저에게 렌더링해서 보여줘야 했는데 이 부분이 useEffect와 useState의 깊숙한 부분을 건드리며 각각의 순간들(저장된 쿠폰 읽..