CRA(--template typescript)에서 alias 별칭 안되는 문제 eject 해보기 친구의 청첩장을 만드는 프로젝트에서 다른 경로에 있는 모듈을 import 문법을 통해서 가져올 때 ../../../ 와 같이 상대 경로로 하게 되면 너무 길어지는 문제가 있었다. 혼자 강의를 들으며 이러한 문제를 적용하는 방법을 알았기에 당연하게 tsconfig.json 파일에 paths, baseUrl 속성을 넣으면 해결될 줄 알았는데 해결되지 않았다. 처리했던 방법에 대해 정리하고 공부하려고 한다. 문제CRA 환경에서 alias 별칭을 사용해서 절대 경로로 import 문법을 표현하려 했으나 제대로 적용되지 않고 " Module not found: Error ~~ "를 마주하는 문제가 발생했다. 기억에 남아있던 방식으로 tsconfig.json에 paths와 baseUrl을 추가하여 해결할 수 있다.. audio 태그 자동 재생 해결 방안 및 크로스 브라우징 청첩장을 만드는 도중 배경음악을 위한 태그 사용에 대한 문제가 발생해서 이 문제를 어떻게 해결했는지에 대한 정리 글을 남기며 다시 한번 공부하려고 한다. 문제청첩장을 만드는 과정에서 청첩장이 렌더링 되었을 때 배경음악이 자동으로 재생될 수 있도록 만들고 싶었다. 당연하게도 에는 자동 재생을 지원하는 autoplay 속성이 있어 이를 사용하면 될 줄 알았다. 하지만 대부분의 최신 브라우저들이 더 나은 사용자 경험과 보안정책상 사용자의 인터랙션이 없는 상태에서는 자동 재생을 허용하지 않는다는 것을 알게 되었다. 해결가장 첫번 째로 생각한 방법은 스크롤 이벤트가 발생하면 자동으로 재생될 수 있도록 하는 것이었다. 그렇게 작성한 코드는 아래와 같다. import { useEffect, useRef, useS.. FIreStore에서 "＼n" 개행 처리하는 방법 친구의 모바일 청첩장을 만들어 주기 위해 FireStore를 사용해 웨딩 데이터를 저장하고 FireStore에서 저장된 데이터를 가져오는 과정에서 문자열 개행 처리를 위한 "＼n" 형태가 자꾸 " ＼＼n "의 형태로 출력되는 문제가 발생했다. 이를 처리했던 방법과 놓쳤던 부분을 다시 한번 복습하고 공부하려고 한다. 문제 위의 이미지와 같은 형태로 저장된 데이터를 모바일 청첩장에서 줄바꿈을 사용하기 위해 "＼n" 개행 문자를 사용해서 데이터를 입력했고 위의 이미지와 같은 형태로 데이터가 출력되길 바라서 아래와 같은 코드를 작성했다. message.split("＼n").map((str, index, array) => { return ( {str} {index === array.length - 1 ? '' :.. Objects are not valid as a React child~ 에러와 Typescript 간단한 기능을 가지고 있는 SNS를 만들어 보던 중에 Objects are not valid as a React child~ 에러가 발생했다. 이 에러를 해결하는 데 많은 시간을 보냈다. 간단하게 해결할 수 있음에도 많은 시간을 보내야 했던 이유와 해결 방법에 대해 글을 작성한다. 에러발생 React와 TypeScript, SCSS, Firebase를 사용해서 SNS 앱을 만드는 공부를 하고 있었는데 댓글에 관련한 컴포넌트를 만드는 과정에서 이러한 오류가 발생했다. 오류 내용을 살펴보면 "객체는 자식 컴포넌트로 직접 렌더링 할 수 없다" 라는 내용이다. 구글링을 통해 검색해 보니 React 프로젝트에서 많은 개발자들이 흔히 마주하는 오류 중 하나였고, 간단한 해결 방법들이 즐비해 있었다. 또한 에러 메시.. createBrowserRouter 사용자 인증 유무에 따른 페이지 렌더링 방법 React 프로젝트를 진행하면서 React-Router-Dom을 사용하게 되었는데, 기존에 사용했던 대신 를 사용해 보기로 결정했다. 기존 에서는 사용자 인증 여부를 useState에 담아 일부분만 보여주는 식으로 페이지를 렌더링 했었는데 사용자 인증 여부에 따라 보여줄 페이지를 결정하는 방법에 알아보면서 글을 남겨두면 좋을 것 같다는 생각이 들어 글을 쓰게 되었다. BrowserRouter 사용자 인증 여부에 따른 페이지 렌더링 function App() { const [isAuthenticated, setIsAuthenticated] = useState(false) return ( ); } export default App; const Router = ({ isAuthenticated }) => { .. 이전 1 다음
