STUDY (287) 썸네일형 리스트형 React | 이미지 여러 장 미리보기 (preview multiple images) * 이미지 한 장 미리보기는 이전 글 이미지 업로드 후 미리보기 (on Change / image preview) 1. input file 태그 생성 multiple설정을 해야 파일 여러 장 첨부 가능 2. onChange 함수 작성 e.target.files에 첨부한 여러 개의 파일들이 배열로 담겨온다. setState해주는 부분이 reader.onload밖에 위치하면 빈 배열값만 들어옴.. onload안에서 스프레드연산자로... 넣어주면 잘 들어간다... const handleImageUpload = (e) => { const fileArr = e.target.files; let fileURLs = []; let file; let filesLength = fileArr.length > 10 ? 10 .. React | react-facebook-login ( + 차단된 URI... 화이트리스트... ) 0. npm install $ npm i react-facebook-login 1. 페이스북 app id발급 페이스북 개발자 사이트에서 발급받을 수 있습니다. Facebook for Developers Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. Facebook의 글로벌 개발 developers.facebook.com 2. import후 사용하기 커스텀한 버튼을 사용하고자 한다면 아래처럼 from값을 주어야 함 import FacebookLogin from "react-facebook-login/dist/facebook-login-render-prop.. JS | URLSearchParams URL쿼리 스트링을 만들어주는 URLSearchParams인터페이스를 사용해봤다! new 연산자로 생성해주기 const params = new URLSearchParams(); 사용법은 굉장히 다양한데 나는 배열을 받아 쿼리스트링으로 만들 때 사용했다. 배열을 map으로 돌려서 URLSearchParams로 쿼리스트링으로 만들어준다. categories = new URLSearchParams( category.map((ctg) => ["category", ctg]) ).toString(); +) 참고 URLSearchParams in JavaScript Learn about how to use URLSearchParams to query url. medium.com SpringBoot | java.lang.IllegalArgumentException 배열로 된 파라미터를 보낼 때 이런 에러가 발생했다. 톰캣의 특정 버전이 파라미터의 키값에 []같은 특수문자가 들어갈 경우 발생하는 에러라고 함. 이런식으로 RequestParam의 value값에 []를 넣어 배열로 받았는데, 이게 localhost에서는 문제없이 돌아갔었음.. 아무튼 해결은 []이 괄호를 삭제해주었더니.. 잘 된다... JS | 자주쓰는 정규식 (콤마찍기, 숫자만 입력받기 등) / 함수 세 자리 콤마찍기 + 그냥 콤마 찍을 땐 toLocaleString()이 편하다 이건 input값 계속 변경되게하려고 사용 export const numberWithCommas = (num) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; 콤마 지우기 위에서 찍은 콤마 다 제거해서 저장해야 하니까.. export const deleteCommas = (str) => { return str.replace(/,/g, ""); }; 숫자(정수)만 입력받기 +replace(/(\.*)이 부분에 . 추가하면 소수까지 가넝한 export const onlyNumber = (str) => { return str.replace(/[^0-9.]/.. React | iframe띄우기 ( + JSP, postMessage ) 본인인증 모듈을 연결하면서 팝업으로 띄웠다가 아이프레임으로 변경했다. 팝업도 나쁘지는 않았지만 사파리에서 window.close가 안 먹히는지 몰랐다. 사파리 누가써...?ㅠ iframe컴포넌트 생성 일단 아이프레임을 작성해준다. 모달처럼 띄워줬음. 이 때 서버측 주소를 src주소로 설정했는데, X-Frame어쩌구 에러 발생.. + Spring Boot | 스프링 시큐리티 X-Frame-Option 설정 import React from "react"; const IdentityAuthiFrame = () => { return ( ); }; export default IdentityAuthiFrame; 일단 잘 띄워지기는 하는데, 본인인증이 완료되고 난 결과값을 어떻게 알아내지 싶었다. window.par.. Spring Boot | 스프링 시큐리티 X-Frame-Option 설정 클라이언트 측에서 서버의 서드파티 모듈을 아이프레임으로 띄우려고 할 때 X-Frame-Option 어쩌구 에러 등장 스프링 시큐리티 설정을 수정해주면 된다. sameOrigin이 가장 안전하겠지만 클라이언트와 서버 도메인이 달라서 부득이하게 disable한 후 허용할 url을 등록해주었다. @Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.headers().frameOptions().disable() .addHeaderWriter(new StaticHeadersWriter.. JS | axios interceptors axios의 interceptors는 then혹은 catch전에 실행된다. request는 요청 전에, response는 응답 전에 (정확히는 요청/응답 후 then실행 전) 사용 catch전에 error가 401(UNAUTHORIZED)일 경우에 대해 핸들링해줬다. 저 http는 action전체에서 사용하고 있기 때문에, 모든 action에서 사용하는 axios요청들은 저 interceptors를 거치게 된다. const http = axios.create({ baseURL: SERVER_URL, }); http.interceptors.response.use( (res) => { return res; }, (e) => { if (e.response.status === 401) { // status가 4.. 이전 1 ··· 19 20 21 22 23 24 25 ··· 36 다음
