티스토리

{ chanCo }
검색하기

블로그 홈

{ chanCo }

chan-co.tistory.com/m

one source multi-use

구독자
1
방명록 방문하기

주요 글 목록

  • [React] axios interceptor 사용하기 #1. axios interceptor 사용하기 로그인 기능을 구현할 때 주로 토큰 기반 인증으로 구현하게 되는데, 이 때 JWT(Json Web Token)를 많이 사용한다. 토큰 인증 방식은 좋은 방법이긴 하나 제 3자에게 토큰이 노출되었을 경우 보안에 취약하다는 단점이 있다. 그래서 토큰 인증을 구현할 때 유효기간을 짧게 설정한 accessToken으로 인증하고, 이 accessToken이 만료 되었을 때, 유효기간을 길게 설정한 refreshToken을 통해 accessToken을 재발급 받는다. refreshToken 마저 만료되었을 경우 다시 로그인 하여 재발급 받는다. 여기까지가 JWT에 대한 간단한 설명이고, 그렇다면 토큰 인증을 받기 위해 클라이언트에 저장된 토큰을 서버로 보내야 하는데 .. 공감수 1 댓글수 0 2022. 10. 13.
  • [React] React에서 .env 사용하기 #1. React에서 .env 사용하기 프로젝트 진행 시 보통 github에 커밋하여 협업한다. 이때 레포지토리가 퍼블릭이라면 누구든지 내가 커밋한 코드를 볼 수 있는데, 민감한 개인정보 (API key, 인증키, port번호, 비밀번호 등등)가 그대로 노출 된다. 또는 웹에서 개발자도구를 통해 작성된 소스코드를 볼 수 있는데, 민감한 정보를 그대로 사용했다면, 이는 보안에 아주 치명적인 문제가 된다. 그래서 민감한 정보는 다른곳에 저장하고 이를 호출하는 형식(값을 변수에 담고 변수를 호출하는 방식이라고 생각하면 이해하기 쉽다)으로 많이 사용하는데 이것이 env이다. 즉, 민감한 정보를 환경변수에 담아 관리하는 방법이다. 1. .env 파일 생성 .env 파일을 생성할 때는 반드시 해당 프로젝트의 roo.. 공감수 0 댓글수 0 2022. 9. 29.
  • [React] SPA 페이지 이동 시 스크롤 맨 위 유지하기 #1. SPA 페이지 이동 시 스크롤 맨 위 유지하기 리액트를 사용하는 이유 중 하나가 SPA(Sngle Page Application)로 개발하기 위함이라고 해도 과언이 아닐 것이다. 많은 장점을 가지고 있는 SPA지만, 단점도 많다. SEO(검색엔진 최적화)문제.. 초기 구동 속도가 느리다는 것.. 등등 그 중 이것도 단점인가.. 싶기도 하지만, 개인적으로 단점이라 생각하는건데, 그것은 화면전환(페이지 이동)시 이전 페이지의 스크롤 위치가 그대로 다음 페이지에도 적용된다는 것이다. 예를들어 A라는 페이지의 하단쪽을 보고 있다가 B라는 페이지로 이동했는데 스크롤 위치가 그대로 하단쪽에 머물고 있는 것이다. 페이지 이동하면 상단부터 시작하는게 맞지 않나? 싶어서 찾아보니 쉽게 방법을 찾을 수 있었다. 1.. 공감수 1 댓글수 1 2022. 9. 26.
  • [React] 날짜 선택 구현하기 #1. 날짜 선택 구현하기 웹에서 사용자가 날짜를 선택 해야하는 일이 종종 있다. 예를들어 예약시스템의 경우가 대표적일 것이다. 구현 방법은 매우 간단하다. 태그의 타입을 date로 지정해주기만 하면 된다. 하지만 이렇게만 구현해 놓으면 문제가 하나 있는데, 그것은 사용자가 지난 날짜를 선택해서 예약할 수 있다는 것이다. 물론 지난 날짜를 선택하면 예약이 안되게 따로 구현하는 것도 방법이지만, 아예 선택할 때 부터 지난 날짜는 선택하지 못하게 막아버리면 더 괜찮지 않을까 하는 생각으로 구현해보았다. 그럼 어떻게 구현해야할까? 1. 최소날짜 지정 date 타입에 사용 가능한 속성중에 min이라는 속성이 있는데, 이 속성에 문자열로 날짜를 지정하면 그 날짜를 기준으로 지난 날짜들은 disabled 처리가 되.. 공감수 0 댓글수 0 2022. 9. 25.
  • [React] Toggle List 구현하기 #1. React에서 Toggle List 구현하기 프로젝트 중 게시판을 만들 때 Toggle List를 구현하고 싶었다. 보통 하나의 toggle을 구현할 때 state에 true/false 값을 넣어서 사용하는데, map 함수를 사용해서 뿌린 리스트에서 보고싶은 글만 접었다 폈다해서 보려면 어떻게 해야할까? 많은 리스트 중에 해당 게시글에만 toggle 버튼을 적용하려면 어떻게 해야할지 감이 잡히질 않았다. 구글링을 통해 방법을 찾던 중 괜찮은 방법을 찾아서 정리해 본다. 1. 토글에 사용할 상태값 생성 // 패키지 참조 import React, { useState } from 'react'; // useState hook 생성 const [showItem, setShowItem] = useState.. 공감수 6 댓글수 0 2022. 9. 23.
  • [React] option 태그 여러개 만들기 #1. option 태그 여러개 만들기 사용자가 정보를 입력할 때 태그가 자주 쓰일 것이다. 그 중 국가번호는 선택할 번호가 엄청 많다. (정확히 몇개인지는 모름 ..) 그런데 이 많은 번호를 +1 . . . +82 . . . +852 이런 식으로 구현하는것은 매우 하드코딩 스럽고 비효율적이다. 그럼 어떻게 구현해야할까? 1. 원하는 갯수 만큼 빈 칸을 갖는 배열을 만든다. new Array( )는 주어진 칸 만큼의 빈 배열을 생성한다. 예를 들어 123 ~ 456 사이의 갯수만큼 생성한다고 가정. new Array(456 - 123 + 1); 2. 빈 배열을 비구조 문법으로 복사 생성자를 통해 생성된 객체는 즉시 메서드를 사용하지 못한다. (문법적 제약) 그렇기 때문에 아래의 방법으로는 실행되지 않는다.. 공감수 0 댓글수 0 2022. 5. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.