Tag: frontend

2020
frontendReactNative

React native 절대경로 (absolute path) 설정하기

시작하기React native 공식 홈페이지에서 제시하는 absolute path가 적용 되지 않는 경우가 있습니다. React native 초기설정 포스트를 통해서 생성한경우 1npx react-native init ProjectName --template react-native-template-typescript 템플릿으로 생성된것에 대해서 absol

frontendReactNative

React navigation v5 설정하기

시작하기웹 React에서 사용하는 react-router-dom과 같이 react native에서 페이지네이션을 위해 react navigation을 사용하도록 하겠습니다. 설치하기React native 초기설정 포스트를 통해 프로젝트를 생성합니다. React Native 0.60이상에서 연결은 자동으로 되기때문에 이전버젼에 사용하던 react-native

frontendReactNative

React native (리액트 네이티브) 초기설정하기

시작하기react native 라이브러리를 이용하여 android, ios 크로스 네이티브 애플리케이션을 제작할 수 있습니다.react native를 사용해보면서 느꼈던 장단점이 있습니다. 이 내용은 매우 주관적이므로 참고만 해주시길 바랍니다. react native 장점재활용웹에서 사용한 react 나 자바스크립트로 작성한 로직 부분의 코드를 재활용할 수

2019
frontendreact

React-electron 설치 및 사용하기

시작하기데스크톱 어플리케이션을 제작할 수 있는 electron을 사용해보도록 하겠습니다.이 프레임워크를 사용한 프로젝트로는 깃허브의 아톰, 마이크로소프트의 비주얼 스튜디오 코드, 소스 코드 편집기, 그리고 라이트 테이블 IDE, 또 디스코드 채팅 서비스를 위한 프리웨어 데스크톱 클라이언트 등 다양한 데스크톱 어플리케이션을 제작할때 사용하고 있습니다. use

frontendreact

React-helmet을 이용한 검색 최적화

시작하기검색 최적화를 위한 방법으로 ssr, nextjs, helmet등이 있습니다.이번 포스트에서는 helmet에 대한 내용을 다루도록하겠습니다.헬멧은 일반 HTML 태그를 사용하여 일반 HTML 태그를 출력합니다.매우 간단하고, React 초보자에게 친숙합니다.리액트 헬멧 Github 설치npm install --save react-helmet @typ

frontendreact

React Element 복제하기

시작하기j쿼리의 경우 clone을 사용하여 간단하게 카피를 할 수 있습니다.리액트에서는 어떻게 해야하는지 알아보도록 하겠습니다. Element를 복제해보도록 하겠습니다. 사전준비복제를 하기위해 복제 대상인 element를 만들어 줍니다. App.tsx123456789101112import React from 'react';const App: React.FC

frontendreact

React 프로젝트 GitHub Pages로 배포하기

시작하기리액트 프로젝트를 github pages를 이용해서 배포해보도록 하겠습니다.프로젝트 생성방법은 이전포스트(create-react-app 타입스크립트 사용하기)를 참고하면 됩니다. 깃헙에서 저장소를 하나 만듭니다.저는 react-deploy-pages라는 이름의 저장소를 만들었습니다. create-react-app react-deploy-pages -

Js / Tslib

날짜 라이브러리 moment.js 사용법

시작하기날짜를 손쉽게 다룰수 있는 moment.js의 사용법을 알아보겠습니다. 설치하기라이브러리를 moment.min.js파일로 다운로드를 하거나npm i moment --save로 설치를 할 수 있습니다. 사용하기많이 사용하는 기능위주로 설명하겠습니다. 123import moment from 'moment';moment() // 현재날짜값을 가져옵니다.

etcetc

Postman 포스트맨 사용하기

시작하기포스트맨은 api 를 테스트하기위해 사용하는 편리한 도구입니다.프론트엔드 백엔드 상관없이 모두 사용합니다. 설치포스트맨 다운로드 링크: https://www.getpostman.com/downloads/ 홈페이지로 들어가서 OS에 맞는 postman을 다운 받습니다. 로그인구글계정이 있는 관계로 구글 로그인으로 접속했습니다.기존값으로 화이트모드로 되

frontendreact

React-i18next/i18n 다국어 적용하기

시작하기웹사이트를 제작할때 다국어를 지원해야하는 경우가 있습니다.이때 사용하는 라이브러리로 i18n이 있습니다.의미로는 internationalization (“I18N”) / 국제화 라고합니다.i와 n사이에 18글자가 있어서 i18n 이라는 명칭입니다. 리액트 i18next를 연동해보도록 하겠습니다. 패키지 설치패키지를 설치합니다.npm install