본문 바로가기

Programming49

[Chrome] 개발자 도구 - 로컬 스토리지 ● 웹 브라우저 - 사용자의 컴퓨터에 웹사이트 사용 정보들을 저장하고 필요할 때마다 그 정보들 조회 => 사용자 개인화 가능(= 사용자별로 저장 가능) => 속도 및 사용자 경험 개선 - Ex) 자동 로그인 기능, 로그인 없이 장바구니 상품 유지 ● 로컬 스토리지 - Client Side Storage 방식 (= 사용자 측에 저장) => 데이터 저장을 사용자 컴퓨터에 하겠다는 의미 => 내 컴퓨터 브라우저에만 한정적으로 적용 - 세션 스토리지에 저장된 데이터 : 페이지 닫을 때 사라짐 vs 로컬 스토리지에 저장된 데이터 : 새로고침 및 브라우저 종료 시에도 내 컴퓨터 동일 브라우저 내에.. 2024. 6. 8.

[Javascript] localStorage와 sessionStorage ● localStorage와 sessionStorage의 공통점 - 웹 브라우저에서 클라이언트 측 데이터를 저장하는 데 사용되는 웹 스토리지 메커니즘 ● localStorage와 sessionStorage의 차이점 localStorage sessionStorage 유지 기간 · 영구적으로 데이터 저장 · 브라우저를 닫아도 데이터 유지 · 세션 기간 동안 데이터 저장 · 브라우저 세션 유지 동안만 데이터 유지(닫으면 유지 끝) 액세스 · 동일한 도메인 내 모든 페이지에서 액세스 가능 · 세션 간 데이터 공유 불가 · 동일한 세션 내에서만 액세스 가능 저장 형식 · 브라우저의 로컬 파일 시스템에 데이터 저장 · JavaScript 객체 형식으로 데이터 저장 저장 용량 · 도메인당 5MB 제한 · 브라우저마다.. 2024. 4. 20.

[Javascript] video 태그 관련 명령어 1. 재생 / 일시정지 - 재생 : play() - 일시정지 : pause() 2. 소리 조절 (0.0 ~ 1.0) - 소리 크기 : volume 3. 현재 상태 확인 (초 단위, 숫자를 입력할 경우 해당값 적용) - 현재 재생 시간 : currentTime - 총 재생 시간 : duration 4. 재생 속도 조절 (default 1.0) - 재생 속도 : playbackRate 5. 이벤트 처리 - 비디오가 재생되었을 때 호출되는 이벤트 핸들러 : play - 비디오가 일시 정지되었을 때 호출되는 이벤트 핸들러 : pause Ex ) id가 myVideo인 video 태그의 영상 제어 /********************** 1. 재생 **********************/ // 1-1. 재생 .. 2024. 4. 18.

[Spring] Maven과 Gradle ● Maven과 Gradle의 공통점 - 프로젝트 빌드, 종속성 관리, 배포 등을 자동화하는 도구 => 개발 프로세스를 단순화하여 개발자의 업무를 줄여줌 => 현대 소프트웨어 개발에서 필수적 1. 의존성 관리 - 프로젝트는 종종 다른 라이브러리나 프레임워크에 의존 → 외부 라이브러리를 쉽게 관리할 수 있도록 도와줌 - 개발자가 프로젝트에 필요한 의존성을 정의하면, 자동으로 의존성을 다운로드하고 프로젝트에 포함시킴 2. 프로젝트 빌드 - 프로젝트 빌드 자동화 및 단순화 - 개발자가 자동화를 위한 설정을 작성하면, 컴파일, 테스트 실행, 리소스 복사, 패키징 등과 같은 작업 실행 3. 표준화 - 프로젝트 구조와 빌드 스크립트의 표준화된 형식을 제공 → 프로젝트 관리 및 협업을 간단하게 만들어줌 → 새로운 개.. 2024. 4. 17.

[Programming] 검증 기능에 써먹기 좋은 정규식 패턴 10가지 추천 1. 이메일 주소 ● 이메일 주소 형식을 검증 ● ^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$ 2. URL ● HTTP, HTTPS, FTP로 시작하는 유효한 URL을 검증 ● ^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$ 3. 전화번호(숫자만) ● 10자~12자의 숫자로 이루어진 전화번호를 검증 ● ^[0-9]{10,12}$ 4. 날짜 (YYYY-MM-DD) ● YYYY-MM-DD 형식의 날짜를 검증 ● ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ 5. 숫자만 ● 문자열이 숫자로만 이루어져 있는지 검증 ● ^[0-9]+$ 6. 알파벳 대소문자 및 숫자만 ● 문자열이 알파벳 대소문자와 숫자로만 이루어져 있는지 검증 ● ^[a-zA-Z0-.. 2024. 1. 19.

[Javascript] null 병합 연산자(Nullish Coalescing Operator, ??) ● ?? - null 병합 연산자(Nullish Coalescing Operator) - 피연산자 중 첫 번째가 null 또는 undefined일 때, 두 번째 피연산자로 대체 - a ?? b 는 (a != null && a != undefined) ? a : b 와 동일 2024. 1. 10.

[Java] Javac와 Java 차이 ● Javac - Java 소스 코드를 컴파일 - '.java' 확장자를 가진 Java 소스 파일을 컴파일하여 '.class' 확장자를 가진 바이트 코드 파일로 변환 - Ex) cmd에서 javac HelloWorld.java 입력 시 HelloWorld.class 파일 생성 ● Java - Java 응용 프로그램을 실행 - '.class'로 컴파일된 바이트 코드를 JVM(Java Virtual Machine, 자바 가상 머신)에서 실행 - Ex ) cmd에서 java HelloWorld 입력 시 HelloWorld.class 파일 실행 javac HelloWorld.java # 컴파일 java HelloWorld # 실행 2024. 1. 4.

[Javascript] 현재 페이지 URL 정보 가져오기 ● window.location - 현재 페이지의 URL을 나타내는 객체 ● 속성 종류 속성명 설명 href 전체 URL 문자열 protocol 마지막 ':'를 포함한 프로토콜 정보 host ':'과 포트번호를 포함한 URL의 호스트명 hostname ':'과 포트번호를 제외한 URL의 호스트명 port 포트 번호 pathname '/' 뒤 경로 search '?' 뒤 쿼리스트링 ● 예시 - https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=javascript 속성 사용방법 결과 href window.location.href 'https://search.naver.com/search.naver?where=.. 2023. 12. 12.

[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.error() : 오류 메세지 ❕ console.debug()의 경우 수준을 상세로 바꿔주면.. 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.

이전 1 2 3 다음

티스토리툴바