프로그래밍 언어 (83) 썸네일형 리스트형 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 Java) URL로 파일 다운받아 로컬에 저장하기 자주 써먹을 것 같다. 코드는 이렇게 짜야되는거구나... [Java] URL 리소스 다운로드 URL 리소스 다운로드 Github 소스 URL 경로를 입력하면 다운로드 받는 스트림을 제공합니다. 대표적으로 이미지, 파일 같은 것을 다운로드 가능합니다. 코드 package sunghs.java.utils.file; import lombok.exter.. sunghs.tistory.com 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 명시적으로 지우지 않는 이상 영구적 보관이 가능하다... Javascript) this 용법 자바스크립트 함수는 호출될 때, 매개변수로 전달되는 인자값 외에 arguments 객체와 this를 암묵적으로 전달받는다. Java에서 this는 객체 자기 자신을 참조하는 변수 Javascript에서 this는 함수 호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정됨 함수 호출 방식 var foo = function () { console.log(this); }; 함수 호출 foo(); // Window {0: Window, window: Window, self: Window, document: document, name: '', location: Location, …} 전역 객체 (global object)는 모든 객체의 유일한 최상위 객체 = window 글로벌 스코프에 선언된 함수는 전.. 이전 1 2 3 4 5 ··· 11 다음