본문 바로가기

반응형

분류 전체보기

(366)
[javascript] 프로토타입과 상속, 그리고 프로토타입 체인, 최상위 프로토타입 공부한거 정리용 작성순서 1. 프로토타입이란? 2. 프로토타입의 상속 3. 프로토타입 체인(및 프로토타입 체이닝) 4. 최상위 프로토타입(모든 프로토타입의 뿌리) 1. 프로토타입(Prototype) 이란? 프로토타입은 한글로는 '원형' 을 의미한다. 원형은 어느 대상의 근본이 되는 형태라고 이해할 수 있다. 이 원형을 우리 신체적 특성으로 가져온다면, '유전자' 라고 이해할 수 있다. 이러한 유전자에는 우리 신체를 이루는 모든 정보들이 저장되어 있다. 이를 기반으로 자바스크립트가 프로토타입을 기반으로 하는 객체 지향 언어라고 했을 때, 우리가 사용하고 있는 array, function 등의 객체의 모든 관련 정보들이 프로토타입 이라는 유전자에 저장되어 있다는 말로 이해할 수 있다. 즉, 프로토타입은 우리..
[javascript] webpack 기초 공부 정리 미완성 | 입맛대로 공부하며 정리중(공부가 목적이므로 환경설정 가이드 라인이 아님) 번들링의 필요성 0. npm init 으로 package.json 파일 생성하기 1. webpack 설치 "의존성 패키지들을 하나의 코드로 압축해주는 유명 번들러 중의 하나" 2. webpack.config.js "웹팩의 부수적인 기능 설정을 위한 파일" 3. entry , output "의존성의 시작점과 번들 파일이 생성될 경로" 4. package.json 의 script 속성에 웹팩 실행 빌드 명령어 만들기 5. [터미널] - npm run build 입력해서 웹팩 실행하기 6. HTMLWebpackPlugin 설치 후 설정 "자동으로 번들 파일이 스크립트로 첨부된 html 파일 생성해준다" 7. webpack-de..
[javascript] 모바일에서 터치 이벤트 구현 보호되어 있는 글입니다.
[javascript] 드래그 이벤트로 형제 태그 끼리 위치 교환 하기 보호되어 있는 글입니다.
[javascript] npm 과 package, package.json 공부정리 의존성 관리 npm package package.json 의존성 설치와 삭제 1. 의존성 관리 과거 자바스크립트 파일들은 CDN(캐시서버) 을 통해서 웹 서버 또는 로컬 환경에서 별도로 파일을 관리하였다고 한다. 그러나 이러한 방식은 전역 스코프를 공유하기 때문에 다른 파일에도 영향을 줄 수 있었고, 각 파일이 의존성에 맞게 순서대로 로딩되어야 하는 문제로 인해 파일 간의 의존성이 어떠한지 일일이 확인해야 하는 번거로움이 존재했다. 이외에도 다양한 이유로 인해 이를 보완하기 위한 다양한 방법들이 등장했고, 그 중에서도 유명해졌고, 현재에도 각광 받고 있는 것이 node.js 와 npm을 활용한 의존성 관리이다. 2. npm 구글의 자바스크립트 엔진 v8를 기반으로 구동되는 자바스크립트 런타임 플..
[react] 드래그로 캐러셀 움직이는 법 보호되어 있는 글입니다.
[javascript] 브라우저 pageX,Y / clientX,Y 등 참고하려고 만든 자료 간단정리 clientX ,Y : 유저가 브라우저의 전체 페이지에서 스크롤을 조작했을 때 보이는 화면의 X축과 Y축 pageX,Y : client X,Y 축을 포괄하는 전체 브라우저의 X,Y 축 위 축들은 스크롤에 아무런 조작을 하지 않은 상태에서는 동일한 결과를 반환한다. page는 브라우저에 보이든 안 보이든 전체를 기준으로 보는 반면, client 는 용어 그대로 고객이 눈으로 인식할 수 있는 크기를 기준으로 결과를 반환하기 때문이다. offsetHeight, offetWidth : 유저가 선택한 태그 요소가 차지 하는 높이와 넓이로 margin(태그의 젤 바깥 여백)을 제외하고, padding(margin 과 content 사이에 위치한 내부 여백)과 border(태그의 테두리)의 폭을 포함하여 나..
[javascript] 크롬 개발자 도구에서 자바스크립트 호출 스택 단계를 확인하려면 '검사' -'소스' -'디버깅 도구' 를 사용하면 된다. 간단정리 자바스크립트는 단일 스레드 이므로 한 번에 한 가지 작업 밖에 하지 못한다. 즉 자바스크립트는 근본적으로는 동기적 언어이다 다시 말해 하나의 일을 시작하면, 이 일이 다 끝나야지만 다음 일을 시작하는 것이다. 이러한 특성에 의거하여 자바스크립트는 함수를 호출하면 호출 스택이라는 곳의 젤 밑바닥 부터 호출된 함수들이 쌓인다. 그리고 쌓인 스택들은 처음에 들어온 순서대로 사용되는 것이 아니라 스택의 꼭대기에 쌓인(마지막으로 들어온) 함수부터 차례대로 처리한다 예외적으로 자바스크립트는 비동기적 작업을 수행할 수 있는데, 만일 오래 걸리는 코드(setTimeout 등의 비동기적 함수)가 있다면 이를 웹 API에서 처리 후 콜백 큐에서 대기하고 있다가 이전에 먼저 실행된 코드가 완료될 때 까지 기다렸다가..

반응형