타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다. 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에서 사용 가능한 오픈 소스이다. - 위키백과 자바스크립트의 모든 단점을 보완해 만든 언어(JS 확장 버전) 동적인 자바스크립트 언어에 타입을 미리 부여함으로써 컴파일 시 에러를 잡을 수가..

1. 화면 구성 이전의 메인 화면 관리자 메뉴에서 출입 조회 버튼 클릭 시 다음과 같이 회원들의 출입을 최신 순으로 볼 수 있는 출입 조회 페이지 구현 2. 위 출입 일자, 이름, 휴대폰 번호를 추출하기 위해서는 Entry 테이블에서 외래키인 회원 id로 회원 이름과 휴대폰 번호를 추출하기 위해 다음과 같은 서브 쿼리를 사용해야 함 SELECT DATE_FORMAT(createDate, '%Y년 %m월 %d일 %H시 %i분 %s초'), (SELECT memberName FROM member WHERE member.id = entry.memberId), (SELECT phone FROM member WHERE member.id = entry.memberId) FROM entry; JPA Repository..

1. 화면 구성 Bootstrap의 collapse를 이용해 다음과 같이 관리자 메뉴를 클릭하면 관리자 메뉴인 [회원 관리, 출입 조회]가 나타나도록 구현 회원 관리 페이지는 다음과 같이 Bootstrap의 table로 구현, 각 회원의 정보와 회원을 수정, 삭제할 수 있는 버튼 배치 다른 관리자 메뉴인 출입 조회로 이동할 수 있는 버튼도 왼쪽에 배치 수정 버튼 클릭 시 해당 회원에 대한 정보를 모달창에서 수정 가능(input 태그) 별 표시(*) 되어있는 필수 입력 항목을 입력하지 않으면 아래와 같이 경고 메시지 출력 수정 버튼 클릭 시 입력한 내용으로 회원 정보가 수정되고, 테이블 새로고침됨 삭제 버튼 클릭 시 아래와 같이 해당 회원을 삭제할 것인지 경고 모달 출력, 삭제 버튼 클릭 시 해당 회원 삭..

1. 화면 구성 첫 화면은 연장할 회원의 휴대폰 뒷번호 4자리를 입력하는 화면으로 메인 화면과 유사하게 구현 번호 입력 시 번호 입력 패드가 사라지고 회원을 선택하는 화면으로 바뀌게 회원 선택 시 다음과 같이 시작 날짜와 연장할 회원권을 선택할 수 있는 화면으로 바뀌게 함 시작 날짜는 현재 회원권 만료 날짜 이후만 선택할 수 있도록 다음과 같이 구현 연장하기 버튼 클릭 시 연장 되도록 2. 휴대폰 뒷번호 입력 >> 회원 선택 >> 시작날짜, 회원권 선택 순으로 넘어가는 화면은 다음과 같이 step 변수와 v-if를 사용하여 구현 * 휴대폰 뒷번호 입력 후 회원 선택하는 기능은 메인 화면에서의 로그인 기능과 동일하게 구현 3. 다음과 같이 v-for과 v-model을 이용하여 만료 날짜 이전은 select..

1. 화면 구성 달력은 Vue Cal 라이브러리 사용, 나머지 배치와 그리드 시스템, 버튼 등은 Bootstrap 사용 출입체크 버튼 밑에 로그인한 회원의 이름, 회원권, 등록날짜, 만료날짜, 남은일수, 출석횟수, 옷 사용 여부가 표시되도록 구현 2. 로그인한 사용자 세션 정보를 저장해 출입체크 버튼 밑에 회원의 등록 정보를 표시하기 위해 상태 관리 라이브러리 vuex 사용, 이 때 새로고침 시 vuex의 값이 초기화 되는 문제를 해결하기 위해 vuex-persistedstate 라이브러리를 사용 vuex의 storage.js 구현 후 main.js에 추가 상태(state)로 memberId를 가지고, state를 설정하기 위한 mutations인 setMemberId를 구현 메인화면에서 로그인 할 때 ..

데이터의 타입(data type)을 일반화한다(generalize)는 것을 의미 클래스나 메소드에서 사용할 내부 데이터 타입을 컴파일 시에 미리 지정하는 방법 타입의 경계를 지정하고, 컴파일 때 해당 타입으로 캐스팅하여 매개변수화된 유형을 삭제하는 것 - 장점 1. 클래스나 메소드 내부에서 사용되는 객체의 타입 안정성을 높일 수 있다. 2. 반환값에 대한 타입 변환 및 타입 검사에 들어가는 노력을 줄일 수 있다. 3. 잘못된 타입이 들어올 수 있는 것을 컴파일 단계에서 방지할 수 있다. 4. 비슷한 기능을 지원하는 경우 코드의 재사용성이 높아진다. - 제네릭 제거 시기 자바 코드에서 선언되고 사용된 제네릭 타입은 컴파일 시 컴파일러에 의해 자동으로 검사되어 타입 변환됨 그리고 코드 내의 모든 제네릭 타입..