React50 [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. [React] react 에서 이미지 적용하기 - 떽떽대는 개발공부 오늘은 react 사용 시 이미지를 적용하는 법에 대해 공부 했다. webpack 공부할 때 왜 공부를 안하고 넘어갔는지.. 후회 했다ㅠ 먼저, file-loader 와 url-loader 를 install 해준다. npm i -D file-loader url-loader 그리고 webpack 에서 output 부분에 publicPath 를 넣어 주어야 한다. output: { filename: "bundle.js", path: path.resolve(__dirname + "/build"), publicPath: '/' }, 이후 webpack : module - roules 부분에 아래와 같이 추가한다. { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-load.. 2021. 2. 15. 이전 1 2 3 4 5 6 7 8 ··· 13 다음
