본문 바로가기

전체 글41

Nuxt.js JavaScript를 이용한 아이디,비밀번호,이메일 유효성 체크 Nuxt.js에서 JavaScript를 이용하여 Input 아이디,비밀번호,이메일 유효성 체크 Nuxt.js에서 웹 애플리케이션 개발 시 회원가입을 진행할 때 아이디,비밀번호,이메일 등 input 입력값을 검증하는 로직이 반드시 필요합니다. 이때 JavaScript와 정규식을 사용하여 해당 input에 대한 검증 메서드를 만들 수 있습니다. 지금 제가 진행하고 있는 프로젝트도 회원가입이 필요하여 회원가입 시 필요한 필드들에 대한 유효성 체크가 필요하여 해당 필드들의 유효성 체크에 대한 내용을 적어보려 합니다. 처음엔 손이 가는대로 jQuery로 진행했다가 아차 싶어서 다시 Vanilla script로 변경 했습니다. 아이디 유효성 체크하기 jQuery 사용을 최대한 지향하고 싶었으나 BootStrap을 .. 2021. 5. 28.
npm 패키지 만들고 배포하기 npm 패키지 만들고 배포하기 오늘은 npm을 통해 나만의 패키지를 생성하고 배포까지 해보는 글을 작성해보려 합니다. npm을 통해 다른 분들이 올려주신 라이브러리를 다운로드하여 사용만 했었지 제가 만들어서 배포한 적은 없어서 이번 기회에 공부도 하면서 글 작성을 해보려 합니다. npm이란 위키백과에서는 아래와 같이 정의합니다. npm (노드 패키지 매니저/Node Package Manager)은 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다. 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자이다. 명령 줄 클라이언트(npm), 그리고 공개 패키지와 지불 방식의 개인 패키지의 온라인 데이터베이스(npm 레지스트리)로 이루어져 있다. 이 레지스트리는 클라이언트를 통해 접근되며 사용 가능한.. 2021. 5. 25.
JavaScript async await 비동기 처리를 동기처럼 JavaScript async await 비동기 처리 async await는 자바스크립트의 비동기 처리 문법 중 하나입니다. 비동기 처리 방식을 동기 처리처럼 가능하게 해 줍니다. async await를 이해하기 위해서는 사실 콜백 함수와 프로미스를 이해하는 게 우선입니다만 꼭 그게 아니더라도 async await를 이해할 수 있다고 생각합니다 콜백 지옥을 벗어나기 위해 프로미스를 사용하고 프로미스의 단점을 극복하기 위해 async await를 사용합니다. 코드 가독성이 뛰어나서 저 같은 주니어 개발자들이 보기에 아주 적절합니다. 일단 저는 Nuxt.js에서 환경에서 사용하는 게 편해서 예제는 모두 Nuxt.js에서 진행했습니다. (다른 환경에서 해도 상관없지만 제가 편해서 Nuxt로 진행했습니다!) a.. 2021. 5. 21.
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.
728x90
반응형