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 일렉트론