전체 글 썸네일형 리스트형 [React] 리액트 Cache Busting 관련 문제 해결법 리액트 프로젝트를 서버에 올리면 항상 브라우저를 매우 강력하게 새로고침을 해야하는 불편함이 있다. 따로 개발자 모드 화면에서 캐시를 사용하지 안기로 한게 아니라면 일반 새로고침으로는 반영 하기가 어렵다. 해결방법은 서버에 반영되는 파일이 기존의 파일과 다르다고 인식하게 하면 됩니다. 그래서 웹팩에서 번들파일 생성시, 생성되는 이름을 매번 다르게 해주면 반영이 되면 파일명이 다른걸 인식하고 새로 내려받는 과정을 거치게 된다. 아래와 같이 webpack.config.js 파일을 아래와같이 변경해주면 된다. output: { path: path.join(__dirname, '/src/'), filename: '[name].[chunkhash:8].js', }, 이렇게 하면 파일이 변경될때마다 hash값이 변경.. 더보기 [React] Custom Component - 인풋박스(Input) HTML 삽입 미리보기할 수 없는 소스 이건 CSS HTML 삽입 미리보기할 수 없는 소스 이건 HTML 사용 하시면 아래와 같이 더보기 [React] Custom Component - 셀렉트박스(SelectBox) HTML 삽입 미리보기할 수 없는 소스 위의 소스는 CSS입니다 :) HTML 삽입 미리보기할 수 없는 소스 위의 소스는 JS입니다. HTML 삽입 미리보기할 수 없는 소스 사용하실때는 이렇게 사용하시면 됩니다. 더보기 [HTTPS] SSL을 이용한 HTTPS 통신 방법 1. Client Hello : 브라우저 창에 도메인을 입력함으로써 클라이언트가 서버에 통신을 시도 합니다. 이때 브라우저가 지원하는 암호화 방식과 랜덤데이터를 제공합니다. 2. Server Hello : 서버는 클라이언트가 제공한 암호화 방식을 하나 선택한으로서 클라이언트에 통신을 합니다. 그리고 서버자신의 인증서를 전달합니다. 이 인증서 안에는 서버의 공개키가 존재합니다. 그리고 서버 또한 클라이언드에 랜덤 데이터를 제공합니다. 3. Client Key Exchange : 서로의 랜덤 데이터를 이용하여 통신시 필요한 키를 생성하고 이를 서버로쿠터 받은 공개키로 암호화합니다. 4. Finished : 마지막으로 핸드세이크 과정이 마무리 되면 클라이언트와 서버 모두 Finished 메시지를 보냅이다. 그.. 더보기 [Docker] HTTPS 컨테이너 실행 docker run -it -d --name "이미지이름" -p 443:443 -p 80:80 "지정할 컨테이너 이름" 443포트와 80포트를 둘다 열어줘야 한다 이렇게 되 nginx.conf 파일에서 작성해 놓은 리다이테럭 처리를 탈것이다. 더보기 [Docker] HTTPS로 변경시 도커파일 추가 되는 부분 EXPOSE 443 마지막에 포트 열어 주는 부분에서 기존에 80포트 만 열어 주는 부분에 443 포트 추가 더보기 [Nginx] Nginx.conf 파일 http -> https로 변경시 SSL 인증서가 필요로 하고 인증서의 공개키와 개인키를 이용하여 암호화 통신이 이루어진다. 이때 SSL 파일 과 개인키와 개인키 암호를 Nginx에 등록해야 하는데 아래와 같이 등록하면된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 events { } http { types { text/html html htm shtml; text/css css; text/xml xml; image/gif gif; image/jpeg jpeg jpg; application/x-java.. 더보기 [JS] exceljs 사용시 편하게 함수 만들기 exceljs 속성 입력한는 부분 공통으로 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 export const setProps = (worksheet.. 더보기 이전 1 2 3 4 5 6 다음
