728x90 전체 글66 [Github] 깃허브 토큰을 이용한 GithubAPI 사용 본 포스팅은 NextJS 13 환경에서 진행한 내용을 바탕으로 한다. GithubAPI 사용법은 공식 문서에 상세히 나와있기 때문에 사용법보다 토큰 만료 문제를 주로 다룬다. GithubAPI란? Github의 기능을 REST API 형식으로 사용할 수 있도록 도와주는 기능이다. https://docs.github.com/en/rest?apiVersion=2022-11-28 GitHub REST API documentation - GitHub Docs To create integrations, retrieve data, and automate your workflows, build with the GitHub REST API. docs.github.com 아래와 같이 사용할 수 있는 기능이 많다. 1. .. 2023. 3. 31. [CSS] 배포 사이트에 다운로드 폰트 적용하기 기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼 수 있다. 1. 폰트 다운로드 우선 마음에 드는 폰트를 다운받는다. https://fonts.cafe24.com/ 카페24 상업용 무료 폰트 다운로드 - 카페24 라이선스 걱정 없이 어디서나 사용할 수 있는 상업용 무료 폰트 fonts.cafe24.com 무료 폰트 사이트는 찾아보면 많이 있으니 참고하면 좋다. 2. 프로젝트에 파일 복사 위와 같이 다운로드한 폰트를 작업중인 프로젝트에 넣어준다. 필자는 styles/fonts/**.ttf 와 같이 저장해줬다. 3. CSS 설정 @font-face{} 를 이용해 불러올 폰트를 설정해준다. /* global.css */ @.. 2023. 3. 31. React/Javascript 부드러운 스크롤 이동 적용 부드러운 스크롤 적용 방법 behavior: "smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다. 본 포스팅은 Nextjs13 환경에서 작성되었다. scroll 메서드 scroll() , scrollTo() scroll(x,y) || scroll(options), scrollTo(x,y) || scrollTo(options) 와 같이 사용할 수 있다. 사실상 두 메서드는 동일하게 작동한다. xy 좌표를 통해서도 사용 가능하며 options를 적용한다면 아래와 같이 사용할 수 있다. window.scroll({ top: 0, left: 0, behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동 }.. 2023. 3. 25. React 함수형 컴포넌트와 Class형 컴포넌트 생명주기 React state와 LifeCycle 함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다. 클래스형 컴포넌트와 생명주기 메서드 1. Mount(컴포넌트가 처음 실행될 때) - state, context, defalutProps 저장 - componentWillMount - 안전하지 않은 접근 - render - componentDidMount - DOM 접근 가능 2. Props Update(프롭스가 업데이트될때) - componentWillReceiveProps - 사용 종료 - shouldComponentUpdate - componentWillUpdate - 사용 종료 - render - componentDidUpdate - DOM 접근 가능 3.. 2023. 3. 23. TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function 에러 해결 방법 나의 경우 SSR 데이터를 contextAPI를 통해 패치하려 했으나, 정상적으로 받아올 지 못할때 발생한 오류였다. 로컬 실행 종료 후 재실행하니 정상적으로 데이터를 받아올 수 있었다. 다소 허탈한 해결방안이었지만, SSR을 다루는 페이지의 데이터가 정상적으로 받아와지지 않는 경우, 코드 작성 후 프로그램을 재실행 해보자. 참조 : https://github.com/vercel/next.js/issues/18090 context value is undefined on server with Webpack 5 · Issue #18090 · vercel.. 2023. 3. 18. 이전 1 2 3 4 5 6 ··· 14 다음 728x90
