• 버전 확인

  $ cat /etc/*release*

• 시스템 업데이트

  $ sudo yum -y update

docker 설치

$ sudo yum install docker-engine -y

시스템 등록

$ sudo systemctl enable docker.service

등록한 도커 실행

$ sudo systemctl start docker.service

mariadb 이미지 설치 :버전 미지정 시 최신버전으로 자동 설치

$ sudo docker pull mariadb

$ sudo docker pull mariadb:버전

mariadb 컨테이너 만들고 실행

$ sudo docker run --name mariadb -d -p 3306:3306 --restart=always -e  
MYSQL_ROOT_PASSWORD=1234 mariadb

--name: 만들어서 사용할 컨테이너의 이름을 정의  
-d: 컨테이너를 백그라운드에서 실행
-p: 호스트와 컨테이너 간의 포트를 연결 (host-port:container-port)   
    호스트에서 3306 포트 연결 시 컨테이너 3306 포트로 포워딩
--restart=always: 도커가 실행되는 경우 항상 컨테이너를 실행
-e: 기타 환경설정(Enviorment)
  MYSQL_ROOT_PASSWORD=root // mariadb의 root 사용자 초기 비밀번호를 설정
mariadb: 컨테이너를 만들 때 사용할 이미지 이름

mariadb 컨테이너 접속 : 컨테이너 생성 시 적용한 이름으로 접속

$ sudo docker exec -it mariadb /bin/bash

참고링크 :docker 설치, mariadb 설치

jQuery

    let $form = $('<form></form>'); // 폼 태그 생성
    $form.attr('action', url);         // 폼 속성 설정
    $form.attr('method', 'get');
    $form.append($('<input />', { type: 'hidden', name: 'name', value: 'value' }));    // 자식태그 생성

       $form.append('<input type="hidden" name="name" value="value" />'); -> 문자열로 append 가능 

    $form.appendTo('body'); // body태그에 추가
    $form.submit(); // 전송

Javascript

    let form = document.createElement('form'); // 폼 태그 생성
    form.setAttribute('action', url); // 태그 속성 설정
    form.setAttribute('method', 'get');

    let input = document.createElement('input'); // 자식 요소 input 태그 생성
    input.setAttribute('type', 'hidden'); // 태그 속성 설정
    input.setAttribute('id', 'inputId');
    input.setAttribute('value', 'value');

    form.appendChild(input); // input태그를 form태그의 자식요소로 만듦
    document.body.appendChild(form) // form태그를 body태그의 자식요소로 만듦
    form.submit(); // 전송

``` @media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @page{ size: A4; margin: 0; } html { font-size: 6px; } html, body { margin:0; padding:0; page-break-after: avoid; page-break-before: avoid; background: #fff; } .body, .page {margin-top:-1px}

#header, #headerMo, .all-mask, #container, #footer, .modal .btn-area {
    display: none;
}
.img-modal-wrap .dim {
    background: #fff;
}
.print-content {
    overflow:hidden;
position:relative;
width:210mm;
height:297mm; /*서브픽셀 해결1 사용시*/
height:calc(297mm - 1px); /*서브픽셀 해결2 - IE는 미지원*/
page-break-before: always;

}
.modal {
    transform: translate(-50%, -55%)
}
.modal-con {
    overflow: hidden;
}
.modal .close {
    display: none;
}
.mo-estimate-box {

}

}

• 기본 디렉토리 생성
  • $mkdir directory1
• 2개의 디렉토리 한번에 생성
  • $mkdir directory1 directory2

• 공백을 포함한 이름을 가진 디렉토리 생성 폴더 명을 쌍따옴표("")로 둘러주거나 '역슬래시 + 공백'으로 나타내 주어야 함)
  • $mkdir directory\ has\ space
  • $mkdir "directory has space 2"

• 디렉토리 이름에 패턴이 있는 경우, 와일드카드 활용 'test01'부터 'test06'까지 '{}'와일드카드를 활용해 한번에 생성 가능
  • $mkdir test{01, 02, 03, 04, 05, 06}

디렉토리 삭제 rm -r

• 단일 파일(디렉토리) 삭제

  • $rm -r test

• 전 디렉토리 내 모든 파일(디렉토리) 삭제

  • $rm -r *

폴더 이름 정렬 리스팅

• 기본
  • $ls | sort -f
• 역순
  • $ls | sort -r

1. 터미널에서 JDK 버전 확인
   • cd /Library/Java/JavaVirtualMachines
   • ls jdk1.8.0_291.jdk

2. vi에디터 열기

   • cd /Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home
   • vi ~/.bash_profile

3. 환경변수 설정하기

   • i를 눌러 입력모드로 전환
     • export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home
     • export CLASSPATH=.:$JAVA_HOME/lib/tools.jar
     • export PATH=$JAVA_HOME/bin
   • 명령어 입력 후 ESC 키를 눌러 편집모드를 빠져나옴
   • :wq를 눌러 저장 후 종료

4. 자바 버전 확인 명령어

   • java -version
   • javac -version

자바 버전 변경하기

1. 현재 로컬에 설치되어있는 Java 버전 확인하기

   • /usr/libexec/java_home -V

2. Java 다른 버전 변경하기

   • Java 8로 변경할 경우
     • export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
     • source ~/.bash_profile (bash 사용하는 경우에만 적용)
   • Java 11로 변경 할 경우
     • export JAVA_HOME=$(/usr/libexec/java_home -v 11)
     • Java 11은 뒤에 버전을 명시할 때 1.x형식으로 해주지 않아도 됨

3. 터미널 재시작 시 버전이 다시 원래대로 돌아가는 경우

   • MacOS 카탈리나 버전 이상부터는 zxh 쉘을 사용
   • ~/.zxhrc의 파일을 열어 export JAVA_HOME=$(/usr/libexec/java_home -v 11) 명령어가 제대로 입력되었는지 확인
   • vim ~/.zshrc
   • 입력이 안 되어있는 경우 i를 눌러 편집모드로 변경 후 입력해주고 :wq로 종료하면 됨

• 물리DOM과 가상DOM

  • 물리 DOM 구조는 웹 브라우저에서 자바스크립트 코드가 생성하는 실제 DOM 구조
  • 가상 DOM 구조는 리액트 코드가 생성한 자바스크립트 객체 구조
  • 리액트는 특정 시점에서 이 가상 DOM 구조를 물리 DOM 구조로 만드는데, 이를 '리액트가 렌더링한다' 하고, 이 기능을 수행하는 패키지를 renderer라 함

• 리액트 프레임워크와 리액트 네이티브 프레임워크의 차이

  • 리액트는 가상 DOM 구조를 react-dom이란 렌더러 패키지를 사용하여 물리 DOM 구조로 렌더링하는 방식의 프레임워크
  • 리액트 네이티브는 react-native라는 렌더러 패키지를 사용하여 렌더링하는 방식의 프레임워크
  • 리액트에서는 react-dom 렌더러를 DOM 렌더러라 하고 react-native 렌더러를 네이티브 렌더러라 함

• react 패키지의 역할

  • 리액트와 리액트 네이티브 프레임워크는 모두 react라는 패키지를 사용
  • react 패키지는 App.tsx파일을 가상 DOM 구조로 만드는 역할을 하는 패키지
  • 네이티브 렌더러는 리액트 요소를 안드로이드 프레임워크나 IOS용 UIKit 프레임워크의 화면 UI객체로 바꿔주는 역할을 함

• 브리지 방식 렌더링

  • 모든 것이 자바스크립트로 동작하는 리액트에서는 React.render라는 DOM 렌더러의 동작을 코드로 확인할 수 있지만 리액트 네이티브에서는 네이티브 렌더러의 모습을 확인할 수 없다.
  • 리액트 네이티브는 프로젝트의 android와 ios 디렉터리에 있는 자바나 오브젝트-C로 구현한 네이티브 모듈 쪽에서 렌더링이 진행 되기 때문
  • 네이티브 모듈 쪽에는 JavaScriptCore라는 이름의 자바스크립트 엔진이 동작 함
  • 이 C++ 언어로 구현된 JavaScriptCore 엔진은 안드로이드에서는 JNI(Java Native Interface) 방식으로, IOS에서는 오브젝트-C의 FFI(Foreign Function Interface) 방식으로 연결되어 동작

• 리액트 네이티브 앱을 폰에 설치하고 실행하면 리액트 네이티브의 네이티브 모듈이 실행되면서 네이티브(안드로이드 프레임워크나 IOS UIKit 프레임워크 쪽 렌더링)를 담당하는 UI 스레드와 App.tsx와 같은 자바스크립트 코드를 실행하는 자바스크립트 엔진 스레드 2개가 동시에 동작
• 이 두 스레드는 message queue 방식으로 서로 렌더링과 관련된 데이터를 주고 받음
• 사용자가 화면을 터치하거나 하면 UI 스레드는 이 내용을 자바스크립트 쪽 스레드에 이벤트 형태로 넘김
• 이런 방식으로 동작하는 프레임워크를 bridge 방식 프레임워크라 함

• RN전용 패키지에는 자바스크립트 스레드에서 동작하는 쪽과 UI 스레드에서 동작하는 쪽이 따로 있음 이 때문에 자바스크립트 쪽만 설치하고 네이티브, 즉 UI 스레드에서 동작하는 쪽을 설치하지 않으면 패키지가 정상 동작하지 않음

Sccop 설치

• sccop 프로그램 설치는 관리자 모드로 실행한 윈도우 파워셀에서 진행

• 윈도우10의 시작버튼을 마우스 오른쪽으로 클릭하고 [Window PowerShell(관리자)] 메뉴로 실행

실행 규칙 변경

• 명령어 실행 후 '모두 예'를 의미하는 A를 입력

• 'SCOOP'이라는 이름의 파워셀 환경 변수 설정 Scoop으로 설치한 모든 프로그램은 C:\Scoop 디렉터리에 위치하게 됨

환경 변수 설정

• 위에서 파워셀 환경 변수 설정은 파워셀에서 Scoop으로 프로그램을 설치할 때마다 실행해야 하는 번거로움이 생김
• 이 과정 생략을 위해 윈도우의 환경 변수로 설정

설치

• 명령어를 실행해야 하는데 관리자 모드로는 안된다 ..
• 파워셀 창을 새로 띄워서 명령어를 실행하면 c:\Scoop 경로에 설치된 것을 확인할 수 있다.

회사에서 react-native 프로젝트를 진행하게 되어 Do it! 리액트 네이티브 앱 프로그래밍 책으로 공부 중 node.js, vscode, android studio 등 소프트웨어 설치를 웹 사이트에서가 아닌 Scoop 프로그램 사용하는 방법이 나와있어 정리 해 본다. 이미 웹 사이트를 통해 다 설치 했지만 나중에 한번 사용해봐도 좋을 듯 하다.

powershell 실행정책 참고링크

Stack Navigator의 header만 직접 커스텀 가능

NoSQL 파일 생성 후 자료 입력 Object 자료형으로 입출력 가능

Dynamo Oracle NoSQL MongoDB Redis Cassandra

무료 호스팅 받아 사용

mongodb atlas 가입 -> db create

라이브러리 설치 npm install mongodb@3.6.4

EJS HTML을 조금 더 쓰기 쉽게 만들어 주는 엔진 npm install ejs

ejs 파일은 views폴더 내부에 생성

restapi

서버 만들 때 REST하게 API를 짜는게 좋아요~

API - Application Programming Interface 프로그램들 간의 통신규약

웹 개발시 : 웹서버와 고객간의 소통방법 : 어떻게 해야 서버와 통신을 할 수 있을까

API를 어떤식으로 만들어야 좋은 API일까 HTTP 요청 시스템을 너무 막 사용해 REST 원칙에 의해 사용하면 좋을 것 같다

• Roy Fielding(2000 Architecture for the web) 졸업 논문

REST 원칙 6개 1번이 가장 중요

1. Uniform interface : 하나의 자료는 하나의 URL로 : URL 하나를 알면 둘을 알 수 있어야 함 : 요청과 응답은 정보가 충분히 들어있어야 함
2. Client-Server 역할구분 : 브라우저는 요청만 : 서버는 응답만
3. Stateless : 요청1과 요청2는 의존성이 없어야함
4. Cacheable : 서버에서 보내주는 정보들은 캐싱이 가능해야함 : 캐싱을 위한 버전 같은 것도 관리 잘해야함 (브라우저가 잘 해줌)
5. Layered System
6. Code on Demand

이름짓기 원칙:

• URL을 명사로 작성추천
• 하위문서를 나타낼 땐 /
• 파일확장자(.html)쓰지말기
• 띄어쓰기는 대시(-) 이용
• 자료 하나당 하나의 URL

엔트리 포인트로 설정해 준 이름 그대로 server.js 파일 생성

• 서버를 띄우기 위한 기본 셋팅(express 라이브러리)

  const express = require('express'); const app = express(); app.listen(); - 서버를 열어주는 함수 listen(서버띄울 포트번호, 띄운 후 실행할 코드) {});

• 서버 실행 terminal -> node server.js 명령어 실행 로컬 환경 localhost:8080 -> 8080포트 들어가는 방법

GET REQUEST

app.get(경로, function(req, res) {    

}) 

서버 재실행 자동화 시키기

npm install -g nodemon

설치 후

nodemon server.js 

powershell 보안 오류 시

powershell 관리자 실행 executionpolicy 입력 -> restricted : 허가한 스크립트만 실행할 수 있음 set-executionpolicy unrestricted 입력 -> y

nodemon 실행 성공 시 스크립트 수정시마다 자동 starting 해줌

POST REQUEST

요청 관련 라이브러리 설치

npm install body-parser

설치 후 코드 추가

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended : true}));

body-parser는 요청 데이터(body) 해석을 쉽게 도와줌 form 데이터의 경우 input name속성 사용

• node 설치

• vscode 설치

• npm : 라이브러리 설치를 도와주는 도구 -> node설치시 같이 설치 됨

• package.json : npm으로 라이브러리 설치 시 어떤 라이브러리를 설치했는지 기록해주는 파일

• express 라이브러리 설치

  터미널 npm init 명령 실행 후 엔터 entry point에서 내가 원하는 파일명 설정 npm install express

• 라이브러리를 설치하는 순간 node-modules 파일 설치 됨

• 라이브러리와 관련 된 파일들을 다 담고 있음

express 설치하면 관련 라이브러리 같이 설치 됨

• npm install 설치 시 권한이 없어요 에러

  mac permission denied 에러

npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules

sudo chown -R ownerName: 에러 뜬 경로
sudo chown -R $USER 에러 뜬 경로

• yarn 사용

  yarn 설치 후 PC 재시작 npm install 대신 yarn add 명령어 사용 가능

react-native-webview 설치 후 ios build 실패 에러

해결방법

app.json 파일 내부 react-native-webview 버전 11.15.0 -> 11.14.3으로 변경

• 회사에서 사용 중인 맥이 OS업데이트가 안되서 xcode12.5 사용중인데 xcode13을 사용하면 생기지 않을 문제일 수 있다.

SHA-1 인증서 디지털 지문

안드로이드 스튜디오를 통해 배포용 앱을 생성하기 위해서는 별도의 서명 과정이 필요 이때 사용되는 것이 디지털 인증서인데 이를 SHA-1지문이라 부름

SHA-1 지문 형태

• debug 인증서: 개발, 테스트 과정에서 사용
• release 인증서 : 실제 배포 과정에서 사용

SHA-1 확인 방법

터미널 작성

BUILD SUCCESSFUL 완료 화면이 나오면 스크롤을 올려 SHA1 항목 확인 가능

npm cache clean

# To clear a cache in npm, we need to run the npm cache clean --force command in our terminal:

: npm cache clean --force

# clean: It deletes the all data from your cache folder

# You can also verify the cache, by running the following command:

• npm cache verify
• npm cache clear --force
• npm cache rm --force
• npm cache verify

# how to clean the npm cache

• npm cache clear --force
• npm cache rm --force
• npm cache verify

# clean remove npm with cache

• rm package-lock.json
• rm -R node_modules
• npm cache clean --force

# yarn start-reset-cache

• watchman watch-del-all && rm -f yarn.lock && rm -rf node_modules && yarn start --reset-cache

javascript

childNodes

    - 자식 노드를 찾을 때 사용, 모든 자식을 찾을 때에는 childNodes를 사용하며 배열 형태로 저장 됨

    - element.childNodes; 
        : 모든 자식노드
        : 이 경우 주석(Comment)이나, 요소 앞뒤에 있는 공백(text)이 자식노드로 함께 포함이 됨
        : .nodeName 속성을 통해 요소 종류 확인 가능

    - element.children; 
        : 해당 HTML 요소의 자식요소를 배열의 형태로 반환
        : childNodes와는 다르게 주석이나 줄바꿈 또는 텍스트는 제외

    - element.firstChild; 
        : 첫번째 자식노드

    - element.lastChild; 
        : 마지막 자식노드

    - element.childNodes[i] 
        : 특정 순서의 자식 노드

parentNode

    - 부모 노드를 찾을 때 사용

    - element.parentNode; 
        : 해당 노드의 부모노드

    - element.parentNode.parentNode; 
        : 해당 노드의 조상노드

Sibling

    - 형제 노드 찾을 때 사용

    - 자바스크립트에서는 해당 노드의 앞, 뒤 형제만 찾을 수 있다. 
        : 특정 형제노드를 찾으려면 제이쿼리 사용해야 함

    - element.previousSibling; 
        : 해당 노드의 앞 형제노드

    - element.nextSibling; 
        : 해당 노드의 뒤 형제노드

jQuery

children([선택자])

    - $(e).children(); 
        : 자식 검색,

    - $(e).children.(선택자)
        : 특정 자식노드 찾기

    - 텍스트노드를 반환하지 않음 
        : 텍스트 및 주석 노드를 포함한 모든 자식을 얻으려면 
        => .children().find().children().contents()

    - 첫번째 자식노드
        : $(e).children().first();
        : $(e).children().eq(0);
        : $(e).children(":first");
        : $(e).children(":eq(0)");

    - 마지막 자식노드
        : $(e).children().last();
        : $(e).children(":last");
        : $(e).children().eq($(e).children.length-1);
        : $(e).children(":eq("+($(e).children().length-1)+")");
        : $(e).children().eq(-1);
        : $(e).children(":eq(-1)");

    - n번째 자식노드
        : $(e).children().eq(index);
        : $(e).children(":eq("+index+)");

parent(), parents([선택자])

    - $(e).parent(); 
        : 부모노드 찾기

    - $(e).parents(); 
        : 조상노드 찾기

    - $(e).parents(선택자); 
        : 특정 조상노드 찾기

prev(), prevAll([선택자]), next(), nextAll([선택자]), siblings(선택자)

    - $(e).prev(); 
        : 특정 노드의 이전 형제노드 찾기

    - $(e).prevAll(); 
        : 특정 노드의 모든 이전 형제노드 찾기

    - $(e).prevAll(선택자); 
        : 이전 형제노드 중 특정 노드 찾기

    - $(e).next(); 
        : 특정 노드의 다음 형제노드 찾기

    - $(e).nextAll();
        : 특정 노드의 모든 다음 형제노드 찾기

    - $(e).nextAll(선택자); 
        : 다음 형제노드 중 특정 노드 찾기

    - $(e).siblings(선택자); 
        : 특정 형제노드 찾기

filter([선택자]), find([선택자]), eq(index)

    - 요소 필터링, 자손노드찾기

    - $(e).filter(선택자); 
        : 찾은 노드 중에서 특정 노드만 필터링

    - $(e).find(선택자); 
        : 현재 노드의 자손노드 중 특정 노드 찾기

    - $(e).eq(index) 
        : index 번호에 해당하는 요소 찾기

javascript

    document.getEelmentsByTagName(태그이름)
    document.getEelmentById(아이디);
    document.getEelmentsByClassName(클래스이름); //    HTMLCollection 반환
    document.getElementsByName(name속성값);         
    document.querySelector(CSS 선택자);         //    선택자에 해당하는 첫번째요소만 선택
    document.querySelectorAll(CSS 선택자)       //    선택자에 해당하는 모든요소, 반환객체(nodeList)

* HTMLCollection
    - 요소의 문서 내 순서대로 정렬된 일반 컬렉션(arguments 처럼 배열과 유사한 객체)
    - 리스트에서 선택할 때 필요한 메서드와 속성을 제공    


* 속성
    - HTMLCollection.length
        : 컬렉션 항목의 갯수를 반환


* 메서드
    - HTMLCollection.item(index)
        : 리스트에서 주어진 인덱스의 노드를 반환, 인덱스가 범위 밖일 경우 null을 반환
        : HTMLCollection[index] 같은 기능
    - HTMLCollection.namedItem(name or id)
        :  리스트에서 ID 또는 이름 속성이 주어진 문자열과 일치하는 노드를 반환, 
            이름 속성판별은 HTML에서만 최후의 수단으로 쓰이며 참조하는 요소가 name 속성을 지원해야 함, 
        : 일치하는 요소가 없으면 null을 반환
        : HTMLCollection.name(or id) 같은 기능

jQuery

```javascript $('*'); //모든 엘리먼트 선택 $('div'); // Tag 이름으로 노드 찾기 $('#idName') // id 이름으로 노드 찾기 $('.className'); // class 이름으로 노드 찾기 $('ul.className'); // ul엘리먼트 중 class 이름이 className인 엘리먼트 선택 $('ul, div'); // ul 및 div 태그 선택 $('div img'); // div의 자손노드 중 Tag 이름이 img인 모든 엘리먼트 선택 $('ul .className'); // ul의 자손노드 중 class 이름이 className 인 엘리먼트 선택 $('ul>li'); // ul Tag의 바로 아래 자식노드 중 li Tag인 엘리먼트 선택

 * 필터
    :not(selector)        // 셀렉터와 일치하지 않는 요소들 리턴
    :first                // 선택된 요소 중 첫 번째 요소
    :last                // 선택된 요소 중 마지막 요소
    :even                // 선택된 요소 중 짝수 인덱스 요소들
    :odd                // 선택된 요소 중 홀수 인덱스 요소들
    :eq(index)            // 선택된 요소 중 지정된 index 번호를 가진 요소
    :gt(index)            // 선택된 요소 중 지정된 index 번호보다 큰 인덱스 요소들
    :lt(index)            // 선택된 요소 중 지정된 index 번호보다 작은 인덱스 요소들 
    :header                // h1 ~ h6 요소들
    :animated            // 애니메이션이 적용된 모든 요소들
    :focus                // 현재 포커스를 가지고 있는 요소
    :contains("text")    // "text"를 가지고 있는 요소들
    :empty                // 자식 요소가 없는 모든 요소들
    :parent                // 자식 요소를 가지고 있는 모든 요소들
    :has(selector)        // selector에 부합하는 요소를 하나 이상 가지고 있는 요소들
    :hidden                // 화면에서 숨겨진 모든 요소들
    :visible            // 공간을 차지하고 있는 모든 요소들
    :nth-child(expr)    // expr 순번의 자식 요소
    :first-child        // 첫번째 자식 요소
    :last-child            // 마지막 자식 요소
    :only-child            // 요소의 자식 요소가 하나뿐인 요소

    //예시
    $('div:not("#summary")');    // #summary를 제외한 나머지 div 태그들을 선택
    $("li").eq(3);                // 찾은 노드 중 4 번째 노드에 접근하기
    $("div:has(p)");            // <p> 요소를 가진 모든 <div> 요소들
    $("ul li:nth-child(2)");    // 두 번째 <li> 요소


* 속성옵션 필터
    $("[attr]");                // attr 속성을 가진 모든 요소들
    $("el[attr]");                // 속성 attr 를 포함한 모든 el 노드 찾기
    $("el[attr=val]");            // 속성 attr 의 값이 val 인 모든 el 노드 찾기
    $("el[attr!=val]");            // 속성 attr 의 값이 val이 아닌 모든 el 노드 찾기
    $("el[attr^=val]");            // 속성 attr 의 값이 val 로 시작하는 모든 el 노드 찾기
    $("el[attr$=val]");            // 속성 attr 의 값이 val 로 끝나는 모든 el 노드 찾기
    $("el[attr*=val]");            // 속성 attr 의 값이 val 을 포함하고 있는 모든 el 노드 찾기
    $("[attribute|='value']");    // 속성값이 value값과 일치하거나 value- 으로 시작하는 요소들
    $("[attr1][attr2]");        // 지정된 속성중 하나를 가진 모든 요소들

    // 예시
    $("div[class*=test]");        // class의 값이 test를 포함하고 있는 모든 div 노드

  * 폼 요소
    폼 요소의 값 조회하기
    <input>,<textarea>,<select> 요소의 값을 알아낸다.
    .val()
     폼 필터
    :input, :text, :password, :radio, :checkbox, :submit,
    :image, :reset, :button, :file, :selected
    :enabled, :disabled, :checked

    //예시
    $('input[name="checkbox"]:checked'); 
    // name 속성의 값이 checkbox인 input 태그 중 checked 되어있는 요소 찾기

로컬서버와 개발서버가 같은 DB를 바라보고 있는 경우 DB에는 값이 있어 경로는 가져와지는데 실제 디렉토리에 이미지가 없어 엑박이 뜨는 경우가 생김 ..

이미지가 없을 시 엑박 대처 속성 onerror 사용

<img src="/image/img.jpg" onerror="this.src='대처이미지경로.jpg'" alt="" />

CSS 백그라운드 이미지 로드

<img /> 태그를 사용하지 않고 style 속성을 사용하는 경우 노드에 둘 이상의 배경이미지를 가지게 할 수 있음

<div style="background-image:url('/image/img.jpg') ,url('대처이미지경로.jpg')"></div>