320x100 728x90 JavaScript6 javascript] 이벤트 작성 시 유의점. 자바스크립트에는 클릭했을 때, 이벤트, 마우스를 눌렀을 때, 마우스가 해당 영역을 떠났을 때 등, 다양한 이벤트 요소로 다이내믹한 웹을 구현하여 사용자와 상호작용을 한다. 사용자의 경험이 증가함에 따라, 매 이벤트마다 페이지를 새로고침 하지 않고, 한 페이지 내에서 사용자와 상호 작용하는 비동기식 이벤트 처리가 유행이 되어갔다. (서버도 문서 전체를 다시 응답을 줄 필요가 없어서 상대적으로 리소스가 절약) 때문에 SPA와 관련된 FE 프레임워크인 vue나 react 같은 플랫폼들이 인기가 많아진 것이다. 여하튼 본론으로 들어가면, 회사 업무를 진행하던 도중, Vanila JS로 동적으로 Element들이 추가/삭제가 되는 웹 페이지를 작성할 필요가 있었다. 이 과정을 진행하면서 클릭 이벤트를 걸어 놓으면.. 2021. 2. 18. javascript]자바스크립트로 반응속도를 체크하는 간단한 웹사이트 만들기 예전에 게임을 한창 재밌게 할 때, 반응속도가 게임의 굉장히 중요한 척도였다. 그 게임을 하던 당시 반응 속도를 체크하는 웹 사이트가 있었는데, 상당히 집중해서 재미로 몇 번 했던 기억이 있다. 그 기억을 되살려서 해당 기능을 구현하는 간단한 웹사이트를 만들어보기로 했다. 그냥 심심풀이용이다. 일단 해당 파일은 가벼운 파일이니 첨부해놓겠습니다. 게임 방식 설명 1. 화면의 상단에는 간단한 게임의 설명이 있습니다. 2.아래에는 시작 버튼과 리셋 버튼이 있고, 시작 버튼을 누르면 일정 시간 후, 게임이 시작됩니다. 3.빨간 영역이 초록색이 되면, 해당 영역을 클릭합니다. 그렇게 되면 반응 속도가 잘 나옵니다. 저의 경우는 약 0.4초가 나왔네요. 게임이 완료되었으면 다시 하기 버튼을 클릭해 다시 게임을 진행.. 2021. 1. 5. 로컬스토리지를 이용해서 웹사이트 다크모드 구현하기 오늘은 국비지원 교육과정 중 2차 프로젝트에 포함된 내용이며 실제 제가 구현한 내용을 바탕으로 로컬 스토리지와 세션 스토리지, 쿠키에 대해 알아보겠습니다. 일단 제가 다크모드를 구현하기 위해 했던 설계입니다. 위 그림의 이해가 어려울 수 있어, 추가 설명을 하자면 1. 클라이언트가 서버에게 최초 문서를 요청할 때는, 값이 null임. 이를 이용해 null이거나 false면 데이터 타입이 boolean인 flag의 값을 사용. 2. 사용자의 클릭 이벤트에 따라서 flag값이 true , false를 반환함. 이를 클릭 시마다 localStorage.setItem('flag', 'true') , localStorage.setItem('flag', 'false')를 flag라는 키워드에 Value를 저장 3... 2020. 7. 2. 클로저(Closure) 자바스크립트에는 클로저라는 함수가 있다. 이 클로저 함수가 뭐냐면 함수와 함수가 선언된 언어적(정적) 환경의 조합이다. 즉, 함수 안에 함수가 존재하는 함수의 중첩형태이다. 자바나 c를 공부했던 필자의 개념에선 이해하기 힘든 개념이었지만, 현직 프론트엔드 개발자로 근무하고 있는 필자의 사촌형에 따르면 "메모리에 변수 올려놓고 상태 관리하는거니까 core 문법으로 작성하려면 필수개념이긴하지"라고 언급했다. 이 이야기를 듣고 몇 가지 실제 사용 사례들이 떠오르지만, 정확하지 않아 언급은 피해야겠다. 바로 클로저함수의 예시를 보자 function f1() { var a = 2; return function f2() { return a; } } var f = f1(); var a = f(); document.w.. 2020. 5. 20. 이전 1 2 다음 300x250 320x100
