해당 연습, 예시 코드는 JAVA , Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 어떤 특정한 대상의 이력을 보여줄 때, 사원의 월별 정보를 나타낼 때, 물건의 재고를 나타날 때 등 하나의 정보를 담고있는 테이블에서 가장 마지막 정보만 강조표기 하여 보기 쉽게 할 것이다. xml에서 resultType에 변수들을 담고 있는 객체에 최신 데이터 정보인지를 판단할 새로운 변수를 선언해준다. Result @ApiModelProperty(position = 1, value = "최신데이터 여부", example = "Y") // 최신 데이터에는 Y를 설정해줄 것 이기 때문에 기본값을 N으로 private String newYn = "N"; Service public List..
해당 연습, 예시 코드는 JAVA, Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 코드를 관리하다 보면 새롭게 추가해야하는 경우가 많다. 데이터베이스에 새로운 코드명을 추가할 때 순서에 맞도록 기입하는게에 추후 관리에 유용하나, 여럿이 진행하는 프로젝트 혹은 추가적인 유지보수작업이 진행되는 경우에는 더 많은 사람의 손길을 거쳐 관리가 잘 되지 않는 경우도 더러 있다. 사용자가 보기에는 잘 정렬이 된 깔끔한 화면으로 보는것을 선호하기에 추가적으로 정렬해서 보여줄 필요가 있다고 느꼈다. 각 숫자는 데이터베이스에 등록되어있는 각각의 코드명이고 코드의 순서는 다음과 같다. 데이터를 그냥 바꾸면 야기될 수 있는 문제점이 여럿 있고 예상치 못한 문제도 발생할 수 있기에 안전한 방..
해당 연습, 예시 코드는 JAVA, Angular(13.3.3), TypeScript(4.4.4), mariaDB(MySQL) 환경에서 제작되었음 검색창에 검색 시 스페이스바(공백)으로 구분하여 단어검색이 되도록, -을 붙여 검색을 할 경우 해당 단어는 검색되지 않도록 검색되는 기능을 만들고자 했다. 먼저 프론트 작업으로 기본이 될 검색을 하는데에 있어 사용할 변수 하나를 선언해주고 검색 로직을 실행할 API와 연결한다. // 검색 시 실행! retrieve() { // srchString : 단어 검색용 변수 this.rest.srchWord(this.srchString).subscribe( result => { this.srchRslt = result; } ); } 백엔드 작업으로 srchString..
해당 연습, 예시 코드는 JAVA, Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 A 페이지의 링크를 선택하면 B 페이지로 이동하되, B페이지는 탭 형식을 띄고 있다. 이때 A페이지에서 누른 링크대로 B 페이지의 첫 진입화면이 B페이지의 1번 탭일경우 B페이지의 첫화면은 1번탭 2번 탭일경우 B페이지의 첫 화면은 2번탭으로 나타나는 기능을 만들고자 했다. 이동 1번 이동 2번 A페이지의 역할을 할 html 코드이다. 이동 1번 버튼을 누를 경우 tapMove(1) 로직에 따라, 2번 버튼을 누를 경우 tapMove(2)번 로직에 따라 기능이 작동된다. .ts file tapMove(num) { this.router.navigate(["/menu/page2/" + num..
해당 연습, 예시 코드는 JAVA, Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 리스트 중 어떠한 값이 0인 요소가 있다면 해당 요소를 제외하고 보여주는 코드를 만들고자 한다. 이미 api를 통해 조회된 리스트 중 0인 요소만들 제거하도록 하여 서버에 중복적인 전송을 방지하는 방향으로 설계함. this.API.searchList(this.cond).subscribe(result => { this.originList = result; this.zeroList = Object.assign([], result); /* 단순하게 this.zeroList = result; 를 하지 않는 이유 result를 두 개의 변수에 저장하는 것 자체는 큰 문제가 되지 않으나 객체가 중복..
해당 연습, 예시 코드는 JAVA, Angular(13.3.3), TypeScript(4.4.4) 환경에서 제작되었음 상단의 체크처럼 조건이 충족된 경우 disable , 충족되지 않은 경우는 그대로 두는 것을 목표로 했음. 예시 HTML - 리스트의 테이블 부분 COL 1 COL 2 COL 3 COL 4 COL 5 {{VAL 2}} {{VAL 3}} {{VAL 4}} {{VAL 5}} {{VAL 6}} 조회 결과가 없습니다. 체크여부 값에 따라 체크박스 disable , 컬러 스타일 , 행 스타일 ngClass 디렉티브에 값을 반영하여 조절 가능하도록 함. 원하는 리스트 결과값을 대입하여 화면을 위와 같은 방식으로 구현했을 때 전체 리스트 체크를 총괄하는 체크박스 버튼 , 개별적으로 리스트를 제어하는 ..
