Hello

html select multi selected기능이 필요할 때 간단하게 사용할 수 있는 플러그인을 찾아 프로젝트에서 사용하여 드롭다운 메뉴를 개선한 경험을 작성하려고 합니다.  사용 방법jQuery와 sumoselect 플러그인 포함 HTML 구조 //some options추가 옵션$('#target')[0].sumo.selectAll(); //전체 선택$('#target')[0].sumo.unSelectAll() //전체 선택 해제$('#target')[0].sumo.selectItem(numberText + ''); //value에 맞는 option selected ex) '1','2'$('#target')[0].sumo.selectItem(number); //index에 맞는 option s..

자바스크립트에서 파일을 File API인 FileReader를 이용하여 base64로 변환하는 방법 FileReader는 File혹은 Blob객체를 이용해 파일의 내용을(또는 원시 데이터 버퍼) 비동기적으로 읽을 수 있습니다. document.getElementById('searchImg').addEventListener('change',e=>{ const file = e.target.files[0]; const reader = new FileReader(); reader.addEventListener( "load", // 파일을 성공적으로 읽었을 때 실행되는 이벤트 (e) => { console.log(e.target.result) }, false, ); reader.readAsDataURL(file)..

broadcastChannel API를 사용하면 동일 호스트의 탐색 컨텍스트(windows , tabs , frames, iframes)로 메시지 전송이 가능합니다. 채널에 게시되는 메시지는 해당 채널의 모든 수신자에게 전달됩니다. BroadcastChannel생성자는 채널 이름을 매개변수로 받습니다. 메시징 프로토콜은 정의되어 있지 않으며 다양한 검색 컨텍스트에서 이를 자체적으로 구현해야합니다. 사용 방법 // 채널 생성 혹은 참여 const channel = new BroadcastChannel('channel_name'); // 메시지 발송 channel.postMessage('Hi~'); // 메시지 수신 핸들링 channel.onmessage = function(e) { console.log('..

어떤 이벤트가 생겼을 때 client ui를 업데이트가 필요했습니다. SSE(Server-Sent-Event)라는 것을 알게 되어 이를 공부한 내용을 간략하게 작성합니다. SSE는 단방향 통신으로 서버에서 전송한 데이터를 클라이언트는 받기만 할 수 있습니다. HTTP/2(100개)를 사용하지 않으면 SSE 는 열려 있는 최대 연결 수에 대한 제한이 있습니다. HTTP를 사용할 때 브라우저당 6개로 설정 되어 있습니다. 구독 //동일 도메인 구독 const eventSource = new EventSource('/api/subscribe/sse'); //다른 도메인의 이벤트 구독, URI와 옵션 지정 const eventSource = new EventSource('//example.com/api/subs..

gradle 기본 경로 : $USER_HOME \.gradle\caches\modules-2\files-2.1 ├── caches │ ├── 4.8 │ ├── 4.9 │ ├── ⋮ │ ├── jars-3 │ └── modules-2 ... 공식 홈페이지를 보면 modules-2에 공유 캐시( ex: 종속성 아티팩트 )로 구성된다는 내용이 있습니다. gradle 캐시 위치는 GRADLE_USER_HOME 환경 변수 값에 따라 다릅니다. gradle home을 변경해, 변경된 gradle home 기준으로 \.gradle\caches\modules-2\files-2.1에 생성되게 됩니다. + maven 기본 경로 : ~\.m2\repository intellij 수정 방법 1) Override 체크 후 lo..

저희 팀에서 사용하는 서버에서 시간 처리를 했을 때 3-4분 지연된 시간으로 처리된다는 이슈를 전달 받아 확인해 보니, 서버시간이 느려 발생한 이슈임을 확인했습니다. 인프라팀에 서버시간 동기화 요청 후 이슈를 해결 했으며, 동기화 방법에 대해 정리하려고합니다. 원격타임서버로 시간을 받아와 동기화시켜주는 방법 중 NTP를 사용해 서버시간을 설정하고있습니다. NTP 설치 yum install ntp 동기화할 서버 주소 설정 vi /etc/ntp.conf 동기화할 서버(ip or domain) server 127.0.0.1 server kr.pool.ntp.org 실행 서비스 시작 systemctl start ntpd 서비스 자동 실행 systemctl enable ntpd timedatectl의 명령어를 통..

Intellij에서 gradle 빌드 및 테스트 코드 실행 실패가 발생했다. - 테스트 코드 실패 에러 에러내용을 확인해보면 ClassNotFoundException이 발생한 것으로 확인되어 머리가 복잡했다. 분명 해당 테스트 클래스의 테스트를 실행했는데 class를 찾을 수 없다니 이해가 안되었다. 프로젝트를 실행해보면 프로젝트는 정상 작동했다. 테스트만 안되는 것이었다. - gradle 빌드 실패 에러 아래 이미지에 html에서 실패 이유를 확인 할 수 있도록해 해당 html에서 확인을 해보니 TestSuiteExecutionException 발생한 것을 알 수 있었다. 해결 방법 settings -> gradle을 확인해보니, Build and Run 부분이 Gradle로 셋팅된 것을 확인할 수 있..

Settings -> Git -> Protected brahches 를 변경해 활성할 수 있다. protected branch는 force push가 disabled 되어 있는 이유는 해당 branch를 보호하기 위해서 이다. 예를 들어 마스터 브랜치는 언제나 검증된 코드가 올라가야 한다.이 원칙을 지키기 위해 마스터 브랜치에는 항상 올바른 커밋 혹은 머지가 되어야 할 것이다. force push를 방어하기 위해 protected branch라는 것을 마련 해 두었다.

회사 github를 github cloud(GitHub Enterprise Managed User)로 이관을 하면서 기존 로컬 환경에 세팅 변경이 필요하게 되었다. 기존 github 계정은 별도로 가입했던 것으로 기억이 되는데 github cloud 이관 되면서 azure active directory(Single Sign-On)를 사용해 계정관리를 하도록 변경되어 비밀번호 인증이 아닌 authenticator앱 인증을 통해 로그인하는 형태로 변경되었다. 그래서, intellij 에서 github 계정 추가 시 Id/Pwd 형태를 사용 할 수 없게 되었다. github token을 발행해 intellij에 계정 등록 방법을 정리하고자 한다. github token 발행 1.우측 상단에 유저 이미지 클릭 ..

프로젝트 진행이 끝날 무렵 테이블 설계가 기존과 다른 부분이 생겨 erd를 수정해야 했는데 Intellij에서 Database Tools and SQL툴을 사용해 Diagram을 만들어 주는 기능이 있어 간단하게 정리하려고 작성한다.나는 MySQL로 테스트를 진행 했다. 1. 먼저 DB에 접속할 수 있도록 플러그인(Database Tools and SQL) 설치가 필요하다. 2. Shift 키를 두 번 누르면 모든 항목을 검색할 수 있는 검색 상자가 열린다. 3. 검색상자에서 Database를 검색하거나 우측 탭에서 Database탭 확인할 수 있다. 4. + 아이콘을 눌러 Data source 에서 본인이 사용하는 디비를 선택한다. 5. Data Sources and Drivers 창이 열리고 db정보..