본문 바로가기

FE14

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.
React 란? + React 프로젝트 생성하기 React란 무엇인가? 리액트는 페이스북에서 만든 JavaScript 라이브러리 입니다. 프론트엔드 3대장이라고 불리는 React, Vue, Angular 중에서도 단연 1대장이 아닌가 싶습니다. 그만큼 생태계도 넓고 Facebook이 만들었기 때문에 커뮤니티도 굉장히 활성화 되어 있습니다. 제가 자주 사용하는 Nuxt.js는 Vue.js 기반이며, Vue나 React나 모두 Virtual DOM을 사용합니다. Nuxt로 프로젝트를 진행할 때 가장 아쉬웠던 부분이 커뮤니티 부분인데요. 한글자료도 부족하고 stackoverflow 형님들이 작성한 글들을 해석하며 공부했던게 많이 까다로웠습니다. (그래서 React의 Next로 진행했어야 했나 후회를 조금 했습니다.) 그에 비해 React의 경우 방대한 생태.. 2021. 5. 14.
Nuxt.js JavaScript로 사업자번호 유효성 체크 및 하이픈(-) 자동 추가하기 JavaScript를 통한 사업자번호 유효성 체크 및 하이픈(-) 자동 추가하기 Nuxt프로젝트 진행을 하다 B2B의 경우 회원가입 시 사업자번호를 입력하도록 해야 하는데 유효성 체크를 하지 않으면 아무 값이나 입력하여 가입을 할 수 있는 변수가 생겼습니다. 그래서 사업자번호 규칙에 대해 알아보고 이 규칙을 통한 사업자번호 유효성 체크를 해보았습니다. 사업자번호 규칙 원래 지금 다니고 있는 회사에서 B2B 서비스를 하기 때문에 사업자규칙은 인지하고 있었지만 복습 겸 다시 알아봤습니다. 결국 앞에 세자리는 국세청과 세무서 코드, 가운데 두 자리는 개인과 법인을 구분하며 법인에서도 영리, 비영리, 외국인 법인 등을 구분합니다. 마지막 다섯 자리 중 앞에서부터 네 자리는 과세, 면세, 법인 사업자별로 등록 또.. 2021. 5. 12.
728x90
반응형