FE/Nuxt.js12 Nuxt.js JavaScript를 이용한 아이디,비밀번호,이메일 유효성 체크 Nuxt.js에서 JavaScript를 이용하여 Input 아이디,비밀번호,이메일 유효성 체크 Nuxt.js에서 웹 애플리케이션 개발 시 회원가입을 진행할 때 아이디,비밀번호,이메일 등 input 입력값을 검증하는 로직이 반드시 필요합니다. 이때 JavaScript와 정규식을 사용하여 해당 input에 대한 검증 메서드를 만들 수 있습니다. 지금 제가 진행하고 있는 프로젝트도 회원가입이 필요하여 회원가입 시 필요한 필드들에 대한 유효성 체크가 필요하여 해당 필드들의 유효성 체크에 대한 내용을 적어보려 합니다. 처음엔 손이 가는대로 jQuery로 진행했다가 아차 싶어서 다시 Vanilla script로 변경 했습니다. 아이디 유효성 체크하기 jQuery 사용을 최대한 지향하고 싶었으나 BootStrap을 .. 2021. 5. 28. Nuxt.js에서 Vuex Strict Mode Vuex Strict Mode Vuex에서 Strict Mode란 Vuex Store의 상태값들을 mutations를 통해서만 변경할 수 있도록 강제하는 역할을 합니다. Vue.js에서나 Nuxt.js에서도 이 Strict Mode는 기본값이 true로 설정되어 있습니다. Nuxt.js에서는 개발모드에서는 true이며 프로덕션 모드일때에는 자동으로 false가 됩니다. Strict Mode가 true이면 전체 상태에 대한 감시가 동기적으로 이루어집니다. 그리고 Vuex 상태가 변이 핸들러 외부에서 변이 될 때 마다 오류를 발생시킵니다. 이로 인하여 디버깅 도구로 모든 상태변이를 추적이 가능하여 개발시에 많은 도움을 줍니다. 다만 실제 배포시에는 false로 설정하는 것이 좋습니다. 동기적으로 처리가 되기.. 2021. 5. 18. Nuxt.js JavaScript로 사업자번호 유효성 체크 및 하이픈(-) 자동 추가하기 JavaScript를 통한 사업자번호 유효성 체크 및 하이픈(-) 자동 추가하기 Nuxt프로젝트 진행을 하다 B2B의 경우 회원가입 시 사업자번호를 입력하도록 해야 하는데 유효성 체크를 하지 않으면 아무 값이나 입력하여 가입을 할 수 있는 변수가 생겼습니다. 그래서 사업자번호 규칙에 대해 알아보고 이 규칙을 통한 사업자번호 유효성 체크를 해보았습니다. 사업자번호 규칙 원래 지금 다니고 있는 회사에서 B2B 서비스를 하기 때문에 사업자규칙은 인지하고 있었지만 복습 겸 다시 알아봤습니다. 결국 앞에 세자리는 국세청과 세무서 코드, 가운데 두 자리는 개인과 법인을 구분하며 법인에서도 영리, 비영리, 외국인 법인 등을 구분합니다. 마지막 다섯 자리 중 앞에서부터 네 자리는 과세, 면세, 법인 사업자별로 등록 또.. 2021. 5. 12. Nuxt.js dotenv로 환경 변수 사용하기 Nuxt.js dotenv로 환경 변수 사용하기 Nuxt.js로 개발을 진행하다 보면 production과 development로 분리하고 싶을 때가 있습니다. 물론 환경 분리는 분리하고 싶을 때 분리하는 게 아닌 저는 필수라고 생각합니다. 환경변수들을 개발용 실제 운영용으로 분리하는 것은 개발자체도 용이하게 해 줄뿐더러 보안상에도 좋습니다. 재사용하는 정보들이나 공개되어서는 안될 정보들(DB URL, 각종 Key 값 등)을 편하게 관리할 수 있습니다. 만약 백엔드와 통신을 하는데 하드코딩으로 API EndPoint를 노출한다던지, 중요한 키값을 노출하게 된다면 제 정보 좀 가져가 주세요~라고 하는 것과 같습니다. .env 파일이란? .env파일이나 dotenv파일은 응용 프로그램 환경 변수를 제어하는 .. 2021. 5. 7. 이전 1 2 3 다음 728x90 반응형
