본문 바로가기
[react] react-datepicker를 커스텀 (ft. 여러개 날짜 표시) react-datepicker로 여러개의 날짜를 표시하는 커스텀입니다. 보통의 데이트 피커는 달력을 오픈하여 원하는 날짜를 지정하는 방식의 구현을 하는데 이번에는 달력에서 여러개의 날짜를 한번에 보여주는 디자인으로 커스텀 하였습니다. react date-picker 라이브러리에서 제공하는 highlight dates 기능을 이용 highlightDates 속성 사용하여 하이라이트 할 여러개의 날짜를 배열로 넣어줌 구현 화면 구현 영상 구현 코드 애니메이션 효과를 위해 framer motion 라이브러리 사용 dayjs 라이브러리 사용하여 달력 header 영역 날짜 표시 부모에서 chosenDates 에 하이라이트할 날짜를 배열로 보내주어 구현 import React from "react"; import..
[js] 자바스크립트 debugger 활용 자바스크립트에서 디버깅시 debugger 기능을 활용할 수 있습니다. debugger debugger문을 삽입한 시점이 breakpoint가 되어 디버깅을 할 수 있음 Call Stack 내역을 통해 호출 스택의 진행 순서를 알 수 있음 실행 흐름을 따라가면서 코드를 체크하여 검증할 수 있음 debugger 코드 사용 debugger; 라고 코드 중간에 삽입하여 사용하면 debugger 실행 시점일때 개발자 도구가 source로 바뀌면서 화면이 멈춥니다. debugger; 사용 화면 디버깅 버튼을 누르며 한줄씩 코드를 실행드가 실행해보면 각 변수에 할당되는 값이 우측에 표시되기 때문에 디버깅을 위해 console이나 alert로 값을 일일이 찍어서 확인할 필요가 없습니다. 오른쪽에 도돌이표처럼 생긴 버튼..
[js] 자바스크립트 함수 선언과 함수 호출 자바스크립트 함수와 함수 호출에 관한 설명입니다. 함수 선언 코드 형식1 es6 함수 문법: 화살표 함수 아래 함수에서 { } 는 객체가 아니라 블럭 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 -> const add = () => ({ ... }) const add = () => a+b; //함수 선언 //const add = () => {return a+b} 위의 함수와 같음 //const add = () => ({a+b}) 객체를 리턴할때는 바디를 ( ) 감싸 주어야 함 코드 형식2 매개변수를 넣어 다양한 함수 활용 가능 function cal(func,a,b) { //함수 선언 return func(a,b) //명령 } //conts cal = (func,a,b) => func(a,b) 와 위..
[react] react 차트 라이브러리 추천 react 차트 라이브러리 괜찮은 것을 소개합니다. 1. nivo 커스텀 기능이 정말 잘 되어 있음 다양한 차트 종류 사이트 상에서 커스텀 적용하여 미리보기 가능 결과 코드를 바로 복사하여 사용 https://nivo.rocks/components/ Components | nivo nivo.rocks nivo 차트 사용 예제 2. Recharts 간단한 차트를 사용할 때 적당함 적당한 커스텀 기본 디자인과 속도가 좋고 코드 적용이 정말 쉬움 https://recharts.org/en-US rechart 차트 사용 예제 3. apexchart 커스텀 기능이 매우 잘 되있음 nivo에서 불가능한 커스텀 가능함 documents가 매우 잘 되있음 다양한 차트 종류 https://apexcharts.com/
[css] 웹페이지 이미지 영역에 맞추어 영상 삽입 웹페이지에서 정해진 이미지 영역에 딱 맞추어 영상 삽입하는 방법입니다. 주로 웹사이트나 블로그의 상세 페이지에서 html, css로 페이지를 만들때 미리 만들어 놓은 이미지 안에 맞추어 유튜브와 같은 영상을 띄울 때 사용하는 css 적용 방법입니다. 편하게 inline 방식으로 구현하였습니다. 구현 화면 웹페이지 이미지 영역에 맞추어 영상 삽입 정해진 이미지의 위치와 영역을 알맞게 정해줍니다. iframe 태그의 부모 요소를 영상 비율인 16대9 사이즈에 맞추어 높이를 설정해 주어야 영상이 일정 비율로 반응형으로 출현합니다. 56.25% -> 100% : 56.25% = 16 : 9 유튜브 ifram 코드 가져오기 유튜브 해당 영상의 메뉴에서 공유 > 퍼가기에 iframe 코드를 복사하여 사용합니다.
[js] onclick 이벤트 링크 넣기 onclick 이벤트를 이용해 링크를 넣는 방법입니다. html에서 링크를 연결할 때는 주로 를 연결하는데 다른 방법으로 태그에 onclick 이벤트를 걸어 링크를 삽입할 수 있습니다. onclick 이벤트 링크 넣기 onclick="location.href='';" onclick 이벤트 링크 예제 ...
[git] git 실서버 올리기 git 프로젝트 실서버 올리기 프로젝트를 어느정도 구현을 하면 실서버에 올리는 작업을 하게 됩니다. 먼저 실서버 주소와 최신 작업까지 git에 올라가 있어야 합니다. git 실서버 올리기(처음 등록 후 올리기) 실서버 접근 ssh -i "ircc_keypare.pem 위치 path" ubuntu@"실서버 주소" //예시 ssh -i "/Users/pccafe/ircc_keypare.pem" ubuntu@3.34.219.xxx 실서버 처음 등록일 경우 git clone "깃 주소" //깃 복제-다음 실서버 업데이트부터는 git pull npm install //패키지 설치 npm run build //실서버에서 빌드 작업 실서버 업데이트 명령어 pm2 start npm --name “이름” -- start..
[js] html 이미지 저장하기 기능 구현 (ft. html2canvas) html 라이브러리를 통해 이미지 저장하기 기능입니다. html2canvas html을 canvas로 변환하여 캡처된 화면을 이미지 저장해주는 라이브러리 입니다. https://www.npmjs.com/package/html2canvas html2canvas Screenshots with JavaScript. Latest version: 1.4.1, last published: 2 months ago. Start using html2canvas in your project by running `npm i html2canvas`. There are 1381 other projects in the npm registry using html2canvas. www.npmjs.com html2canvas 적용 코..
[react] react의 scroll 이벤트 사용법 react hooks에서 스크롤 이벤트 사용법입니다. 지난 포스팅에서 useEffect 안에서 scroll으로 인한 렌더링 문제에 관해 다룬 적이 있었는데, 오늘은 react에서 스크롤 이벤트를 사용하는 방법을 공유하고자 합니다. 혹시 다른 의견이나 방법이 있으시면 댓글로 알려주세요. 구현하고자 하는 기능은 일정 높이 이상의 스크롤 이전과 이후로 컴포넌트를 스위치하여 view를 다르게 구현하는 것입니다. 하지만 react에서 scroll 이벤트를 거는 것이 생각보다 안되는 것이 많았습니다. 하나씩 살펴보겠습니다. react에서 구현안되는 코드 1. useRef를 이용한 돔 접근 후 ref.current.addEventListender 이용해 걸기 -> 오류메시지: addEventListender prop..
[react] html 카메라 갤러리 이미지 불러오기 보여주기 DB 보내기 react에서 web API를 이용해 html 갤러리 이미지 불러오기 보여주기 기능입니다. 구현영상 web api 이미지 불러오기 보여주기 기능 코드 이미지 파일 불러오기 input type="file" 로 파일 업로드 기능 input 태그의 accept 속성은 서버로 업로드 할 수 있는 파일의 타입을 명시 accept 속성은 input 요소의 type이 file인 경우에만 사용 가능 보여주기 함수 onChange 이벤트를 걸어 아래의 함수를 실행 const onAddThumbnail = (e) => { let reader = new FileReader() // FileReader API로 이미지 인식 reader.readAsDataURL(e.target.files[0]) //reader에게 file을 ..
[react] react-datepicker 커스텀 (ft. redux-toolkit 연결) react-datepicker를 커스텀하여 redux-toolkit을 이용해 데이터를 관리합니다. 프로젝트를 할 때 react-datepicker를 사용할 때가 빈번합니다. 커스텀하기에 가장 flexible한것 같아서 사용하고 있는데 이번에는 redux-toolkit과 연결해서 날짜를 보내주고, 날짜를 이용해 데이터를 fetch하였습니다. 여기서 처음에는 dayjs를 감싸서 toolkit에 보내주었을 때 "A non-serializable value was detected in the state" when using redux toolkit 와 같은 warning을 발생시켜 해결 방법으로 new Date()를 이용해 겉을 더 감싸서 보내주어 문제 없이 작동했습니다. 구현 영상 부모 코드 import Re..
[react] react에서 svg 불러오는 방법 react에서 이미지 적용을 위해 svg 파일을 불러오는 방법입니다. 1. img src에서 불러오는 경우 2. import 후 img src에서 불러오는 경우 import Home from 'mobile/Home.svg'; 3. background image에 불러오는 경우 const bgImg = useMemo(() => ({ background: "url('/images/bar.svg') no-repeat center" }), []) ... ... 4. svg를 React 컴포넌트로 사용하는 방법 import { ReactComponent as Car } from "../../../svgImages/car.svg"; ... svg를 React 컴포넌트로 사용하였을 경우 svg의 색상, 크기 커스텀이..
[react] 체크박스 구현 (ft. 전체 선택, 전체 해제) react에서 체크박스 부분 체크, 전체 체크, 전체 해제 구현입니다. 구현 영상 부모 컴포넌트 import React, { useState } from 'react'; import MealTimeCard from './MealTimeCard'; const MealChooseCard = () => { const [checkedItems, setCheckedItems] = useState([]) const datas = [ { title: '아침식사', time: '오전 7:00 ~ 9:00' }, { title: '아침간식', time: '오전 7:00 ~ 9:00' }, { title: '점심식사', time: '오전 11:30 ~ 오후 1:00' }, { title: '점심간식', time: '오전 ..
[react] useEffect 안에서 scroll으로 인한 렌더링 문제 useEffect 내 scroll 이벤트 반복 렌더링을 lodash throttle로 최적화 시키는 법입니다. 프로젝트 진행 중에 스크롤 이벤트를 걸어 스크롤 높이에 따라 조건을 걸어 hidden, block 처리 기능이 필요했습니다. 하지만 scroll 이벤트 특성상 사용자가 스크롤을 조금만 움직여도 이벤트가 트리거 되기 때문에 아래의 코드를 설정하면 렌더링이 수없이 많이 일어나 위치 80에서 hidden과 block이 연속적으로 일어나면서 렌더링이 반복되는 문제가 생겼습니다. 원래 코드 const onScrollFn = () => { if (window.scrollY > 80) { setScrollTop(true) } else { setScrollTop(false) } } useEffect(() =>..
[js] 단어 filtering 다중 단어 filtering (ft. includes, some) 원하는 단어 또는 다중 단어 한번에 필터링하기 입니다. 배열 안에서 특정 단어 또는 text가 들어간 요소만 추출하거나 제외시키는 작업이 필요할 경우 사용합니다. filtering에 자바스크립트의 includes와 some 메소드를 사용하여 구현합니다. includes는 true, false를 반환합니다. some은 한가지라도 참일 때 true를 반환하고 빈 배열이면 false를 반환합니다. 단어 필터링 배열 안에 "AA"가 들어가는 단어를 필터링할 때 Array.filter(el => el.includes('AA')) Array.filter(el => el.includes('AA')).map(el => {el}) 배열 안에 "AA"가 들어가는 단어만 빼고 필터링 할때 Array.filter(el => ..
[js] 반응형 이미지 맵 구현 (ft. image-map 라이브러리) js 또는 react에서 라이브러리를 이용해 반응형 이미지 맵을 구현합니다. react에서 resposive image map 구현을 시도할때 가장 유명한 라이브러리는 jQuery를 이용한 rwdimagemap 라이브러리인데 react에서 jQuery 을 설치하고 싶지도 않았고, 설치하였구나 작동이 안되고 오류 메시지가 출현하였습니다. 그래서 react에서 할 수 있는 다른 javascript responsive image map 라이브러리를 찾았습니다. 반응형 이미지 맵 구현 하기 구현 화면 image-map 라이브러리 image-map 이라는 라이브러리고 구글에서 image-map을 검색하여 npmjs 사이트에 가면 자세한 자료를 볼 수 있습니다. image-map 라이브러리 사용법 image 좌표 ..
[react] react 에서 jQuery 사용하기 react에서 제이쿼리를 설치하여 사용하는 방법입니다. npm으로 jQuery 설치 npm i jquery npm 설치 후 package.json에서 jquery를 확인합니다. import jquery code import $ from "jquery"
키보드 이모티콘 이모지 단축키 (ft. window, mac) 이모티콘 이모지를 불러오는 키보드 단축키입니다. 키보드 이모티콘 단축키 window window 키 + 마침표 또는 window 키 + ; mac control + command + space 키
[react] npm install 설치시 npm ERR! code ERESOLVE npm install 중 npm ERR! code ERESOLVE 오류입니다. react에서 react 차트 패키지인 recharts를 설치하려고 npm install을 하던 중 에러가 발생하였습니다. 오류 메시지 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 오류 해결 npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 됩니다. 설치 후 package.json을 확인해보면 받으려고 한 recharts가 잘 받아져 있는 것을 확인할 수 있습니다.
[react] Warning: `value` prop on `input` should not be null. react로 form 작업할 때 자주 나타나게 되는 warning 이에요. Warning 오류 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. input의 value에 null가 들어갔을 경우에 대한 처리가 없는다는 경고메시지 입니다. before after input의 value가 null일 때 ''가 들어올 수 있도록 함 value={value || ' '}
[js] 두가지 배열 합치기, 중복되는 요소 찾기 두가지 배열 합치기(배열 합집합) 배열 합치기 예시 전개 연산자 spread operator(...)를 이용해 두 배열을 그대로 합칩니다. 여기서 중복된 요소를 제거하기 위해 new Set으로 한번 묶어줍니다. let arr1 =[1,2,3,9] let arr2=[2,4,6,9] let newArr = [...arr1, ...arr2] console.log([...new Set(newArr)]) //결과 (6) [1, 2, 3, 9, 4, 6] 두가지 배열 중복되는 값 찾기(배열 교집합) 배열 중복되는 요소 찾기 예시 filter와 includes를 이용하여 중복되는 값을 찾을 수 있습니다. let arr1 =[1,2,3,9] let arr2=[2,4,6,9] let newArr = [...arr1, ...
[js] find includes 차이 array에서 사용하는 메소드 find()와 includes()의 비교입니다. array.find() find() 메서드는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefinded를 반환합니다. 찾은 요소의 값 대신 인덱스를 반환하는 것은 findIndex() 요소의 위치를 찾고자 하는 경우에는 indexOf() 배열 요소가 해당 배열에 존재하는지 확인하고자 하는 경우에는 Array.prototype.indexOf() 또는 Array.prototype.includes()를 사용세요. array.find() 예시 const arr1 = [5, 30, 7, 120, 45]; const found = arr1.find(el => el > 10); console.log(f..
[js] 자바스크립트 코드 줄이는 방법 js 코드를 더 짧게 줄이는 몇가지 방법입니다. 자바스크립트 코드 축약 방법 1. or 조건문 (||) 2. and 조건문 (&&) 3. null, undefined, ' ' 체크 4. 삼항연산자 5. 숫자 형변환 1. or 조건문 (||) || 대신 includes()를 사용하면 끝없이 긴 조건문을 짧게 줄일 수 있습니다. before if (a === 'hi' || a === 'hello' || a === 'hallo') { code... } after if (['hi', 'hello', 'hallo'].includes(a)) { code... } 2. and 조건문 (&&) ?. 연산자인 optional chaining operator를 사용하여 객체의 속성값을 접근합니다. 속성 값이 없을 경우 u..
[react] axios headers authorization 추가 axios headers authorization 추가 방법입니다. 아무나 데이터 접근을 못하게 하기 위해서 headers에 token값을 추가하여 token값이 있어야 데이터를 불러오게끔 처리합니다. Bearer란 기본적인 의미는 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말합니다. axios.get axios.get(url, headers: { Authorization: `Bearer ${accessToken}` }) axios.post axios.post(url, data, headers: { Authorization: `Bearer ${accessToken}` }) 프로젝트에서 편하게 import 형식으로 사용하는 방법 const common = { SERVER_..
[html] 자바스크립트 코드 없이 자동완성 검색 구현하기 js코드 없이 html 만으로 자동완성검색을 구현합니다. 구현화면 자바스크립트 코드 없이 자동완성 검색 구현 html 코드
[js] button submit 막기 (ft. form) button의 submit 방지하는 방법입니다. form 태그에서 내에 위치하는 button은 클릭 시 항상 onSubmit 속성의 함수를 실행하는데요. button에 뒤로 가기 또는 취소의 기능을 원할때는 onSubmit 기능을 막아야 합니다. button submit 방지 button type 속성을 button으로 설정합니다. 버튼 form 태그 안의 button 사용법 저장 //submit 실행 취소 //submit 방지
[react] tailwind로 메뉴바 세팅 bottom 쪽 nav바 tailwind className 코드 import React, { useMemo } from "react"; const BottomMenuBar = () => { const naviIcon = useMemo(() => ({ background: "url('/images/mobile/home/hamburger.svg') no-repeat center" }), []) const plusIcon = useMemo(() => ({ background: "url('/images/mobile/home/plus.svg') no-repeat center" }), []) const userIcon = useMemo(() => ({ background: "url('/images/mobile/ho..
[react] 검색 기능 구현하기 react에서 fitler, include를 이용한 검색 기능 구현입니다. html input 코드 input value 속성을 넣어줍니다. onSearch(e)}> 검색 onChange action 코드 input 태그에서 onChange action을 통해 input value값에 저장된 검색어를 가져옵니다. const [search, setSearch] = useState(""); const onChangeSearch = (e) => { e.preventDefault(); setSearch(e.target.value); }; 검색 기능 코드 filter, includes를 이용하여 userId가 검색어를 포함시 필터링을 해주어 검색을 구현합니다. const onSearch = (e) => { e.p..
반응형