반응형 Front-End25 [React] Failed to execute 'connect' on 'AudioNode': cannot connect to an AudioNode belonging to a different audio context 에러 해결 [ 문제점 ] Web Audio API의 MediaStream, Analyzer, AudioContext 등을 사용하여서 녹음하고, 이를 시각화 하는 작업을 하고 있었다. 그러나 웹을 실행시키면 다음과 같은 에러가 나와서 아예 웹이 죽어버렸다. [ 해결 방법 ] AudioNode 라는 것이 다른 context에 연결되어서 에러가 났다는 것이었다. 나는 분명 audio context를 새로 만들거나 다른 것에 연결한 적이 없었는데 위와 같은 오류가 떠서 해결하는데 많은 시간이 걸렸다. 오류가 일어난 원인은 React의 2번 렌더링 하는 것이었다. Create React App 을 사용하여서 React를 시작할 경우 React.StricMode 로 App을 감싸서 개발할 때 렌더링을 2번한다. import .. 2022. 8. 1. [CSS] 가로, 세로 스크롤 없애기 업무 중 스크롤을 만들고 디자인 해야하는 경우가 있었다. 스크롤을 만들기 위해서 overflow: scroll 을 설정하니 다음과 같이 가로, 세로 스크롤이 모두 생겼다. 1. 가로 스크롤 없애기 이런 경우 가로 스크롤을 없애기 위해서는 2가지 방법이 있다. overflow-y: scroll; overflow-x: hiddle; 위 2가지 방법 중 한 가지를 사용하면 된다. 2. 세로 스크롤 없애기 위와 비슷한 방법으로 다음과 같은 방법이 있다. overflow-x: scroll; overflow-y: hiddle; 2022. 7. 28. [React] 함수형(function, arrow) 컴포넌트에서 generic 사용하기 React에서 함수형 컴포넌트를 작성하는 방법은 두 가지가 있습니다. 첫 번째는 function 을 사용하여서 나타내는 방식이고 두 번째는 ECMA6 에 추가된 화살표 함수를 사용하는 방식입니다. 각각의 방식에서 generic을 어떻게 선언해야 하는지 알아보겠습니다. 1. function 키워드를 사용한 경우 interface Props { value: T } function App(prorps: Props) { return App } export default App 2. Arrow function을 사용하는 경우 interface Props { value: T } const App = (props: Props) => { return App; } export default App 이와 같은 방식으로 g.. 2022. 7. 25. [React | Jest] unit test raises error because of .getContext() is not implemented [ 문제점 ] jest를 사용하여 테스트 하는 과정에서 canvas element가 있었다. 이를 조작하는 메소드 .getContext()를 사용하는데 여기서 에러가 발생하였다. canvas를 테스트 하는 것은 아니기에 테스트는 성공하였지만, 하는 과정에 에러가 났다. [ 시행착오 ] 구글에 검색해보니 jest-canvas-mock을 설치, createElement 함수를 jest.fn()을 사용해서 조작하기 여러 방법을 찾았다. 그러나 jest-canvas-mock은 install 하니 .getContext()까지는 에러가 없이 되지만 undefiend가 반환이 되면서 이후 과정에서 다시 에러가 발생하였다. createElement를 조작하는 방식은 마찬가지로 .getContext() 까지는 작동되지만.. 2022. 7. 20. [NextJS] Image background 설정하기 일반적으로 웹에서는 img tag 혹은 css의 background-image 속성을 사용하여서 배경 이미지를 설정한다. 그러나 Next JS에서는 자체적으로 최적화를 해주는 Image tag가 있다. 따라서 이 태그를 사용해 배경으로 설정해보겠다. import Image from "next/image"; export default function Page() { return ( content ) } Image tag에서는 width와 height를 설정할 수도 있지만 위처럼 layout을 fill로 설정하고 objectFit을 cover로 설정하면 자동으로 배경을 채워준다. objectPosition 속성은 사용하지 않을 수도 있지만 우선 center로 설정해준다. 이렇게 작성하기만 하면 이미지와 co.. 2022. 7. 2. [NextJS] SyntaxError: Unexpected token u in JSON at position 0 - router.query undefiend 해결하기 [ 문제점 ] Next Js의 이전 페이지에서 query를 사용해 값들을 넘겨주고 이 값들을 가져와 사용하려고 하였다. 전달하는 값이 json이라서 JSON.stringify을 하여서 보내고, JSON.parse함수를 사용해서 받으려고 하였다. 그래서 다음과 같은 코드로 실행을 하였는데 오류가 나왔다. import {useEffect} from "react"; import {useRouter} from "next/router"; export default function App() { const router = useRouter(); useEffect(() => { console.log(JSON.parse(router.query.dict as string)); }, []); return ( {router.. 2022. 6. 28. [NextJS] Next js를 배워보고 느낀 점 React에서는 routing을 하기 위해서는 react-rout-dom을 사용해서 path 별로 어떠한 컴포넌트가 보일 건지 설정을 해주어야 했다. 그리고 SSR을 설정하기 힘들어서 SEO면에서도 좋지 않았다. 솔직히 SEO같은 점들은 체감되지는 않았지만, Next js를 쓰게 되면 file 별로 자동으로 path가 만들어지고 SSR을 하기에도 매우 편하다고 해서 배워보았다. 노마드코더의 Next JS 무료 강의를 들었는데 계속 들으면서 느꼈던 것은 Next js에는 정말 엄청난 기능들이 많다는 것이었다. file 별로 URL path가 생성되는 것만 알고 있었는데, 그 속을 들여다보니 기본적인 SSR 기능으로 SEO를 할 수 있고, redirect와 rewrite 기능으로 URL masking을 할 .. 2022. 6. 11. [NextJS] react-quill ReferenceError: document is not defined 에러 해결 [ 문제점 ] Next js프로젝트에서 react-quill을 설치하고 일반적인 컴포넌트 가져오는 식으로 import ReactQuill from react-quill 이처럼 코드를 작성하면 document is not defiend이라는 오류가 나오면서 정상적으로 작동되지 않는다. [ 해결 방법 ] Next JS는 SSR(Server Side Rendering) 먼저 이러한 문제가 생긴 이유는 Next js는 SSR(server side rendering)을 하기 때문이다. SSR이란 화면에서 보여줄 페이지를 서버에서 먼저 렌더링을 한 후에 클라이언트에게 제공한다. CSR(client side rendering)을 화면을 조작한는 자바스크립트 파일을 모두 로드해야 해서 속도가 느리지만 SSR의 경우에는.. 2022. 6. 10. [CSS] Font property font-family does not have generic default 해결 [문제점] 커스텀 폰트를 사용하고 텍스트에 font-family로 설정을 해주었더니 webstorm에서 아래와 같은 경고가 나왔다. @font-face { font-family: "galmuri"; src: url('/fonts/Galmuri11.ttf'); } .text { font-family: galmuri; } Font property font-family does not have generic default [해결 방법] 우선 webstorm에서 나온 경고이기 때문에 커스텀 폰트만 제대로 적용을 했다면 웹은 정상적으로 보일 것이다. 정상작동을 하는데도 경고를 한 이유는 네트워크 오류 등 커스텀 폰트를 불러오지 못했을 때를 대비하라는 의미이다. 따라서 그 대용 폰트를 지정해주면 경고는 사라진다. .. 2022. 2. 23. 이전 1 2 3 다음 반응형
