본문 바로가기

전체 글

 (215)
MDX mdx: 마크다운+jsx 마크다운 + react npm install gatsby-plugin-mdx @mdx-js/react gatsby-plugin-mdx는 Gatsby와 함께 MDX를 사용하기 위한 공식 통합입니다. MDX는 마크다운 안에 포함된 JSX를 작성할 수 있습니다. 사소한 일에는 마크다운의 간결한 구문(예: # heading)을 사용하고 고급 구성 요소에는 JSX를 사용할 수 있기 때문에 훌륭한 조합입니다. Usage After installing gatsby-plugin-mdx you can add it to your plugins list in your gatsby-config.js. You’ll also want to configure gatsby-source-filesystem t..
gastby Gatsby는 엄청나게 빠른 웹사이트와 앱을 구축할 수 있도록 도와주는 React 기반의 무료 오픈 소스 프레임워크입니다. 동적으로 렌더링되는 사이트의 제어 및 확장성과 정적 사이트 생성 속도를 결합하여 완전히 새로운 가능성의 웹을 만듭니다. library: import하고 사용하는 것 framework: 내가 짠 코드를 파일에 배치하고 개츠비가 소환해 리액트 룰 위에 개츠비 룰이 따로있음. 따라서 component,state등등 모든기능 작동 o 설치 방법 터미널에 npm i -g gatsby-cli 개츠미 커맨드 설치 생성한 폴더에 들어가 gatsby new로 gatsby 앱 생성하면 됨. 정적 웹사이트: 블로그, 전자상거래 동적 웹사이트: sns, 넷플릭스 구매대행 사이트한다면 create reac..
zsh: command not found: gatsby 에러 해결 문제상황: gatsby-cli 를 설치 확인 후 , gastby new 실행안되고 gatsby command not found 라는 오류가 났다. 해결 방법: 1. npm path prefix를 제거 후 , '/usr/local'로 세팅해준다. npm config delete prefix npm config set /usr/local 2. sudo를 붙여서 gatsby-cli를 global로 다운받는다. sudo npm install -g gatsby-cli 3.잘 다운받아졌는지 버젼 확인! gatsby -v
Command terminated with exit status 1 에러 해결 상황: Gatsby설치하기위해 ubuntu 버전 18이상이 필요해 업그레이드 중 다음과 같은 에러가나고 종료 됨 기대결과: ubuntu 20업데이트 해결방법: I had to remove both snapd and screen! 1 - sudo apt-get purge snapd 2 - sudo apt-get purge screen 에러해결 :https://askubuntu.com/questions/1344069/cant-upgrade-to-ubuntu-21-04-restoring-original-system-state-aborting 업데이트방법 :https://websetnet.net/ko/how-to-upgrade-existing-wsl-wsl2-ubuntu-18-04-to-20-04/
useEffect refetch const keyword = new URLSearchParams(location.search).get("keyword"); const { data, isLoading, refetch } = useQuery( ["search", "results"], () => multiSearch(keyword!, 1) ); useEffect(() => { refetch(); }, [keyword]);
framer-motion | custom, mode="wait" custom 각 애니메이션 컴포넌트에 대해 동적 variants를 다르게 적용할 때 사용할 수 있는 사용자 지정 데이터입니다. ``` const variants = { visible: (custom) => ({ opacity: 1, transition: { delay: custom * 0.2 } }) } ``` https://www.framer.com/docs/..
GITHUB ISSUE Issue 프로젝트 기획, 새롭게 추가될 기능, 버그와 수정사항 모든 것을이 이슈라고 할 수 있다. 프로젝트의 작업진척, 개선사항 , 버그를 추적하는 좋은 방법으로 사용된다 사용방법 깃헙 저장소페이지의 이슈탭에서 새로운 이슈를 생성할 수 있다. 이때 이슈를 생성 할 수 있는 권한을 가지고 있어야한다. 해결된 이슈는 Close issue를 눌러 마감한다. 오른쪽 탭을 보면 관련된 다양한 기능들을 사용 할 수있다. Assigness - 책임자 labels- 어떤 종류의 issue인지(버그, 문서작성) 라벨링가능 milestones- "Sprint"개발 방법론을 지원하기위한 기능으로 개발목표를 망리스톤으로 ㅁ낟르어 두고 관련된 이슈를 생성한다. 몇개의 이슈가 Close되었는지 퍼센트로 진척상황을 보여준다.,d..
#5 MOVIE MODAL React Router 5->6 변경된 점 1. useHistory() => useNavigate() ``` // Home.tsx import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); const onBoxClicked = (movieId: number) => { navigate(`/movies/${movieId}`); 클릭하면 해당주소로 바뀜 }; //바로 실행되면 안되고 클릭하면 실행되야함 onBoxClicked(movie.id) // } > // App.tsx }/> } /..

티스토리툴바