프로그래밍 언어/Javascript (28) 썸네일형 리스트형 Javascript) Element 여러개의 스크롤바 동시에 움직이는 방법 요소 두개 중 하나만 스크롤 해도 두개 다 같이 스크롤 하는 방법이 필요했다. 아래 방법이 핵심! 내가 테스트한 방법을 첨부하겠다. var $divs = $('#items, #items2'); var sync = function(e){ var $other = $divs.not(this).off('scroll'), other = $other.get(0); var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight); other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight); setTimeout( function(){ $other.on('scroll', sync ).. Javascript) ES6 기본 개념과 문법 정리 ES6 란? ES6는 ECMAScript 표준의 최신 버전으로 2009년도에 표준화된 ES5 이후 언어 기능에 대한 첫 업데이트입니다. 여기서 ECMAScript(ES) 란 ecma international이라는 정보 통신 시스템을 위한 국제 표준 기구가 표준화한 스크립트 프로그래밍 언어를 말합니다. 즉, 국제 표준화 기구가 자바 스크립트를 표준화하기 위해 만든 기술 규격이라고 할 수 있습니다. 최근 트랜드로 대두되고 있는 프레임워크 (react, vue등)이 개발 환경을 es6으로 맞춰가고 있기 때문에 es6에 주목할 필요가 있습니다. ES5 이하에서 문제 되었던 많은 부분들이 해결되었고, 가독성 및 유지보수성을 향상시키는 문법들이 새롭게 생겼기 때문에 지금부터 새로운 기본 문법에 대해 알아보겠습니다... Javascript) Chrome에서 calc() 사용하기 CSS calc function not working in Chrome 해결 ❗ 현상CSS calc 함수가 동작하지 않고, 개발자 도구를 보면 다음과 같이 느낌표 표시가 되어있다.👍 해결calc 함수 안에 +나 -를 넣을 때에는 좌우에 공백이 있어야 한다.다음과 같이 공백을 넣어 velog.io chrome에서 사용하려면 calc() 함수 내부에 연산자를 반드시 앞 뒤에 공백을 줘야 한다! calc(100%-100px) X calc(100% - 100px) O Javascript) Input에서 엔터누르면 이벤트 트리거 이렇게 하고 { ... } 에 실행할 코드 넣으면 된다. 길게 쓸거면 inline말고 함수형으로도 가능! 예시 완료 이렇게 하면 Input에 뭔가 입력하다가 엔터를 누르면 button을 클릭한 것과 같은 이벤트를 트리거할 수 있다. 그리고 이 버튼에 api call 등과 같은 이벤트를 걸어둘 수도! Javascript) http에서 클립보드 쓰기 기능 사용하기 클립보드에 내용을 저장하려고 할 때 사용하는 navigator.clipboard는 보안상의 이슈로 인해 https에서만 사용 가능한 객체다. 그때 야매로 사용할 수 있는 방법 ! var dataToClicpboard = "클립보드에 저장할 내용" let textArea = document.createElement("textarea"); textArea.value = dataToClicpboard; textArea.style.display = "fixed"; textArea.style.left = "-999999px"; textArea.style.top = "-999999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(.. Javascript) 자바스크립트의 핵심 원리 : 실행 컨텍스트 Execution Context 실행 컨텍스트란? ECMAScript 스펙에 따르면 실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이다. 즉, 코드가 실행되기 위해 필요한 환경을 말한다. 하나의 컨텍스트는 하나의 동작을 실행하는 환경으로 이와 관련 없는 함수나 변수 등의 코드를 만나게 되면 새로운 컨텍스트를 생성한다. 그리고 이 컨텍스트들은 한번에 하나의 동작만 처리하는 자바스크립트의 콜백 스택에 쌓이게 된다. 자바스크립트 엔진의 동작 방식은 다음과 같다. 실행 가능한 코드 (잔역 코드, 함수 내 코드 등)를 만나면 실행 컨텍스트 스택이 생성된다. 전역 코드가 스택에 들어오면 전역 실행 컨텍스트가 생성되어 스택에 쌓인다. 전역 실행 컨텍스트는 해당 애플리케이션이 종료될때까지 유지된다. 함수가 호출되면 이 함수를 위.. Javascript) Event Loop 비동기 콜백, 자바스크립트 동작 원리 자바스크립트 == 싱글 스레드 프로그래밍 언어 여기서 말하는 스택은 어떤 프로그램의 코드가 어떤 순서로 실행되는지 기록하는 작업 스케줄링과 관련된 자료구조이다. 일단 어떤 함수를 실행하면 그 함수가 stack 에 push되어 stack의 맨위에 쌓이게 된다. 글고 이 함수가 어떤 값을 리턴하거나 실행을 종료하면 그 함수를 다시 스택에서 pop하여 꺼낸다. 자바스크립트는 이 코드를 스케줄링하는 스택이 하나뿐이기 때문에 한 번에 하나의 작업만 처리할 수 있어서 싱글 스레드 언어라고 하는 것이다. 그렇다면 자바스크립트는 병렬처리를 할 수 없는 것인가? NO! 그래서 나온 것이 비동기 콜백! Asynchronous Callback 비동기 콜백 Asynchronous Callback 자바스크립트가 브라우저 엔진에.. Javascript) Web Storage Web Storage 키 밸류 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴 쿠키는 한 번 설정하면 이후 모든 웹 요청에 이 쿠키가 포함되어 서버로 전송되지만 웹 저장소에 저장된 데이터는 클라이언트에 존재할 뿐 서버로 전송이 이어지지 않아 네트워크 트래픽을 줄인다. 문자열 기반 데이터 이외에 구조회된 객체를 저장할 수 있다. 쿠키는 하나당 최대 4KB로 한 사이트당 최대 20개까지로 용량 제한이 있지만 웹저장소는 용량제한이 없다. 쿠키는 만료 일자를 지정하여 그 날짜에 제거되고 만약 만료 일자를 지정하지 않으면 세션 쿠키가 된다. 웹저장소는 만료 기간 설정 자체가 없어 한번 저장한 데이터는 영구적으로 저장된다. Local Storage 명시적으로 지우지 않는 이상 영구적 보관이 가능하다... 이전 1 2 3 4 다음
