splice splice 함수를 사용하여 제거 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) start - 배열의 변경을 시작할 index deleteCount - 배열에서 제거할 개수 - 0일 경우 제거하지 않는다. (이 경우 최소한 하나의 새로운 요소를 추가해야한다.) item1, item2...(Oprional) - 배열에 추가할 요소 - 생략할 경우 요소를 제거하기만 한다 Return - 제거한 요소를 담은 배열 - 아무것도 제거하지 않을 경우 빈 배열을 반환 Code import React, { useState } from 'react'; function MyComponent() { const [myArray, setMyArray] =..
완성 결과물 결과물 GIF 1.기본 & 커스텀 모드를 선택할 수 있다. 2. 커스텀 모드일 경우 1번 색상과 2번 색상을 지정해 그라이데션을 설정할 수 있다. 3. 색상 설청창 외부 클릭시 닫힌다. 설계 및 주요 함수 위 결과물은 별도 라이브러리를 사용하지 않았다. input 태그에서 type="color"로 지정하면 색상 그라데이션을 설정할 수 있다. {defaultSetting ? null : ( setColor1(e.target.value)} /> )} input 태그는 색상을 HEX 코드로만 인식할 수 있기 때문에 아래 단계를 거쳤다. 1) 2가지 색상을 HEX 코드 입력 2) 2가지 색상을 RGB 코드로 변환 후 중간 값들을 계산 3) 결과 값들을 HEX 코드로 반환 RGB → HEX 변환 함수..
문제점 인식 - 메뉴탭을 클릭했을 시 강조되는 부분을 useState에 index를 넣어 관리했다.- 하지만 useState를 사용하니 새로고침시 무조건 0번 index인 첫번째 탭이 활성화되는 문제점이 발견되었다.- 때문에 현재 보고있는 페이지를 기준으로 메뉴탭을 활성화하는 방법을 찾게 되었다. react-router-dom 설치 - react 설치- react-router-dom 설치 npm install react react-router-dom useLocation react-router-dom의 useLocation을 사용하면 현재 URL과 path 값을 비교하여 탭을 활성화해준다. // App.js import React from "react"; import { BrowserRouter, Swi..
Intro 드롭 다운(Drop Down), 토글 메뉴(Toggle Menu), 슬라이드 메뉴(Slide Menu), 아코디언 메뉴(Accodian Menu) 등 다양한 이름으로 불리우는 것 같다. 하늘색 부분의 영역을 클릭하면 On/ Off 된다. 특정 아이콘 or 버튼을 삽입하여 그 부분만 클릭시 메뉴를 움직이도록 만들 예정이다. Code - styled-components를 사용했다. - 다른 페이지에서 사용하기 위해 슬라이드바를 컴포넌트 형식으로 따로 분리하여 파일을 작성했다. - 원래 슬라이드바 왼쪽에 다른 컴포넌트가 있는 부분을 고려하여 margin, padding 등의 css를 작성했다. 때문에 작동원리, 애니메이션 부분만 참고하시길 // SlideBar.jsx import React, { u..
환경변수 파일이란? - 애플리케이션이 실행될 때 특정 값을 넘길 수 있는 변수를 의미한다. 웹 애플리케이션 관점에서는 .env 파일에 정의된 변수를 의미하며, 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용한다. - API_KEY, DB 정보, TOKEN등 git, 오픈소스에 올리면 안되는 값들을 따로 저장하고 소스코드 내에서 하드코딩하지 않고 변수로 사용할 수 있다. .env 파일 생성하기 - 프로젝트 최상위 루트에 .env 파일을 생성한다. - 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오면 보안과 유지보수가 용이하다. .env 사용하기 process.env.REACT_APP_ 는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 못한다. 때문에 모든 환경변수 앞에 REAC..
React로 프로젝트를 진행하던 중 CodePen 사이트에서 괜찮은 코드를 참조하거나 가져오고 싶은 경우가 있다. 하지만 CodePen에 있는 대부분의 코드들은 html, JavaScript, CSS로 코드가 짜여져 있는 경우가 많아 React 프로젝트에 바로 적용하기는 어려움이 있다. 그래서 iframe 태그를 활용하여 CodePen의 코드들을 그대로 가져와 사용해보려고 한다. 태그 HTML 요소는 중첩 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입한다. 즉, html안에 또다른 html을 넣을 수 있다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/iframe 적용하기 1. CodePen에서 사용하고자 하는 코드를 고른다. ..
Material UI의 캐러셀을 활용하려다가 React Slick을 많이 사용하는거 같아 사용해보았다. 설치 사용하기에 앞서 공식 사이트를 참고하여 설치를 한다. https://react-slick.neostack.com/docs/get-started Neostack The last react carousel you will ever need react-slick.neostack.com npm install react-slick --save 기본 틀 여러가지 종류의 스타일이 있는데 Multiple items 라는 이름의 스타일을 사용했다. https://react-slick.neostack.com/docs/example/multiple-items/ Neostack The last react carouse..
Test 용도로 임시로 만들었기 때문에 완성되지 않았다. 커서가 있는 input 창에 검색어를 입력하면 카드의 본문의 내용중에 해당 키워드를 포함한 카드만 필터링해준다. (엔터나 버튼을 누를 필요 없이, 키워드의 변화(onChange)를 감지하여 즉각 필터링해준다) // Search.tsx import React, { useState, useEffect } from "react"; import Poster from "./Poster"; import "./Search.scss"; function Search() { const [userInput, setUserInput] = useState(""); // 입력값을 가져와서 소문자로변경 및 통일한다. const getValue = (e: any) => { s..
