Front-End (38) 썸네일형 리스트형 [Next.js]usePathname, useSearchParams https://velog.io/@fervor_dev/Next.js-usePathname-useSearchParams velog velog.io [Next.js] Using API Router(Router Handlers) in App router https://pozafly.github.io/nextjs/about-modularizing-api-routes-code-in-nextjs/ Next.js의 API Routes 코드 모듈화에 대해서 API Routes를 사용하면 코드가 매우 지저분해진다. API Routes를 사용하면서 어떻게 하면 코드를 보기 좋은 형태로 남길 수 있을지 고민한 흔적. pozafly.github.io https://stackoverflow.com/questions/75418329/how-do-you-put-api-routes-in-the-new-app-folder-of-next-js How do you put api routes in the new app folder of Next.js? I have a test API.. [React] useMemo https://velog.io/@jinyoung985/React-useMemo%EB%9E%80 [React] useMemo란? 📋 useMemo란? useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로 velog.io [Vercel, Front-end] mono-repo에서 배포 안되는 문제 해결 우리 팀은 한 github 레포 안에 모든 개발 폴더를 두고 있다. front-end 폴더(client), back-end 폴더(server), contract 폴더(contract), react-native 폴더(mobile). 나는 FE 작업을 맡아서 각종 로그인 테스트를 해보기 위해 vercel에 git repo를 연결 후 배포하고자 했다. 내가 작업한 폴더는 proto.v2-client다. **참고** FE 작업은 NEXT.js 프로젝트로 진행. github repo(모노레포 전체)를 연결해서 프로젝트 생성을 해주고, settings에서 root directory도 내가 작업한 FE 폴더로 설정을 해줬다. 근데!! 안됐다. ... docs를 읽어봐도.. 매 딴소리만 한다.. 이것만 읽고 나는 pr.. [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 *.. [CSS] CSS-Flex Link Archive https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com [Styled-components] it looks like an unknown prop "X" is being sent through to the DOM 오류 해결 (X: 사용자 정의) styled-components: it looks like an unknown prop "backgroundcolor" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.) https://velog.io/@mintmin0320/style.. [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를 써야한다. [Next] Next내에서 .env 파일의 환경변수들이 안 읽히는 문제 해결 .env 파일에 환경 변수를 작성하고 import dotenv from "dotenv"; dotenv.config(); 도 해줬는데 const API_BASE_URL = process.env.API_BASE_URL; 이렇게 선언한 API_BASE_URL이 자꾸 undefined로 출력이 되는 거다. 그래서 찾아봤더니 next.config.js 파일에서 뭔가 설정을 해줘야하는 거였다. 그래서 next.config.js 파일을 이렇게 해줬다. /** @type {import('next').NextConfig} */ const nextConfig = { ... 앞의 설정들 env: { API_BASE_URL: process.env.API_BASE_URL, }, ... 뒤의 설정들 }; module.export.. [CSS] tsx 내의 string에서 줄바꿈이 안되는 문제 해결 const MyComponent = () => {.... return( )} const ChallengeInfo = ({ index, title, content }: IndexTitleContentProps) => { return ( {title} {content} ); }; 대충 요런 구조였다. 원래는 아무리해도 content의 내용에 줄바꿈이 적용이 안됐는데 이렇게 style={{ whiteSpace: "pre-line" }} 을 해주니까 content의 \n이 잘 작동했다. 이전 1 2 3 4 다음
