프론트엔드 개발 찔찔이

피셔-예이츠 알고리즘function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; // 요소 교환 (구조 분해 할당) } return array;}const arr = [1, 2, 3, 4, 5]; console.log(shuffleArray(arr)); // 배열이 랜덤하게 섞인 결과 출력Math.random()0이상 1미만의 난수이다.Math.random() * 4를 하면 0이상 4미만의 난수를 얻을 수 있다. 이것을 Math.floor로 감사면 0이..

https://hyjang.tistory.com/entry/React-%EA%B3%B5%EA%B3%B5%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8F%AC%ED%84%B8-%EC%98%A4%ED%94%88-API-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0Axios-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC [React] 공공데이터 포털 오픈 API 호출하기(+Axios 라이브러리)https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유hyjang.tistory.com이전 게시물..

https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr공공데이터 포털사이트에 있는 오픈 API중에 "자전거 사고 다발" 오픈 API를 가져오려고 한다.  먼저 데이터찾기 > 데이터목록에서 "자전거 사고다발"이라고 검색하면 오픈 API 메뉴에 아래와 같이 JSON과 XML 확장자 카테고리의 API가 나온다. 현재는 위와 같이 API 명세서를 swagger에 연결하여 보여주는 듯 하다.API 명세서에 있는 파라미터값들을 모두 추가해줘야한다. 도로교통공단_자전거사고다발지역정보서비스 하단에 있..

여러장 이미지 업로드  const [showImg, setShowImg] = useState([]); (...) function handleAddImg(e){ //이미지 업로드 preview const imgList = e.target.files; let imgUrlList = [...showImg]; for(let i = 0; i 6){ //최대 이미지 갯수 설정 imgUrlList = imgUrlList.slice(0, 6); } setShowImg(imgUrlList); } function handleDeleteImg(image){ //이미지 삭제 setShowImg(sho..

들어가며리액트 프로젝트를 제작한 후 배포를 할때 npm run build를 하여 배포한다.만약 파일질라같은 FTP에 배포할 땐 build 파일에 있는 파일들을 모두 옮기고, 도메인/index.html과 같은 주소로 접속하면 된다.하지만 router기능(페이지)을 추가했다면 '/' 같은 Home 페이지가 있을 것이다. 이럴때 FTP같은 곳에 배포한다면 index.html로 접속되기 때문에 오류가 생긴다. 따라서 Firebase나 Vercel같은 단일 페이지로 배포해주는 곳에 호스팅한다면 이러한 오류없이 프로젝트를 배포할 수 있다. 프로젝트 빌드하기빌드란 배포를 위해 파일을 생성하는 과정이다.npm run build빌드의 결과물은 build 폴더에 저장되는데, 이 폴더에는 배포에 필요한 모든 파일이 있다.용..

스와이퍼 UI 가져오기https://swiperjs.com/demos#navigation Swiper DemosSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com위 경로에서 CodeSandbox 중 React 선택## App.jsximport React, { useRef, useState } from 'react';// Import Swiper React componentsimport { Swiper, SwiperSlide } from 'swiper/react';// Import Swiper stylesimport 'swipe..

들어가며리액트 next.js에서 태그에 onClick을 적용하려는데 HTML 문법으로 적용하여 작동이 안되는 오류가 있었다.리액트, NEXT.JS에서 onClick을 사용하는 방법을 알아보자."use client" const number =[ { id:'1', text:'orange' },(...)] export default function Home() { function OnClick(e){ console.log(e) } return ( {number?.map((it)=>( {it.text} ))..

들어가며게시판이나 댓글에 글을 쓸 때 엔터를 사용하여 줄바꿈을 한다.REST API를 통해서 JSON 문자열로 데이터를 저장하면 엔터가 적용이 안될 때가 있다.저장한 데이터를 VIEW창에 불러올 때 엔터를 적용하는 방법을 알아보자.  새 노트 추가 페이지에서 위와 같이 작성하고 저장한 후, 데이터를 확인해보자. 데이터에는 위와 같이 "/n"이 포함되어 있는 것을 확인할 수 있다.데이터를 map메서드로 가져올 때 content 부분은 split메서드를 사용하여 "/n"부분을 구분자로 나눠준다.구분자는 끊어야할 부분을 말한다.  {item.content?.split("/n").map((it, idx)=>( {it} ..

들어가며create에서 POST를 했지만 실시간으로 반영되지 않음fetch에서 정보를 가져오면 Next.js에서는 정보를 캐시(.next 폴더)로 저장한다.next폴더를 삭제하고 다시 생성한다.rm -rf .next 또는 .next 폴더 삭제npm run dev새로고침💡 캐시가 삭제되고 개발환경을 다시 실행하면서 json 정보를 가져온다. 마찬가지로 POST를 할 때도 캐시를 삭제하는 작업이 필요하다. Revalidating Data(...)export default async function RootLayout({ children }) { const resp = await fetch('', {next:{revalidate:10}}) const topics = await resp.json(); ..

프로젝트 생성터미널을 열고 프로젝트 생성npx create-next-app@latest .생성 후 파일 > 폴더 열기를 통해서 생성한 폴더를 가져와야 함 (파일이 보이지 않음) 프로젝트 시작npm run dev  초기 세팅(reset)/src/app/layout.js : 페이지의 기본 골격page.js : 메인 페이지globals.css : 전체 css (초기 내용 전체 삭제).next : build 배포판이 저장되는 폴더public : 정적 자원(이미지 등) 폴더# layout.jsimport "./globals.css"; export const metadata = { title: "Create Next App", description: "Generated by create next app",};..