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..
React
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로 설치 방법이라 모르는 부분은 영상은 참고하면..
개요 심화 프로젝트를 진행하면서 서브 이미지를 5개 선택하는 포멧을 작성할려고 한다. 이미지를 선택하는 순간 supabase에 업로드가 되고 결과로 나온 url을 프리뷰 화면으로 보여줄려고 했다. url을 올리면서 name이 지정한 걸로 바뀌기 때문에 배열안에 객체로 보여줘야겠다는 생각을 했다. useState 일단 key에 name을 지정해 주고 다음 key을 두고 value는 빈값으로 넣었다 const [subImgObject, setSubImgObject] = useState([ { name: "subImg1", url: "" }, { name: "subImg2", url: "" }, { name: "subImg3", url: "" }, { name: "subImg4", url: "" }, { na..
여러 객체 받을 때 useState 데이터가 많을 때 하나씩 만드는 것보다 가능하면 객체로 담아서 한번에 돌릴 수가 있다. 모두 똑같은 change 이벤트를 주고 아래처럼 코드 작성 const [inputs, setInputs] = useState({ id: uuidv4(), gender: "woman", height: "", title: "", content: "", }); const handleChange = (e: ChangeEvent) => { setInputs({ ...inputs, [e.target.name]: e.target.value, }); }; 여러 객체 필터링 객체 안에 특정 내용만 넣고 뺄 때 선택된 값을 찾아서 아래처럼 보여줄 수 있다 const toggleActive = (e: ..
내가 보기 위한 axios 에러 정리 새롭게 작업 들어갈 때 에러문이 필요할 때 가져다 쓰기 위한 정리 const url = "https://jsonplaceholder.typicode.com/todos"; // axios 요청 로직 axios .get(url) .then((response) => console.log(response.data)) .catch((err) => { // 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다 if (err.response) { const { status, config } = err.response; // 없는 페이지 if (status === 404) { console.log(`${config.url} not found`); } // 서버 ..
useEffect는 리액트 컴포넌트가 렌더링될 때마다 작업 수행하도록 설정하는 hook useEffect 불러오기 import React, {useEffect} from "react"; useEffect 불러와서 실행시킬 수 있다 import React, { useEffect, useState } from "react"; const App = () => { const [value, setValue] = useState(""); useEffect(() => { console.log("hello useEffect"); }, [value]); return ( { setValue(event.target.value); }} /> ); } export default App; 코드 파헤치기 useEffect(() =..
자료 조사를 하면서 React 16.8 이전에는 함수형 컴포넌트에서는 상태를 관리 할 수 없었다고 한다. 이 후부터는 hooks 라는 기능도입으로 인해 함수형 컴포넌트에서 상태 관리가 가능해졌다. useState 불러오기 import React, {useState} from "react"; useState 불러와서 바뀐값을 관리 할 수 있다. // import React, { useState } from 'react'; function App() { const [count, setCount] = useState(0); const onPlustClick = () => { const plusCount = count + 1; setCount(plusCount); } const onMinusClick = () ..
