다양한 IT 기술에 대한 내용을 공유합니다.
![[jQuey] IOS 스크롤 방지](https://susukkekki.kr/wp-content/uploads/2017/02/web.png)
모달 팝업에서 백그라운드 영역의 스크롤을 방지하고자 할 때 Android는 body에 overflow: hidden 속성만 줘도 스크롤이 방지되지만 IOS의 경우는 먹히지 않는다.
이럴 경우 body를 position: fixed 로 고정시킨 뒤 스크롤, 터치, 마우스 휠 이벤트를 막아버리면 된다.
.scrollOff {
position: fixed;
overflow: hidden;
height: 100%;
}
// ios 스크롤 방지
$('body').addClass('scrollOff').on('scroll touchmove mousewheel', function (e) {
e.preventDefault();
});
// ios 스크롤 방지
$('body').removeClass('scrollOff').off('scroll touchmove mousewheel');
URL에 파라미터를 포함시켜 요청하는 방식이다. 예를들어 https://recordboy.github.io/login?id=user&pw=1234 라는 페이지가 있다고 치자,? 마크를 통해 URL의 끝을 알리고, id라는 키(key)에 대해선 user라는 값(value)를, pw라는 키(key)에 대해서는 1234라는 값(value)을 전송한 것을 볼 수 있다. 여러개의 키와 값을 보낼 때는 &를 사용하여 이어준다. 이처럼 데이터가 노출되기 때문에 보안에 취약하며, 개인정보가 포함되지 않는 상황에서 캐싱을 하여 페이지 로딩 속도를 높일 때 사용된다.
- 익스 9의 경우 2083자/최대 5120자를 지원
- 사파리는 40만자를 넘기면 브라우저가 크러쉬
- 파이어폭스/오페라는 길이 제한이 없고 50만자를 넘겨도 별다른 이상 없음
- 크롬의 경우 4만자를 기준
POST는 제출하다라는 뜻으로 BODY에 데이터를 넣어 전송하며 길이의 제한이 없다. 따라서 GET과 다르게 대용량 데이터를 전송할 수 있으며, BODY에 전송되어 내용이 눈에 보이지 않아 보안적으로 안전하다고 할 수 있다. 하지만 POST요청도 크롬 개발자 도구같은 툴로 요청내용을 확인할 수 있기 때문에 민감한 데이터는 반드시 암호화 하여 전달해야 한다.
그리고 POST로 요청을 보낼 때는 요청 헤더의 Content-Type에 요청 데이터의 타입을 명시해야 한다. 종류는 여러가지가 있지만 몇가지 나열해보면
application/x-www-form-urlencoded
key와 value쌍으로 데이터를 넣는다. 똑같이 구분자 &를 쓴다.text/plain
multipart/form-data
Content-Type에 요청 데이터의 타입을 명시해야 한다.GET과 POST의 차이
[Web] GET과 POST의 비교 및 차이
get 방식의 글자 256자 제한은 잘못된 상식
GET방식 과 POST방식
자바스크립트는 프로토타입 기반의 스크립트 언어이며 넷스케이프사의 브렌던 아이크가 만들었다. (그는 10일 만에 언어를 만들었다.) 주로 웹 브라우저 내에서 주로 사용되며 node.js와 같은 런타입 환경에서 서버 사이드 프로그래밍으로도 사용되고 있다.
언어의 타입이 너무 유연해서 인터넷에 위같은 밈이 돌아다닌다.
초창기 자바스크립트는 웹 페이지 제작에 있어서 보조적인 기능을 수행하기 위한 용도로써 사용되었다. 클라이언트인 웹 브라우저에서 서버로부터 받은 HTML과 CSS, 데이터로 렌더링을 해주는 수준이였다. 이 시절에 자바스크립트는 그다지 중요한 역할을 담당하지 못했다. 하지만 소수의 프로그래머들에 의해 여러 가지 연구가 이루어졌고, 웹 아키텍쳐에도 크고 작은 변화가 일어났다. 특히 과거에 서버에서 담당했던 역할들이 상당 부분 웹 브라우저로 이동하였고, 자바스크립트는 이 변화의 중점에 서게 된다. 게다가 jQuery 의 등장으로 보다 쉽게 DOM을 핸들링하게 되면서 많은 발전을 이루었다.
현재는 브라우저 기반의 자바스크립트 라이브러리 뿐만 아니라 Node.js와 같은 서버 기반의 자바스크립트 환경에서 동작할 수 있는 각종 라이브러리까지 쏟아져 나오고 있다. 이제는 자바스크립트만으로 웹 서버와 클라이언트인 웹 페이지 개발을 동시에 할 수 있는 수준까지 왔다고 볼 수 있다.
자바스크립트는 클래스를 지원하지 않아 클래스 상속을 이용한 객체 지향 프로그래밍은 할 수 없지만, 프로토타입의 복제 과정을 이용하여 상속을 흉내내도록 구현이 가능하다.
객체 지향 프로그래밍(OOP)
줄여서 OOP라고 부르겠다. OOP는 컴퓨터 프로그래밍 패러다임중 하나이며, 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러개의 독립된 단위, 즉 “객체” 들의 모임으로 파악하고자 하는 것이다. 각각의 객체들은 메시지를 주고받고, 데이터를 처리할 수 있다.
객체지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용되고, 보수를 간편하게 하며 보다 직관적인 코드 분석을 가능하게 하는 장점을 가지고 있다.
객체지향의 반대로는 절차지향 프로그래밍(procedural Programming)이라는 패러다임이 있다. 절차지향 프로그래밍이란 순차적인 처리가 중요시되며, 프로그램 전체가 유기적으로 연결되도록 만드는 프로그래밍 기법이다. 대표적인 절차지향 언어에는 C언어가 있다. OOP의 특성으로는 추상화(Abstraction), 캡슐화(Encapsulation), 상속(Inheritance), 다형성(Polymorphism)이 있다.
Vue CLI는 Vue 프로젝트를 개발할 수 있게 해주는 아주 유용한 도구이며, 여기서 CLI란 Command Line Interface의 약자로서 타이핑으로 명령어를 입력하여 원하는 바를 실행시키는 도구를 말한다. 윈도우에서는 명령 프롬프트(CMD), 맥에서는 터미널을 이용한다고 볼 수 있다. Vue CLI은 내부적으로 Webpack을 활용한다. Vue CLI로 명령을 실행 시키면 CLI가 자동으로 최적화된 Webpack 형태의 결과물을 생성 시켜 준다.
webpack.config.js 파일이 최상단 디렉토리에 있다.vue.config.js 파일을 설정하고 내용 추가$ npm install 필요$ npm i -g @vue/cli // vue-cli 3.x
$ npm i -g vue-cli // vue-cli 2.x
$ vue --version
@vue/cli 4.0.5
babel과 eslint 기반인 default 옵션을 선택한다.
$ vue create 'ProjectName' // vue-cli 3.X
$ vue init webpack 'ProjectName' // vue-cli 2.X
$ npm run serve // vue-cli 3.x
$ npm run dev // vue-cli 2.x
http://localhost:8080/ 로 들어가면 뷰 로고가 있는 로컬 페이지를 볼 수 있다.
$ npm install 명령어를 통해 NPM패키지를 설치하지 않아도 서버가 작동되는 것을 확인할 수 있는데 vue cli가 이미 node_modules디렉터토리 안에 라이브러리들을 다운받았기 때문이다. vue cli의 기본 템플릿은 babel, eslint, unit-mocha 를 포함한다.
- Babel: 자바스크립트 컴파일러다. 최신버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 Babel은이 브라우저가 이해할 수 있는 문법으로 변환시켜준다. ES6, ES7 등의 최신 문법을 사용해서 코딩을 할 수 있기 때문에 생산성이 향상된다.
- ESLint: 코딩 스타일 가이드를 따르지 않거나 문제가 있는 코드나 안티 패턴을 찾아 표시를 달아 놓는 도구이다.
- unit-mocha: javascript 진영에서 테스트 러너를 지원하는 테스트 프레임워크이다.
Vue CLI 3.0 사용하기
Vue CLI 3.X 사용하기
Vue CLI 3 사용법
[Vue.js] Vue Version 비교 (cli2 vs cli3)
Vue-CLI 도구 활용방법
프로그래밍에서 데이터를 담는 공간이다.
var 변수이름 = 저장데이터;
선언 방법은 var 키워드를 사용하며(현재는 let, const 키워드 사용을 지향한다.), =는 대입 연산자로서 우측에 있는 값을 왼쪽에 있는 변수에 담는 연산자다. ;(세미콜론)은 문장의 끝을 알린다. 오류를 방지하기 위해 문장이 끝나면 꼭 선언해 주도록 하자.
참고로 함수 선언식에서는 마지막에 세미콜론을 붙이지 않는데 이건 하나의 관습이고, 코드 작성시 권장되는 방식이다. 그리고 자바스크립트에서는 세미콜론 사용을 강제하지는 않는다. 그 이유는 자바스크립트 인터프리터가 자동으로 세미콜론을 삽입시켜 주기 때문이다. 하지만 세미콜론을 꼭 선언해 주는 습관을 가지도록 해야한다. 신경을 안쓴다면 코드를 압축하거나 디버깅중에 심각한 오류를 가지게 될수 있기 때문이다.
변수는 크게 네가지로 나뉠수 있으며 종류는 아래와 같다.
1. 전역변수(Global Variable): 전역에서 사용되는 변수로서 어디서든 접근이 가능하다.
2. 지역변수(Local Variable): 특정 지역에서 사용되는 변수로서 보통 함수 내부에 만들어 지는 변수
3. 인자 & 매개변수(Parameter): 함수 외부에서 데이터를 받을 때 사용되는 변수
인수(Arguments)와인자 & 매개변수(Parameter)에 대해 다소 헷갈릴 수 있다. 인수는 함수를 호출할때 대입하는 값을 의미하고 인자 & 매개변수는 함수 외부에서 전달받은 값을 의미한다고 볼 수 있다.
function func(foo) {
return foo; // foo = 인자 & 매개변수
}
func("value") // "value" = 인수
4. 속성(Property): 객체의 속성값으로 쓰이는 변수이다. 참고로 전역 객체는 window 객체이다. 전역변수를 선언한다면 자동으로 window 객체의 프로퍼티가 된다고 생각하면 된다.
var obj = {
name: "foo"
};
// name = 속성(프로퍼티, 아니면 키)
// foo = 속성의 값(프로퍼티 값 아니면 키값)
변수를 만들때는 주의사항이 네가지 있다.
특정 데이터가 필요한 경우 Node.js를 이용하여 웹 크롤링을 하면 쉽게 데이터를 추출할 수 있다.
원하는 디렉토리에 폴더 생성 후 js 파일 생성(crawling.js로 만들었음)
터미널에서 프로젝트 폴더로 진입
package 생성(이름만 설정한뒤 모두 예스)
& npm init
필요 모듈 설치
$ npm install cheerio
$ npm install request
package.json 파일에 아래처럼 해당 모듈의 버전이 나타난다면 제대로 설치가 된 것이다.
"dependencies": {
"cheerio": "^1.0.0-rc.2",
"request": "^2.83.0"
}
생성한 crawling.js 파일에 설치한 모듈을 불러준다.
var cheerio = require('cheerio');
var request = require('request');
url 변수에 파싱할 주소를 입력하고, request 모듈을 이용하여 웹페이지를 로드한다.
var url = 'http://www.naver.com';
request(url, function (error, response, html){
var $ = cheerio.load(html);
// 여기서 제이쿼리 셀렉터를 이용하여 원하는 정보를 가져올 수 있다.
});
아래는 전체 코드이다.
“`javascript
var cheerio = require(‘cheerio’);
var request = require(‘request’);
var url = ‘http://www.naver.com’;
request(url, function (error, response, html){ var $ = cheerio.load(html);
// 여기서 제이쿼리 셀렉터를 이용하여 원하는 정보를 가져올 수 있다.
console.log($('.naver_logo').text())
});
# References
[Node.js로 멜론 순위 차트 데이터 파싱](http://leechoong.com/posts/2017/nodejs_cheerio)
[[Node.js] node.js환경에서 웹 크롤링 하기(cheerio-httpcli)](https://hanswsw.tistory.com/6)
[[Node.js] 크롤링 DOM parsing ( request, cheerio, iconv 모듈 )](https://victorydntmd.tistory.com/94)
원시타입과 객체(참조)타입으로 나눌 수 있다.
여기서 객체(참조)타입과 객체(Object)의 차이에 대해 혼동하기 쉽다. 객체(참조)타입은 기본타입을 제외한 모든 자바스크립트의 객체를 가르키며, 객체(Object), 배열(Array), 함수(Function)도 객체(참조)타입 에 포함된다. 객체(Object)는 자바스크립트에서 표현되는 자료형의 값이며 객체(참조)타입중에 하나인 객체(Object)이다.
우리가 실생활에서 쓰고 있는 글자를 문자열이라고 생각하면 된다. 변수에 담는 방식은 큰따옴표나 작은 따옴표로 감싸서 저장하시면 된다. 문자열에 따옴표를 포함하고 싶으면 다른 따옴표로 감싸주면 된다.
var str = 'data'; // 문자열을 담을 때
var str = "'data'"; // 작은 따옴표를 문자열에 추가하고 싶을때
참고로 따옴표를 문자열로 인식하고 싶을때는 역슬래쉬를 따옴표 앞에 붙여 사용하면 된다. 이 작업을 이스케이핑이라고 부른다.
var str = "'data'"; // 작은 따옴표를 문자열로 인식하고 싶을때
우리가 알고있는 숫자라고 생각하면 된다. 자바스크립트는 모든 숫자를 64비트 부동소숫점 형태로 저장하기 때문에 하나의 타입만 존재하며 형태는 크게 정수형(10진수, 16진수), 실수형으로 나뉜다.
자바스크립트는 소숫점을 계산할때 한가지 오류가 있는데 확인하고 넘어가자.
하단의 코드를 보면
console.log(0.1 + 0.2);
결과는 0.3 이 나올겉 같지만 0.30000000000000004 가 출력이 된다. 이것이 부동소수점 오류며 아래와 같은 방법으로 해결을 할 수 있다. 주의하도록 하자.
console.log(((0.1 * 10) + (0.2 * 10)) / 10);
쉽게 설명해서 참, 거짓이라고 생각하면 된다.
데이터 타입마다 true, false로 변환되는 값이 다르다.
| 데이터 타입 | true로 변환되는 값 | false로 변환되는 값 |
|---|---|---|
| 불리언 | true | flase |
| 문자열 | 비어 있지 않은 모든 문자열 | “”(빈 문자열) |
| 숫자 | 0이 아닌 모든 숫자(무한대 포함) | 0, NaN |
| 객체 | 모든 객체 | null |
| Undefined | 해당 없음 | undefined |
언디파인드는 아무 값도 없는 상태이다.
var val; // undefined
널은 아무것도 참조하고 있지 않다라는 의미이다. 여기서 언디파인드와 널이 조금 헷갈리는데, 언디파인드는 값 자체가 선언이 되지 않은거고 널은 임의로 빈 값으로 선언한 상태라고 보면 된다. 널은 객체를 담을 변수를 초기화할때 많이 사용한다.
var num = 0; // 숫자 초기화
var str = ''; // 문자 초기화
var boolean = false; // 논리형 초기화
var obj = null; // 객체 초기화
깃 초기화 : 기존 디렉토리를 git 저장소로 만든다.
$ git init
깃 상태 확인 : 현재 작업중인 브랜치와 파일 상태를 알려준다.
$ git status
전역 사용자 이름 생성
$ git config --global user.name "your name"
전역 사용자 이메일 생성
$ git config --global user.email "your_email@youremail.com"
저장소별 사용자 이름 생성
$ git config user.name "your name"
저장소별 사용자 이메일 생성
$ git config user.email "your_email@youremail.com"
사용자 설정이 되어 있지 않으면 깃허브의 저장소에 커밋 이력 및 작성자의 아이콘도 ? 로 표시된다. 웬만하면 사용자 설정을 해주도록 하자
저장소 복제하기
$ git clone "url"
저장소 추가하기
$ git remote add origin "url"
로컬저장소가 바라보고 있는 저장소의 정보 확인
$ git remote -v
전역 설정 정보 조회
$ git config --global --list
저장소 정보 조회
$ git config --list
스테이지에 수정된 파일 업로드
$ git add 'file name'
스테이지에 수정된 모든 파일 업로드
$ git add .
커밋하기
$ git commit -m 'message'
원격 저장소에 업로드
$ git push origin master
원격 저장소에서 다운로드
$ git pull origin master
스테이지에 올라간 파일 전부 내리기
$ git reset
모든 이력 보기
$ git log
이력 나가기
$ q
이력과 변경사항을 함께 보기
$ git log -p
지역 브랜치 목록 보기
$ git branch
원격 저장소 브랜치 목록 보기
$ git branch -r
지역 브랜치 및 원격 저장소 모든 브랜치 목록 보기
$ git branch -a
브랜치 생성하기
$ git branch "branch name"
해당 브랜치로 체크아웃 하기
$ git checkout "branch name"
브랜치를 생성하고 생성된 체크아웃 하기
$ git checkout -b "branch name"
해당 브랜치 삭제하기
$ git branch -d "branch name"
해당 브랜치 강제 삭제하기
$ git branch -D "branch name"
이전 포스팅에서도 언급했지만 참조타입으로는 객체(Object), 배열(Array), 함수(Function)가 있다. 원시타입과 참조타입을 비교하는것에 초점을 두어 간단히 알아본다.
자바스크립트에서 객체는 단순하게 표현하면 속성명(Key), 값(value) 형태의 속성(property)을 저장하는 그릇이라고 생각하면 된다. 즉 여러 값을 표현하는 묶음을 만들때 사용된다. 간단한 객체를 만들어 보겠다.
var person = {
name: '철수',
age: '20'
}
속성명(name, age)과 값(‘철수’, ’20’)인 객체를 선언했다. 객체 선언 방식은 {}(중괄호)로 한다. 이 선언 방식은 객체 리터럴 방식이라고 하며, 리터럴이란 용어의 의미는 표기법이라고 생각하면 된다. 리터럴 방식은 간단한 표기법만으로도 객체룰 생성할 수 있는 자바스크립트의 강력한 문법이다. 객체의 프로퍼티에 접근하려면 마침표 표기법과 대괄호 표기법이 있다.
console.log(person.name); // 철수
배열은 변수에 여러가지의 값을 한번에 담을 수 있는 그릇이라고 볼 수 있다. 위에 언급한 객체와 비슷해 보일 수 있지만 배열의 속성명은 각 프로퍼티의 인덱스 값이다. 선언방식은 [](대괄호)로 하고 객체와 마찬가지로 이는 배열 리터럴이다.
var person = ['철수', '20'];
객체와는 다르게 배열의 속성명은 인덱스 값이라고 했다. 그러므로 person의 첫번째 값인 ‘철수’의 속성명(Key)은 배열의 첫번째 인덱스인 0이고, 두번째 값(value)인 ’20’의 속성명은 1이 되는 것이다. 배열의 프로퍼티에 접근하려면 대괄포 표기법을 이용하면 된다.
console.log(person[0]); // 철수
console.log(person[1]); // 20
함수는 특정 기능을 하는 구문(알고리즘, 로직)을 독립된 부품으로 만들어 재사용하고자 할때 사용하는 문법이다. 함수를 선언할때는 function키워드를 사용하며 구조는 아래에서 확인할 수 있다.
function 함수이름(파라미터) {
// 알고리즘
return 값 // 리턴 값
}
객체(참조)타입이 무엇이 있나 간단히 봤다. 원시타입과 객체(참조)타입의 차이점을 알아보도록 하자.
자바스크립트에서는 원시타입인 숫자, 문자열, 논리형, 널, 언디파인드 다섯가지를 제외한 모든 값은 객체(참조)타입 이다. 참조 타입이라고 불리는 이유는 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다. 아래 예제를 살펴 보자.
var num1 = 10,
num2 = num1;
console.log(num2); // 10
num1 = 20;
console.log(num2); // 10
변수 num1에다가 10을 대입하고 num1를 num2에 대입했다. 변수에 할당된 값 자체를 복사하였기 때문에 num2의 값은 10이다. num2에 20을 대입해도 num2의 값은 변하지 않는다. num2에 직접적으로 값을 대입하지 않았기 때문이다. 아래 참조타입을 보자.
var obj1 = {
val: 10
}
var obj2 = obj1;
console.log(obj2.val); // 10
obj1.val = 20;
console.log(obj2.val); // 20
우선 obj1에 객체 리터널을 선언하고, val 프로퍼티에 10을 담았다. 그리고 obj2에 obj1을 할당했다. obj2의 val프로퍼티의 값은 10이 출력된다. 여기서 obj1의 val에 20을 담았다. obj2의 val값을 건들지도 않았는데 obj1 처럼 val값이 20으로 봐뀌어있다. 어떻게 된 것일까?
값 자체가 복사되는 원시값과는 달리 참조타입은 참조(객체를 가르키는 참조값 혹은 메모리 주소)만 복사되고 실제 값은 복사되지 않는다. 즉 obj1과 obj2는 실제 데이터를 가지고 있는 객체의 참조(주소)값만 가지고 있는 것이다.