클로저앞서 렉시컬 스코프와 클로저는 매우 밀접하게 연관되어 있다고 말했다. 클로저란 무엇일까?클로저 : 함수와 함수가 선언된 렉시컬 환경(Lexical Environment)을 기억하여 외부 함수가 종료된 후에도 내부 함수가 외부 변수에 접근할 수 있도록 하는 기능이다.여기서 렉시컬 환경은 또 무엇일까? 렉시컬 환경렉시컬 환경은 "자바스크립트 엔진이 변수와 함수 선언을 관리하기 위해 사용하는 구체적인 공간"을 말한다.렉시컬 스코프는 "함수의 정의 위치를 기준으로 스코프가 결정되는 규칙"을 의미하는 것으로 렉시컬 환경과는 다른 의미를 가진다.예시:function makeAdder(x) { return function(y) { return x + y; }}const add3 = makeAdder(3);co..
자바스크립트 호이스팅과 스코프자바스크립트 엔진에서는 코드를 실행하기 전에 변수와 함수 선언을 먼저 처리한다.이로 인해 마치 선언이 코드의 최상단으로 끌어올려진 것처럼 동작하는 것을 호이스팅이라고 부른다.또한 변수나 함수가 어떤 범위(scope)에서 유효한지에 따라 여러 가지 특징적인 동작을 보인다. 호이스팅자바스크립트 엔진은 코드를 실행하기 이전에, 변수 선언문이나 함수 선언문을 미리 해석하여 선언을 위한 메모리를 할당한 뒤, 코드가 실행될 때 변수나 함수를 미리 사용할 수 있게 준비해 둔다.예시: console.log(score); // undefinedvar score;score = 100;console.log(score); // 100 일반적으로 "아직 선언되지 않은 변수를 console.log로 ..
변수변수란데이터를 저장하기 위해 이름을 부여한 메모리 공간을 의미한다. 프로그램을 작성할 때 필요한 값을 저장하고 꺼내 쓰는 역할을 한다.변수 선언변수를 사용하기 위해 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.선언 키워드 : var, let, constES6버전에서 var의 단점을 보완한 let, const 가 도입되면서 var는 잘 사용하지 않는다.선언 후 초기화를 해주지 않으면 변수의 값에는 쓰레기 값이 들어간다. var로 선언을 하면 자동으로 undefined로 초기화가 된다.변수의 생성과정선언초기화 (undefined를 할당주는 단계)할당var와 let의 차이점var는 선언과 초기화가 동시에 된다. 그래서 할당 전에 호출하면 '..
객체 메소드 1. Object.assign() 객체 복제 user를 복사하고 싶다고 그냥 cloneUser에 대입해서 될까? const user = { name : 'susukkang', age : 30 } const cloneUser = user; 답은 '아니다' user 변수에는 객체 자체가 들어가 있는 것이 아니라, 객체가 저장되어 있는 메모리 주소인 객체에 의한 참조값이 저장된다. 그러므로 cloneUser에는 데이터가 들어가지않고 참조값이 들어간다. Object.assign() 사용 const newUser = Object.assign({}, user); 이렇게 사용해야 newUser에 user의 값들이 복제된다. 병합1 const newUser2 = Object.assign({gender:'f..
REST 🔎 Representational State Transfer의 약자 웹상의 자원(문서, 이미지, 영상 등)을 자원명으로 표시하여 상태를 주고 받는 규칙 HTTP URI를 통해서 자원을 명시하고, HTTP Method를 통해서 자원에 대한 CRUD 처리하는 방식 URI(URL) 표기하는 방식 중 하나이다. URI와 HTTP Method 를 결합한 것이 REST API이다. URI 표기 방식 비교🔎 예를들어 게시판을 구현할 때, 이전 방식에서는 'http://localhost/board/list.do' 으로 동사를 이용해서 행위하는 것을 표현했다. - 이전 방식 페이지 요청 메서드 요청 주소 목록보기 GET http://localhost/board/list.do 추가하기 POST http://loc..
Favicon 이란 Favorite icon 의 약자이다. 브라우저 탭에 뜨는 아이콘을 의미한다. 확장자가 ico인 icon 파일이 필요하다. icon 파일 다운로드 free ico 으로 검색하면 icon 파일을 제공하는 사이트들이 많이 나온다. https://icon-icons.com/ Free Icons PNG, ICO, ICNS and SVG Are you a designer? Share your work with people all over the world. Start upload icon-icons.com 파비콘으로 설정할 icon 파일을 찾는다. 아이콘을 선택하면 다운로드를 받을 수 있는데 'ICO'으로 파일 확장자와 파일 사이즈를 선택하고 Download를 받는다. 파비콘 프로젝트 연결 다..
🔻웹 크롤링, 웹 스크래핑 웹 사이트(웹 페이지)에서 데이터를 수집하는 행위를 의미한다. 데이터를 수집하는 방법은 아래 3가지 방법이 대표적이다. 1. 상대방(웹사이트)이 나에게 DB 권하는 주는 방법, 가장 좋은 방법이지만 현실상 불가능하다. 2. 상대방이 외부에 OpenAPI를 JSON, XML 형식으로 공개한다. 하지만 공개된 데이터가 제한적일 수 있다. 3. 웹페이지의 소스를 긁어서 원하는 데이터를 추출한다. 단, 프로그램을 이용해야 얻을 수 있다는 단점이 있다. 크롤링 시 주의점 1. 허가를 받지않은 데이터이므로 저작권 문제를 조심해야한다. 2. 긁어오는 작업은 속도가 빠르고, 횟수가 많아서 크롤링 되는 서버 입장에서는 서버 비용과 트래픽이 증가된다. 그래서 정도껏 가져온다. 크롤링 사전 지식 ..
중복되는 기능을 하나의 파일로 관리하여 다른 파일에도 적용 가능하도록한다. 1. 파일 저장 모듈화된 기능을 저장할 파일을 아래 경로에 만든다. 위 생성된 파일에 2,3번을 추가한다. 2. 태그 동적 추가 및 CSS 적용 id는 확실하게 지어주는 것이 좋다. 'bar' 보단 'scroll-bar-indicator'로 지정한다. $('').css({ width: '50%', height: '5px', backgroundColor: 'cornflowerblue', position: 'fixed', left: 0, top:0 }).prependTo($('body')); 3. 이벤트 추가 $(document).scroll(function() { let x = $(document).scrollTop() * 100 ..
🔻스크롤 위치에 따른 프로세스 바 만들기 기본 뼈대 에밋으로 작성하여 스크롤을 할 수 있을만큼 본문 내용을 추가한다. Lorem ipsum dolor sit amet. 이벤트 DOM에서는 window.scrollY로 스크롤의 위치를 확인했다. jQuery에서는 $(document).scrollTop()로 스크롤의 위치를 확인한다. 스크롤바 위치에 따른 프로세스바 크기를 구하기 위해 둘의 관계를 살펴보면, 문서의 세로 길이의 최대 위치일 때, 프로세스바의 크기가 100%가 된다. 이것을 1차 방정식으로 구하면 아래와 같은 식이 나온다. 스크롤바 최대 위치 : 100% = 스크롤바 위치 : x let x = $(document).scrollTop() * 100 / ($(document).outerHeight..
읽기 1. obj.css('attr') 쓰기 2. obj.css('attr', 'value') 3. obj.css('attr', 'value') .css('attr', 'value') .css('attr', 'value') 4. obj.css({ attr: value, attr: value, attr: value }) 5. obj.addClass('class') 지우기 1. css(속성) : 읽기 2. css(속성, 값) : 쓰기 하나로 통일하여 인자값으로 읽기, 쓰기를 적용한다. 코드 양이 적어 생산성이 높다. 읽기 //자바스크립트로 css 조작할 때 inline style sheet를 사용했다. // alert(document.getElementById('box').style.color); // al..
