본문 바로가기
[js] 디데이 카운더 기능 라이브러리 웹 디데이 카운터 표시할때 유용한 라이브러리 입니다. Time and Date https://www.timeanddate.com/ timeanddate.com 5 Planets queue up along with the Moon, a Super Strawberry Moon shines in the night sky, and the June solstice marks the beginning of summer in the Northern Hemisphere. www.timeanddate.com 먼저 구글에서 time and dat를 검색하거나 위의 링크를 눌러 사이트로 이동하세요. 메인 화면에서 오른쪽 상단 메뉴에서 Free Fun > Free Countdown For Your Site 선택. 여기서 카운..
[js] 팝업창 오픈 후 배경 스크롤 방지 자바스크립트에서 팝업창 오픈 후 뒤의 배경의 스크롤 막는법입니다. 팝업창 오픈 후 배경 스크롤 방지 const body = document.querySelector('body') const onOpenGuide = () => { //팝업창 오픈시 body.style.overflow = 'hidden' body.style.width = '100%' } const onCloseGuide = () => { //팝업창 닫을때 body.style.removeProperty('overflow') body.style.removeProperty('width') }
[js] 천자리 콤마 적용 (천자리 점찍기) 자바스크립트를 이용하여 숫자에 천자리 콤마 찍는 방법입니다. toLocaleString() 추천하는 방법입니다. toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 세팅해줍니다. 파라미터가 빈 값이면 사용자 로컬 환경의 locale을 default로 사용합니다. Number(no)?.toLocaleString('en') 정규식 사파리 환경 지원을 하지 않아 아이폰 개발을 원한다면 사용하면 안됩니다. num.toString().replace(/\B(?
[react] 카카오톡 공유하기 기능 구현 react에서 카카오톡 공유하기입니다. kakao development 앱 등록하여 자바스립트 키 복사 앱 등록 후 사이트 도메인 url 주소를 등록합니다. 자바스립트 키를 복사해 둡니다. 카카오톡 sdk 추가 useEffect(() => { // 카카오톡 sdk 추가 const script = document.createElement("script"); script.src = "https://developers.kakao.com/sdk/js/kakao.js"; script.async = true; document.body.appendChild(script); return () => document.body.removeChild(script); }, []); 클릭 이벤트 핸들러 버튼 onClick 이벤트..
[git] You have not concluded your merge (MERGE_HEAD exists) git pull 후 에러메시지 error: You have not concluded your merge (MERGE_HEAD exists). 해결방법 merge 취소 git merge --abort commit git status git commit -m "커밋 내용" git pull git pull origin master
[js] 페이지내 특정 위치로 스크롤 이동하기 제이쿼리를 이용해 버튼 클릭시 특정위치로 스크롤 이동하는 방법입니다. 주로 랜딩페이지 상단 메뉴바에 많이 사용되는 기능합니다. 버튼 클릭시 페이지내 특정 위치로 스크롤 이동합니다. 아래의 코드를 사용하기 전에 jquery.min 스크립트 파일 태그 내에 삽입합니다. easing 효과를 위해 jquery.easing 스크립트 파일을 태그 내에 삽입합니다. easing 효과를 원치 않으면 easeInOutExpo 부분만 삭제하면 됩니다. html 버튼 script //네이게이션 menu click시 easing기능으로 부드럽게 이동 $(".btn").click(function(event){ event.preventDefault(); //이전의 이벤트를 기본값 x = $(this).attr("href"); /..
[js] 문자열 특정 문자 추출하기 substring을 사용하여 특정문자열만 추출합니다. url path에서 특정 구간만 추출하여야 할 경우, substring을 이용해 특정문자열만 추출할 수 있습니다. 원본 코드: 아래 코드에서 EncodeData= 뒤에 복호화된 코드만 추출할 경우입니다. http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL... 애프터 코드: AgAFQlg5MTRIeXp/kL 문자열 특정 문자 추출하기 let url = http://localhost:3000/success?EncodeData=AgAFQlg5MTRIeXp/kL let data = url.substring(url.indexOf('=') + 1) // = 다음 문자열부터 끝까지 추출 console.log..
[js] 배열 map으로 object에 key 추가하기, value 추가 map으로 object에 key 추가하는 방법입니다. before //datas 0: {day: '2022-05-10'} 1: {day: '2022-05-11'} 2: {day: '2022-05-12'} 3: {day: '2022-05-13'} 4: {day: '2022-05-14'} 5: {day: '2022-05-15'} 6: {day: '2022-05-16'} 가공 후 after 0: {day: '2022-05-10', data: ''} 1: {day: '2022-05-11', data: ''} 2: {day: '2022-05-12', data: ''} 3: {day: '2022-05-13', data: ''} 4: {day: '2022-05-14', data: ''} 5: {day: '2022-0..
[css] table border에 border-radius 적용하기 table border에 border-radius 적용하는 방법입니다. 스타일에서 border-radius와 border를 적용시 border가 rounded 처리가 안될 때가 있습니다 . 이럴때는 스타일에 추가적으로 border-collapse: seperate 을 추가하여 기본값이 collapse에서 seperate로 변경해줍니다.
[react] useState는 비동기? useState의 비동기적 동작에 대해 알아보았습니다. react로 프로젝트로 몇 개 진행하면서 자연스럽게 알게 되었지만 개념을 제대로 정리해 본 적이 없어 아주 중요한 react hooks useState는 동기인가 비동기인가에 대한 설명을 해보려고 합니다. useState는 비동기인가? useState는 비동기적으로 동작합니다. 하나의 이벤트 핸들러 함수 내에서 같은 setState가 호출된다면 마지막에 실행한 setState가 실행되어 렌더링 됩니다. useState는 비동기 예시 import React, { useState } from "react"; const Example = () => { const [count, setCount] = useState(0); const onClick = () ..
[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 키
반응형

티스토리툴바