본문 바로가기
반응형

전체 글202

setTimeout() 함수 쿡북 setTimeout() setTimeout(function() { console.log('5초뒤출력!'); }, 5000); 이 코드만 가지고 잘 가져다 쓰도록하자 리액트에서는 useEffect에서도 유용하고 여기저기서 잘 쓰구 있다. 비동기 방식의 자바스크립트에서는 매우 자주 쓰이는 함수다 추가로 clearTimeout()도 알아두자 var settime = setTimeout(function() { }, 5000); clearTimeout(settime); 이와같이 혹시 모를 오류나, 남아있는 시간때문에 삭제하고 중지하기 위해서 사용한다. 그리고 보너스로 일정시간마다 반복하는함수 setInterval()함수도 있다. test = setInterval(function() { alert('일정시간마다 출.. 2022. 4. 2.
폴더 내 파일명 리스트 추출해서 변수로 쓰기(수백개) 후.... 정말 미친일이 벌어졌다. 이렇게 폴더안에 있는 파일이름들을 전부 배열, 혹은 json변수로만들어 사용해야 할 일이 생겼다. 이와같이 이미지 파일이 존재하면 해당 이미지파일을 보여주고 없으면 기본 이미지를 보여주는 과정인데 .... const handleImage = (e)=>{ e.target.src=default_img console.log(e.target.src) } return .... 이와같이 출력했는데 이와같이 해주면 정상적으로 작동은하지만 Next.js나 React의 public폴더안에 없는파일을 한번 연결해주는 과정이라 500에러가나게 된다. (500 Internal Server Error) 휴... 그래서 결국 방법을 강구해 보았다. 500개의 데이터목록이 있는데 350개의 이미.. 2022. 4. 2.
Next.js, React.js export해서 변수 데이터 사용하기 약 400~500개의 라면 데이터가 있는데, 100개정도의 데이터는 사진파일이 존재하지 않았다. 그래서 사진파일이 없는경우, onError로 처리해주다가 500에러 문제로 좀더 근본적으로 처리하려고 했는데 현직 개발자 분에게 상담했더니 이런경우는 백엔드에서 데이터가 없는파일은 없다고 처리를 해주는게 맞다고 하신다. 근데 지금 프로젝트 진행과정상, 다시 데이터 정리하기도 시간이 얼마없고 백엔드 담당하는 친구가 거의 한명인 상황 급하게 사진파일이 없는 녀석을 처리해줄 필요가 있었다. 500에러를 신경쓰지 않으면 그냥 진행하면 되지만, 그 에러가 보기싫어 사진파일이 없는 데이터를 배열로 만들어주어 처리했다. 그 때 사용한 export문법 data.js let doc = [ "7가지 채소가득 우리밀라면.png".. 2022. 4. 2.
css속성 변수로 주기 feat 템플릿 리터럴 이와같이 반응형 창에서 각 이미지의 간격 픽셀을 다르게 주고싶었다. 보면 좌우 좌우를 반복하면서 약간의 지그지그 형태로 배치해 주었는데, 핸드폰 화면에서 더 넓게 배치하면 이미지가 겹쳐 보기힘들어지고, 큰화면에서 좌우 간격을 좁게 배치하자니 좀 보기가 좋지 않았다. 그래서 화면별로 지그재그 간격을 다르게 해주기 위해 사용한게 변수로 css설정을 해주자! 였다. const [reactive, setReactive] = useState('40px') const [reactive2, setReactive2] = useState('80px') useEffect(() => { if (size.width 768) { // setSizeon(false) setReactive('40px') setReactive2('8.. 2022. 4. 2.
상단메뉴바 고정, 사이드바 고정 (Fixed) 오늘까지 고민했다. 사이드바로 간단하게해서 대충 할지 아니면 정성스럽게 상 하단 고정 메뉴바를 만들어 이용할지 결론은 아직 시간이 남아있고, 모바일에서 반응형으로 사용하기 좋게, 어플처럼 만들어 보자였다. 중요한건 top,bottom모두 fixed속성을 이용해 주어야했다. 특정 사이즈에서 반응형을 사용하는것과 windowsize를 이용하는것ㅇ느 https://flykimjiwon.tistory.com/120 을 참고하고 중요한건 fixed속성을 이용한 방법이다. -> css속성에 position:fixed를 사용하고 top,bottom,right,left속성을 이용해 위치를 고정시켜주면 된다. - 참고한링크 https://www.w3schools.com/howto/howto_css_fixed_sideba.. 2022. 4. 2.
div border속성 (테두리,선,굵기등...) 지금 진행중인 프로젝트에서 상단은 속성 하나로 줄을 구분해 주었지만, 하단에서는 hr속성을 사용하기가 조금 곤란했다. 그래서 div를 하나만들어주고 상단에 라인을 만들어줘 고정시키면 되겠다고 생각했다. 중요한건 div 상단이건 하단이건 div박스 자체에 border속성을 주는 방법을 알아야 한다는 것이 었다. 그저 div에다가 border-top: solid; 이런식으로 속성을주고 원하면 px지정 및 색상까지 정해줄 수 있다. - 참고한사이트 https://developer.mozilla.org/ko/docs/Web/CSS/border-top 2022. 4. 2.
반응형

티스토리툴바