분류 전체보기

Router as, Link as란?실제 URL 정보를 사용자가 보지 못하도록 숨겨주는 기능 Router asimport Router from 'next/router'const click = () => { Router.push('실제로 이동할 주소', '사용자에게 보여줄 주소')} Link as 이동사용 예시현재 작업 중인건 `Link as`로 진행 중인거라해당 내용을 알게 되고 쉽게 해결이 가능하구나! 하고 접근했다. 바로 도전! 문제이렇게 접근하면 당연히 되는거구나 했는데 전혀 그렇지 않다.id값을 받아서 ssr에서 사용할려고하는데 as에 담았던 title이 담겨져 오는 것이었다.기능이 제대로 구현 안되네! 라고 생각했는데 이유는 간단했다.바로 `params`로 id를 가져왔었는데 당연히 현재 u..

notion api에서 block으로 가져온 데이터를 가져오고 보니 block으로 객체형태로 오면서type이나 color나 나뉘어서 와서 그걸 보고 색깔도 똑같이 할 수 있겠다 싶어서 따로 utils 파일로 빼서 작업을 해봤다 1. 컬러 매핑 함수`color-maaping.ts`// 색상 매핑 객체const colorMap: { [key: string]: string } = { red: 'bg-custom-red dark:bg-custom-red-dark', orange: 'bg-custom-orange dark:bg-custom-orange-dark', // 원하는 부분 여기에 계속해서 추가};// 클래스 네임 설정 함수export const getBgColorClassName = (color: ..

notion api에서 block으로 가져온 데이터를 가져오고 보니 block으로 객체형태로 오면서기간이 date로 오면서 해당 부분을 원하는 모양으로 custom하고 싶어서 해당 작업을했다.  `period-maaping.ts`export const calculatedPeriod = (start: string, end: string): string => { const startDateStringArray = start.split('-'); const endDateStringArray = end.split('-'); var startDate = new Date( Number(startDateStringArray[0]), Number(startDateStringArray[1]) - 1, /..

예전부터 포트폴리오를 한 번 만들어보자 했었는데, 항상 미루기만 하고 작업하기가 쉽지가 않았다.그런데 이번에 nextjs를 공부하면서 nextjs로 만들면 좋겠다란 생각을 했다.그치만 역시 문제는 나중에 파일을 추가할 때마다 새로해야하나.. 라는 귀찮음? 이 들었다.그러던 와중 좋은 영상을 보게 됐다.바로 `notion api`를 통해서 나의 notion에 등록만해도 바로 등록되는 형식이었다!딱 내가 원하는 형태!!!시작하기먼저 참고한 영상 링크는 여기다.Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지) / LottieFiles, Notion Api, TailwindCSS (youtube.com) 앞에서 나오는 설명은 대부분 넥스트JS로 설치 방법이라 모르는 부분은 영상은 참고하면..

for...of 는 배열의 반복에서 사용, for...in은 객체의 반복에서 사용. for ... of (배열) var arr = [1, 2, 3]; for (var item of arr) { console.log(item); // 1, 2, 3 } for ... in (객체) var obj = { a: 1, b: 2, c: 3 }; for (var item in obj) { console.log(item) // a, b, c } 알고 있던 내용이지만 사용할 때마다 객체였나 배열이였나 헷갈려서 한번 더 개념정리하면서 포스팅

import LoadingSpinner from '@/components/common/LoadingSpinner'; import styles from '@/components/menu-item/styles/menu-item-form.module.css'; import { MENU_CONFIRM } from '@/data/menu-item'; interface MenuItemModal { clickItemModalHide: () => void; addPending: boolean; uploadImagePending: boolean; } const AddItemButtonComponent = ({ clickItemModalHide, addPending, uploadImagePending }: MenuItem..

내배캠에서 튜터님이 온도계 문제가 있다고 풀어보라고 하셔서 뒤늦게 풀어봤다. 제한은 다음과 같다. // 매 1분마다 실행되는 함수 생성 // 함수는 호출될때마다 온도 값이(num) 인풋된다 // 함수는 호출될때마다 지금까지 받은 온도의 평균 온도 값을 내보낸다. // 호출은 무한으로 호출된다. // 디비에 값 저장 불러오기 X // 자바스크립트 또는 타입스크립트로 실행 // setInterval로 실행되도 무관, 혹은 cronjob이 실행시킨다고 가정해도 무방 풀이 // 타이머 let count = 0; let num = 0; const start = () => { // 온도 가져오는 함수 const getData = () => { return Math.random() * 100; } // 평균값 구하는..

NextJS는 기본적으로 이미지 최적화를 제공해준다. 여기서 기본적으로 한단계 더 최적화 할 수 있는 라이브러리를 nextJS에서 추천하고 있는데 그건 sharp다 설치방법은 다음과 같다 yarn add sharp npm install --save sharp 다른 코드를 수정할 필요없이 설치만 하게 되면 nextJS에서 제공하는 IMAGE 태그만 사용하면 자동으로 적용된다. 아래에선 image가 붙은게 적용전과 적용후다 여기서 blur 처리할 수 있는 placeholder가 있는데 현재 프로젝트에 적용하기 힘들어보이는게 있는데 좀 더 알아볼 필요가 있겠다.

기존에 drag and drop 작업이 잘 되고 있었는데, 브라우저 자체에서 드래그 중에 드래그 방지로 마우스 모양이 블락 표시 됐다. 작업 중엔 그렇게 거슬리지 않았고, 오히려 옮겨지거나 옮기는 객체를 css만 주면 되겠다 생각했었다. 근데 유저 피드백을 받았는데 유저 피드백 중에 그 마우스 모양 떄문에 제대로 옮겨지지만 안옮겨진 것 같은 기분이 든다는 피드백을 받았다. 여러가지를 찾아보다가 결국은 브라우저에서 막는거기 떄문에 e.preventDefault(); 를 넣으면 바로 해결이 된다.. 다만 여기서 문제되는 사항은 기존에 되던 기능인 줬던 클래스가 안빠지는 문제! // 드래그 중인 요소 위로 이동할 때 스타일 변경 const handleDragOver = (e: React.DragEvent) =..