Front-End34 React snippets Visual Studio 에서 Extension 으로 React snippets 를 다운로드 받으면 함수형 컴포넌트를 만들 때, rafce 단축키로 리액트 기본 코드를 구현할 수 있다. https://github.com/ults-io/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md#rafce 그 외에도 많은데 차차 알아가야지 2023. 9. 20. react-redux 기초 Redux 는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 라고 하는데 React-redux 를 간단히 사용하며 느낀 정의는, Redux 는 상태(State)를 Store 에 저장하여 전역적으로 관리할 수 있도록 도와주는 상태관리 라이브러리이다. Velopert 블로그 포스트를 간단한 토이프로젝트 후 발견하게 되었는데 https://velopert.com/3528 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG 이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다. 리덕스 왜 쓸까? 리액트 velopert.com Root 컴포넌트 아래.. 2023. 8. 4. @next/font 를 사용해서 구글 폰트 적용하기 Next.js 13 버전부터 @next/font 가 추가되었다. CSS 의 @font-face 설정방법 외에도 @next/font를 사용하면 컴포넌트 내에서 fontFamily를 javascript로 적용할 수 있다. Next 공식 문서에서는 친절히도 아래와 같이 유튜브 영상을 소개하고 있다. https://www.youtube.com/watch?v=L8_98i_bMMA 사용방법 npm install로 @next/font를 설치한다. create next-app을 한 경우에는 샘플에 이미 포함되어 있어 별도 설치가 필요 없다. npm install @next/font 적용하고자 하는 page에 아래와 같이 적용할 수 있다. 아래는 공식문서에 있는 Inter 폰트 적용 예시이다. 간단히 className을.. 2023. 1. 11. front-matter MD(MarkDown) 파일의 메타데이터를 정의하는 부분으로 볼 수 있다. 마크다운 파일의 가장 상단에 위치 하고 아래와 같은 양식을 가진다. --- title: Blogging with VuePress lang: en-US --- 시작과 끝을 ---로 구분해주어야 하며, 키:밸류 의 쌍으로 표현이 된다. next.js는 기본적으로 front-matter를 지원하지 않기 때문에 gray-matter 와 같은 라이브러리를 사용해야한다. 2022. 11. 1. 이전 1 ··· 3 4 5 6 7 8 9 다음
