전체 글

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..

이번 프로젝트에서 나는 수평 막대그래프를 담당했다. 이 막대 그래프 내용을 정리해보겠다. vue 버전은 3.2.13이다. 나는 뷰를 처음 써보는 사람이다. 틀린 부분이 있을지도 모른다는 점 명심해야 한다. 나는 vue-chart-3을 사용했다. 내가 원했던 그래프는 아래와 같이 1. 수평 막대그래프이고 2. 중앙을 기준으로 왼쪽 값이 5보다 크다면 왼쪽으로 그려지고 아니라면 오른쪽으로 그래프가 그려져야 한다. prop로 받아온 값이 5보다 크면 -1을 곱해 음수로 만들어 왼쪽으로 그려지도록 했다. 반대로 양수라면 오른쪽으로 그려진다. 위에 그래프 관련 코드는 아래와 같다. import { defineComponent, ref } from "vue"; import { BarChart } from "vue-..