19년 WMS 회고록/front-end

front

Dexlee 2021. 11. 2. 21:42

1. ajax

1) ajax 특징

  • ajax에 입력된 내용들이 실행이 되면 캐시에 저장이 돼서 그 캐시에서 데이터들을 가져온다.
  • 그래서 더 빠르게 사용가능.
  • 실제 구현할 때는 자바스크립트 기능 없이도 페이지가 작동할 수 있게 점진적 개선방식으로 구현해야 한다. (progressive enhancement)
  • Ajax는 클라이언트에서 데이터를 체크한다. 전통적인 웹 처리 방법은 폼 전체를 서버로 보내 서버에서 에러 체크를 하지만 Ajax는 최대한 클라이언트에서 데이터를 체크한 후, 통과한 데이터만 서버로 보내 클라이언트에서 할 수 없는 부분을 체크하거나 비즈니스 로직을 반영하여 데이터베이스에 저장한다.
  • jQuery의 Ajax를 사용하면 비동기적으로 데이터를 전송하고 그 결과를 반환받아 화면 전체를 갱신할 필요 없이 화면 일부만 갱신할 수 있다.

-- 서버로 데이터 전달하기

  • 브라우저에서 서버로 입력 값을 전달하고 서버는 그 입력 값을 바탕으로 동적으로 데이터를 생성해서 되돌려 주는 게 진정으로 Ajax를 이용하는 것이라 할 수 있다.
  • 실무에서 Ajax 기술을 활용하려면 서버로 값을 전달하는 방법이 있어야 하는데, 이때도 jQuery를 활용할 수 있다.

2. HTML(Hyper Text Markup Language)

1) HTML 기본 태그

(1) 태그의 특징.

  1. 태그는 대소문자를 구별하지 않는다.
  2. 단독으로 사용하는 경우와 시작 태그, 끝 태그를 사용하는 경우

Ex) <HR> (단독), <B> </B> (시작, 끝)

(2) <META> tag

  1. 웹 사이트의 키워드나 주제 등을 나타내는 <META> tag.
  2. 웹 사이트의 정보(제작자, 키워드, 주제, 문자 세트 등)
  3. 웹 브라우저의 캐시 기능 무시하기(항상 최신의 웹 페이지를 가져오기 위해)
  4. 시간을 설정하여 자동으로 페이지 이동하기
  5. 장면 전환 효과 연출하기

(3) 웹 문서를 채우는 <BODY> tag

  1. <BODY> tag의 배경 속성
    1.  bgcolor : RGB 값이나 색상 이름을 이용해서 배경 색상을 지정
      1. Ex) <BODY bgcolor=”#FFFF00” text=”0000FF”>
    2. text : RGB 값이나 색상 이름을 이용해서 글자 색상을 지정
    3. background : 배경 그림으로 사용할 파일 이름을 지정
    4. leftmargin : 브라우저 왼쪽 여백을 지정
    5. topmargin : 브라우저 위쪽 여백을 지정

(4) 글자 크기를 조절하는 <H> tag

  1. <H1> </H1>, <H2>, <H3>, <H4>, <H5>, <H6>
  2. <H1 align=”center”> </H1>
  3. <H2 align=”left”> </H2>
  4. <H3 align=”right”> </H3>

(5) 글자를 편집하는 <FONT> tag

: <FONT>의 속성 값을 이용하여 글자 색상, 크기, 글꼴 등을 지정할 수 있다.

  1. <FONT SIZE=”1”(2,3,4,,,ETC)> </FONT>
  2. <FONT SIZE=”6” COLOR=”red” FACE=”돋움체”> </FONT>

: 만약 문서 전체에서 사용되는 글자 색상이나 크기, 글꼴을 변경하려면 <HEAD> 영역에 ex) <BASEFONT size=”5” FACE=”궁서체” COLOR=”green”> </head>라고 입력.

 

(6) 글자 스타일을 바꾸는 tag

  1. <B> </B> : 굵게
  2. <U> </U> : 밑줄
  3. <I> </I> : 이탤릭체
  4. <SUB> </SUB> : 아래 첨자
  5. <SUP> </SUP> : 위 첨자
  6. <STRIKE> </STRIKE> : 취소선
  7. <SMALL> </SMALL> : 조금 작게
  8. <BIG> </BIG> : 조금 크게

(7) 수평선을 긋는 <HR> tag

  1. <HR> tag의 속성
    1. size : 높이 설정
    2. width : 넓이 설정, 크기를 픽셀 단위로 지정할 수 있고, 웹 브라우저의 넓이에 대한 비율(%)로 지정할 수도 있다.
      1. Ex) <HR width=”100”>
    3. align : left, right, center 정렬 방식을 지정
    4. color : 선의 색상을 설정
    5. noshade : 입체감이 없는 선을 만든다.
      1. Ex) <HR size=”10” noshade>

(8) <BR> tag와 <P> tag

: <BR> tag는 enter를 누른 것과 같은 의미이다. <P> tag는 문단을 나눌 때 사용.

Ex) hello<BR>

EX) world<P>

 

(9) 가운데로 정렬하는 <CENTER> tag

Ex) <CENTER>

HELLLO WORLD

</CENTER>

 

(10) 입력한 형태 그대로 편집하는 <PRE> tag

: 편집기에서 입력한 형태 그대로 웹 브라우저에 적용시키기 위해서는 <PRE>를 사용

 

(11) 보기 좋은 목록을 만드는 tag

  1. <UL> tag로 번호 없는 목록 만들기
    1. <UL> -> 번호가 없는 목록의 시작
    2. <LI> 항목 -> 목록을 구성하는 항목
    3. <LI> 항목 -> 목록을 구성하는 항목
    4. </UL> -> 번호가 없는 목록의 끝
  2. <OL> tag로 번호 있는 목록 만들기.
    1. <OL> -> 번호가 있는 목록의 시작
    2. <LI> 항목 -> 목록을 구성하는 항목
    3. <LI> 항목 -> 목록을 구성하는 항목
    4. </OL> -> 번호가 있는 목록의 끝
    5. Ex) <OL>
    6. <LI>웹 디자인    <UL>
    7. <LI type=”square”>포토샵
    8. <LI type=”square”>일러스트
    9. <LI type=”square”>드림위버    </UL>  </OL>
  3. 계층 구조를 만드는 <DL> tag
    1. <DL> -> 정의 목록의 시작
    2. <DT> -> 정의된 내용의 제목
    3. <DD> -> 정의된 내용
    4. </DL> -> 정의 목록의 끝

(12) 웹 문서에 그림을 삽입하는 <IMG> tag

  1.  <IMG src=”경로” width=”145” height=”100” border=”0” alt=””>
  2. Src : 경로와 파일 이름
  3. Border : 0이면 테두리가 없지만, 1 이상의 값은 해당 두께만큼 테두리가 나타남.
  4. Alt : 그림에 대한 설명 입력. 그림 위에 마우스를 올려놓으면 해당 설명이 풍선 도움말로 나타남.

(13) 그림과 문장을 정렬해주는 align

  1. 속성은 align=”top”, “middle”, “bottom”, “left”, “right”

(14) 멀티미디어를 삽입하는 <EMBED> tag

: 이미지 외에 웹 문서에서 동영상 파일(*.avi, *.mpeg)이나 음악 파일(*.mav, *.midi)과 같은 개체를 삽입하기 위해서는 <EMBED>를 이용

  1. <embed src=”멀티미디어 파일” height=”” width=”” autostart=”false”>

 

2) HTML 200% 활용하기

(1) URL로 하이퍼링크 연결하기.

  1. <a href=”url”> </a>
  2. <a href=”123.jsp“> </a>

: 웹 문서에서 다른 웹 문서로 이동하기

 

(2) <table>과 <tr>, <td> tag

 

(3) <form> 양식 알아보기

: 웹 사이트를 방문한 사람이 입력한 정보를 서버로 전달하기 위해서 <form>을 사용합니다. 즉, 각 종 입력 양식을 <form> 안에서 사용하며, 이 태그에서 서버에 전달하는 방식이나 서버에서 가동될 프로그램 등을 지정한다.

  1. <form name=”폼을 구분하기 위한 이름” action=”url” method=”서버에 CGI 프로그램에 전달되는 방식으로 get이나 post를 지정” target=”결과물을 보여 줄 창의 이름을 지정” enctype=”CGI 프로그램으로 전송될 데이터의 타입을 지정”> </form>
  2. CGI(Common Gate Interface)는 사용자가 입력한 데이터를 외부 프로그램과 연결해주거나 데이터베이스 서버와 연동하여 데이터를 처리할 수 있게 해 준다. Ex) JSP etc

3) 홈페이지의 코디네이터, CSS(Cascade Style Sheet)

(1) 스타일 시트의 매력

  1. 웹 문서의 편집을 자유롭게 할 수 있다.
  2. 통일감 있는 문서를 만들 수 있다.
  3. 문서 관리가 편하다.

4) Appendices

  1. XML(Extensible Markup Language) : XML은 HTML을 대체할 목적으로 W3C(World Wide Web Consortium)라는 단체가 표준화 작업을 진행하고 있는 페이지 기술 언어를 말한다. 쉽게 말해, XML은 기존에 사용하던 HTML 언어에 사용자가 직접 새로운 tag를 정의할 수 있는 기능을 추가한 것이다.
  2. XHTML(Extensible Hyper Text Markup Language) : XHTML은 XML의 응용으로서 사용자가 직접 새로운 tag를 정의할 수 있는 XML 기능과 웹 페이지를 표현할 수 있는 HTML 기능을 합한 것을 말한다.
  3. GIF(Graphic Interchange Format) : GIF는 압축 저장 방식의 그래픽 포맷으로, 온라인에서 빠르게 그림을 전송하기 위해 만들어졌습니다. 현재 웹에서 가장 많이 사용되는 그래픽 포맷이다. 애니메이션 기능을 지원. 하지만 표현할 수 있는 색이 256컬러(8bit)이라서 사진에는 적합하지 않고, 주로 illustration과 logo와 같이 단순한 도형 또는 선이 분명하게 나타나야 하는 그림에 적합. 
  4. JPEG(Joint Photographic Expert Group) : JPG라고도 부르며 24bit까지 표현 가능해서 사진 등에 많이 이용한다. 뛰어난 압축률이 특징. 그리고 파일 크기가 작아질수록 그림의 품질은 떨어진다.

 

3. Javascript 특징

  • single thread 기반이고 call stack을 사용한다.
  • global variable을 사용하면 애플리케이션이나 웹페이지 내 모든 코드 사이에서 공유된다는 문제점을 가지고 있다.(사실 이것은 모든 언어의 글로벌 변수의 단점) 그러므로 사용을 지양해야 한다.
  • implied globals(암묵적 전역)
    • 만약 선언하지 않고 변수를 사용한다면 그 변수를 전역 변수로 인식한다.
    • ex) x = 10;
  • hoisting(끌어올리기) 동작 방식
    • 함수 범위 내에 흩어져 있는 변수는 값이 할당되기 전에 모두 함수 상단으로 끌어올려져 undefined 형태로 선언된다.
    • 이러한 특성은 로직상 오류를 범하기 쉽다. 그러므로 함수 상단에 하나의 var 선언문을 사용하여 변수들을 모아놓은 패턴을 사용하는 것이 좋다.
  • 전역 객체를 하나 선언하고 그 안에 함수들을 정의해서 그 객체를 통해 사용할 수 있게 해야 한다.* 그래야 재사용성이 높아진다.
  • scope
    • const를 기본으로 사용한다.
    • 변경이 될 수 있는 변수는 let을 사용한다.(block scope이다.)
    • var는 사용하지 않는다.
  • const를 사용하더라도 배열과 오브젝트의 값을 변경하는 것은 가능하다.
    • (추가, 삭제 등이 가능 push 등)
    • 타입을 변경하거나 값을 재할당하는 것이 불가능한 것이 const이다.
  • var
    • 재선언, 재할당 가능
  • let
    • 재할당 가능, 재선언 불가
  • const
    • 재할당, 재선언 불가. (하지만 배열과 오브젝트의 값을 변경하는 것은 가능)
  • 즉, primitive type이면 재할당 불가. 하지만 reference type이면 재할당 가능.

 

4. Json with Annotaion

 

  • @JsonProperty
    • JSON으로 변환 시 속성이름 변경.
    • @JsonProperty("name")
  • @JsonIgnore
    • JSON으로 변환시 그 속성 무시한다.
  • @JsonAnyGetter
    • Map 타입 필드에 대해 JSON 변환 시 key, value를 일반 속성처럼 변환시켜준다.
  • @JsonAnySetter
    • 역직렬화시 JSON 속성을 map 필드에 대해 적용한다.
  • @JsonUnwrapped
    • Jackson에게 어떤 필드의 값에 대해 싸지 말고 풀어헤쳐 달라는 의미.
    • ex) Ename ename;
    • { "age" : 18, "ename":{ "first":"dexter", "last":"lee", } }
    • @JsonUnwrapped
    • Ename ename;
    • { "age":18, "first":"dexter", "last":"lee" }
  • @JsonRawValue
    • @JsonRawValue는 Jackson이 속성을 그대로 직렬화하여 JSON으로 변경

 

5. Jquery

  • js의 생산성을 엄청나게 올린다. 
  • css 접근방법을 선택한다. 
  • 라이브러리는 재사용을 위해 있는 것이다. 
  • $와 jQuery는 같은 의미로 사용 가능.
    • ex) .name : "class" attribute 접근방법
    • #name : "id" attribute 접근방법

1) 특징

  • 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 js library.

1.1 jquery 문법

: $(실렉터).method1().method2()....etc

: jQuery(실렉터).method1().method2()....etc

: 이렇게 method를 . 으로 연결할 수 있는 기능을 체인이라고 부름.

 

2) wrapper 란?

: $이 wrapper이고 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환.

2.1 wrapper의 안전한 사용

: $을 사용하는 다른 라이브러리들과의 충돌이 있을 수 있으므로, $을 전역변수보단 지역변수로 사용하는 것이 안전하다.

ex) (function($){ $('body').text('<h1>hello</h1>'); })(jQuery)

2.2 제어 대상을 지정하는 방법

2.2.1 $(selection, [context]) : context는 생략가능.

2.2.2 $(element)

 

3) selector

3.1 filter

: 내가 선택한 #list에서 좀 더 detail 하게 filtering 할 수 있다. 이러한 기능이 filter로 사용 가능.

ex) $(#list li:eq(2)) eq는 eqaul이고 인덱스 값이 2인 값을 가져온다는 의미이다.

- :gt(1)은 1이라는 인덱스보다 큰 값들을 선택한다는 의미.

- :lt(2)은 2라는 인덱스보다 작은 값들을 선택.

- :even - 홀수 값을 가진 엘리먼트에 대한 선택자

- :odd - 짝수 값을 가진 엘리먼트에 대한 선택자

- :first - 첫 번째

- :last - 마지막

3.2 속성(attribute)

ex) 속성 중 target 속성을 가지고 값을 컨트롤한다고 가정하면,

3.2.1 *= 연산자 [target*="BC"]

: 속성 값 중 BC가 포함된 엘리먼트들이 선택됨.

3.2.2 != 연산자

: 제외시킴

3.2.3 ^= 연산자

[target ^="B"] : B로 시작하는 엘리먼트들이 선택됨.

3.2.4 $= 연산자

[target $="B"] : B로 끝나는 엘리먼트들이 선택됨.

3.2.5 []

[target] : target이라는 속성 값을 가진 엘리먼트들이 선택됨.

3.2.6 [][]

[target][id] : target과 id 속성값을 동시에 가진 엘리먼트들이 선택됨.

 

4) chain

: jquery는 wrapper($ or jQuery)를 리턴한다 최종적으로 그래서 chain이 가능.

4.1 chain의 장점

: 코드 간결

: 인간의 언어와 유사해서 사고의 자연스러운 과정과 일치함.

 

5) jQuery의 event

: 크로스브라우징 문제를 해결해줌.

: bind로 이벤트 핸들러를 설치하고, unbind로 제거

: trigger로 이벤트 핸들러를 강제로 실행

: click, ready와 같이 다양한 이벤트 헬퍼를 제공함

: live를 이용하면 현재 존재하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음

5.1 unbind

: bind 되어있는 이벤트를 동작 안 하게 해주는 역할

5.2 bind

: 이벤트를 설치할 때 사용하는 method

5.3 trigger

: bind 된 attribute가 아닌 다른 attribute를 강제로 실행시킬 수 있는 method

ex) $('#trigger_event').bind('click', function(e){ $('#click_me').trigger('click'); });

5.4 event 헬퍼 

: bind 메서드를 생략하고 사용할 수 있다.

: bind method를 사용할 때 첫 번째 parameter로 사용했던 'click'을 method로 사용하고 첫 번째 parameter로 함수를 사용하는 방식이다. 더 간결하고 많이 쓰임.*

ex) $('#trigger_event').click(function(e){ $('#click_me').trigger('click'); });

5.5 live 사용

: bind부분을 live로 대체해서 사용. 그래서 파라미터가 두 개 필요.

: 대신 unbind는 die명령어를 사용.

 

6) 엘리먼트 제어

: jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공함.

 

element or attribute, text 같은 값을

6.1 자식으로 삽입 : .append() ..etc

6.2 형제로 삽입 : .after() ,,,etc

6.3 부모로 감싸기 : .wrap() ,,,etc

6.4 삭제 : .remove() ,,,etc

6.5 치환 : .replaceAll() ,,,etc

6.6 속성제어 : .val() ,,,etc

 

7) form

7.1 .focus, .blur, .change, .select

7.2 .submit(), .val()

 

8) traversing

 

9) animation

: fadeOut(), fadeIn(), hide(), show(), slideDown(), slideUp(),

 

10) div 태그 전체가 아닌 내부 요소만 삭제하고 싶을 때는 $('#div_List *').remove(); *를 추가해준다.