세상 버그 다 겪는 월야

굳이 리액트에만 국한된건 아니고 퍼블리싱이 대부분인듯한데 여튼요번에 랜딩페이지 작업하면서 예전에 다 해봤었는데 깜빡하고 있었다가 다시금 상기된것 정리하려함.문제 1. Key국문/영문 페이지가 존재하고 FullpageSection 로 작업을 진행하였는데국문, 영문으로 전환시 이중연산자로 처리한게 대부분이라 재렌더링이 없었음문제는 국문은 Section 이 4개 , 영문은 Section이 5개영문 Section5 는 왜 계속 안나오나 ... 삽질하다가 결론은 재렌더링이 안되어서 국문 Section 으로만 가지고 있으니 백날 영문으로 전환해도 의미가 없는것해결방법 : key 추가 ....key 만 추가 해주면 모든게 해결되는 문제였음 ..문제 2. 모바일 페이지 height : 100%모바일 브라우..

영상 백그라운드로 자동재생해야 되게끔 조정을 해야했는데, 될때 있고 안될때 있어서 이것저것 쑤셔넣어서 실험하다가 아마 아래껄로 진행 할듯 함 위 에러는 "the play() request was interrupted by a call to pause()" 뭔가 아직 준비 안됐는데 어거지로 작동시키려해서 나는 에러 같아서 settimeout 추가 그 이후로는 에러 발생 안했음 const videoRef = useRef(null); ...생략... useEffect(() => { setTimeout(()=>{ const video = videoRef.current; if (video) { const playPromise = video.play(); if (playPromise !== undefined) { ..

build 시 계속 위와같은 에러가 발생 로컬에서는 잘만되는데 서버에 올려서 build 만 하면 저렇게 떴다 처음에는 도대체 api 부분에 뭐가 문제여서 저러는지 이해가 안됐다 Error occurred prerendering page "/api/getpre". Read more: https://nextjs.org/docs/messages/prerender-error TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11372:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Generating static pages (64/8..

복습겸 내가 보기 편하기 위한 기록.. 큰건은 아니고 이번에 기존 돌아가고 있는 Next.js, Typescript 프로젝트에 기능 추가를 하였는데 그 과정에서 기록 해두고자 하는게 몇가지 있어서 짧게 포스팅 하려한다. 1. 옵셔널 체이닝 `?.` undefined 오류 방지를 위해 쓰인다. 웬만한 undefined 오류에는 물음표가 직빵이다 .. 다른곳에서도 그렇고 ref 로 가져온 current 에 eventListener 에서도 오류 나던걸 옵셔널 체이닝으로 아래와 같이 해결하였다 childRef?.current?.removeEventListener('scroll', catchEventScroll); 타입스크립트가 이건 편한듯 .. 2. 논널 어썰쎤 오퍼레이터 (Non-null Assertion O..

위 와 같은 기능을 만든다고 칩시다. 원래 css 이쁘게 tailwind 로 잡혀있는데 포스팅 하느라 다 빼서 없어보이는 점 양해부탁드립니다. 말이 메롱이지 , 열고닫는 메뉴, 혹은 클릭 했을때 해당 현상을 유지하는 식은 웹 사이트에서 흔히 사용되는 기능인데 근데 이 간단한걸 리액트 스럽게 반영하려니 살짝 뇌 정지가 왔어서 (jQuery 만 사용하던 응빱이라..) 복습겸, 기록겸, 남겨둡니다. 물론 아래 처럼 열고 닫는 상태들을 관리 할 수도 있겠지만 가오가 있지 다중 상태 관리로 진행합니다. const [부모1, set부모1] = useState(false); const [부모2, set부모2] = useState(false); const [부모3, set부모3] = useState(false); 다중..

굳이 리액트에 한정 되있진 않지만 리액트 프로젝트에서 사용 했으므로 기록 해두고자 진행하는 포스팅이다. input checkbox 가 파란색이 디폴트인데 색을 다르게 해야한다고 퍼블리싱 요청이 와서 간만에 바꿔봤다 className 에서 눈치 채신분들도 계시겠지만 Tailwind 도 같이 사용중이다. 알맹이는 filterCheckbox 에 있다 background-color 로 내가 원하는 색깔 지정 가능하고, background image 안에 viewBox 값을 조정해서 화살표 위치 및 크기 조정 가능하다. .filterCheckbox{ appearance: none; width: 18px; height: 18px; border: 1px solid rgba(158, 158, 158, 1); borde..

HTML5, CSS 단이었다면 되게 간단히 생각했을법도 한데 괜히 Next.js 가 엮여있어서 생각이 안났다는 핑계를 대본다 .. 여튼 포트폴리오를 만들고 있는데 굳이 DB 까지 연동할 필요는 없을것 같아서 그냥 component 각 폴더에 ___data.tsx 형식으로 데이터를 다 넣어줘서 불러오는 식으로 꾸며주고있다. #/component/Project/projectData.tsx import { Project } from "@/types/project"; const projectData: Project[] = [ { id: 1, title: "뱀팔이", paragraph: `국내 희귀애완동물 샵 및 병원을 한곳에서 볼 수 있는 뱀팔이 웹 사이트 제작 한칸띄어쓰기를 어떻게 넣을수 있을까? 왜 안될까?..

Next.js 에서 middleware.ts 파일을 추가하였는데 아래와 같은 에러가 발생 Module parse failed: Identifier 'NextResponse' has already been declared 위치는 그냥 / 에 넣어둠 api 폴더에도 넣어보고 별의별 난리를 다 쳐봤으나 절대 안됌 chatGPT 에 물어봐도 자꾸 api 폴더에 넣으라는 뚱딴지 같은 소리만 하고있음 결론은 Next 버전 다운그레이드 하고 해결. 1. node_modules 폴더 삭제 2. package.json 에 있는 next 13.4.3 으로 변경 (기존에 13.4.4 였음) 3. 다시 npm install 이렇게 하니 정상적으로 잘 작동 되는것 확인하였다.

React 오늘의 오류 index.js:1 Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 원인 App.js 파일 내부에 Switch 문이 있는데 그 안에서 Route, Redirect 이외에 다른 Container 문을 써서 오류 표출 해결 Switc..

환경 : Centos7 , Tomcat 1. 로컬에선 잘만되던게 빌드 후 서버에 업로드 하니 아래와 같은 콘솔 에러메시지와 흰화면이 떴다 uncaught syntaxerror: unexpected token '