분류 전체보기 (143) 썸네일형 리스트형 [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 231016 학습일기 1. code에서 자주 쓰이는 config의 의미 configuration(환경 설정) "구성 파일"로도 알려져 있음. 프로그램의 매개 변수나 초기 설정 등을 구성하는 데 사용됨 소프트웨어, 프로그램, 라이브러리, 또는 시스템의 설정 및 구성을 나타냄 어떤 소프트웨어나 시스템이 동작하는 방식을 제어하고 사용자 또는 개발자가 원하는 대로 조정할 수 있도록 하는 중요한 개념 환경 설정 및 설정 파일: 많은 소프트웨어와 애플리케이션은 구성 파일을 사용하여 동작 방식을 정의합니다. 이러한 구성 파일은 "config 파일"이라고도 불립니다. 예를 들어, 웹 서버 구성, 데이터베이스 연결 정보, 보안 설정 등을 포함할 수 있습니다. 프로그램 실행 시 동적 설정: 소프트웨어가 실행되는 동안 일부 설정을 변경하려는 경.. [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이 잘 작동했다. [Node] npm 명령어들 링크 모음 https://www.zerocho.com/category/NodeJS/post/58285e4840a6d700184ebd87 (NodeJS) npm 명령어 안녕하세요. 이번 시간에는 npm 명령어에 대해 알아보겠습니다. npm 명령어는 명령 프롬프트에 입력하는 명령어입니다. 지금까지 봤던 명령어는 npm init, npm start나 npm run, npm install 정도가 있겠네요 www.zerocho.com https://velog.io/@fgprjs/npm-run-dev npm run dev는 어떻게 동작하는가? npm run dev를 수행하면, npm은 run명령에 맞게 packages.json에 존재하는 scripts중 dev키를 찾아서 그것을 promiseSpawn(새로운 프로세스를 수행,.. [Front-End] Carousel https://programming119.tistory.com/211 [React🌌] 리액트 슬라이드 ⏩ / 캐로셀 (Carousel) 슬라이드? 캐로셀(Carousel) ! 우리나라 사람들은 보통 이렇게 버튼을 통해 자연스럽게 넘어가는 것을 슬라이드라고 부르죠! (영알못인 저만 그러는 걸수도..😂) 사실 이런 슬라이드는 정식용어는 programming119.tistory.com https://coding-with-jina.tistory.com/222 [React] 리액트 이미지 슬라이드(Carousel) 만들기 - React Material UI Carousel ● React Material UI Carousel 설치하기 1. 이 라이브러리/구성 요소를 사용하려면 Material UI를 설치해야함 np.. 이전 1 2 3 4 5 ··· 15 다음
