typescript (4) 썸네일형 리스트형 [Typescript, CSS] Circular Progress Bar 만들기 import colors from "@/styles/color"; import React, { ReactElement } from "react"; import styled from "styled-components"; type Props = { progress: number; label?: string; width?: number; imageUrl: string; }; export default function CircularProgressBar({ progress, label = "Progress Bar", width = 100, imageUrl, }: Props): ReactElement { const strokeWidth = 3; const radius = 100 / 2 - strokeWidth *.. [Next] 동적라우팅에서 router.pathname, router.asPath 차이 파일 이름을 ...앞의 경로/completed/[userChallengId].tsx 이렇게 해서 동적라우팅을 구현했었다. const router = useRouter(); const asPath = router.asPath; const pathname = router.pathname; console.log(asPath); console.log(pathname); 그러면 아래와 같이 출력된다. ...앞의 경로/completed/651627fb3931e74294dda3ca ...앞의 경로/completed/[userChallengId] 완전 정확한 url을 확인하려면 asPath를 써야한다. [axios] 서버로 데이터 전송 사용자가 화면에서 정보를 등록하면 그 정보를 recoilstate을 통해 저장 -> 마지막 단계에서 recoil에 저장된 정보를 axios를 통해 서버로 보냄 정보를 서버로 넘겨줄 때 헤더에 access token도 함께 넣어서 보내줘야 했다. import { styled } from "styled-components"; import { useRouter } from "next/router"; import { useState, useEffect } from "react"; import axios from "axios"; import { useRecoilValue } from "recoil"; import { registerHomeUpLoadFileState, registerHomeWholeInfoStat.. [개발 환경 설정] Next.js + Typescript + Styled-components https://mniyunsu.github.io/nextjs-styled-component-setting/ Next.js + Typescript + Styled-components 개발 환경 설정 | YUNSU BAE Next.js + Typescript + Styled-components 개발 환경 설정를 기록해두자. mniyunsu.github.io https://nextjs.org/docs/getting-started/project-structure Getting Started: Project Structure | Next.js Using App Router Features available in /app nextjs.org next는 auto-routing을 해주기 때문에 그 폴더 구조와 컨벤션들.. 이전 1 다음
