IT

현재 상황나는 jwt방식을 사용하며accessToken과 refreshToken을 모두 쿠키에 보관하고 있다.모두 httpOnly, Secure 옵션을 주어 안전하게 사용하고자 했다.httpOnly: document.cookie를 통해 자바스크립트에서 접근을 막는다. Secure: HTTPS로 통신하는 경우에만 쿠키가 전송된다. 전체적인 큰 그림은 아래와 같다.accessToken 재발급 시 refreshToken을 왜 갱신하느냐... 할 수도 있지만 서비스 상 로그인 상태를 최대한 오래 유지하기 위해 이렇게 진행했다. token을 어디에 저장하고 어떻게 관리할지에 대해 정답은 없고 주어진 상황에 맞게 사용하면 되는 거 같다.axios 인스턴스 생성프론트에서 쿠키를 직접 다룰 수 없어(httpOnly옵션..

Pagination component 사용 시 아래와 같이 사용한다 const [currentPage, setCurrentPage] = useState(1); const [lastPage, setLastPage] = useState(0); // api 통신 후 값을 업데이트 해줌 const onChangePage = (newPage: number) => { setCurrentPage(newPage) } ... return ( ... ... ) Pagination component에서는 currentPage, lastPage, 페이지를 업데이트할 수 있는 함수를 전달받는다 currentPage와 lastPage가 업데이트될 때마다 화면에 보여줄 페이지 리스트를 계산해 줬다 👍 page가 1페이지인 경우 더..

내가 만들고자 하는 바텀시트는 1. pc에서는 모달형태로 나타나고 mobile에서는 아래에서 위로 올라오는 바텀시트 형태로 나타나야 한다. 2. 외부에서 열고 닫을 수 있어야 한다. 3. full(전체가 채워지도록)로 당겨질 수 있어야 한다. 4. 제목과 상단에 닫기 버튼의 여부를 attribute 형태로 전달받는다. 이런 기능을 가지고 있어야 한다. + 미리 결과를 보여주자면...! 순수한 자바스크립트로 바텀시트를 만들어봤다 바텀시트를 여러 곳에서 간편하게 쓰기 위해(함수로도 만들어보고 클래스로 해보려다가...) Web components로 만들게 되었다 ㅎㅎ 리액트나 뷰 등을 사용하지 않고 순수 자바스크립트로 컴포넌트를 만들 수 있는 방법이 있는데 바로 Web components를 사용하면 된다!! ..

상품 리스트에서 상세 상품을 본 후 뒤로 가기 시 원래 스크롤 위치를 기억했다가 보여주고 싶었다. 1. scroll 이벤트가 발생 시 해당 scrollTop의 값을 session에 저장 여기서 scroll이 발생 시마다 session에 값이 저장되는 것은 낭비이다. throttle를 이용해 마지막 이벤트가 발생하고 일정 시간(400ms)이 지나기 전까지 다시 호출되지 않도록 막아줬다. document.addEventListener('scroll', () => { if (!timer) { timer = setTimeout(() => { timer = null; const scrollValue = document.documentElement.scrollTop; sessionStorage.setItem("ma..

리액트를 사용하기 위해 cdn을 추가해준다. 개발용 버전 React의 용량 및 성능 최적화된 배포용 버전 나의 경우에는 php 파일이라서 import React, { useState } from 'react';와 같은 방식으로 useState를 import 하는 게 불가능했다. (혹시 가능한 방법이 있다면 알려주세요..ㅎㅎ) 그래서 useState를 사용하기 위해서는 React.useState로 써줘야 한다. 바벨 추가하기 (php 파일에서 리액트 사용하는 법) 아래와 같이 잘 동작한다! https://ko.reactjs.org/docs/cdn-links.html

일단 시작하기 전에 내가 원하는 결과는 아래와 같다. 숫자만 입력될 것 (영어, 한글 등 입력 시 자동으로 삭제되도록) 세 자리 숫자마다 콤마 찍기 1. v-model (이건 안 되는 방식임) 처음엔 v-model을 이용하여 구현했다. 잘 작동하는 것 같았으나 한글 입력 시 느리게 반영되어? (자음과 모음 조합이 한 글자이기 때문인듯하다. 즉 자음 모음 조합이 완성되어야 입력되었다고 인식하는 것 같다.) 삭제가 바로 안 되는 그런 문제가 있었다. data: { onlyNumber: '', }, methods: { checkValue(event){ this[event.target.name] = event.target.value.replace(/[^0-9]/g, '') .replace(/\B(?=(\d{3}..

ButtonTab에서 클릭된 버튼에 따라 초기화, 모든 아이템 이동, 선택된 아이템만 이동하도록 구현했다. 초기화 클릭 시 availableOptions에 emojiMenus를 넣어주고 selectedOptions에 빈 배열을 넣어 초기화시켜줬다. 모든 아이템 이동을 클릭 시 spread 연산자를 통해 availableOptions와 selectedOptions 배열을 병합해 줬다. moveAll(state, action) { if (action.payload === 'left') { // 모든 아이템 왼쪽으로 이동 state.availableOptions = [ ...state.availableOptions, ...state.selectedOptions, ]; state.selectedOptions =..

addComment: (state, action) => { // 어느 게시글에 해당하는 댓글인지 찾기 위해 게시글의 id를 받아와 filter함수로 해당 게시글 찾기 const currentReview = state.data.filter( (review) => review.postNumber === action.payload.postNumber, ); // 해당 게시글에 새로운 댓글 추가 currentReview[0].comments.push(action.payload.newComment); }, addRecomment: (state, action) => { // 해당 게시글 찾기 const currentReview = state.data.filter( (review) => review.postNumbe..

확장 interface -extends를 사용 type - &를 사용 interface Student { major: string studentId: number } const mike: Student = { major: 'computer', studentId: 202212011 } type Student = { major: string studentId: number } const mike: Student = { major: 'computer', studentId: 202212011 } 선언적 확장 interface에서는 새로운 속성을 추가하기 위해 같은 이름을 선언할 수 있지만, type은 선언적 확장이 불가능하다. interface Student { major: string studentId: nu..

아래와 같이 가운데로 정렬이 되는데 (첫 번째 이미지처럼) 나는 전체적인 틀은 가운데에 정렬이 되고 list는 왼쪽도 정렬하고 싶었다. (두 번째 이미지처럼) 아래 소스와 같이 하면 잘 작동한다! 👍 ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, max-content)); grid-gap: 16px; justify-content: center; } li { list-style-type: none; border: 1px solid gray; padding: 5px; width: 210px; } https://stackoverflow.com/questions/32802202/how-to-center-a-flex-contai..