본문 바로가기

분류 전체보기

 (265)
[React] 정상가, 할인된 금액이 있을 경우 %퍼센트 구하기 아래와 같이 따로 ts파일을 만들어서 %를 구하는 함수를 구현했다. regularPrice: 정상가 discountedPrice: 할인된 가격 percent를 구한후 Math.floor를 통해 소수점자리는 제외한다. export default function calculatePercent( regularPrice: number, discountedPrice: number ) { const discount = regularPrice - discountedPrice; //정상가에서 할인된금액을 빼서 얼만큼 할인되었는지 금액을 구한다. const percent = (discount / regularPrice) * 100; //toFixed:소수점자리제외/할인된금액의 %구하기/.toFixed(0) 는 소수점을 ..
[React] 쿠키 저장하기 (react-cookie/서브 도메인 달라도 쿠키 공유) 세션스토리지는 도메인이 다를 경우 공유가 되지 않기 때문에 쿠키를 사용하려고 한다. test.com 과 admin.test.com 으로 서브도메인만 다른 도메인2개가 있는 상황이다. 한 사이트에서만 쿠키를 저장해도 다른 사이트에서도 저장된 쿠키가 유지되도록 할 예정이다. localstorage에서 테스트시 만들어 둔 하나의 사이트를 가상의 2개의 도메인으로 만드는 방법은 저번 정리글을 참고하면 된다. 설치 npm install react-cookie or yarn add react-cookie 사용 1. index.jsx에서 를 통해 을 감싼다.(안해도 작동되긴 했음) import React from 'react'; import App from './App'; import { CookiesProvider..
[Basic] window hosts 파일 수정 (피싱 사이트) 피싱사이트 만약 네이버 사이트www.naver.com에 들어가면 DNS(Domain Name Server)를 통해 각 사이트에 해당하는 IP(ex:100.0.0.0)로 들어가지게 한다. 그리고 이 IP를 다른 IP로 변경하여 해커가 만든 사이트로 연결하는 것이 피싱 방법이다. www.naver.com으로 접속했지만 정작 연결되어 보여지는 사이트가 다른 사이트로 갈 수 있다는 것이다. 이는 hosts파일로 변경해 적용할 수 있다. 만약 해커가 주는 이상한 앱을 다운받으면 저렇게 적용하게 만들어 피싱사이트로 연결될 수 있다는 것. whois 사이트 (도메인 IP찾기) 만약 naver.com의 ip를 조회할 경우 검색후>추가조회>도메인 이름 관련 추가 조회를 누르면 IP주소가 나온다. KISA 후이즈검색 wh..
[CSS] ellipsis('...') 나타내는 방법 일정범위가 넘는 글자는 자르고 2줄부터 ...이 나타나도록 하고 싶었다. 아래와 같이 코드를 작성하여 다른곳에서 사용시 include를 통해 공통 적용될 수 있도록 만들었다. @mixin ellipsis($line-cnt) { overflow: hidden; text-overflow: ellipsis; //... letter-spacing: normal; word-break: break-word; //줄바꿈시 단어로 쪼개지도록 overflow-wrap: break-word; //요소내에서 단어 강제 줄바꿈 display: -webkit-box; //웹킷브라우저-다중 라인 레이아웃 -webkit-box-orient: vertical; //세로 방향으로 라인배치 -webkit-line-clamp: $line..
[React] 숫자 세자리마다 , 콤마 붙이기 price가 50000과 같은 숫자일 경우 다음과 같은 코드를 통해 숫자 세자리마다 ,가 들어가도록 할 수 있다. (=>50,000) price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형 devbirdfeet.tistory.com
[css] SVG 사용 방법 React 에서 SVG를 사용하는 방법은 다음과 같다. import Logo from '@assets/images/logo.svg'; ... 위와 같이 img 태그를 사용할 경우, 이미지의 width, height는 스타일로 수정가능하지만 색은 변경하여 사용 할 수 없다. 값을 변경하여 사용하려면? >> 1. 바꾸고자 하는 svg 요소의 값을 current로 수정한다. 2. current로 바꾼 요소는 사용자가 원하는 값을 넣어 커스텀 사용이 가능하다. import { ReactComponent as DeleteIcon } from './Delete.svg' const LogoComponent = () => { return ( ) } React SVG 다루기 들어가며 musma.github.io
[React] 캘린더 react-datepicker 라이브러리 사용법 날짜를 선택하는 캘린더를 적용하고 싶어서 react-datepicker 라이브러리를 사용하였다. 다양한 커스텀이 가능하며, 예제코드는 아래 공식사이트에서 확인할 수 있다. react-datepicker A simple and reusable datepicker component for React. Latest version: 4.16.0, last published: 6 days ago. Start using react-datepicker in your project by running `npm i react-datepicker`. There are 2673 other projects in the npm registry using react-datepi www.npmjs.com React Datepick..
[React] 소셜로그인- 카카오톡 로그아웃 Logout 로그인은 지난번 해보아서 로그아웃을 구현해보았다. (REST API) 1방법: 기본 로그아웃 - 로그아웃시키면 카카오토큰은 만료되어 API호출 불가 - 로그아웃시 다시 카카오 계정 로그인은 안함, 안해도 로그인하면 다시 토큰 받아옴 - 재로그인시 ID,PW치게하는 방법은 아래!! https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#logout Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 나는 액세스토큰 방식 요청으로 진행했다. 아래는 구현 코드 const snsLogout = as..

티스토리툴바