Coaspe

HAR(HAR 파일 형식)은 HTTP 아카이브(Archive) 파일의 약자입니다. HAR 파일은 웹 브라우저에서 발생하는 네트워크 활동을 기록하는 포맷으로 사용됩니다. HAR 파일은 네트워크 트래픽을 포착하고, 브라우저가 서버에 보내는 HTTP 요청과 서버에서 받은 HTTP 응답을 포함한 다양한 정보를 저장합니다. 이 정보에는 URL, HTTP 메소드, 헤더, 쿠키, 캐시, 타이밍 정보(요청 및 응답 시간, 데이터 전송 시간 등) 등이 포함될 수 있습니다. HAR 파일은 주로 웹 개발 및 성능 분석에 사용됩니다. 개발자는 HAR 파일을 사용하여 웹 페이지의 네트워크 동작을 분석하고, 성능 문제를 해결하거나 최적화할 수 있습니다. HAR 파일을 통해 각 요청과 응답의 세부 정보, 로딩 시간, 리소스 사용량..

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 ..

1. p tag 개행 표시 방법 whitespace-pre-line 설정해주면 된다. 2. 작가들을 위한 포트폴리오 관리, 커뮤니티 시스템 프로젝트 Ollim 시작 3. useCallback을 사용해야할 때 But in some cases you need to maintain a single function instance between renderings: A functional component wrapped inside React.memo() accepts a function object prop When the function object is a dependency to other hooks, e.g. useEffect(..., [callback]) When the function has som..

1. Framer Motion에서 layout attribute를 사용하여 반응형 UI를 만들 때 AnimatePresence 를 같이 사용하지 않으면 UI가 이상하게 변하는 현상이 발생하므로 꼭 같이 사용하자. 2. 경매 시스템에서 Timer 구현 맨 처음에는 express 서버로 경매 생성 요청을 보내면 setInterval을 이용해 1초마다 Realtime Database에 있는 경매 남은 시간을 갱신 시키고 setTimeout으로 30분 후에 경매를 종료시키는 방법을 사용할려고 했으나 setInterval을 사용 할 때 생기는 delay가 setInterval로 실행하는 함수를 한 번 실행 할 때마다 약 7.2ms가 발생하여 30분동안 약 18초가 발생하여 너무 큰 오차가 발생했다. (JavaSc..

1. Tailwind css ver 2.xx에서 jit mode를 사용하고 싶을 때 tailwind.config.js에 mode: "jit", purge에 ts와 tsx가 있는 경로를 명시 mode: "jit", purge: [ "./public/**/*.html", "./src/components/*.{js,jsx,ts,tsx}", "./src/components/**/*.{ts,tsx}", "./src/page/*.{ts,tsx}", ], Window 사용 시 npm install cross-env -D (POSIX와 Window의 prompt의 환경변수 사용 방법이 달라서 install) package.json에서 "start": "cross-env TAILWIND_MODE=watch craco s..