전체 글55 [React] react 에서 핸드폰번호, 비밀번호, 이메일 유효성 검사하기 - 떽떽대는 개발공부 웹페이지를 구현할 때 핸드폰번호, 비밀번호, 이메일 양식에 따라 유효성 검사를 해야할 때가 있다. react 에서 유효성 검사하기는 아래와 같다. import React from 'react'; const Test = () => { // 핸드폰번호 유효성 검사 const checkPhonenumber = (e) => { // '-' 입력 시 var regExp = /^01(?:0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/ // 숫자만 입력시 var regExp2 = /^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/ // 형식에 맞는 경우 true 리턴 console.log('핸드폰번호 유효성 검사 :: ', regExp.test(e.target.value)) } //.. 2021. 2. 23. [React] react 에서 우편번호 찾기 api 사용하기 - 떽떽대는 개발공부 오늘은 react 에서 오픈 api 를 사용하여 우편번호 찾기 기능을 구현 해볼 것이다. 다음에서 제공하는 api 를 사용할 것이다. react-daum-postcode 우편번호 검색이라고 되어있는 버튼을 클릭하면 우편번호 검색 창이 팝업 형식으로 나타나게 구현할 계획이다. 아래와 같이 버튼과 팝업창의 기준이 될 공간을 하나 만들어 준다. src/Test.js import React, { useState } from 'react'; import PopupDom from './PopupDom'; import PopupPostCode from './PopupPostCode'; const Test = () => { // 팝업창 상태 관리 const [isPopupOpen, setIsPopupOpen] = us.. 2021. 2. 22. [React] react 에서 다국어 처리 적용하기(1) - 떽떽대는 개발공부 react 에서 같은 페이지에서 다국어를 적용하기 위해 사용하는 라이브러리가 있다. react-i18next 를 사용하여 다국어 처리를 해보자. 먼저 i18next 와 react-i18next 를 설치한다. // install npm install i18next react-i18next src 폴더 아래에 lang 디렉토리를 하나 생성하고 i18njs 파일을 작성한다. src/lang/i18n.js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import langEn from '@lang/lang.en'; import langKo from '@lang/lang.ko'; const resource = { en: .. 2021. 2. 19. [ionic] ionic 을 사용하여 프로젝트 시작하기 - 떽떽대는 개발공부 요즘 뭘하면 좋을 지 이것 저것 깨작대다가 어플을 한번 만들어 볼까 한다. 모바일 쪽은 해본 적 없지만 도전 해보자. 같이 일하는 고마우신 분께서 ionic framework 라는 프레임워크를 알려 주셨다. 일반적으로 어플을 개발할 때에는 안드로이드 어플과 ios 어플이 달라서 보통은 안드로이드 어플을 개발한다고 하는데 이 프레임워크는 하나의 소스만 있어도 안드로이드, ios 모두 배포가 가능하다고 하였다. angular 와 react 를 사용할 수 있으며, 나는 현재 react 를 공부 중이니 node js 를 설치하고 vs code 를 오픈한다. (vs code 에서 사용 가능하다) 아이오닉은 npm 으로 설치할 수 있다. npm install -g ionic 그 다음은 아이오닉 앱을 생성하는 것이다.. 2021. 2. 18. 이전 1 2 3 4 5 6 7 8 ··· 14 다음
