본문 바로가기

What would life be If we had no courage to attemp anything?

Language/JavaScript28

[JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel) [JavaScript] 마우스 및 휠 이벤트 (onMouseEnter, onMouseLeave, onWheel)회사 서비스를 구현 하면서 회사 자체 컴포넌트 툴팁 스펙때문에,마우스가 텍스트 위에 존재 하지 않음에도 휠 이벤트 발생시 툴팁이 계속 떠있는 현상이 발생하였다. 그래서 tooltip이 떠야 하는 텍스트에 onMouseEnter, onMouseLeave, onWheel 이벤트 핸들러들을 사용하여 이를 해결할 수 있었다. onMouseEnter 이벤트onMouseEnter 이벤트는 마우스 포인터가 특정 요소에 처음으로 들어갔을 때 발생하는 이벤트.이 이벤트는 사용자가 마우스를 요소 위로 이동시킬 때 트리거 된다.onMouseEnter는 해당 요소의 자식 요소에는 이벤트를 전파하지 않기 때문에 부모 .. 2024. 5. 20.

[JavaScript] 팝업 창 구현 - window.open [JavaScript] 팝업 창 구현 - window.open프로젝트에서 기획 명세를 바탕으로 독립된 팝업 창을 구현해야 했다.JavaScript의 window.open 메서드를 사용하여 팝업창을 구현하였다. window.open 메서드새 브라우저 창이나 탭을 열 때 사용하는 메서드window.open(url, windowName, [windowFeatures]);- url : 팝업 창에 로드할 페이지 URL- windowName : 팝업 창의 이름. 같은 이름을 가진 창이 이미 열려있다면 해당 창을 재사용.- windowFeatures : 팝업 창의 특성을 정의하는 문자열. 코드 예시약관 보기 Reference Window: open() method - Web APIs | MDNThe open() m.. 2024. 5. 20.

[JavaScript] javascript 알아둘 것 보호되어 있는 글 입니다. 2023. 1. 31.

[JavaScript] LocalStorage와 SessionStorage Local Storage와 Session Storage 🏰 웹 스토리지 객체(web storage object)인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장 페이지를 새로 고침하고(sessionStorage의 경우) 심지어 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아 있음 쿠키 대신 다른 객체를 사용해 데이터를 저장하는 이유? 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않음 쿠키보다 더 많은 자료 보관 가능 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있음 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리.. 2023. 1. 29.

[JavaScript] async / await 2 에러 처리 에러는 호출자(caller) 방향으로 전파 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파 하지만, 비동기 함수의 콜백 함수를 호출한 것은 비동기 함수가 아니기 때문에 try…catch문을 사용해 에러를 캐치할 수 없음 try{ setTimeout(()=>{ throw new Error('Error!') },1000) } catch(e) [ cosole.log('캐치한 에러',e) } async/await에서는 에러 처리에 try...catch 문을 사용할 수 있음. 콜백 함수를 인수로 전달받는 비동기 함수와는 달리 프로미스를 반환하는 비동기 함수는 명시적으로 호출 할 수 있기 때문에 호출자가 명확. const fetch = require(.. 2023. 1. 26.

[JavaScript] async / await 1 async / await 왜 사용할 까? Promise 체이닝은 콜백 지옥을 벗어나게 했지만, Promise 체이닝 또한 길어질 경우 여전히 가독성이 떨어짐 ES2017에 처음에 등장한 async, await는 syntactic sugar로 Promise 사용을 좀 더 편리하고 세련되게 편리하게 할 수 있도록 처리 async 키워드는 함수 앞에 붙임 함수 앞에 async 붙게 되면 promise를 반환한다는 의미 async/ await 프로미스를 기반으로 동작 프로미스의 then/catch/finally 후속 처리 메서드에 콜백 함수를 전달해 비동기 처리 결과를 후속 처리할 필요 없이 동기 처리처럼 프로미스를 사용 async함수 await 키워드는 반드시 async 함수 내부에서 사용 async 함수는 .. 2023. 1. 25.

[JavaScript] Event-onChange onChange? 작성한 JS를 통해 변화가 일어났는지 감지 input 태그의 포커스를 벗어났을때 (즉, 입력이 끝났을때) 발생 cf.onInput() input 태그 안의 값들이 변경 될때마다 이벤트가 발생 React에서 input의 onChange 한 번에 관리하기 로그인, 회원가입 페이지 구현시 여러개의 input을 관리 이를 모두 다른 state로 관리하는 것은 코드가 너무 복잡해짐! //각각의 state로 관리 시 import React,{useState} from'react' export default function App(){ const [id,setId] = useState('') const [pw,setPw] = useState('') const [nickname,setNickname].. 2023. 1. 22.

[JavaScript] Event-onFocus, onBlur focus, blur? //예시 코드 이메일: focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생 blur 핸들러에선 필드에 이메일이 잘 입력되었는지 확인하고, 잘 입력되지 않은 경우에 에러를 보여줌 focus 핸들러에서는 에러 메세지를 숨김 focus와 blur 이벤트는 버블링 되지 않음. 캡처링이나 focusin ,focusout 을 사용하면 이벤트 위임 효과를 볼 수 있음 현재 포커스된 요소는 document.activeElement를 통해 확인할 수 있음 focus 가능한 HTML요소 대화형 요소 a button details input select textarea 이외의 요소는 비대화형 요소로 칭함. 💡 비대화형 요소에도 강제로 tabindex를 사용해 포커싱.. 2023. 1. 20.

[JavaScript] 비동기 동기 처리와 비동기 처리 JavaScript 엔진 싱글 스레드(signle thread) 방식 cf. 브라우저는 멀티 스레드로 동작! 한 번에 하나의 태스크만 실행 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업중단)이 발생 동기 처리 방식 💡 현재 실행중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장됨 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 됨 /* 동기 처리 방식 * 현재 실행 중인 태스크가 종료할 때 까지 다음에 실행될 태스크가 대기하는 방식 */ //함수 sleep은 delay가 경과한 후에 콜백함수(func) 호출 function sleep(func, delay){ //Date.now()는 현재 시간을 .. 2023. 1. 17.

[JavaScript] API API 시스템이 만들어 놓은 서비스 창구 REST API REpresentational State Transfer 클라이언트와 서버가 주고 받는 메시지(데이터) 형식 HTTP 메서드(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD를 적용 JSON Server를 이용한 REST API 실습 1. JSON Server 설치 mkdir json-server-exam && cd json-server-exam npm init -y npm install json-server --save-dev 2. db.json 파일 생성 /json-server-exam/db.json { "todos":[ { "id":1, "content":"HTML", "completed":true }, { "id".. 2023. 1. 16.

이전 1 2 3 다음

티스토리툴바