Programming59 [Chrome] 개발자 도구 - 콘솔 사용 시 주의사항(let, const 선언) ● 크롬 개발자 도구 - 사용자와의 원활한 상호작용과 편리한 코드 테스트를 위해 표준 문법에서 벗어난 기능을 제공 => let과 const의 재선언이 가능 HTML 삽입 미리보기할 수 없는 소스 - 이유 : 콘솔창이 REPL 모드에서 예외로 처리하기 때문 1) 스크립트에서 const 재선언하는 경우 => 오류 발생 const a = 1; const a = 2; 2) 콘솔에서 const를 따로 따로 재선언하는 경우 => 오류 미발생 3) 콘솔에서 const를 한 번에 재선언하는 경우 => 오류 발생 4) 다른 키워드로 재선언 => 오류 발생 - Ex ) const로 선언한 변수를 let으로 재선언 참고 제주코딩스베이스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 콘솔 주의사항(let, const 선언) .. 2023. 12. 10. [Javascript] Cookie, jQuery로 로그인 ID 저장하기 기능 구현하기 ● 쿠키(Cookie)란? - 브라우저에 저장되는 작은 크기의 문자열 - 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달 - 서버는 쿠키를 받아서, 사용자의 정보를 추적하거나, 사용자의 환경 설정을 저장하는 등의 용도로 사용 - Ex) 사용자 환경 설정 저장, 로그인 상태 유지, 광고 개인화, 사용자 행동 추적 - ❗안전하지 않는 데이터를 저장하는 데 사용해서는 안 됨. (Ex : 사용자 비밀번호) ● 구현 필요 부분 1. 로그인 폼 - ID 입력 칸(input text), ID 저장 체크박스(checkbox) 필수 ID PW 아이디 저장 LOGIN 2. 로그인 페이지 로드 시 쿠키에 저장된 아이디 값 확인 $(func.. 2023. 12. 7. [Chrome] 개발자 도구 - 콘솔 사용법 ● 콘솔(Console) - REPL(Read-Eval-Print-Loop) : 사용자가 입력한 명령어를 읽고(Read), 해당 명령어를 평가하고(Eval), 결과를 출력한 다음 다시 입력 상태를 기다리는 상태로 돌아가는 과정을 반복(Loop)하는 단순한 상호작용 컴퓨터 프로그래밍 환경 - 파일에 저장하지 않고도 즉시 코드를 실행 및 결과 확인이 가능 ▶ 코드 동작을 빠르게 테스트 및 디버깅 가능 ● 로그 확인 - console.log() : 일반 메세지 - console.info() : 정보 메세지 - console.debug() : 디버그 메세지 - console.warn() : 경고 메세지 - console.er.. 2023. 12. 3. [Chrome] 개발자 도구 - 화면 캡처 ● 용도 - 웹 페이지를 캡처할 때 - 스크롤이 생겨 한 번에 한 번에 캡처가 불가능할 때 => (구글 또는 실행) 프로그램 따로 설치 없이❕ PDF 다운로드 없이❕ 한 번에 화면 캡처를 할 수 있다✨ ● 방법 1. 명령어 실행으로 캡처 - 개발자 도구 > 우측 상단 세로 점 세 개 버튼 > 명령어 실행 또는 Ctrl + Shift + P - 원본 크기 스크린샷 캡처 검색 및 선택 · 노드 스크린샷 캡처 : 선택한 요소 영역을 캡처하고 싶을 때 요소 탭에서 요소 선택 후 캡처 실행 · 스크린샷 캡처 : 현재 보이고 있는 부분만 캡처 · 영역 스크린샷 캡처 : 드래그 영역만 캡처. 윈도우 캡처 기능 (Win + Shift + S)의 사각형 캡처와 동일 기능 - png 형태의 이미지 파일 자동 다운로드 진행.. 2023. 11. 28. [Chrome] 개발자 도구 - 요소 상태 및 Class 활용 ● 요소 상태별 스타일 확인 - 요소 상태 전환 버튼(:hov) 클릭 - active, hover, focus, visited, focus-within, focus-visible, target 체크해보며 스타일 확인 (중복 선택 가능) - active : 요소가 활성화 된 상태 (ex : 버튼 클릭 했을 때) - hover : 요소 위에 마우스를 가져다 놓은 상태 - focus : 요소가 포커스 받았을 때. 주로 폼 요소에서 사용. 키보드 또는 다른 입력 장치를 통해 포커스 발생 - visited : 링크를 방문한 후에 해당 링크 요소에 적용. 이를 통해 방문한 링크와 아직 방문하지 않은 링크 구별 가능 - focus-within : 요소 내부의 자식 요소가 포커스 받았을 때 부모 요소에 적용 - foc.. 2023. 11. 28. [Chrome] 개발자 도구 - 명도대비율 확인 ● 목적 : 웹접근성 - 색약, 저시력자, 고령자 등도 구분가능하도록 텍스트와 배경의 명도대비가 필요함 - 기본적인 비율은 텍스트 : 배경 = 4.5 : 1 - 큰 글자(24px 이상) 혹은 굵은 글자(19px 이상)의 경우, 텍스트 : 배경 = 3 :1까지 가능 ● 방법 - Ctrl + Shift+ C 또는 요소 선택 버튼 클릭 후 해당 요소 위에 마우스 올려서 확인 - 스타일에서 Color Picker를 이용하여 확인 - 펼침 버튼을 누르면 레벨 기준 통과여부도 확인 가능 (아래의 경우, AA와 AAA 기준 모두 통과한다는 뜻) - 기준을 미달하면 아이콘이 바뀌고(왼쪽), 새로고침 아이콘(오른쪽)을 누르면 해당 기준에 맞춰 색상 변경 ● 참고 - 텍스트가 있는 요소에서만 확인 가능. 텍스트가 없는 요.. 2023. 11. 24. [Chrome] 개발자 도구 - 요소 숨김 처리 단축키 ● 요소 선택 + H - ex : 빨강 > 노랑 > 초록 div 에서 노란색 div 선택 후 H를 눌렀을 때 - __web-inspector-hide-shortcut__ 이라는 class가 추가되면서 숨김 처리가 됨 - 스타일 탭에서 __web-inspector-hide-shortcut__ class의 스타일은 visibility : hidden !important; 라는 것을 확인 가능 - __web-inspector-hide-shortcut__ · Chrome에서만 사용되는 class · Edge에서 단축키는 동일하며, microsoftStartLogo __web-inspector-hide-shortcut__라는 class가 추가됨 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - HT.. 2023. 11. 24. [Chrome] 개발자 도구 - 눈금자 표시 ❗ 사실상 기능 개발을 주로 하는 개발자들에게는 쓸모없을 수 있지만, 퍼블리셔에게는 도움 될 수 있는 기능 - 오른쪽 상단 세로 점 3개 버튼 클릭 > Run Command 클릭 - 또는 Ctrl + Shift + P - 눈금자 입력 > "마우스를 가져가면 눈금자 표시" 선택 · 영어 사용중인 경우, "Show rulers on hover" 검색 - 요소 선택 · 요소 탭 > 왼쪽 상단 화살표 버튼 클릭 · Ctrl + Shift+ C - 눈금자 생성 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 눈금자 표시하기 https://www.youtube.com/watch?v=ZwqSsekJVqU&list=PLkfUwwo13dlUJCAGcBOynazaBVgvvj4ba&index=3 2023. 11. 15. [Chrome] 개발자 도구 - 언어 변경 ● 방법 - 환경설정 이용 - 명령어 실행 1. 환경설정을 이용하는 방법 - 오른쪽 상단 톱니바퀴 버튼 클릭 - 환경설정 > 언어에서 언어 선택 - 페이지 새로고침(F5) 또는 개발자도구에서 새로고침 버튼 클릭 2. 명령어로 실행하는 방법 - 오른쪽 상단 세로 점 3개 버튼 클릭 > Run Command 클릭 - 또는 Ctrl + Shift + P - 원하는 언어 입력 후 선택 · 눈치챘겠지만 언어 설정 외 다양한 기능을 명령어를 통해 실행할 수 있다. 시간이 될 때.. 자세히 써보겠다.. - 페이지 새로고침(F5) 또는 개발자도구에서 새로고침 버튼 클릭 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 언어 변경하기 https://www.youtube.com/watch?v=C7-vDqn4.. 2023. 11. 15. [Chrome] 개발자 도구 - 실행 및 레이아웃 설정 ● 실행 - F12 - 최근 사용 탭 열기 · Mac : Cmd + Opt + I · Window : Ctrl + Shift + I - 요소 탭 열기 · Mac : Cmd + Opt + C · Window : Ctrl + Shift + C - 최근 사용 탭 열기 · Mac : Cmd + Opt + J · Window : Ctrl + Shift + J ● 레이아웃 설정 - 오른쪽 상단 세로 점 3개 버튼 클릭 - 왼쪽부터 창 분리 / 좌측 고정 / 하단 고정 / 우측 고정 - 모니터가 2개 이상일 경우 창 분리 모드 추천 참고 제주코딩벵스캠프 - 아는 만큼 보이는 크롬 개발자 도구 - 실행하기 https://www.youtube.com/watch?v=4U9yRzF810Y&list=PLkfUwwo13dlUJ.. 2023. 11. 9. [GeoServer] 좌표계 이격 문제 해결 ● 문제 - 공간데이터 좌표계 변환 과정 중 좌표계를 올바르게 설정해 줬음에도 불구하고 300m 정도의 이격 발생 ● 원인 - 옛날 좌표계로 된 자료를 요즘 좌표계로 변환하는 과정에서 발생 - 옛날 좌표계 : 7개 파라미터 사용 · 이동(3) + 회전(3) + 축척(1) · Bursa-Wolf 모델 - 요즘 좌표계 : 10개의 파라미터 사용 · 이동(3) + 회전(3) + 축척(1) + 회전기준점(3) · Molodensky-Badekas 모델 ● 해결 ❗3개의 추가인자를 대체할 만한 것이 필요 ❗towgs84(타원체 변환 계수) 파라미터가 포함된 좌표계로 재정의 해줘야 함 1. geoserver 디렉터리 내 user_projections > epsg_overrides.properties를 아래 첨부파일.. 2023. 11. 9. [Javascript] jQuery TableDnD를 이용하여 테이블 순번 바꾸기 ● jQuery TableDnD(Table Drag and Drop) - HTML 테이블의 행을 Drag and Drop 하여 재정렬할 수 있게 하는 jQuery 플러그인 - jquery.tablednd.js 스크립트 추가 필요 ❗ 프론트단에서만 사용할 경우 "3-1. tableDnd 플러그인 적용 및 옵션 설정 "까지만 봐도 됨 ❗ DB 상에서 테이블 순번을 바꿔야 하는 경우 끝까지 확인 필요(아래 예제는 Spring 사용) ● 사용방법 1. 라이브러리 가져오기 - 다운로드 : https://github.com/isocra/TableDnD 소스 다운로드 후 TableDnd/js/jquery.tablednd.js 파일 사용 2. HTML 테이블 생성 - table 및 각 row 마다 id 필요 Row 1.. 2023. 11. 2. [Javascript] Debounce와 Throttle의 차이 Debounce Throttle 공통점 - 과도한 이벤트 발생으로 인한 성능 저하 방지 예방하기 위해 이벤트를 제어(제한)하는 방법 - ex : input text에 키보드가 입력될 때 마다 DB 조회를 하게 된다면, 서버 부하를 야기할 수 있음 - 일정 시간 간격을 두고 이벤트 호출 - 별도의 스크립트 호출 없이, 순수 바닐라 스크립트로 구현 가능 차이점 - 동일 이벤트 발생 시, 가장 마지막 이벤트 실행 - ex : 1000ms 동안 동일 이벤트 발생 시, 입력이 끝날 때 가장 마지막 이벤트만 실행 - 마지막 이벤트에서 일정 시간동안 이벤트가 발생한다면, 또 일정 시간을 기다림 - 동일 이벤트 발생 시, 일정 시간 동안 한 번만 실행 - ex : 1000mx 동안 이벤트 실행을 막고, 한 번만 실행 .. 2023. 11. 1. [Javascript] 전개 연산자(Spread Operator) ● 전개 연산자(Spread Operator) - JavaScript에서 데이터를 확장하거나 복사할 때 사용 - 주로 배열과 객체를 다룰 때 사용 - ES6 (ECMAScript 2015) 문법 - "[Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce)" 에서 소개된 문법 ● 배열에서의 전개 연산자 예시 1. 배열 병합 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] const arr3 = [7, 8, 9]; const mergedArray2 = [...arr1, ...arr2, ...ar.. 2023. 10. 28. [Javascript] val()과 attr("value")의 차이 ● $("").val() - DOM 요소의 현재 입력된 값을 반환 - 사용자가 입력한 내용이나 JavaScript 코드를 통해 동적으로 변경된 값을 가져옴 - input, textarea, select와 같은 입력 요소의 값을 가져올 때 사용 ● $("").attr("value") - DOM 요소의 초기 속성(attribute) 값을 반환 - HTML 속성으로 정의된 초기 값을 가져옴 - 요소의 속성(attribute)를 가져올 때 사용 ! 일반적으로 입력 요소(input)의 초기값과 실제 입력값이 다를 수 있음 ! val()을 사용하여 실제 입력값을 가져오는 것이 일반적 ! 초기 속성값을 가져오고 싶을 때 attr("value") 사용 2023. 8. 24. [Javascript] jQuery Datepicker 특정 날짜만 선택 가능/불가능 설정 ● jQuery UI Datepicker를 사용하여 Calendar 기능을 구현할 때 특정 날짜(들)만 선택 가능 또는 불가능하게 하는 방법 - beforeShowDay : 각 날짜마다 호출되면서 해당 날짜를 표시할지 여부를 결정하는데 사용 - 선택 가능 또는 불가능하게 할 날짜를 배열에 담아 차례대로 돌리면서 선택 가능하게 하려면 [false], 가능하게 하려면 [true]를 반환 * 참고 return true : true라는 boolean 값을 반환. true로 인식. return [true] : true라는 값을 포함하는 배열을 반환. 길이가 1인 배열의 첫번째 요소로 true가 포함되어 있는 상태. - 방법은 2가지(객체를 사용하여 초기화 하는 방법 / option 메소드를 사용하여 옵션을 업데이.. 2023. 8. 22. [Javascript] 배열 합치는 방법 5가지(concat, spread, push, Array.from, reduce) 1. concat() 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = arr1.concat(arr2); console.log(combined); // [1, 2, 3, 4, 5, 6] 2. Spread 연산자 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] 3. push() 메서드 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; for (let i = 0; i < arr2.length; i++) { arr1.pu.. 2023. 7. 17. [Javascript] 두 배열의 겹치는 값을 제외한 배열 추출하기 1. filter 메소드를 사용하여 배열 a의 각 요소 검사 2. includes 메소드를 사용하여 b에 현재 요소가 포함되어 있는지 확인 3. 포함되지 않은 요소만을 남기기 위해 ! 연산자 사용 const a = [1, 2, 3, 4, 5]; const b = [3, 4, 6]; // 배열 a에서 배열 b와 겹치는 값들을 제거한 배열 c 생성 const c = a.filter(item => !b.includes(item)); console.log(c); // [1, 2, 5] 2023. 7. 6. 이전 1 2 3 4 다음 반응형
