본문 바로가기

분류 전체보기32

[DB] 키 값, 유일한 값, 고유한 값 만들기(Identity 값, MAX + 1, ROW_NUMBER()) 데이터베이스 테이블에 키 값이나 유일한 값을 넣을 때 사용하고 있는 방법들을 정리해보았다. 상황에 따라 더 효율적인 방법을 사용해야 하기때문에 긴가민가 할때에는 선배들에게 조언을 구한 뒤 사용한다. 개발 경험과 공부가 더 필요할 것 같다. Identity 값 주로 primary key역할을 하는 컬럼에 할당되는 값으로 새로운 레코드가 추가될 때마다 자동으로 증가하는 고유한 값을 생성한다. 우리는 기본키로는 사용하지 않고, 그리드에 뿌려 특정 행을 잡을 때 사용한다. DB마다 상이한 채번룰을 사용하는데 몇개의 예시를 들어보자면 아래와 같다. MySQL CREATE TABLE temp_table ( ID INT AUTO_INCREMENT PRIMARY KEY ); MSSQL CREATE TABLE temp_.. 2023. 11. 3.
[javaScript/jQuery/Vue.js]버튼 클릭 시 요소 숨기기/보이기 오랜만에 버튼 클릭 시 HTML요소를 숨겼다 나타냈다를 반복하는 스크립트를 작성하게 되었다. 프레임워크 덕분에 간단하게 만들었지만 예전에 jQuery를 사용해 비슷한 화면을 제작했던 것이 생각나 gitHub를 뒤져 옛날 프로젝트를 찾아냈다. 처음으로 이 코드를 썼을 때는 요소가 사라졌다가 뿅하고 다시 나타나는게 재밌어서 몇번이나 클릭했던 기억이 있다. 정리해 두고 다음에 참고하면 좋을 것 같다. jQuery를 이용한 onClick시 요소 숨기기/나타내기 기록하기 숨겼다 나타내는 부분 왼쪽의 버튼을 클릭하면 독서록을 기록할 수 있는 폼이 나타났다가 다시 버튼을 클릭하면 폼이 사라지는 형식의 페이지이다. Vue.js onClick시 요소 숨기기/나타내기 이번에는 Vue.js프레임워크를 이용해 변수를 선언 한.. 2023. 10. 30.
[CSS] 채팅에 사용할 말풍선 만들기 백개발이 끝나 즐거운 UI시간을 보냈다. 우선 완성본이다. 채팅에는 이 외에도 전송영역, 첨부파일영역 등 다양한 영역이 존재하지만 이번에는 대화영역을 올려서 다음개발 때도 사용하고자 한다. *front는 Vue.js, Quasar 프레임워크를 사용하고 있다. 우선 HTML소스이다. Quasar 프레임워크를 사용하고 있지만 Quasar컴포넌트를 사용하면 css를 고치는데 제약이 좀 있어서 이번에는 Editor만 Quasar컴포넌트를 사용하고 나머지는 div로 만들었다. HTML코드에서 신경써줘야 할 점은 바로 자기자신의 말풍선 class 와 다른사람의 말풍선 class를 구분하는 조건을 적어줘야 한다는 것이다. 나는 Vue.js를 사용하고 있기 때문에 class에 조건을 걸어 바인딩해주었다. 다른 툴을 사.. 2023. 10. 28.
[MSSQL] IN절을 사용해 데이터 출력하기 - 잘못된 사용자 데이터 추출 전체 데이터 중 특정 정보(데이터)가 입력되지 않은 데이터만을 출력하는 일을 받았다. 고객사의 IT 관리자가 필요한 사용자정보를 입력하지 않은 사용자들을 파악해 관리하기 위함이었다. 메인화면의 카드를 통해 해당 페이지에 들어가게 되면 전체 사용자 정보 중에서 필요한 사용자 정보를 입력하지 않은 데이터만 출력하는 방식이다. 페이지를 새로 제작하는 것이 아니라 조건에 따라 보이는 데이터를 변경해줘야 했고, 기존 화면에 존재하는 데이터들은 영역별/그리드 별로 쿼리를 따로 불러와 출력하는 상황이었기 때문에 고민을 많이 했다. 우선 필요한 사용자 정보를 입력하지 않은 데이터(이하 에러 데이터)를 가져오는 조건을 부여하기 위해 검색조건에 errorYn이라는 필드를 추가했다. 카드를 클릭해서 해당 페이지에 접근하게 .. 2023. 10. 27.
[CSS] hr 태그 색상 변경하기/ HTML 선 색상 변경하기 만드는 화면 특성상 border를 자주 이용하는데 가끔 태그를 사용할 때가 있다. 간단한데 자주 사용하지 않으니 사용할 때 마다 검색하는 일이 잦아서 기록해두려고 한다. hr 태그 색상 변경하기 hr 태그를 사용할 때는 원하는 색상을 background에 입력하고 꼭 height와 border:0 을 함께 입력해주어야한다. 입력하지 않으면 색상이 변경되지 않는다. 2023. 10. 16.
[CSS] quasar에 정의되어있는 가상 선택자 클래스 css 변경하기 Quasar프레임워크를 사용하다가 css를 변경할 때, Quasar가 가지고 있는 클래스를 재정의하여 사용하곤 한다. 하지만 기존 css의 가상 클래스 중 :active, :focus는 Quasar가 가지고 있는 클래스에 붙여 사용하려 해도 적용되지 않는 경우가 있다. 예를들어 q-tab의 경우이다. 개발자 도구를 들여다 보면 활성화된 탭에는 q-tab--active라는 클래스가, 비활성화된 탭에는 q-tab--inactive라는 클래스가 적용되어있다. 이러한 경우 q-tab:active 또는 q-tab:focus를 사용한다고 하더라도 적용 자체가 되지 않거나, 원하는 결과를 얻기가 어렵다. Quasar에서 가상클래스 재정의 하는 법 * Quasar자체에서 제공하는 클래스를 가상클래스라고 정의하기에는 확.. 2023. 10. 14.
728x90