프론트엔드 개발 찔찔이

피셔-예이츠 알고리즘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이..

들어가며리액트 프로젝트를 제작한 후 배포를 할때 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} ..

들어가며이전에 다크모드 기능을 추가하여 만들었던 noteapp은 axios를 이용해서 REST API를 호출했다.데이터 서버는 json-server를 glitch를 통해 배포했고, axios에 사용한 URL도 glitch 사이트에서 배포한 URL을 넣었다.나중에 이 프로젝트를 누군가에게 배포할 때, 보안상 데이터 서버의 url을 그대로 컴포넌트에 넣어두기엔 불안했다.그래서 .env를 사용하여 나만의 암호키를 만들기로 했다. .env 사용법먼저 컴포넌트의 root 경로에 .env 파일을 생성한다.# /.envREACT_APP_API_URL = https://서버경로# /src/App.jsconst data = useFetch(`${process.env.REACT_APP_API_URL}/notes/`); n..

들어가며이전에 styled-components를 이용하여 다크모드를 적용할 수 있는 노트앱을 만들었다.지인에게 피드백을 부탁했는데 제목이 길어지면 말줄임 처리되고 툴팁으로 볼 수 있도록 해보라는 추천을 받았다.툴팁을 이용해 꾸미는것은 처음이라 적용해보며 배워보도록 하겠다. css를 이용한 말줄임 처리 아직 제목의 input이나 css에 아무 조치를 하지 않아서 무한하게 제목을 쓸 수 있다.input에서 maxLength를 이용하면 글자수 제한을 둘 수 있지만 반응형으로 진행하다보면 결국 두 줄, 세 줄로 늘어나게 될 것이다. css에서는 box 속성을 이용하여 말줄임 처리를 할 수 있다.display:-webkit-box; //box로 지정-webkit-line-clamp : 1 //1줄까지 보이게하기-..

지난 포스팅에서는 댓글 리스트를 불러와봤다.그리고 댓글 작성 시 나의 정보를 댓글 데이터에 추가하기 위해 암호화한 로컬스토리지를 저장하는 작업을 했다. 해당 작업으로 새로고침해도 로그인을 유지할 수 있도록 true 값을 저장하는 작업도 할 수 있었다.//Header.js 로그아웃 버튼에 추가 secureLocalStorage.setItem("AutoLogIn", false); //LogIn.js 로그인 성공 조건문에 추가 secureLocalStorage.setItem("AutoLogIn", true); //App.js 에 추가 useEffect(()=>{ const AutoLogIn = secureLocalStorage.getItem("AutoLogIn"); setLogInCheck(..

지난시간에 구현했던 LogIn.js 컴포넌트에서 로그인이 되면 setLogIn(true)가 되도록 하였는데,결국 true 값을 home, header 등으로 보내야하기 때문에 App.js를 기준으로 props를 전달하기로 했다.  function App() { return ( } /> } /> } /> );}기존에 구현했던 코드에서 LogIn 컴포넌트에서 데이터를 받아야하고, Home, Header에 데이터를 보내야 한다.  이럴때 가장 쓰기 좋은 방법은 App.js에서 useState를 만들어 데이터를 보내고 받는 방법이다. const [LogInCheck, setLogInC..

현재 나는 리액트를 독학으로 공부중이다.지금은 리액트로 서버 데이터를 주고받는 연습중인데,이전에는 fetch 메서드로 REST API를 호출했다면 그보다 더 쉽다는 axios를 이용하여 REST API를 호출할 예정이다. 현재 회사의 퍼블리셔들끼리 스터디를 진행하여 프로젝트를 만들 예정이고 거기서 나는 로그인을 구현하기로 했다. 일단 우리는 백엔드 개발자가 아예 없는 관계로 프론트 상에서만 구현을 해야한다.   내 유일한 코드 리뷰어 챗 GPT는 대충 "가능은 하지만 학습용으로만 사용하고 실제로는 반드시 백엔드와 연동해라"라고 한다.  일단 머리로는 아이디 비밀번호를 치면 데이터를 얻어와서(GET) 비교한 후에맞는게 있으면 로그인, 없으면 back하면 되는거 아닌가? 했는데.. GET: 주로 데이터를 조..