세상 버그 다 겪는 월야

굳이 리액트에만 국한된건 아니고 퍼블리싱이 대부분인듯한데 여튼 요번에 랜딩페이지 작업하면서 예전에 다 해봤었는데 깜빡하고 있었다가 다시금 상기된것 정리하려함. 문제 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..

github action 사용하는법에 대해선 예전에 아래와 같이 포스팅 한적이 있습니다. https://bug41.tistory.com/entry/Github-Github-Actions-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EB%B2%95-SSH-%EC%97%B0%EA%B2%B0 외부망이 엄격히 막혀있는 서버지만 배포 프로세스를 갖춰야해서 찾아보다가 세팅 다 마치고 안까먹고자 작성하는 포스팅입니다. 셀프러너를 시작하고픈 Repo 의 Settings 에 들어가서 Actions -> Runners 로 진입 New self-hosted runner 진입 그럼 아래와 같이 나오는데 내가 어디서 돌릴지 macOS, Linux, Windows 중 하나 클릭 하면되고 그에 따른 세팅법이 ..

복습겸 내가 보기 편하기 위한 기록.. 큰건은 아니고 이번에 기존 돌아가고 있는 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..

docker 를 또 간만에 사용하게되어서 윈도우 도커에 php-nginx 이미지를 다운받고 가동시켰는데 404 에러가 떴다. 보통 docker 를 사용하지않고 그냥 로컬에서 nginx 를 깔게되면 아마 /etc/share/nginx/nginx.conf 여기에 모든 설정이 다 있을텐데 docker 로 돌렸을 경우에 conf 파일이 여기저기 찢어져있다. 여튼 conf 에 설정되있는 경로와 php 및 html 파일들이 없어서 나오는 에러다. 도커로 돌렸을 경우 우리가 흔히 생각하는 nginx.conf 파일은 /opt/docker/etc/ngnix 폴더 아래에 있다. # vi /opt/docker/etc/nginx/vhost.conf server { listen 80 default_server; listen [..

Next.js 를 아이오닉으로 감싸서 안드로이드 앱을 끄적끄적 하고있는데 지도가 계속 안나와서 콘솔에 어떻게 찍히는지 좀 보고싶어서 찾다가 기록하게 되었음 방법은 두가지가 있는데 일단 첫번째는 여기저기 많은 포스팅에서도 볼 수 있었는데 난 이렇게 안했음 자바랑 별로 안친해서 ㅎㅎ; 자꾸 WebView webView = findViewById(R.id.mwebview); 이쪽에서 오류난다고 어쩌고해서 골치 아파서 재낌 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView webView = findVi..

아래 오류에서 보다시피 난 jdk 17 버전 사용중이다. JPA 세팅을 진행하는데 아래와 같은 오류 발생 "C:\Program Files\Java\jdk-17\bin\java.exe" "-javaagent:C:\Program Files\JetBrains\IntelliJ IDEA 2022.3\lib\idea_rt.jar=3238:C:\Program Files\JetBrains\IntelliJ IDEA 2022.3\bin" -Dfile.encoding=UTF-8 -classpath C:\web_developer\java\hellojpa\target\classes;C:\Users\bugki\.m2\repository\org\hibernate\hibernate-entitymanager\5.3.10.Final\h..