Category: react

2021
frontendreact

Nextjs typescript 절대경로 설정하기

시작하기상대경로를 사용할 시 패키지 구조가 깊어질 경우 import시에 많이 번거로워지게 됩니다.작은 규모의 어플리케이션이라면 상관없지만 규모가 커질수록 꼬이기 쉬워집니다. 상대경로 1import Acomponent from ‘../../../../component/Acomponent’; 절대경로 1import Acomponent from ‘src/com

frontendreact

리액트 프로젝트에 폰트추가

시작하기리액트 프로젝트에서 폰트를 추가 하는 방법을 알아보겠습니다.구글 폰트에서 링크를 통해 적용하는 방법과 폰트를 다운로드해서 프로젝트에 적용하는 방법이 있습니다. 구글 웹폰트를 통해서 적용하기 프로젝트에 직접 적용하기 구글 웹폰트를 통해서 적용하기구글 폰트 사이트에 접속해서 마음에 드는 폰트를 찾습니다. 폰트를 찾았다면 해당 폰트를 선택하고 하단에

2020
frontendreact

Gatsby에 markdown 설정하기

시작하기gatsby는 정적 페이지로 제작시 많이 이용합니다. 예로 블로그나 소개 페이지 같은 경우에 용이합니다.데이터 베이스를 연결하지 않고 markdown파일로 글을 작성 후 데이터를 불러와 화면에 뿌릴수 있습니다.markdown파일로 작성시 재사용에 좋습니다. 그러면 gatsby에 markdown를 추가해보도록 하겠습니다. 플러그인 설치기존에 설치되어있

frontendreact

Gatsby에 typescript 적용하기

시작하기Gatsby는 React에 기반한 무료 오픈 소스 프레임 워크로 개발자가 정적 웹 사이트를 구축 할 수 있습니다. 설치하기Gatsby CLI 설치 1npm install -g gatsby-cli 프로젝트 생성 1gatsby new gatsby-project 프로젝트로 이동 1cd gatsby-project 개발 서버 시작 1gatsby dev

frontendreact

React Next js에서 카카오맵 사용하기

시작하기지도를 표시해주는 어플리케이션을 만들기 위해서는 맵이 필요한데 많은 api중에 카카오 맵 오픈소스api를 사용해보도록 하겠습니다. 개발자계정 로그인카카오맵 개발자 사이트에 접속해서 로그인을 해줍니다. 로그인후 내 어플리케이션을 선택합니다. 어플리케이션을 추가해주도록합니다. 추가한 어플리케이션을 선택하면 대시보드가 나옵니다. 좌측의 플랫폼을 선택합니다

frontendreact

React Ref사용하기

시작하기React에서 엘리먼트로 접근해서 사용하기 위해서는 Ref를 사용하는 것을 권장하고 있습니다.input focus, element 사이즈 측정 등에서 이용합니다. 사용법Ref를 사용하는 여러가지 방법이 있습니다. 다양한 방법을 알아보겠습니다. class에서 사용하기class에서 Ref를 사용하는 방법은 12345678910111213141516171

frontendreact

Nextjs에서 다국어 지원 next-i18next 적용하기

시작하기이전에 react에서 다국어 i18n을 지원하는 포스트를 작성했었습니다.nextjs에서는 다른 방법으로 i18n을 설정해 주어야 합니다.시작해보도록 하겠습니다. 설치하기Nextjs 에서 typescript 적용하기 포스트 를 참고하여 프로젝트를 생성해줍니다. 1yarn add i18next next-i18next react-i18next i18nex

frontendreact

React에 Apollo Client 적용하기

시작하기REST API의 단점을 보완하고 더 개선된 사용 환경을 제공하기 위해 GraphQL을 기반으로 한 Apollo Client 입니다. GraphQL 기본 쿼리문 query: 데이터를 받아올 때 사용합니다 (get). mutation: 데이터를 생성, 수정, 삭제할 때 사용합니다 (post, put, patch, delete). subscriptio

frontendreact

React와 momentjs로 타이머 만들기

시작하기리액트와 momentjs를 이용해서 timer를 만들어 보도록 하겠습니다.create-react-app으로 새로운 프로젝트를 만들어줍니다. 1create-react-app timer-app --typescript 구현하기날짜 관리 라이브러리인 momentjs를 설치해주도록 합니다. 1npm install moment @types/moment Ap