기타
-
코드 포맷터 ( Prettier ) 사용하기기타 2023. 6. 15. 12:45
js 를 변경하고 싶을 때, 다음과 같이 띄어쓰기가 되어있지 않다면 매우 곤란하다. 이 때 자동으로 코드를 포맷해주는 Prettier를 사용해보자 사용방법은 간단하다. npm에서 전역으로 prettier를 설치하고 3번의 명령어를 실행하면 되는데, vsCode의 powerShell 에서는 보안상 스크립트를 실행할 수 없었다. 이럴때는 powerShell을 관리자 권한으로 실행한 뒤 실행 정책을 Restricted 에서 RemoteSigned로 변경해서 js 를 powerShell에서 실행할 수 있도록 변경한 후, prettier를 사용하면 해당 js 파일이 다음과 같이 보기 좋아진다
-
ajax를 사용하지 않는 방법 생각해보기기타 2023. 6. 12. 10:22
웹 페이지를 동적으로 구성하는 방법으로 ajax를 많이 사용했지만, ajax는 개발자 도구에서 javascript를 변경하는 방법을 이용해서 이용자가 악의적으로 DB에서 데이터를 가져올 수 있는 위험이 있다. 따라서 동적으로 구성하고자 하는 웹 페이지를 처음 랜더링 할 때 해당 페이지에서 이용하고자하는 데이터를 모두 가져와서 javascript의 변수에 객체 형태로 저장해두고 특정 이벤트를 발생시켰을 때 변수로부터 원하는 데이터를 가져와서 웹 페이지를 동적으로 구성하면 좋을거라고 생각해서 방법을 찾아봤다. 1. controller에서 javascript로 데이터를 바로 넘겨주는 방법 gson 라이브러리를 활용해서 DB로 부터 받아온 데이터를 json 형태로 변경하고 model에 담아서 jsp로 보냈다. ..
-
반응형 웹 레이아웃 만들기기타 2023. 5. 15. 22:31
반응형 웹 화면을 만들기 위해 bootstrap을 사용했지만, js 로 작성된 css 부분이 많아서 원하는 방향으로 css 를 작성하기 어려웠다. 그래서, 반응형 웹을 직접 만들기로 했고, 우선은 반응형 웹을 이해하기 위해 레이아웃을 먼저 작성했다 데스크탑에서 이용할 때 두 개의 요소가 가로로 배치된다. 모바일에서 이용할 때 모바일에서 볼 때는, flex로 배치되어 있던 요소들이 세로로 나타난다 #contentsWrap { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } @media only screen and (min-width: 768px) { #contentsWrap..
-
CSS - em , rem , vw , vh , %기타 2023. 4. 28. 11:18
CSS 작업을 할 때, 원리를 파악하지 못 하고 복붙해서 사용해왔다. 그래서 앞으로 em과 rem, vw와 vh, % 에 대해 정리해보려고 한다. em, rem -> 상대 단위로, 고정되지 않고 특정 기준에 따라 유동적으로 바뀌는 수치를 지정할 수 있다. em 과 rem은 둘 다 font-size를 기준으로 변화하는 단위이다. 차이점으로 rem은 최상위 요소인 html의 font-size를 기준으로 변화한다. em은 해당 단위가 사용되고 있는 요소의 font-size를 기준으로 변화한다. 따라서 css를 작성할 때 rem은 // 최상위 요소에 font-size를 지정하고, html{ font-size: 10px; } // 원하는 요소에 rem을 사용하자 .class{ width: 10rem; } em은 ..
-
JavaScript에서 생성자를 초기화하면 메소드들이 실행된다.기타 2023. 4. 26. 12:08
// 탭 생성자 class TabsAutomatic { // 탭 구성 constructor(groupNode) { this.tablistNode = groupNode; this.tabs = []; 중략 } // 키다운 이벤트에서 첫 탭과 마지막 탭의 이동을 이어지게 하는 함수 setSelectedToPreviousTab(currentTab) { var index; if (currentTab === this.firstTab) { this.setSelectedTab(this.lastTab); } else { index = this.tabs.indexOf(currentTab); this.setSelectedTab(this.tabs[index - 1]); } // 달력 숨기기 allCalendar.classLi..