냠냠쩝쩝

Callback 함수

한마디로 "누군가 에게 호출된 함수" 라고 할 수 있겠다

풀어서 말하면  '누군가(다른 함수)에게 (나중에)호출된 (기존의)함수' 라고 할 수 있겠다.

예를 들어 < 참조 : JavaScript sort array : http://www.w3schools.com/jsref/jsref_sort.asp >

a = [3,1,2]; console.log(a);
// [3, 1, 2]

a = [3,1,2]; a.sort(); console.log(a);
// [1, 2, 3]

a = [3,1,2]; function b(v1, v2) {return v1-v2 }; a.sort(b); console.log(a);
// [1, 2, 3] 오름차순

a = [3,1,2]; function b(v1, v2) {return v2-v1 }; a.sort(b); console.log(a);
// [3, 2, 1] 내림차순

a = [3,1,2]; function b(v1, v2) {return 0 }; a.sort(b); console.log(a);
// [3, 1, 2] 정렬안됨

a = [3,1,2]; function b(v1, v2) {console.log('c',v1,v2); return 0 }; a.sort(b); console.log(a);
// c 3 1
// c 1 2
// [3, 1, 2] 정렬안됨

마지막 번 정렬을 확인하게 되면 v1, v2값을 비교해서 비교한 값을 가지고 정렬을 한다는 것을 알 수 있다. 

총 2번 b함수가 호출된것을 알 수 있다. 

배열의 입력같으로 함수를 준다. 

그리고 sort라는 함수의 인자로 다른 함수를 전달 했고 이렇게 전달된 함수를

Callback 함수라고 부르게 된다. 

Callback함수(위에서 function b)를 우리가 만들었지만 우리가 호출한 것이 아닌 a.sort()를 통해 호출 되어졌다.

일회성으로만 줄 경우에는 이름을 굳이 줄 필요가 없다. 따라서 이렇게 구현 가능하다. 

익명함수 라고도 한다. 

a = [3,1,2]; a.sort(function(v1, v2){return v2-v1;}); console.log(a);
// [3, 2, 1] 내림차순
----------------------------------------------------------------------
//callback 함수가 실행되는 과정 예를 들어 설명

function sort(callback){callback();};
sort(function(){console.log('Hello Callback')});

function() --> console.log('Hello Callback');

function()함수가 정의가 됐고 sort의 인자로 전달되고 sort가 실행이된다. 

callback이라는 매개변수를 가진 callback()(콜백함수)를 호출해 실행시킨다.

Node.js v.6.94 doc : https://nodejs.org/dist/latest-v6.x/docs/api/

http모듈 사용해보기

const http = require('http');
 
const hostname = '127.0.0.1';
const port = 1337;
 
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

상수를 나타내는 const를 사용해서 변하지 않는 것을 사용했다. 

Node.js docs를 확인해서 HTTP모듈에 대한 사용설명서 (API)를 확인한다. 

모듈이라는 것은 부품이라고 할 수 있는데 부품을 가져다 사용할때는 'require'을 통해 사용할 수 있다. 

os모듈 사용해보기

var o = require('os'); 
console.log(o.platform());

다른사람이 만든 모듈 사용해보기 : NPM

Node Package Manager

JavaScript(+Node.js)가 제공하는 모듈이 아닌 타인의 모듈을 사용하는 방법을 알아보자

npm 사이트(https://www.npmjs.com/) 에서 검색후 cmd창에서 npm install ......  하는 명령을 입력해주고 설치 할 수 있다. 

여기서 설치 명령중 끝에 -g가 붙은것을 확인 할 수 있는데 

g는 global이라는 의미이며 컴퓨터 전역에서 사용하는 독립적인 소프트웨어가 설치된다.

g를 없이 사용하게 되면 현재 npm을 설치하는 프로그램 프로젝트안에서 부품으로 사용하겠다는 의미이다.

ex) 독립적인 소프트웨어로 uglify 설치하고 사용해보기

npm install uglify-js -g

uglifyjs _____.js

uglifyjs _____.js -m

uglifyjs ______.js -o 새로저장할파일명.js -m

uglifyjs ______.js -o _________.min.js -m

ex) _underscore 프로그램 프로젝트 안에서 부품으로 사용해보기

설치하기 이전에 프로젝트 디렉토리를 npm의 패키지의 일종으로 지정을 해줘야한다.

설정할 프로젝트 디렉토리에 들어가서 

npm init 실행

name지정(프로젝트이름) discription입력 entry point(어떠한게 패키지를 구동시키는 자바스크립트인지 지정, 후에 바꿀 수 있다.) test테스트명령어 입력 git repository올리고 싶으면 주소써라 엔터엔터 yes하고 끝

이렇게 실행하고 나면 package.json이 생긴다. 그러면 끝 (프로젝트폴더가 생성된것이다.)

나중에 우리가 만든 프로젝트를 공유할 수 있고, 다른사람것을 사용할 수 있는 준비가 되었다는 것이다.

npm install underscore

설치가 완료되면 node. 과 unsderscore폴더가 생긴다. 

TIP!!! 설치중에 No repository field. 라는 것이 발생 할 수 있는데 이것은 git repository가 저장되어 있지 않아 발생하는 경고이다. 

오류가 발생한것이 아닌 단순 경고!! 그냥 github에 연결되어있지 않다는 이야기.

설치완료창을 보면 extraneous(외부의,부가적인)써있는데 온전하게 포함하지 않았다는 얘기이다.

따라서 npm install underscore --save를 하면 조금 달라지게 생성된다.(플래그생성)

이전에 없었던 dependencies라는 란이 생기게 된다. 

플래그로 선언된 프로젝트버전을 언제든지 내프로젝트에 포함할 수 있다는 이야기이다.

일시적으로 사용해야 할 경우에는 save를 빼고 설치하면된다 (코딩하는 경우에서 잠깐사용할 때 쓰면 될 것 같다.)

underscore는 매우유용한 라이브러리이다. (진짜 개조은듯)

모듈 디렉토리를 사용해야하니 모듈 디렉토리를 선언해주고 사용한다.

const _ = require('underscore');
var arr = [3,6,9,1,12];
console.log(arr[0]);    // 3
console.log(_.first(arr));    // 3
console.log(arr[arr.length-1]);    // 12
console.log(_.last(arr));    // 12 

윈도우10에서 관리자모드가아닌 일반모드로 cmd를 실행하였을때

권한에 대해서 오류가 발생하는 것을 확인 했다.

따라서 일반모드가 아닌 관리자 모드를 통해서 npm 설치를 진행하여야한다.

Web에서 사용되었던 JavaScript가 google이 개발한 자바스크립트엔진 V8에 의해 '탈웹화'를 했고, 

따라서 Web에 국한되어있던 JavaScript가 다양한 곳에서 사용될 수 있는 계기를 맞이했다.  

그리고 라이언달이라는 사람에 의해 2009년에 Node.js 프로젝트가 출발하게 되었다. 

Node.js를 설치하고 .

Node.js에서 제공하는 소스코드를 가지고 서버를 실행시킨다. (cmd 창 이용)

createServer를 통해 서버를 만들고 .listen을 통해 port와 hostname을 듣는다.

따라서 브라우저에 호스트네임과 포트번호를 입력하게 되면 서버에 접속할 수 있게 되고

Hello World를 출력하는 브라우저 창을 확인 할 수 있다. 

아래는 Node.js에서 제공하는 튜토리얼 소스코드 이다.

const http = require('http');
 
const hostname = '127.0.0.1';
const port = 1337;
 
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello World\n');
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

프로그래밍 언어 번역방식

프로그래밍 언어를 분류하는 기준에는 번역방식에 따라 분류하는 방식이 있는데 

컴파일 방식 : 

프로그램 소스코드를 작성하고 컴파일을 하게 되면 실행가능한 프로그램이 생성된다. (바이너리파일) 번역과 실행이 따로 된다.

< C, C++, C#, JAVA, C# 등 >

인터프리터 방식 : 

프로그램 소스코드가 목적프로그램 or 바이너리 파일로 변환되는 번역과정이 일어나지 않는다. 번역되어서 저장되는 절차가 없다. 

한줄한줄 실행된다고 생각하면 편하다. (따라서 한줄에서 오류가 발생했을 경우 다음줄부터는 아예 실행이 되지 않는다.)

< JavaScript, ActionScript, VB Script, SQL, HTML 등 >

cf. 인터프리터 언어의 특징은 매우 한정적이고, 제한적인 사용용도를 가지고 있다고 볼 수 있다. ex) SQL(관계형 데이터베이스 시스템 언어)

추가할것

JavaScript let와 var const

참고 : http://blog.nekoromancer.kr/2016/01/26/es6-var-let-%EA%B7%B8%EB%A6%AC%EA%B3%A0-const/

CSS문법 : 선택자 사용해보기 (맛보기)

CLASS 와 ID 

CLASS

CSS를 사용하면서 전체적인 스타일을 일관성있게 표현해주기 위해서는 클래스를 사용하는 것이 필수적이라고 할 수 있다. 

아래 코드에 CLASS를 사용했는데 CLASS는 얼핏보면 구조체 정의하는 것처럼 생겼다.

HTML에 CSS를 적용하는 것처럼 똑같이 사용하면 된다. 

CLASS를 선언해줄때는 '.'를 사용한다. 

아래코드에서 .size-40px 처럼 앞에 .을 사용한 것을 확인 할 수 있다.

클래스를 사용할 때에는 

class="클래스명" 으로 사용하면 된다.

(※편의상 내부스타일 방식으로 구현했다.)

ID

ID도 CLASS와 적용하는 방법이 비슷하다. 

CLASS는 .으로 선언해준 반면에

ID는 #으로 선언해준다. 

그렇다면 CLASS와 ID의 차이점은 무엇일까?

아래 코드를 보면 위의 CLASS를 다 ID로 바꾸기만 한 코드인데 

3번째 줄은 적용이 되지 않은 것을 확인 할 수 있다.  

즉, ID안에는 하나의 속성만 사용될 수 있다. 

따라서 한페이지 내에서 여러번 반복될 필요가 있는 스타일은 CLASS 선택자를 사용하고 

단 한번 유일하게 적용될 스타일은 ID 선택자를 사용하는 것이 바람직하다. 

CLASS 속성은 어떤 분류안에 포함된 요소의 특성을 정의하는 데 사용이되고, 

ID 속성은 어떤 요소에 대해 유일한 특성을 정의하는데 사용이되는게 바람직 하기 때문이다.  

EX)

글자색이나 글자 굵기 등 나중에 다른 곳에도 적용할 수 있는 스타일을 CLASS로 지정하고

웹 문서 안에서 요소의 배치 방법을 지정할 때는 ID 속성을 사용하는 것이 좋다. 

CLASS 와 ID혼용 사용

ID속성으로 유일한 특성(기울기)를 정의해 적용했다. (#second)

CSS란? 

Cascading Style Sheet 을 말하여 웹에 사용되는 HTML 문서가 사용자에게 어떻게 보여지게 할지 만들어(꾸며) 주는 언어이다.

Mozilla에 설명이 잘 되어있어서 링크를 걸어둔다. (https://developer.mozilla.org/ko/docs/Web/CSS/ko/docs/Web/CSS/시작하기/CSS란)

HTML에 CSS를 적용하는 3가지 사용법이 있다.

1. 인라인(inline)방식

2. 내부스타일 시트

3. 외부스타일 시트 

(4. CSS 임포트)

1. 인라인 방식 

말그대로 HTML 코드안에서

<span>이라는 태그와 style속성을 통해 CSS 속성을 주어 사용한다.

※Result 누르면 결과를 확인 가능하다.

2. 내부스타일 시트 

HTML코드안에 넣는 것은 아니지만 같은 HTML문서 안에서 넣는 방식이다. 

<span>이라는 태그를 사용하였고

코드 외부에서 <span>태그를 정의하는 것처럼 <style>속성의 CSS를 사용하는 방식이다.

※Result 누르면 결과를 확인 가능하다.

3. 외부스타일 시트 

HTML코드안에 넣는 것도 아니고 같은 HTML문서 안에 넣는 방식도 아니다. 

HTML의 가장 중요한 것!  

링크를 통해서 확장자가 .CSS인 문서를 HTML과 연결 시켜주는 것이다. 

아래 코드를 보면 알 수 있는데 

<link rel ="stylesheet" href="style.css">를 통해 HTML에 style.css를 링크를 걸어 준걸 볼 수 있다. 

따라서 내부스타일 시트와 다르게 <style>태그 없이 바로 <span>을 통해 속성값을 줄 수 있다는 것도 확인 가능하다.

※CSS, Result 누르면 CSS문서와 결과를 확인 가능하다.

(4. CSS 임포트)

3. 외부스타일 시트 처럼 CSS를 작성하고 HTML에 @import url을 사용해 넣는 방식이다. 

너무 번거럽고 귀찮아 잘 사용하지 않는다.  

어떤 방식을 적용해야할까?

그렇다면 어떻게 CSS 적용해야 잘했다고 소문이 날까??

1. 인라인 방식의 경우 사람이 보았을 때는 무척 편리하다.

바로 앞에 속성이 정의가 되어있으니 읽어가면서 바로 확인이 가능하다. 

하지만 크롤링을하는 크롤러의 입장에서 보았을 경우에는 좋지 않다. (ex.글을 가져가야하는데 CSS속성이 끼여있다.)

그리고 한번만(적은 횟수)로 CSS를 사용했을 경우에는 좋지만, 

여러번 사용하게된다면 소스코드가 늘어나고 수정시 번거로운 일이 발생할 수 있다.

그렇다면 2. 내부스타일 시트 방식으로 CSS를 모아서 관리하게 되면 어떤가??

내부스타일 시트의 경우에는 CSS내용이 전부 HTML에 속해있다. 

이것이 중요한 포인트가 되는데..

스마트폰을 사용하면서 인터넷 네트워크를 사용하면 요금이 나간다. (LTE데이터, 3G데이터라고 하는 것들...)

따라서 인터넷 서핑을 하게 될 경우 HTML를 요청하고 응답받으면서 인터넷 네트워크를 사용하므로 데이터 사용이 발생하게 될 것이고, 

HTML안에 많은 내용의 CSS데이터가 포함이 되어있다면, 그많큼 더 많은 데이터를 사용하게 될 것이다. 

이렇게 생각했을 때.. 

CSS의 내용(속성)은 변하지 않는다고 가정하면

우리가 HTML을 받을 때마다 똑같은 CSS를 계속 포함해서 받게되면 우리는 아까운 데이터를 더욱 많이 사용하게 된다는 것이다.

이걸 막기위해 3. 외부스타일 시트 방식으로 CSS를 사용하면 좋은데

HTML문서가아닌 외부문서에 CSS를 관리하기 때문에 내용변화가 없는 CSS는 한번만 받아서 캐시(캐시메모리)로 저장하게 되면 불필요한 데이터 낭비없이 사용자가 사용하기에 더욱 편리한 웹 환경을 만들어 줄 것이다. 

정리:

1.인라인 방식은 가끔사용할때 사용하자.

2.내부스타일 시트방식을 사용할 바에는

3.외부스타일 시트방식을 사용해보자!!!!!

외부스타일 시트방식 짱!!!!

CSS 치트시트 링크 : http://learn.shayhowe.com/advanced-html-css/complex-selectors/

HTML 

HTML이름설명(http://hpitos.tistory.com/8)

Hyper Text Markup Language.

한가지 중요한 점이 HTML 태그를 사용함에 있어서

CSS나 JavaScript에서 표현 가능한 동적 처리 표현은 사용을 지양하는 것이 좋다.

cf) 인터넷 크롤링을 하였을때 

(인터넷 크롤링 : 웹 정보를 수집하는 봇들이 HTML내용을 긁어서 DB에 저장한다음 사용자가 검색한 키워드와 자신이 저장한 내용을 비교해 우선순위 높은 것을 나타내준다.)

예를들어 : <strong></strong> 이라는 태그안에 감싸져 있는 컨텐츠를 크롤러가 중요한 내용인줄 알고 판단할 수 있는 계기를 만들어 줄 수 있다. (<strong>하면 효과를 받는 컨텐츠가 굵게 표시된다.)

cf) <br> 태그는 글의 개행을 시키는 것에만 사용한다. (무조건 글안에만 사용할 것!!) 

cf) <h*> 태그는 <strong>과 비슷한 개념 h1, h2, h3.... 진행하는데 h1이 가장 크다.

HTML 기본 태그를 알고가자

<CSS나 JavaScript에서 표현 가능한 동적 처리 표현은 사용을 지양!!>

(표 참고:http://2verworks.tistory.com/8)

HTML 치트시트 사이트 : http://overapi.com/html

Node.js 란???

자바스크립트가 서버로 사용하기 어려웠는데 구글에서 서버개발해서 웹서버로 사용해도 되겠다. 

Node.js 특징

프로세스와 쓰레드

쓰레드 : 한번에 여려개 실행할수 있도록하는 것 (멀티태스킹)

멀티프로세스 : 메모리 위에 프로그램을 여러개 올린다. 

멀티쓰레드: 프로그램 하나 안에서 메모리 공유를 하고있는 것이다. 

쓰레드: 함수 실행단위 하나하나

쓰레드 풀:

Node.js는 싱글 쓰레드 기반이다. 

- 그럼 한명밖에 웹서버를 사용하는 것 아닌가?? 

non blocking I/O 모델을 사용했기 때문에 

Blocking은 우리가 경험해보았던 것이다. 

함수호출 순서 (콜링이 포함되어있을때)

함수호출이 일어났을때 멈춰있는 상태가 블로킹

non blocking 은 호출 끝나는거 기다리는 것없이 바로 진행한다. 

예제는 파일 입출력으로 주로한다. 

문서보는 법 

동기화는 블로킹

논블로킹은 동기화가 아니다. 

인자가 다르다는 것을 볼 수 있다. 

fs쓸때 노드 이름이랑 같이 쓴다. 

const => 상수가 된다. 어디에 들어갔나 알수있다. 모듈을 넣을때 var대신 const로 넣는다. 

코드짜서 해보기 실습하고

nonblocking해본다. 

자바스크립트 코드에서 '작은따음표'

왜이렇게 찍혔나

node

|

|    A Point

|

writefile ------> 이벤트 루프 전임

|

|    B Point

|

끝 <---------------- 이벤트 루프 마침

함수 호출은 해버려 해버리고 이벤트루프--> 쓰래드를 여러개 가지고있는데 얘한테 writefile을 시켜버린다.

이벤트루프는 실행루프에따라서 전달받은것을 실행한다. 

그리고 일을 처리하고 끝났다라고 한것을 알려줘야지만

callback함수 -- 호출을 어떤함수에서 하는 것이 아니라 호출을 당하는 함수이다. 

Sync붙어있는 거는 블로킹방식이다. 

Node.js는 싱글쓰레드다. 그래서 Sync를 쓰고있는 동안에 다른 사용자가 서버쓰는 중에 다른 사용자가 할 수 없다. 

기술적으로 해결을 가능한데 동기화 방식을 통해서 해결할 수 있긴하다. 

차이점 정도만 알고있자....

OS보는거

운영체제 왜보는지

자바스크립트위에서 돌아가기때문에 상관없는데 조금씩 다르게 쓸때 필요하다.

이벤트

생성자를 호출해서 객체를 만들어주어서 사용한다. 

HTTP모듈을알아보자

그전에 요청하고 응답에 대해서 알아봐야한다. 

NETWORK 부분설명

HTML 보내고 받는거

찍어보기

req. url 

url.parse(req.url)

app.js를 통해서 내용볼수있는데

query를 통해서 내용을 검색할 수 있다. 

매핑과정

: if 로그인폼 출력

헤더에따라 달라진다.

createserver :

listen(8080):

매핑하는 법 

express 사용하고

JSON이라는 객체를 통해서 전달한다. 

JAVA Script

obvece

notation

웹1.0    웹2.0

     AJAX 통해서 새로고침을 안해도 자동완성을 받아올수있다. 페이지 전체를 새로고침하는 것이 아니고

     XML 를 JSON이 대체했다. 

상식:

X86

LTS : 

람다식: 불필요한거 티나지 않게 

=== : 타입까지 검사한다. 

문자를 따로 구분하지않고 문자열이라고한다. 

NULL = 아무것도 안가르키는것

undefined = 값을 아직안넣은것 (초기화가 안되어있는 상태)

자바스크립트 comparison table 을 통해서 1 === '1' 타입까지 확인할 수 있다.  !==를 통해 if문에서 참으로 동작하는 것과 아닌것들 확인가능

[웹에대한 큰그림을 그려보자]

생산자                    소비자

*웹서버                   브라우저

백엔드                  프론트엔드

참고1)

HTML = 문서의 내용과 뼈대

CSS = 디자인 적인 요소를 추가

JAVA Scrpt = 문서안에서 동적인 요소를 만들어주는 역할. (실시간검색어 서버통신을 말하는 것이 아님)

참고2)

통상 우리가 지칭하는 프로그래밍 언어를 JAVA Script라고 생각 할 수 있다.

현재 웹을 CSS만으로 해도 구현을 할 수 있다. 

그렇지만 우선 Java Script를 통해 만드는 법을 알고나서 다른 것을 통해 만들어라

(다른 좋은 언어들 보다 C를 먼저 배우는 이유와 비슷하다고 생각, 역사를 알아야 미래를 만들 수 있다.)

[ *웹서버는 한가지가 아니다!!!! ]

웹서버라는 것을

웹서버와 WAS(웹어플리케이션서버) 로 나누어 생각해 볼 수 있다.  

우리가 흔히 보는 웹창을 보게되면 정적인 부분과 동적인 부분을 볼 수 있는데.

웹의 부분

정적인 부분은 응답받은 것을 처리만 해주면 되지만

동적인 부분은 언어를 사용해 WAS서버를 이용해서 처리를 해주게 된다. 

현재 보통의 웹페이지에서는 웹서버랑 WAS서버를 동시에 같이 사용하는데 

동시에 같이 사용한다는 것을 소스 보기를 통해 ( 크롬 기준 F12버튼 누르면 나온다. ) 확인해볼 수 있다. 

www.naver.com 의 메인화면의 소스를 확인해본 결과이고, 

위와같이 static을 사용해서 그림파일의 주소를 가리키고 있다는 것을 확인 할 수 있다. 

(그림파일을 따로 처리하는 서버를 두고 처리한다는 것을 유추해 볼 수 있다.)

이렇게 서버를 연동해서 사용하는 이유는 처리속도를 높일 수 있기 때문이다. 

WAS서버 하나로 정적인 부분까지 함께 처리를 해줄 수 도 있다. 

하지만 이렇게 하는 것은 매우 비효율적이다. 

일반적으로 아파치와 같은 웹 서버는 정적인 동작을 처리하는 데 초점이 맞춰져 있고, 

WAS서버는 JSP, 서플릿과 같은 프로그램을 실행하여 결과를 제공하는 데 초점이 맞춰져 있기 때문이다.  

브라우저가 웹서버로부터 웹페이지를 전달받는 것을 확인해 보면 더욱 이해가 쉬울 것이다. 

출처 : http://genesis8.tistory.com/231 참고

FOO센세 프로젝트 blog

http://biteth.tistory.com/

2017_01_02 첫번째

인터넷과 웹은 다르다!!

인터넷의 기원 군사용을 위해 만들어졌다. 인터넷 네트워크 망을 말한다. 

인터넷은 네트워크적인 성격이 강하다.

팀버너스리 - 스위스 물리학 연구소(원심분리기등 연구소)

 생각보다 웹이 발전되는 시간은 별로 되지 않았다. 2000년대 초반에서 본격적인 발전 시작

 문서들을 공유하고 싶다!!! (기존은 너무 어려워) 

 양식을 만들자. --> 웹을 만들게됨 ( HTML양식)

 TAG양식은 점점 증가했다. 

FOO의 웹 동기

 동아리로 접하게됨 - 그때 게시판 짜는 방식은 정말 구시대 적인 방식이다. AKA 쓰래기

 내가 지금 시대에 맞는 웹 프로그래밍 알려준다. 앙기모띠

 현재 시대에 걸맞는 웹 프로그래밍을 하자 (node.js, JSP등을 이용)

---------------------------------------------------------------------------------------------------------------

큰그림을 그려보자

웹

소비자                 생산자

브라우저              웹서버  --> 정적인 파일들에 대한 처리 (틀, ex)베너 틀, 로그인 창 틀)

   +@ WAS (웹어플리케이션서버) 응용 프로그램  --> 동적인 파일에 대한 처리

프론트엔드           백엔드 (개발자)

<HTML>             < 무수히 많은 언어 >

<CSS>                < JSP (자바) >

<Java Script>       < Node.js(JS) >

  < PHP >

  < ASP(.net) >

  < django (py) >

웹서버와 웹어플리케이션서버 차이

웹서버: 정적 (틀, ex)베너틀, 로그인 창 틀 favicon.ico(아이콘) , CSS(속성)

WAS : 로그인 내용, 실시간 검색어 변화 

정적인 것은 처리만 해주면 되지만 동적인 것은 동적인 언어를 사용해 WAS 서버를 이용한다. 

보통의 웹페이지 웹서버랑 WAS를 같이 사용해준다. 

소스보기후 Static 을 사용해서 그림파일을 따로 처리하는 서버를 두고서는 처리한다. ( 처리속도를 높이기 위해 )

------------------------------------------------------------------------------------------------------------------------------

WAS랑 웹서버????

따로 두는 이유는??? - 초기화 시간을 줄여준다. 

WAS만 있을경우에는 정적인것도 같이 처리해줘야해서 비효율적이다. 

php요청      <---- HTML(만들어 넘긴다.)

브라우저 ----> 웹서버 ----------> php(was)넘기고 

     *                                  *

|                                  |   

|                                  |

|                                  |

------> disk (DB) <--------- 

 크기가 커지면 DB랑 따로 구축한다. 

 php라고 했지만 일련의 과정을 통해서 HTML을 만들어 웹서버 전달 및 브라우저에 전달

 계산, DB에서 가져온 값을 가지고 HTML 문서를 만들어야한다. 

------------------------------------------------------------------------------------------------------

프론트엔드 에 관하여

HTML, CSS, JAVA Script

HTML = 문서의 내용과 뼈대.

CSS = 디자인적인 요소를 추가.

JAVA Script = 문서안에서 동적인 요소를 만들어준다. (실시간검색어가 돌아갈때마다 서버랑 통신하는 것이 아니다. ) 

프로그래밍 언어라고 부를수있는 것 (통상 우리가 지칭하는 프로그래밍) --> JAVA Script 

현재 CSS만으로만 해도 구현할 수 있다. 지금 방식대로라면 그게 더 맞는 방식이다. 

우선 JAVA Script를 통해 만드는 법을 알고나서 접근하는 것을 추천하고 그렇게 해라.

프로그래밍 언어에는 조금 부족하다고 말했다고 안중요하다는 것이 아닌. 물론 같이 중요하고  태그에 대해서 알고있어야한다. 

-------------------------------------------------------------------

HTML 태그 정리해보기 ( 뭐가 있는지를 알아야한다. )

 html, a, div, ol, strong, style, h*, ui, head, body, hr, title, br, script, center, p, form, li, pre, color

중요한 안중요한거 나눠보는 이유

HTML표준에 맞추기 위해 나눠보자 

의미를 가진 TAG를 사용하자. 

크롤링을 했을때 

내용을 긁어서 DB에 저장한다음에 키워드를 통해서 검색해 우선순위 높은 것을 나타내준다. 

ex> Strong을 통해 감싸져있는 것을 크롤러가 중요한 내용인줄 알고 판단할 수 있는 계기를 만들어 줄 수 있다. 

cf.> br 글을 개행 넘기는 것에는 사용가능 하다. (무조건 글안에만 사용해라!!) div는 한줄에 하나씩 밖에 안써진다.( 박스만들때 주로사용 )

cf.> h* strong과 비슷한 개념 h1이 가장 크다. 

HTML 태그를 보기위해서는 제일 많이 사용하는 태그 TOP20 정도를 알고가는것이 좋다. 

---------------------------------------------------------------------------------

CSS 3가지 사용

1. hpitos<span style="color:red;"> foo</span>123

span은 글 안에서 속성을 줄때 사용한다. 

Style 속성은 어떤 CSS속성을 주고싶다고 할 때 사용한다. 

==> 속성값에 입력한다. (ex.스타일)

2. <style> 태그

  <style>

      span{

           color: red;

       }

  </style>

  hpitos<span> fgh</span>123

3. 

   <style>을 다른 것으로 뺀다. 

   style.css 문서를 사용한다. 

    <link rel="stylesheet" "href="style.css">

    <span> fgh </span>

----style.css

    span{

        color:red;

     }   

1번 같은 경우 사람이 봤을때는 좋지만 크롤러가 봤을때는 좋지않다. 

inline 방식의 문제 -> 한번만 했을때는 좋다. 하지만 다른 방식으로 여러번 했을때는 번거롭다. ( 소스코드 늘어난다. )

직관적인것에 이점

2번 똑같은 문서에 넣는다. (캐쉬메모리 상에서 굳이 필요없는 메모리를 다시한번 전달받아야한다. ) 

3번 다른 문서에 넣는다. ( 캐쉬메모리를 줄일 수 있어서 선호한다. )

우선순위 

(! important) >>>>>>1번째(inline) >  

-------------------------------------------------------------------------------------------------------------

클래스 를 사용하는이유 

여러가지 속성을 쓰기위해 사용한다. 

<style>

.size-40px {

font-size: 40px;

}

.color-red {

color: red;

}

</style>

adcd<span class="color-red">fgh</span>123456

adcd<span class="size-40px">fgh</span>123456

adcd<span class="size-40px color-red">fgh</span>123456

---------------------------------------------------------------------------------------------------------------

id를 사용하는 것

<style>

.size-40px {

font-size: 40px;

}

.color-red {

color: red;

}

#second {

font-style: italic;

}

</style>

adcd<span class="color-red">fgh</span>123456

adcd<span id="second" class="size-40px">fgh</span>123456

adcd<span class="size-40px color-red">fgh</span>123456

==============================================위와같은 것들을 선택자라고한다. 

.은 class #은 id를 나타낸다. 

====================================================================

ul을 사용한다. 

<style>

li:nth-child(odd) {

color:red;

}

</style>

<ul>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

</ul>

 홀수번째만 선택하는 법? 

-> 검색 HTML li 홀수 Or 선택자

-------------------------------------------

ul과 ol을 사용한다. 

두개를 다르게 하고싶을 때는?

<style>

#red li:nth-child(odd) {         //red라는 놈을 찾고 li에서 홀수있는 놈만

color:red;

}

#blue li:nth-child(2n) {        //blue라는 놈을 찾고 li에서 짝수있는 놈만

color:blue;

}

</style>

<ul id="red">

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

</ul>

<ol id="blue">

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

<li>    </li>

</ol>

*CSS선택자 검색&찾아 보기

클래스-점, id-#, 선택자, 

CSS에서 중요한점. 

3번째가 좋은 이유 : 캐쉬가 가능하다. 데이터가 적게 왔다갔다 할 수 있다.(모바일) 속도가 빠르다.

선택자를 어떻게 사용하는 지 중요하다. selector라고 한다. 

부모자식 <ul-li>

형제관계 <Ii> <ul>-<ol> 

개인적으로 HTML위에서 CSS를 사용한다고 할 수 있을 것 같다. 

------------------------------------------------------------------------------------------------------------------------

자바스크립트

node.js를 위해 필요하다. 

IT상식 -------------------------------------------------------------------------------------------------------------

데니스 리치 가 C를 만들었다. Bell연구소의 연구소 사람이었다. ( 오늘날의 전화기 발명. 벨소리...)

유닉스가 C언어보다 먼저 나왔다. 

유닉스를 유지보수를 하다가 너무 힘들어서(어셈들로 유지보수했었다.) 

무어의법칙 - 마이크로칩(집적회로) 1980년쯤에 소프트웨어와 하드웨어의 충돌(?)

소프트웨어의 개발 방식은 예전의 C언어를 개발할때와 같다고 생각했다. >> '하드웨어를 더 가져다 붙이면 빨라진다' 라고 생각 

소프트웨어가 하드웨어를 따라가지 못하게되었다. 

코드가 길어짐에 따라 복잡도는 지수적으로 늘어나는 정도로 생각되었다. 

조금을 변경하는데 전체를 다 고쳐야하는 수고로움이 생기게 되었다.

소프트웨어에 대해 연구의 필요성을 알게되었다. 

FOO왈 지금 시대가 소프트웨어의 발달이 최고조에 이르렀다. (앞으로 어떻게 더 효율적으로 쓰느냐가 관건이라고 생각)

ex) 알파고

소프트웨어 안에서도 인식이 바뀌고있다. 

예전에는 1순위가 성능. 따라서 C언어를 사용하는 경우가 많았다. (2000년대 초중반 JAVA > python, java script 느리다라고 생각)

java script가 느려서 안쓰고있었다. 2008년에 google에서 V8 JavaScript 엔진을 만들었다. (Java를 실행시켜주는 엔진) 

그 이후 JavaScript를 이용해서 서버에 사용했다. 

JavaScript를 통해 Node.js가 나오게되었다. 

현재 Node.js 정식 version.6 개발중 version.7

성능을 제일 우선시 했는데 

JSP는 Java를 완벽히 알아야한다. (아파치 톰캣)

Node.js는 서버를 여는것부터 쉽다. 

둘다 성능은 나온다. 그럼 어떤게 개발이 더 편리하냐 어떻게 더 개발이 빠르냐에 대한 선택이 필요하다. 

------------------------------------------------------------------------------------------------------------------------------------

자바 스크립트 

접하기 쉬운것은 F12 개발자 도구

인터프리터 언어 = 실행하기전까지 어떤 에러가 있는지 모른다. 

600줄 코드에서 500번째에서 에러발생시 500번이후 코드는 실행이 안된다. 

REPL 한줄한줄 키보드 입력해서 실행가능하다. Console메뉴에서 실행

자바스크립트랑 JQuery사용하는 것 알아보자

------------------------------------------------------------

자바스크립트 console 창에서 이용  

a화면에 실제로 출력되는 것이 아니다. 

전역변수처럼 사용이된다. 

변수선언 var(int같은 역할, 자료형 구분이 없다. )

그냥 a도 맞지만 

var을 써서 하는것이 바람직한 방법이다. 

foo1

----------------

함수만 선언한거지 a를 선언한것이 아니다.

함수를 실행해서 a를 선언한다. 

function func1() {

let a = 3;

}

func1();

console.log(a)

var 함수블록안에서 사용할 수 있다.  

지역변수 : 블록안에서 사용하는것이다.

but 함수 블록안에서는 다 쓸 수 있다. 

let키위드를 사용하면 기존에 우리가 알고있는 변수처럼 사용한다 

반복문 블록안에서만 사용가능하다. 

safri에서 let는 사용할 수가 없다. 

크로스 브라우징 : 지금 우리가 쓰는 크롬 엣지 파이어폭스등 브라우저끼리 이건되는데 이건안된다 이걸 뜻하는데 

사파리에서 let는 지원이 안된다. 

var과 let기능도 다르지만 성능도 다르다고 알 수 있다.. 

-------------------------------------------------------

C와 다른점, 자료형을 나타내지 않는다. 

함수라는 것만 보여주고 

다른쪽으로 뺄 수 있다. 

----------------------------------------------------------

JQuery J쿼리

>> write less, do more 

min의 차이 

우리가 보기 쉽게했던 것들을 다 (변수명, 개행) 보기는 불편하지만 용량은 작게 만들어놓은 것들이다. 

데이터양을 줄여준다. 

상용웹서비스할시 이렇게 다 줄여주고, 코드를 난독화시킨다. 

개발을 한다음에 min해서 줄여준다. 

-------------------------------------------------------------------

선택자를 알고사용해서 잘 쓸 수 있다. 

필요한 부분만 가져다가 사용해야한다. 

--------------------------------------------------------------------

+@ 부트스트랩.

Bootstrap 자바스크립트 보다 CSS와 연관이 되어있다. 

JQuery를 다운받지않고 네트워크상에서있는 걸로 사용할 수 있다. CDN이라고 함

위치에 관하여

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

원래는 <title></title>다음에 들어간다. 

title : 제목이다. 

그밑에 CSS집어넣고

스크립트에도 종종 집어넣는다. 

</head>

<body>

그치만 body테그 끝나기 전에 넣는다.

</body>

</html>

CSS받아오고 --> 자바스크립트를 받아온다.

앞쪽에 하면 자바스크립트(당장눈에 보이는게 아니니깐) 느려진다. 

CSS를 뒤로 빼버리면 CSS적용 하나도 되지 않은 화면을 받아보고 그다음 CSS적용화면을 보게된다.  

원칙적으로 위와같은 자리에 집어 넣어준다. 

버튼 만들어보기

btn btn-default 영향을 받는다. btn-primary와 btn속성값들을 알아볼 수 있다. 

예제따라해보기 --> 필요하면 가져다 쓰는 법을 아는게 중요하다. 그러니 사용법을 사용가능하다. 

TAG 일렉트론