매핑(mapping)이란?

웹 개발에서 매핑은 상황에 따라 다른 개념을 나타낼 수 있다.

1. URL 매핑/라우팅

웹 프레임워크(예: Node.js의 Express 또는 Python의 Django)의 맥락에서 

매핑은 종종 URL 라우팅 또는 URL 매핑을 나타낸다

여기에는 URL(또는 경로)과 해당 URL에 대한 요청을 

처리하는 기능 또는 컨트롤러 간의 대응을 정의하는 작업이 포함이다

이는 애플리케이션을 구성하고 구조화하는 데 도움된다.

Express.js(Node.js)의 예:

app.get('/home', (req, res) => {

    res.send('Welcome to the home page!');

});

2. 데이터 매핑

데이터 매핑에는 서로 다른 두 데이터 모델 간의 링크를 생성하여 

둘 사이의 데이터 전송을 허용하는 작업이 포함된다.

이는 데이터베이스, API 또는 애플리케이션의 다른 부분으로 작업할 때와 

같은 다양한 시나리오에서 발생할 수 있다.

JavaScript의 예:

const originanlData = { id: 1, name:  'kim', age: 30 };

const mappedData = { userId: 1, userName: 'kim',  userAge: 30 };

3. 지리적 매핑:

지리 정보 시스템(GIS) 또는 매핑 라이브러리(예: Leaflet 또는 Google Maps API)의 

맥락에서 매핑에는 지리적 데이터 표시 및 상호 작용이 포함된다.

여기에는 점 그리기, 모양 그리기, 지도에 정보 레이어 표시 등이 포함될 수 있다.

Leaflet(대화형 지도용 JavaScript 라이브러리) 사용 예:

const myMap = L.map('mapid').setView([51.505, -0.09], 13);

L.marker([51.505, -0.09]).addTo(myMap).bindPopup('Hello, this is a marker!');

깃허브 5강(협업)

 1. 여러 컴퓨터에서 원격 저장소 함께 사용하기

(1) git clone 원격 저장소 주소 : 현재 폴더에 소스 코드를 다운 받아서 동기화

(2) git remote -v : 원격 저장소와 연결 확인

(3) git push : 자신의 컴에서 작업한 것을 원격 저장소에 올리기

(4) git pull : 원격 저장소의 최신 커밋 가져오기

2. 원격 브랜치 정보 가져오기

(1) git fetch : 원격 저장소의 정보를 가져오기

(2) git status : 현재 내 컴퓨터와 원격 저장소의 커밋 상태를 확인

(3) git checkout FETCH_HEAD : fetch 에서 가져온 최신 커밋을 확인

3. 여러 명이 협업 하기

(1) 깃허브 저장소 -> Settings -> Collaborators -> Add people -> 협업자 이메일  -> 등록

(2) git init : 등록자 컴퓨터 폴더 초기화

(3) git config user.name "협업자 이름" : 협업자 이름 등록

(4) git config user.email "협업자 메일 주소" : 협업자 이메일 등록

(5) git clone 원격 저장소 주소 : 현재 프로젝트 최신 커밋 다운받기

(6) git push -u origin master : 협업자가 작업한 내용 처음 원격 저장소에 넣기

(7) git push : (6) 이후에는 이 명령어로 넣음

깃허브 4강(백업)

1. 깃 허브란? 

3강까지는 자신의 컴퓨터에 버전 관리를 했다면 깃 허브는 외부 서버에 백업하는 것이다.

먼저 깃 허브에 가입하고, 주소를 획득하여 올리는 것이 시작이다.

2. 내 컴에 있는 깃을 깃허브에 연결하는 법

(1) 깃으로 관리 하고 있는 폴더로 이동

(2) git remote add origin 깃허브에서 복사한 주소

(3) git remote -v : 깃허브에 제대로 연결되었는지 확인

3. 깃 허브에 올리기, 내려받기

(1) git push -u origin master : 컴 저장소의 브랜치를 원격 저장소의 master에 연결하기 위한 것으로 한번만 사용

(2) git push : (1) 이후에는 이 명령어로 원격 저장소에 올림.

(3) git pull origin master : 원격 저장소의 최신 버전을 가져옴

4. 깃 허브에 SSH 원격 접속하는 법

(1) 홈 디렉토리에서 ssh-keygen : 홈디렉토리/ .ssh에 공개키, 비공개키 생성 명령어

(2) cat id_rsa.pub : 공개키 미리 보기로 공개키 문자열 복사

(3) 깃허브 로그인 -> 사용자 -> settings ->  SSH and GPG keys -> New SSH key 클릭 후 이름 + 공개키 문자열 붙이기 -> 저장

(4) 깃허브 -> Code -> SSH 주소 복사

(5) git remote add origin SSH 주소 붙이기

깃허브 3강(깃, 브랜치)

 1. 브랜치란? 

개발을 하다 보면 따로 분리 되어 개발을 진행해야 하는 경우가 생기는데 

그때 메인 개발과 별도로 서브 개발은 따로 분리 하였다가 

완성 후 병합하는 것을 의미 한다.

2. 브랜치, 병합 관련 명령어

git branch : 현재 브랜치를 확인

git branch 브랜치명 : 브랜치를 새로 생성

git checkout 브랜치명 : 해당 브린치로 이동

git log : 커밋 확인 

--oneline : 커밋 간단 확인

--branches : 각 브랜치의 커밋 확인

--graph : 브랜치와 커밋의 관계를 간단한 그래픽으로 표시

git reset 브랜치 해시값 : 현재 커밋을 다른 브랜치에 있는 해시값의 위치로 되돌림

git checkout master : 마스터로 이동

git merge 병합할 브랜치 명 : 마스터와 브랜치를 병합(마스터로 이동 후 사용해야 함)

git branch -d 삭제할 브랜치명 : 병합이 끝난 브랜치를 삭제(-D는 병합 전 강제 삭제)

git stash : 작업 트리의 수정 내용을 따로 보관해서 감춤

git stash pop : 따로 보관 했던 수정 내용을 꺼냄

깃허브 1~2강(명령어)

1. git으로 할 수 있는 것?

버전 관리, 백업, 협업

2. 깃 프로그램 종류

깃허브 데스크톱(깃허브에서 제공하는 GUI) : https://desktop.github.com/

토터스 깃(윈도우 전용) : https://tortoisegit.org/

깃(윈도우, 맥, 리눅스) : https://git-scm.com/

3. 깃 환경 설정

git config --global user.name "사용자이름(영문)"

git config --global user.email "깃허브 가입 이메일"

4. 자주 쓰는 리눅스 명령어

pwd : 현재 위치의 경로

ls : 디렉터리와 파일 표시

-ls 옵션 -

-a : 숨긴 파일과 디렉터리도 함께 표시

-l : 파일이나 디렉터리 상세 정보를 함께 표시

-r : 파일의 정렬 순서를 거꾸로 표시

-t : 파일 작성 시간 순으로 내림차순 표시

cd : 디렉터리 이동

cd .. : 상위 디렉터리로 이동

cd ~ : 홈 디렉터리로 이동

mkdir  : 디렉터리 생성

rm : 디렉터리 삭제 (-r 옵션 시 하위 디렉터리와 파일까지 함께 삭제)

5. 자주 쓰는 깃 명령어

git init : 현재 디렉토리에 후 깃 저장소 생성

git status : 깃 상태 확인

git add 파일명 : 수정한 파일 스테이징 (git add . : 전체 파일 스테이징)

git commit : 커밋

-m : 커밋 + 변경사항 메세지 기록

--amend : 커밋 메세지 수정 

git log : 저장소에 저장된 커밋 기록 확인(--stat 옵션시 : 커밋 관련 파일까지 출력)

git diff :  작업 트리에 있는 파일과 스테이지에 있는 파일 비교

git checkout --파일명 : 작업 트리에서 수정한 파일 되돌리기

git reset HEAD 파일이름 : 스테이징 되돌리기

--soft HEAD^ : 최근 커밋 전 상태로 작업 트리 되돌린다.

--mixed HEAD^ : 최근 커밋 + 스테이징 전 상태로 되돌리기(기본)

--hard HEAD^ : 최근 커밋 + 스테이징 + 파일 수정 전 상태로 되돌리기

--hard 해시 값 : 특정 커밋으로 돌아가고 그 이후 버전 삭제

git revert 해시 값 : 커밋은 되돌리되 해시값 이후의 커밋 삭제는 안함.

자바스크립트 10강(브라우저 객체 모델)

 1. 브라우저 객체 모델이란? 

브라우저 전체를 객체로 관리하는 것. 최상위 객체는 window 객체다.

2. 자주 사용하는 브라우저 내장 객체

window : 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체

Document : 웹 문서에서 <body> 태그가 만나면 만들어지는 객체. HTML 문서 정보를 가지고 있다.

History : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체

Location : 현재 페이지에 대한 URL 정보를 가지고 있는 객체

Navigator : 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체

Screen : 현재 사용 중인 화면 정보를 다루는 객체

3. Window 객체에서 자주 사용하는 함수

alert() - 알림 창을 표시한다.

blur() - 창에 포커스를 제거 한다.

close() - 현재 열려 있는 창을 닫는다.

confirm() - 확인, 취소가 있는 확인 창을 표시한다.

focus() - 현재 창에 포커스를 부여한다.

moveBy() - 현재 창을 지정한 크기 만큼 이동한다.

moveTo() - 현재 창을 지정한 좌표로 이동한다.

open() - 새로운 창을 연다.

postMessage() - 다른 창으로 메세지를 전달한다.

print() - 현재 문서를 인쇄 한다.

prompt() - 프롬프트 창에 입력한 텍스트를 반환한다.

resizeBy() - 지정한 크기만큼 현재 창 크기를 조절한다.

resizeTo() - 동적으로 브라우저 창의 크기를 조절한다.

scroll() - 문서에서 특정 위치로 스크롤 한다.

scrollBy() - 지정한 크기만큼씩 스크롤 한다.

scrollTo() - 지정한 위치까지 스크롤 한다.

showModalDialog() - 모달 창을 표시 한다.

sizeToContent() - 내용에 맞게 창 크기를 맞춘다.

stop() - 로딩을 중지한다.

4. Navigator 객체 속성

appCodeName - 브라우저 이름을 문자열로 반환한다.

appName - 브라우저 공식 이름을 문자열로 반환한다.

appVersion - 브라우저 버전을 문자열로 반환한다.

battery - 배터리 충전 상태를 알려주는 정보가 담긴 객체를 반환한다.

connection - 브라우저 장치의 네트워크 정보가 담긴 객체를 반환한다.

cookieEnabled - 쿠기 정보를 무시한다면 false, 그렇지 않으면 true를 반환한다.

geoloction - 모바일 기기를 사용한 위치 정보가 담긴 객체를 반환한다.

maxTouchPoints - 장치에서 동시에 터치 가능한 포인트가 몇 개인지 반환한다.

platform - 브라우저 플랫폼 정보를 가지고 있는 문자열을 반환한다.

userAgent - 현재 브라우저 정보가 있는 사용자 에이전트 문자열을 반환 한다.

5. History 객체 속성과 함수

length - 현재 브라우저 창의 History 목록에 있는 항목의 개수를 반환한다.

back() - 이전 페이지를 현재 화면에 불러온다.

forward() - 다음 페이지를 현재 화면에 불러온다.

go() - 현재 페이지를 기준으로 상대 위치에 있는 페이지를 현재 화면에 불러온다. 

        go(1)은 다음 페이지를 가져오고, go(-1)은 이전 페이지를 가져온다.

6. Location 객체 속성과 함수

hash - URL 중 #으로 시작하는 해시 부분을 나타낸다.

host - URL의 호스트 이름과 포트 번호를 나타낸다.

hostname - URL의 호스트 이름을 나타낸다.

href - 전체 URL을 표시한다.

pathname - URL 경로를 나타낸다.

port - URL의 포트 번호를 나타낸다.

protocol - URL의 프로토콜을 나타낸다.

password - password 정보를 저장한다.

search - URL 중 ?로 시작하는 검색 내용 부분을 나타낸다.

username - username 정보를 저장한다.

assign() - 현재 문서에 새 문서 주소를 할당해 새 문서를 가져온다.

reload() - 현재 문서를 다시 불러온다.

replace() - 현재 문서의 URL을 지우고 다른 URL의 문서로 교체 한다.

toString() - 현재 문서의 URL을 문자열로 반환한다.

자바스크립트 9강(폼과 자바스크립트)

 1. 폼 요소에 접근하는 여러가지 방법

- id 값은 폼 요소 1개에 접근하여 사용

<input type="text" class="input-box" id="billingName" name="billingName">

document.querySelector("#billingName").value;

- class 값은 여러 요소를 한번에 가져와 배열 형태로 저장하고 사용

<input type="text" class="input-box" id="billingName" name="billingName">

document.querySelectorAll(".input-box").value;

2. 폼 검증 하기

<input> 태그 유형으로 폼 검증

<input type="email"> : 이메일 주소 필드, 이메일 주소 형식에 맞지 않으면 오류 메세지 표시

<input type="tel"> : 전화번호 필드, 숫자가 아닌 값이 입력되면 오류 메세지 표시

<input type="url"> : 사이트 주소 필드, http: 로 시작하지 않으면 오류 메세지 표시

3. <input> 태그의 속성

autocomplete : 자동 완성 기능을 켜고 끄는 속성

autofocus : 해당 필드에 마우스 커서를 자동으로 표시

placeholder :  필드 안에 힌트가 표시되고 사용자에게 어떤 내용을 입력해야 하는지 알려줌.

required : 필수 입력 항목으로 지정. 필드가 작성되지 않으면 오류 메시지 표시