IT 203

[javascript] await 으로 element 가져오기, Promise.race

element 가 로드 되지않았는데 가져오다보니 undefined 오류가 나서 await 을 추가해서 DOM 요소가 나올때까지 기다렸다 일정시간이 지나면 null 로 내뱉는 함수를 만들었다.사실 내가 만든건 아님 채찍 형님이 만들었는데 유용하게 앞으로도 쓰일것 같아서 메모로 남긴다.const element = await waitForElement("select_"+seq);async function waitForElement(selector, timeout = 3000) { const start = Date.now(); while (Date.now() - start setTimeout(resolve, 300)); } return null;}기본 timeout 3초로 잡고, 3초되기..

IT/잡다구리 2024.10.16

[Jenkins] 젠킨스 빌드 오류, jenkins.war 위치 , workspace 위치

젠킨스 버전 업데이트 하려다가 , 기존 서버에서 java 1.8 사용중이라.. 아래와 같이 개같이 실패하고 ㅋㅋjenkins.model.Jenkins#cleanUp: Jenkins stoppedError: A JNI error has occurred, please check your installation and try againException in thread "main" java.lang.UnsupportedClassVersionError: executable/Main has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only re..

IT/잡다구리 2024.10.16

[javascript] jQuery DataTable Reset, 테이블 초기화

jQuery DataTable 사용문제점 : 모달 창으로 검색해서 띄우는 table list 가 있는데 , 모달창을 끄고 나면 테이블을 초기화 하고싶었다.사실 나도 초기화 안하고 그냥 쓰고싶었는데 , 부모창에서 select 하는 옵션 마다 모달의 검색 조건도 살짝 살짝 바뀌는 사이트여서 어쩔수없었다.검색 결과가 그대로 유지되어있으면 부모창에서 옵션을 바꿨을때 모달에서 맞지 않는 리스트가 보여지는게 싫었음대충 아래와 같은 모달창의 datatable 이 있다 가정했을때 닫기 눌렀을때 초기화를 시켜주기로함사실 초기화는 크게 문제 없었다, 다만 초기화를 하기위해서 여러 조건들을 갖추는데 꽤나 애를 먹었다.datatable 초기화는 그냥 id 로 갖고와서 .DataTable() 한번 찍어주고, destroy 한번..

IT/잡다구리 2024.09.12

[React, html , css] 작업 도중 메모, 재렌더링 key, 모바일 height 100%, border gradient 등등

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

IT/React.js 2024.04.18

[React] Video 태그 영상 자동재생

영상 백그라운드로 자동재생해야 되게끔 조정을 해야했는데, 될때 있고 안될때 있어서 이것저것 쑤셔넣어서 실험하다가 아마 아래껄로 진행 할듯 함 위 에러는 "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) { ..

IT/React.js 2024.04.12

[Next.js] nextjs build 시 TypeError fetch failed 발생

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

IT/React.js 2024.01.17

[Github] 셀프 러너 Github Self hosted Runner 사용하는법 (Feat. 리눅스, 셀프호스트러너)

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 중 하나 클릭 하면되고 그에 따른 세팅법이 ..

IT/잡다구리 2024.01.12

[React] 타입스크립트 옵셔널 체이닝, 옵셔널 , 함수형 업데이트, props 전달 등등 메모

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

IT/React.js 2024.01.04

[React] 열고닫는 메뉴 , 메롱하는 메뉴, 다중 useState 관리

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

IT/React.js 2023.12.31

[React] input checkbox 색깔 바꾸기, 커스텀 체크박스

굳이 리액트에 한정 되있진 않지만 리액트 프로젝트에서 사용 했으므로 기록 해두고자 진행하는 포스팅이다. 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..

IT/React.js 2023.12.31
300x250