728x90 JavaScript97 [JavaScript] 검색어 텍스트 자동완성 기능 구현 html css /* 검색창 */ .case { padding: 32px; } .input_wrap { position: relative; display: flex; align-items: center; width: 100%; border: 1px solid #f8f8f8; border-radius: 4px; background-color: #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 16%); } input { padding: 0; padding-left: .4em; color: #030303; border: 1px solid #ddd; } .search_input { width: 100%; height: 42px; font-size: 16px; color: #777; l.. 2023. 6. 17. [JavaScript] 마우스 커서 커스터마이징하기 HTML CSS body{ background-color: #1D1E22; cursor: none; } .rounded{ width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; } .pointed{ width: 7px; height: 7px; background-color: white; border-radius: 50%; cursor 속성의 값을 none으로 하여 기본 커서를 안보이게 한 다음 커스텀 div 커서를 화면에 표시할 것이다. 여기서 div를 커서 처럼 보이게 스타일을 준다. 상황에 따라 배경 색을 추가하거나 이모지를 쓰는 등 스타일을 더 넣을 수도 있다. JS const cursorRounded = document.que.. 2023. 6. 16. [JavaScript] e. preventDefault() 란? preventDefault() ? 자바스크립트 이벤트 인터페이스 중 return과 같은 역할을 함. 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 브라우저의 기본 동작을 실행하지 않도록 지정. preventDefault() 메서드는 이벤트가 전파되는것(버블링이나 캡처 단계)를 중지시키지는 않는다. 이벤트 버블링이란? 자식 element에서 발생된 event가 부모 element순으로 전달 되는 현상 이벤트 캡쳐링이란? 부모 element에서 발생된 event가 자식 element순으로 전달 되는 현상 주로 사용되는 경우는 1. a태그를 눌렀을 때도 href링크로 이동하지 않게 할 경우 2. form 태그 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 .. 2023. 6. 15. [Node.js] Express.js 로 서버 만들기 Node.js ? Introduction Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)으로 주로 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Node.js는 브라우저 외부 환경에서 자바스크립트 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 Built-in API를 제공한다. Node.js는 자바스크립트를 사용해 개발한다. Front-end와 Back-end에서 자바스크립트를 사용할 수 있다는 동형성(isomorphic)은 별도의 언어 학습 시간을 단축해 주는 장점이 있다. 장점 1. 자바스클비트 개발자가 웹 서버 개발까지 가능하다. 2. 프론트 백 동시에 할 수 있는 풀 스택 개.. 2023. 6. 14. [JavaScript] window 객체 종류 window 객체? window 객체는 브라우저에서 열린 창을 의미한다. JavaScript에는 항상 전역 객체가 정의되어 있음. 프로그램이 전역 변수를 만들 때 전역 객체의 구성원으로 만들어짐. window 객체는 브라우저의 전역 객체임. 모든 전역 변수 또는 함수는 window 개체로 접근 가능함. 전역 변수를 정의한 후 window 객체에서 해당 값에 접근 가능함. window 객체 사용해 동적변수 (= 가변변수 = 유동변수) 생성 가능. window 객체 메서드 atob() base-64로 암호화 된 문자열을 암호 해독 blur() 현재 창에서 focus 제거 btoa() base-64로 문자열을 암호화 clearInterval() setInterval()로 설정된 타이머 지우기 clearTime.. 2023. 6. 10. [React] react-cookie 로 로그아웃 기능 구현하기 쿠키삭제 후 로그아웃 기능구현하기 쿠키 값 삭제 후, 로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보자. 보통은 url을 통해 로그아웃 페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트를 친다. 하지만 이번 케이스는 쿠키를 따로 지워준 후 로그아웃 url 로 redirect 해주었다. import { useCookies } from 'react-cookie'; // 리액트 쿠키 임포트 const COOKIE_KEY = window.LOGIN_KEY; // 상수화시킨 쿠키 값을 넣어줬다. const logoutURL = // 리다이렉트할 URL 을 상수화시켜서 넣어주었다. window.LOGIN_SESSION_KEY_URL + `/logout?redirect_uri=${window... 2023. 6. 3. [React] 리액트 쿼리 React-Query useQuery 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다. useQuery 란? useQuery 은 3가지 매개변수를 받는다. useQuery(key, function, options) 인자 3개를 받는다 ↑ ↑ ↑ 쿼리키 api호출함수 쿼리옵션 TQueryFnData → useQuery 로 실행하는 query function의 return 값을 정하는 제네릭 타입이다 (오리지널 데이터 타입으로 무가공) TError → query function의 error 형식을 정하는 제네릭 타입이다 Tdata → data에 담기는 실질적 type을 뜻한다. query function의 데이터를 2차 가공하는 경우 사용하는 type 이다. TQueryKe.. 2023. 6. 2. [JavaScript] 전화번호 입력 유효성 검사하기 000-0000-0000 형식의 전화번호인지 검사하고 싶다면 정규표현식을 /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/로 변경한다. if ( /^[0-9]{3}-[0-9]{4}-[0-9]{4}$/.test( brn ) ) { document.getElementById( "checkBrnMessage" ).innerText = "OK"; } else { document.getElementById( "checkBrnMessage" ).innerText = "NOT OK"; } 010으로 시작하게 하려면 정규표현식을 /^010-[0-9]{4}-[0-9]{4}$/로 변경한다. if ( /^010-[0-9]{4}-[0-9]{4}$/.test( brn ) ) { document.getElementById(.. 2023. 6. 1. [JavaScript] resize, ResizeObserver 화면 크기나 특정 요소의 크기가 변할 때, 그 변화를 감지할 수 있다. 화면과 요소의 크기 변화를 감지하는 방법을 알아보자. 1. resize, 브라우저 크기에 반응 1) resize 이벤트란? window.addEventListener("resize", function() { // window resize시 처리 }) resize 이벤트는 브라우저의 크기가 변경될 때 발생한다. 만약 브라우저 크기 변화에 따른 dom의 변경 크기를 구하려면 getBoundingClientRect(), getComputedStyle()을 사용해줘야한다. 2. ResizeObserver, 모든 요소에 반응 특정 요소의 크기 변화는 감지하려면 그럴 때는 resize가 아닌, ResizeObserver를 사용한다. 1) Res.. 2023. 5. 29. [React] qs 라이브러리 사용하기 qs 설치 npm i qs $ yarn add qs qs는 쿼리스트링을 파싱하거나, 스트링화하는 간편한 외부 라이브러리이다. 쿼리스트링이란, 사용자가 입력데이터를 전달하는 방법인데 url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. 형식 엔드포인트 주소 이후 '?'을 쓰는 것으로 쿼리스트링이 시작함을 알려준다. parameter = value 로 필요한 파라미터 값을 할당한다. 마치 필터값(코드값)을 보낼 때처럼, 파라미터를 여러개를 보내야할 때는 &를 붙여 여러개의 파라미터를 넘길 수 있다. endpoint.com/?param=value1¶m=value2 배열 파라미터를 서버에 요청하는 것은 각 프로젝트마다 정해진 규약이 있고, 몇가지 규약의 예시는 아래와 같다. /?a[].. 2023. 5. 28. 이전 1 2 3 4 5 6 ··· 10 다음 728x90
