Coaspe

1. Audio tag의 Source tag input tag로 audio file을 받은 후 preview로 들려주고 싶다면, 받은 File을 URL.createObjectURL() 처리를 해주면 되지만, audio tag는 일반 image와 다르게 cache 때문에 src가 단순히 바뀐다고 재생되는 음악이 바뀌지 않는다. 그렇기 때문에 다음과 같이 useRef를 사용하여 처리해야 한다. // src의 state가 변화 할 때 if (audioRef.current) { audioRef.current.pause(); audioRef.current.load(); audioRef.current.play(); } 2. Search AutoComplete 구현 작가, 작품을 검색 할 때 algolia를 사용하여..

1. useEffect(()=>{},[])의 return 함수 useEffect 안에 있는 return 함수는 closure 함수 이므로 state를 참조하면 초기 상태의 state를 가져온다. return 함수 안에서는 update 된 state를 사용하려고하지 말자. 2. 라인 넘버 삭제 라인 넘버를 삭제하고 a4 몇매를 썼는지 시각적으로 보여주는 UI로 변경하였다. 3. 현재 원고와 제출한 원고를 비교하는 기능, 전체화면을 했을 때 메뉴를 드래그 할 수 있게 변경하였다.

1. Slate Editor에 페이지를 추가할까? -> Line number를 추가하고 a4 기준으로 페이지 몇장 분량이 나왔는지만 알려주는 방식으로 구현한다. 2. Tailwind css v3 arbitrary value error Tailwind css v3에서 arbitrary value를 사용하면 react-scripts build 과정에서 css minimizer plugin error가 발생한다. 3. 댓글 기능 추가 4. Render와 mount의 차이 render 메소드는 class component에서만 사용된다. render()메소드는 브라우져에 render되는 모든 view를 관리한다. render 메소드는 JSX data를 logic code와 함께 return한다. render 메..

1. FC (Functional Component)에 대해 https://woobiblog.com/Javascript/Typescript_FunctionComponent_FC_%EC%82%AC%EC%9A%A9_%EC%A4%84%EC%9D%B4%EA%B8%B0 [Typescript] FunctionComponent (FC) 사용 줄이기 React + Typescript 조합으로 개발을 하면서 자주 사용하는 타입 중 하나가 FC 이다. FC 는 FunctionComponent 타입의 줄임말로 리액트에서 함수형 컴포넌트의 타입을 선언할 때 사용할 수 있게 React 에서 제 woobiblog.com 2. cursor focus cursor focus는 mousedown 될 때 변화한다. click 할 때 변화..

1. SSL/TLS verify error 서버에서 그냥 별도로 테스트를 위해서 자체 서명 인증서를 만들어서 사용하거나, 인증서가 만료되었거나하는 이유로 인증서 검증이 되지않을 경우 self signed certificate 에러를 발생 시키게 됩니다. https 요청을 받는 host 서버가 자체 서명 인증서 사용하고 있는 경우, verify 에러가 발생합니다. rejectUnauthorized 를 false로 설정 하는 방법 process.env로 환경변수를 설정하는 방법입니다. https://yeonfamily.tistory.com/18 Node.js | self signed certificate (자체 서명 인증서) 에러 발생 원인과 Axios에서 해결 해보기 개요 SSL 요청 중 발생할 수 있는 ..

1. foreignObject tag react-flow를 이용해 custom 인물 관계도를 만드는 과정에서 custom edge의 예제에 foreignObject를 사용하는 것이 있었다. SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The element of SVG includes elements from a different XML namespace. It is an extensibility point which allows user agents to offer graphical rendering features beyond those which are ..