삐삐사전

사용하는 스키마툴에서는 제약조건이 상세하게 나오지만 다른 툴에서는 나오는 경우도 있고 안나오는 경우도 있었다. ​ ​ 업무를 하는데 제약 조건을 삭제하려고 해도 이름이 다른건지 삭제가 안되서 대체 원인이 뭔지 파악이 안되어서 해당 테이블의 제약 조건을 조회해봤다. ​ SELECT * FROM information_schema.table_constraints WHERE TABLE_NAME = '테이블명' AND CONSTRAINT_TYPE = 'FOREIGN KEY' --PRIMARY KEY, CHECK 조회를 하면 이런식으로 목록이 출력된다. ( CHECK 는 조건에 부합하는 데이터만 입력이 가능하도록 하는 제약 조건이다.) ​ ​ 이렇게 해당 테이블에 적용된 제약 조건이 무엇이 있는지 확인이 가능하다...

기존에 이미 테이블을 만들어 두었는데 그 테이블에 컬럼을 추가해야 했다. ​ ALTER TABLE 테이블명 add COLUMN 컬럼명 타입 NULL 생각보다 자주 쓰는 형태이기 때문에 자연적으로 기억을 하게 되지만 잊어버리기도 쉽다.

A 테이블고 B 테이블의 각각 다른 필드에 같은 값을 넣는 경우가 있다. 이걸 사용한 건... 업무 중에 생성일이 오늘 날짜로 모두 엎어져버렸을때 이다. 예전에 만들어서 계속 수정 수정 했던 홈페이지가 있었는데 해당 서버에는 초기버전이 올라가있었다. 바로 알았으면 롤백 했을텐대 한참 후에 알았다..! 조건문을 넣은 줄 알았는데 안들어가 있었는지 뷰 에서 버튼을 한번 잘못 눌렀다가 곤욕을 치렀다. UPDATE 변경하려는 테이블명A SET A.수정필드 = B.가지고올필드명 from 가지고올 데이터가 들어가있는 테이블명B where B.필드 = A.필드 --고유 code 가 같은걸로 설정을 해두었다. 이전에 수정을 하고 잊어버렸는데 그때 실수했던 잔여물이 아직 남아있었는지 또 수정할게 있었다. 뭔가 이상한거 ..

아이콘을 적용하다가 도저히 괜찮은 아이콘이 없어 결국 폰트어썸으로 왔다. ... https://fontawesome.com/docs/web/setup/get-started Get Started Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com FontAwesome Docs 를 보면 제일 하단에 Vue 라고 있다. Vue.js 에서 적용하는 방법이 나와있다. npm i --save @fortawesome/fontawesome-svg-core npm 기준으로 먼저 설치를 한 후 # Free icons styles npm i --save @fortawesome..

페이지를 왔다갔다 하다 보면 해당 페이지의 이름으로 페이지별 구분할 때가 생긴다. 한개의 메인 레이아웃에서 로그인이나 회원가입 페이지로 가면 메뉴바를 숨기기 위해 이 방법을 사용하였다. watch : { $route(to, from){ console.log(to) console.log(from) } }, 홈레이아웃의 watch 에 넣어주었다. 이렇게 넣으면 콘솔에는 해당 라우터의 이름이 뜬다. 이 중에서 name 이 필요했기 때문인데 필요한 값을 넣으면 된다. watch : { $route(to, from){ console.log(to.name) console.log(from.name) } }, 이런식으로 필요한 값만 출력을 시킬 수 있다.

제일 햇갈렸던 부분인거 같다. Tailwind css 를 사용하고 있기 때문에 플러그인을 활용해서 추출하기로 하였다. https://www.figma.com/community/plugin/1049994768493726219/Inspect---Export-to-HTML%2C-React%2C-TailwindCSS Inspect - Export to HTML, React, TailwindCSS | Figma Community Figma Community plugin - Convert design to code with a click. A simple way to export your design to HTML or React with TailwindCSS. How to use it? Select a layer..

아무래도 분야가 분야다 보니깐 제플린과 피그마 같은 디자인 관련 툴은 쓸 일이 없다. 이번에 처음 사용을 해봤는데 뭔가 불편한거 같으면서도 아닌거 같으면서도... 애매한 느낌이다. 1. 제플린 https://zeplin.io/ Zeplin Deliver on the promise of design zeplin.io 이 사이트이다. 제플린에 로그인을 하면 이런 화면이 뜬다. 디자이너가 아니기 때문에... 디자이너가 공유하길 기다렸다. 공유받은 프로젝트에 접속하면 이렇게 디자이너가 한 작업이 뜬다. 화면이 여러개가 있는데 그 중 필요한 화면을 클릭한다. 해당 화면 우측에 보면 File: Untitled 옆에 아이콘이 피그마 아이콘인데 피그마에 로그인한 상태로 해당 버튼을 클릭하면 피그마로 파일을 옮길 수 있..

data 에 변수를 하나 넣어준다. data() { return { activeTab : 'a' } }, 해당 값은 아래처럼 컴포넌트에서 클릭시 변동이 되게 해두었다. 목록 해당 컴포넌트 하단 스크립트 파일 쪽에 watch 를 생성해준다. 그러면 클릭할 때 마다 새로운 값과 과거 값이 출력된다. ​ oldVal 은 변경되기 이전의 값이고 newVal은 새로운 값이다. watch : { activeTab(newVal){ console.log(newVal) } }, oldVal은 이런식으로 작성을 하지 않아도 된다.

매번 기억은 하는데 쓰려고 하면 잊어버린다. ​ 부모 컴포넌트 부모 컴포넌트에서는 이렇게 작성을 해준다. getCheckedCode 는 부모 컴포넌트의 함수이고 addCheckCode는 자식컴포넌트에서 올라오는 값이다. 자식 컴포넌트 newlyCheckedBox(code){ this.$emit('addCheckCode', code) }, 자식 컴포넌트에서 부모컴포넌트에 써준 '이벤트명'을 넣어준다. 여기서는 $emit 을 사용해야 한다. 같이 전달해야 하는 값이 있어서 옆에 code 를 작성해주었다.

standalone.xml 에서 서브 도메인을 설정을 해주었다. 이렇게 설정 해주고 관리자 권한을 만들어준 후 deployment 에서 파일명과 똑같이 추가를 해주었다.