박철순

const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', //호스트하는 서버 주소 changeOrigin: true, }), ); }; CRA 환경에서 위 코드를 통해 cors문제를 해결할 수 있었다. 그리고 해당 파일은 setupProxy.js로 이름을 작성 한 뒤, src 폴더 내에 넣어두어야 실행이 됨. * changeOrigin 설정은 http-proxy 모듈의 설명과 같이 대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하여 준다. 아래 ..

HTML에서 input 태그 중 (checkbox,radio)를 제외하고는 적용이 안됨 밑에 나와있는 링크에 이유가 나와 있습니다. https://news.hada.io/topic?id=2781 왜 CSS ::before 는 input과 img에는 동작하지 않을까 | GeekNews - ::before 와 ::after 는 replaced elements에는 동작 하지 않음ㅤ→ audio, canvas, embed, iframe, img, input, object, video- 이 개체들은 HTML스펙상 브라우저에 의해 ::before, ::after를 다 포함해서 대체되기 때문에 동작 news.hada.io https://stackoverflow.com/questions/2587669/can-i-use..

// 스케일로 점차 커지면서 흐릿하게 보이는 애니메이션 const modifyButtonWave = keyframes` 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(2); opacity: 0; } `; const ExampleWaveButton = styled.button` //버튼 디자인 position: absolute; width: 36px; height: 36px; border-radius: 50%; background-color: #01f5bb; opacity: 1; transform-origin: left center; // 버튼 파동 디자인 &:before, &:after { content: ''; position: abs..

크롬에서는 TextArea 밑에 한 2px정도 추가로 영역을 가지고 있음. 이 때 해결법은 간단하게 해당 TextArea의 display를 block으로 바꿔주면 쉽게 해결이 가능 TextArea가 inline으로 되어있기 때문에 발생하는 문제라고합니다.

const autoResizeTextarea = () => { textAreaRef.current.style.height = 'auto'; textAreaRef.current.style.height = textAreaRef.current.scrollHeight + 'px'; }; return textarea { overflow-y : hidden; } scrollHeight로 해당 textArea의 높이값을 가져온다. 그 후 onChange로 입력값을 바꿔주면 된다. auto값을 준 이유는 - auto값은 안에 내용물이 없으면 기존에 값을 입력받아 생긴 높이값으로 textArea의 height값이 고정이 되기 때문이다. onKeyDown이 아닌 onChange로 한 이유는 - onKeyDown은 키를 눌..

SVG를 넣는 방법을 넣는 방법은 총 2가지이다. 1. import svgFileName from './test.svg 를 통해 이미지에 src로 넣는 방법과, 2. import { ReactComponent as SvgFileName 를 통해 컴포넌트로 넣는 방법이 있음. 개인적으로 컴포넌트로 넣는 방법을 사용하면, SVG값을 쉽게 변경이 가능함. 대신, svg 내에 변경하고자 하는 값에 ex) fill="current" 에 넣은 뒤 컴포넌트에 해당하는 값을 넣어주면 됨. 리액트 내에서 import를 통해 SVG 를 넣으면 타입 오류 ('Cannot find module 'path.svg' or its corresponding type declartions')가 뜹니다. 해당 오류가 발생 했을 때 sr..

Math.max()는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환합니다. 아래 코드는 Math.max()를 이용해 유저의 성향을 파악하는 기능을 만들었습니다. const array = Array(12).fill(0); // 0이 12개가 들어간 배열을 생성 const count = 0; let id; let target; const clickEvent = (e) => { id = e.target.id; target = foodGameExample[count].answer[id].type; //선택한 대상의 타입값을 변수에 할당 (ex : [0,2,3,1]) if (count === 6) { const result = array.indexOf(Math.max(...array)); // arr..

* https://threejs.org/manual/#ko/materials을 통해 재질 예제를 확인할 수 있습니다. * 이 글 또한 Youtube. GIS DEVELOPER 님의 영상을 보고, 공부한 부분을 적어둔 내용입니다. Mesh에 대한 재질에서 적용할 수 있는 텍스쳐(Texture)에 대한 맵핑 속성이 있습니다. "map" : 가장 기본적인 속성으로, 텍스쳐 객체를 지정하면은 지오메트리에 표면에 텍스쳐 이미지가 적용됨. 모든 재질에 적용이 됩니다. map에 대한 속성을 지정하기 위해서는 텍스쳐 객체(이미지, 동영상)가 필요합니다. 텍스쳐 속성은 텍스쳐 객체가 생성된 이후에 설정하는 것을 권장합니다. _setupModel() { const textureLoader = new THREE.Textur..