본문 바로가기

전체 글

 (244)
[R.Manager - Toy Project] 3st (회원가입 - 비밀번호 및 입력 체크) Java Spring 비밀번호 확인 및 회원가입 [ Part 2 진행 순서 ] 비밀번호 유효성 검사 비밀번호 & 비밀번호 재확인 회원가입 기능 - DB에 저장 동영상은 회원가입부터 로그인까지의 시연 영상이지만 이전 포스팅에 언급했던 것처럼 생각보다 로직들이 많아서 나눠서 포스팅 진행 중이다 금일은 비밀번호 유효성 검사와 비밀번호와 비밀번호 재확인 기능 마지막으로 가입하기 버튼 클릭 시 DB에 입력 값을 모두 넣어주는 작업까지 진행할 예정이다 #registerBtn은 UI상 회원가입 버튼을 의미한다 해당 버튼을 클릭 시 여러 유효성 검사를 거치게 코드를 작성하였는데, 첫 번째로는 각각의 입력값이 만약 빈 값일 때 그대로 값을 DB에 입력하면 안 되기 때문에, (DB에 Not Null 값이 있을 시 오류 발..
아이들 미래 재단 소스 분석 및 발표 준비 보호되어 있는 글입니다.
[R.Manager - Toy Project] 2nd (회원가입 기능 - 아이디 중복 체크) Java Spring 아이디 중복체크 첫 번째로 만든 것은 회원가입 기능이다 생각보다 조건들이 많아서 2회에 걸쳐 포스팅하려 한다 [ Part 1 진행 순서 ] UI 구성 아이디 중복확인 기능 (비즈니스 로직) 첫 번째로, 회원가입 UI 등록 폼을 만들었다 jsp 파일에서 bootstrap을 이용하여 폼들을 구성하였고 사용자에게 회원가입 예시를 보여주기 위해 placeholder를 많이 사용하였다 Java에서 기본적으로 제공해주는 password type으로 비밀번호는 사용자 눈에 보이지 않게끔 구성하였고 이메일 또한 기본적으로 제공해주는 email type으로 이메일 형식을 체크해주었다 여기서 아이디는 중복이 되면 안 되기 때문에 중복체크 버튼을 만들었고, 버튼 클릭 시 현재 DB에 같은 아이디가 있는..
[R.Manager - Toy Project] 1st (Main UI, ERD) 그동안 만들었던 토이 프로젝트 포스팅 하려 한다 RManager는 아버지께서 회사 연구소에서 시약관리 업무를 하시는데, 주로 엑셀로 작업을 하시다가 불편함을 느끼셔서 웹사이트로 제작을 해드리려 시작하였다 2021년 2월 경에, IT에 대한 지식이 하나도 없던 나는 부트캠프 (스파르타 코딩 클럽)를 수강하면서 Python 언어와 Django 프레임워크를 사용하여 클론 코딩하여 웹사이트를 만들어 드린 적이 있다 약 3개월간 혼자 진행하였으며, 모든 코드들은 내 머리에서 나온 것이 아닌 구글링을 통해 남의 코드들을 짬뽕시켜 만든 것이었고 그렇기에 유지보수가 상당히 힘들었다 예를 들어 버튼 하나 만드는 데에도, 코드들을 분석하기 일쑤였고, DB 또한 존재하지 않았다 말 그대로 빈 껍데기 웹사이트였다 시간이 흐르..
Vue - Component / Router / Mix-in / Life-cycle [ Component ] - 조합하여 화면을 구성할 수 있는 블록을 의미하며 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능 - 컴포넌트는 Vue의 가장 강력한 기능 중 하나이다 - 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 된다 - 컴포넌트는 Vue의 인스턴스이기도 해서, 모든 옵션 객체를 사용할 수 있다 - 지역 컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고, 전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다 - 싱글 파일 컴포넌트는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다 - ,, 와 같은 일부 엘리먼트는 그 안에 어떤 엘리먼트가 나타날 수 있는지에 대한 제한을 가지고 있으므로, 사용자가 지정한 컴포넌..
Vue.js 초급 공부 Part V - Vue CLI CLI ? vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다. 여기서 CLI 란 ? 명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과) [ Terminal ] - node -v : 노드 버전 확인하기 - npm -v : npm..
Vue.js 초급 공부 Part IV - Template [ 뷰의 템플릿 문법 ] - 뷰로 화면을 조작하는 방법을 의미한다 - 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다 - 데이터 바인딩 : 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다 -> {{ }} - 디렉티브 : 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법이다 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있다 -> show : false & v-if="show" * keyup : 키보드의 모든 키 - keyup 뒤에 . (modifier)를 붙히고 특정 키보드만 설정 가능 [ watch vs computed ] - compu..
Vue.js 초급 공부 Part III - Http / axios Axios ? - Promise 기반의 Http 통신 라이브러리 - 설치 방법 : CDN 방식 || NPM 방식 - 임포트 : Promise ? 자바스크립트의 비동기 처리 패턴 - 데이터를 가져온 후에 다음 로직을 실행시키기 위해 필요하다 1. callback 2. promise 3. promise + generator 4. async & await Promise의 3가지 상태 Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 https://joshua1988.github.io/web-development/javascript/j..

티스토리툴바