1.문서 객체 모델(DOM)이란?

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 출처 쉽게 생각하면 자바스크립트에선 html언어를 직접 해석하고 조작할 수 "없다" 따라서 자바스크립트가 html을 해석 할 수 있는 문법으로 변환을 한다면? (array나 object 형식으로 담아서 전달해주거나?) 원하는 자료들을 html에서 조작할 수 있을듯? 즉 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한걸 DOM이라고 한다.

2. 특징

• 브라우저는 HTML 문서를 위에서 부터 읽으며 DOM을 생성
• 자바스크립트는 DOM이 생성된 경우에만 HTML을 변경할 수 있다. -혹은 html코드를 먼저 읽게하고 js를 실행하도록 하게 할 수 있다. "addEventListener('DOMContentLoaded')"같은걸로 -요즘은 그냥 자바스크립트를 태그 끝나기 전에 전부 작성하기 때문에 안해도..

3. 요약정리

DOM은 HTML 문서에 대한 인터페이스 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용 DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.

• 항상 유효한 HTML 형식입니다.
• 자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
• 가상 요소를 포함하지 않습니다. (Ex. ::after)
• 보이지 않는 요소를 포함합니다. (Ex. display: none) 참고자료

1. Output

여러개의 entry 파일을 한번에 output 하고 싶을때 Output가이드

1. entry안에 이름을 붙여서 각각 지정해준다.

   entry: {
    index: "./source/index.js",
    about: "./source/about.js",
   },

2. output에는 각 이름이 들어갈 수 있는 함수를 넣어준다.

   output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name]_bundle.js",
   },

3. npx webpack >> 각 파일이 번들링 된것을 볼 수 있다.

2. Plug In

loader는 가지고있는 모듈들을 최종적인 output으로 만들어가는 과정에서 사용

규정되어있는 형태

plugin은 만들어진 최종결과물(output)을 변형하는것

복합적+자유로운 형태 PlugIn가이드

2-1 HtmlWebpackPlugin

여러 html 파일들을 탬플릿화 시키고 싶거나, 의존성을 가지고 있는 js파일들을 직접 삽입시켜주고 있으니 html파일들을 자동으로 만들어 주고 싶거나, 사용하는 plugin

<!--설치-->
npm install -D html-webpack-plugin

<!--webpack.config.js파일에 삽입-->
plugins: [new HtmlWebpackPlugin()],

<!--plugins 안에 인자값 넣어줘야함 Options참고-->
plugins: [
new HtmlWebpackPlugin({
  template: "./source/index.html",
  filename: "./index.html",
}),],

<!--"chunks" 활용 Options참고-->
plugins: [
new HtmlWebpackPlugin({
  template: "./source/index.html",
  filename: "./index.html",
  chunks: ["index"],
}),
new HtmlWebpackPlugin({
  template: "./source/about.html",
  filename: "./about.html",
  chunks: ["about"],
}),],

<!--기존 public디렉토리에 있는 파일 지우고 새로 생성(Mac)-->
rm ./public/*.*; npx webpack

<!--꿀팁 : 변경사항있을때 감지하면서 자동으로 컴파일 해줌-->
npx webpack --watch

출처: 생활코딩

1. Mode?

• 기본값모드(개발자모드) development
• 배포되는모드 production
• 아무것도 세팅하지않은 모드 none 방향성에 따라 모드를 선택할 필요가 있다.

<!--webpack.config.js 파일 안에서 모드 선택 가능-->
module.exports = {
mode: "development"
}

webpack.config.prod.js 같이 배포용 파일을 하나 더 만들어서 개발용,배포용 선택해서 작업 가능

2. Loader?

로더는 모듈의 소스 코드에서 적용되는 변환이다. import나 로드를 통해 파일들을 전처리 할 수 있다. 그러므로 로더는 다른 빌드 툴들의 "tasks" 와 유사하며, 프론트엔드 빌드 과정을 처리하는 강력한 방법을 제공한다. 로더는 (TypeScript 같은) 다른 언어를 자바스크립트로 변경하거나 인라인 이미지를 data URL로 변경할 수 있다. 심지어 로더는 CSS파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공한다.  출처: https://ibrahimovic.tistory.com/52 [Web Standard:티스토리]
여러가지 파일들을 번들링해서 간단하게 만들어주는것 : 번들러 웹팩은 js파일뿐만이 아닌 css나 여러 파일들을 번들링 해주는 여러 loader가 존재

css-loader / style-loader

• css-loader : css파일을 읽어와서 webpack으로 가져오는 loader

• style-loader : 가져온 css코드를 웹페이지 안에 style태그안에 주입하는 loader 뒤쪽에 있는 loader가 먼저 동작함( chaining ) 수많은 로더들

  npm install -D css-loader style-loader

  module: { rules: [

  {
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
  },

  ],}

  import css from "./style.css";

출처 : 생활코딩

1. 기본적인 설치를 위해서

웹팩을 설치하기 위해서 해당 프로젝트를 node.js의 패키지 프로젝트로 만들어보자 npm 설치

<!--현재 디렉토리를 node.js의 프로젝트 폴더로 선언-->
<!--package.js 설치됨. 중요-->
npm init

<!--"-D"는 devDependencies 에 설치되는것 = "--save-dev"
개발을 하기위한 옵션을 설치할때 사용 -->
npm install -D webpack webpack-cli

<!--Webpack으로 
source폴더의 index.js 를 entry(시작점)으로 삼아서 
public폴더의 index_bundel.js의 파일이름으로
output(출력) 하고싶을때-->
npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js

<!--그냥 "--output" 으로 했을땐 오류가 났었다. 버전이슈인듯-->

파일 생성이 된걸 확인해 보자 추가로 출력할 html 파일에서 script 안에 index_bundle.js를 불러와주면 완성!

2. Webpack의 흐름

출처 : 생활코딩 왼쪽에 있는 여러가지 자원들(실제 코딩할때 만들어지는) : INPUT 을 어떻게 가공해서(Webpack으로) : PROCESS 단순한 형태의 몇몇파일로 만들어지는 : OUTPUT

3. Webpack.config.js

참고사이트:webpack

webpack.config.js 파일을 만들어서 관리해보자

const path = require("path");

module.exports = {
  entry: "./source/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "index_bundle.js",
  },
};

webpack.config.js 파일안에 위의 내용은

npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js

터미널에서의 해당 명령어와 동일하다.

<!--webpack.config.js 실행-->
npx webpack --config webpack.config.js
<!--파일 이름이 webpack.config.js라면 --config~~생략가능-->
npx webpack

1. Webpack?

출처:webpack공식 웹팩은 무엇일까? 그전에 Bundler는 무엇일까?

2. Bundler?

(Bundler없이)완성된 웹사이트를 로딩을 하면 만드는데 필요했던 js나 이미지 등 여러 파일들을 전부 하나씩 로드를 해온다.. 즉, 서버와의 로딩이 많을 수록 앱은 느리게 작동 추가로 수많은 js파일들이 서로같은 변수나 함수의 이름을 사용할때 ! 충돌! 요런 문제들을 해결하기 위해 등장한것이 바로 Bundler! (여러개의 파일들을 묶어주는 도구)

• Webpack

• Broserify
• Parcel
• Rollup 등등

다시 Webpack!

그중 웹팩을 공부해볼것이고, 웹팩을 이용하면 하나의 js파일에 js파일 뿐만이 아니라, css나 여러 이미지 등 모든걸 하나로 합치고! 자동화 할 수 있다. (믹서기..?)

3. Module?

출처:js.info 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
즉 모듈이란? 자바스크립트를 이용하여 만들게 되는 app의 규모가 커지게되면서 여러 충돌도 일어나게 되었고 즉 파일을 분할해야할 필요성이 생기며 탄생한 분할파일 그자체이다. 또한 모듈은 대개 클래스 하나 혹은 특정 목적을 가진 복수의 함수로 구성된 라이브러리이다. 추가+ JavaScript에서의 모듈이란, ES2015(ES6) 이후부터 제공하는 import / export 키워드를 통해 스크립트의 변수나 함수를 타 스크립트에서 이용할 수 있도록 기능을 공유하는 것이다.

module을 이용한 번들링 hello.js 와 world.js는 export 해주었다.

<html>
  <head> </head>
  <body>
    <h1>Hello, Webpack!</h1>
    <div id="root"></div>
    <script type="module">
      import hello_word from "./source/hello.js";
      import world_word from "./source/world.js";
      document.querySelector("#root").innerHTML = hello_word + " " + world_word;
    </script>
  </body>
</html>

🛠단점 여러 파일을 다 받아와야하니 파일 개수가 많아지면... 네트워크 커넥션이 많아질수록 사용자,제공자 입장에서 더많은 컴퓨팅 파워 사용 서비스 이용자 입장 : 서비스 속도 down 서비스 제공자입장 : 컴퓨터 자원 up >> money up

4. Webpack을 사용하면?

Refactoring

리팩터링(refactoring)은 소프트웨어 공학에서 '결과의 변경 없이 코드의 구조를 재조정함'을 뜻한다. 주로 가독성을 높이고 유지보수를 편하게 한다. 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 바꾸고 개선하는 유지보수 행위이다.
리팩터링의 잠재적인 목표는 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 소프트웨어의 기능을 보존하는 것이다. 리펙터링은 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과를 가지며, 이러한 이점은 소스 코드의 유지 보수성을 개선하고 확장성을 개선하기 위해 더 단순하고, 깔끔하거나, 표현력이 뛰어난 내부 아키텍처 또는 객체 모델을 만들 수 있게 한다. 그리고 소프트웨어 엔지니어는 더 빠르게 수행되거나 더 적은 메모리를 사용하는 프로그램을 작성해야 하는 지속적인 과제에 직면해 있기에 성능 향상이 리팩터링의 또다른 목표가 된다.

웹팩을 사용하면 얻을 수 있는 효과는? 구동되는 방법은 그대로 유지하면서 내부의 코드를 더욱 효율적으로 바꿀 수 있다. 코드의 모습은 유지하되 구형 브라우저에서 사용가능 여러개의 파일을 하나로 묶어주는 bundelr기능

출처 : 생활코딩

1. Why?

협업시 마구잡이로 브랜치를 만들어 쓸 경우 가시성이 떨어지고 꼬일 가능성이 높다.

2-1. How? (GitFlow)

GitFlow 전략은 크게 5개의 브랜치로 나눠서 작업할 수 있다.

• main
• develop (개발용 branch)
• feature (develop에 기능추가 branch)
• release (develop branch를 main branch에 합치기 전에 최종 테스트용)
• hotfix (main branch 버그 해결용)

  Step.1
  

  main 브랜치의 사본을 develop브랜치로 만들어 개발은 develop브랜치에서만 할 수 있게 한다. (main 브랜치 날라가면..어휴..)

  Step.2
  

  신기능은 feature/뭐뭐~ 로 나눠서 기능개발하고 develop에 합친다.

  Step.3
  

  기능들이 완성된것 같으면 main에다 바로 합치기전(상남자면 합쳐도된다고 코딩애플센세님께서 말씀하셨지만..) 유저 테스트를 받거나 여러 버그를 대처한다. 출시 준비 단계 / 완성되면 main에다 merge한다.

  Step.4
  

  배포 이후 버그를 발견하였을때, main에서 branch해서 버그 수정 가능
• 수정이 완료되면 main 브랜치에 직접 merge
• 당연히 develop 브랜치에도 merge 필수

  Fin.

  특징 출시된 버전의 안정성이 중요한 프로그램들, 아직 뼈대가 확실하지 않아 연구식으로 개발하는 프로그램들은 git flow가 적절

2-2.How?(Trunk-Based)

Trunk-Based 전략은? main 브랜치 하나만 운영 하면서 수정이 필요할때마다 브랜치를 메인에서 뽑아다 수정후 main으로 merge 해주는 방식 = github flow랑 유사

• 브랜치 마다 작명을 잘해주는것이 좋다.
• 브랜치의 기능을 main에다 merge 완료하면 브랜치 삭제가능
• main 브랜치의 수정본을 필요할때마다 유저들에게 배포
  특징 코드를 한 브랜치에서만 관리하기때문에 편리함 main 브랜치에서 실수하면 큰일나기 때문에 빡세게 테스트 필요

출처 : 코딩애플

1. Git hub란?(+repository)

로컬에서 작업할때는 .git 같은 폴더에 git 파일들이 저장되지만 (컴퓨터 날라가면 같이 날라가겠..죠??) git hub에 repository를 "원격"으로 "저장"할 수 있게 제공해주는 "hub" 즉 로컬에서의 repository 는 .git이고 git hub에선 repository를 생성하여 "원격저장소"로 활용 할 수 있다.

2. Repository 생성,연결

생성 후 작업폴더로 이동 깃헙에 만든 원격저장소(repository)연결하기

<!--처음 실행-->
git init
<!--commit-->
git commit -m 커밋메세지
<!--메인 브랜치 생성(main or master)-->
git branch master
<!--git hub에서 만든 repository 연결-->
git remote add origin https://~~~
<!--메인 브랜치 push로 최신화-->
git push -u origin master

git에서 변수생성가능(길고 복잡한것=주소 를 변수에 저장해서 사용하자)

git remote add 변수명 (변수에 담을것=주소)

git push "-u" 를 사용하면 주소를 기억하라는 뜻이기에 한번 사용하면 그냥 git push로 사용해도 바로 push 가능

3-1. 협업하기(git clone,pull)

단순히 깃헙에서 .zip파일로 받아오는 방법도 있지만,git clone을 사용하면 좀더 간편하다. 추가로 세팅에서 공동협업자(collaborators)로 등록을 해줘야 push가능 git clone 복사할저장소의 주소

팀원이 push를 한 상태라면, 본인이 또 push를 바로 할 수 없다.

해당 상황이라면 git pull로 팀원이 올려둔 상황을 먼저 맞춰서 받아줘야한다. 원격 저장소 최신 내용이 로컬 저장소에 있을때만 git push가능

git pull (origin=주소/-u해놨으면 생략가능) 특정 브랜치명(특정 브랜치만 가져올 수 있음)

<!--원격저장소 신규 commit 가져오기-->
git fetch

git pull = git fetch+ git merge동시에 해주는 명령어

3-2. 브랜치로 협업하기(pull request)

깃헙 온라인에서도 브랜치 생성 가능

    <!--로컬에서 브랜치 생성-->
    git branch 브랜치명

    <!--브랜치 이동-->
    git switch 브랜치명

    <!--브랜치에서 작업한내용들 커밋하고 푸쉬할때-->
    git push origin 올릴브랜치명

git hub에서 브랜치가 push한거 볼 수 있음 (브랜치 이름 안겹치게 주의!) 브랜치를 merge하기전에 의견을 충분히 나누고 합쳐야하기때문에, git hub온라인에서 다같이 의견조율 후 merge를 한다.

pull request = merge 하는곳 어떤 브랜치를 어디로 합칠것인지 선택가능 의견(코멘트)를 남길 수 있고, 어떤 브랜치방식으로 합칠지 정할 수 있다.

추가*conflict(충돌) 날때 vscode내에서 보면 좀 더 수정하기 편한듯요

1. mac os git 설치법

homebrew 설치

🍺 homebrew https://brew.sh/index_ko

homebrew가 설치되었다면

brew install git

설치되었는지+버전확인

git --version

2. git add, commit

git add 파일명
<!--해당 파일을 스테이징상태로 만든다.(커밋전단계)-->

git add .
<!--모든 파일을 스테이징상태로 만든다.-->

git commit -m '작명'

🤔스테이징이란? 현재 작업폴더에서 repository(저장소)로 이동하기 전에 대기장소

3. 상태 확인

git status

현재 작업중인 branch 확인가능 사실 VScode 사용하면 gitLens*나 *gitGraph 쓰면 더 편함

git log --all --oneline --graph

커밋내역 그래프로 확인가능 (이역시 gitGrapch가 좀더 보기 편한듯)

git diff 
<!--commit번호끼리 비교 가능-->
git difftool 
<!--commit번호끼리 비교 가능-->

커밋끼리 비교가능

4. branch

git branch 브랜치이름
<!--브랜치 생성-->
git switch 브랜치이름
<!--해당 브랜치로 이동-->
git branch -d 브랜치이름
<!--merge완료된 브랜치 삭제-->
git branch -D 브랜치이름
<!--merge안된 브랜치도 그냥 삭제해버리기-->

브랜치는 기존코드의 복사본

5. merge

<!--합치고 싶은 브랜치에서 작업-->
git merge 합칠브랜치이름

<!--rebase and merge-->
git switch 새로운브랜치
git rebase main
git switch main
git merge 새로운브랜치

<!--squash and merge-->
git switch master
git merge --squash 브랜치명
git commit -m 작명

브랜치끼리 수정된 파일이 겹치지 않으면 그대로 성고 겹치는 파일이 있으면 충돌(conflict)발생 충돌된 파일에서 적용할 코드를 선택하여 저장하면 브랜치 완료

merge의 여러종류들

• 3-way merge
• fast-forward merge
• rebase and merge
• squash and merge

3-way merge

각 브랜치에 신규 커밋이 1회 이상 있을때 두 브랜치를 합쳐 새로운 커밋을 생성하는 merge의 기본 작동방식

fast-forward merge

새로운 브랜치에만 커밋이 있고 기존 브랜치에 커밋이 없어서 새로운 브랜치가 메인이 되는 브랜치

rebase and merge

브랜치의 시작점을 다른 커밋으로 옮겨주는것. 3-way merge를 강제로 fast-forward merge로 하고싶을때 (간단하고 짧은 브랜치들을 rebase하면 깔끔) (conflict 주의)

squash and merge

3-way merge는 양이 많아지면 복잡하고 더러워보임 (git log에 3-way merge된 브랜치들의 commit 내역도 같이 출력) 그래프로 보면 연결된 선을 끊어버리고 메인에서 이어지는걸로 보임 rebase는 시작점 자체를 다른 브랜치에서 이어지도록 하게함

6. 실수를 되돌리고 싶을때

    <!--파일의 상태를 마지막 commit으로 돌리고 싶을때-->
    git restore 파일명

    <!--입력한 commit아이디 시점으로 복구-->
    git restore --source 커밋아이디 파일명

    <!--특정 파일을 staging 취소-->
    git restore --staged 파일명

    <!--commit 취소하는법(여러개 취소가능)-->
    git revert 커밋아이디

    <!--최근 commit취소하는법-->
    git revert HEAD

    <!--과거로 모든걸 되돌리기
    !!협업시 사용주의 요망!!-->
    git reset --hard 커밋아이디

    <!--reset인데 변동사항 지우지 말고 스테이징해놓기-->
    git reset --soft 커밋아이디

    <!--reset인데 변동사항 지우지 말고 스테이징 X-->
    git reset --mixed 커밋아이디

    <!--최근 작성한 코드가 마음에 안들어서 보관함으로 보내기-->
      git stash

      <!--stash로 보관중인 리스트 확인하기-->
      git stash list

      <!--stash 할때 메모 작성가능-->
      git stash save '메모'

      <!--stash 불러오기(가장 최근것부터) 지정가능-->
      git stash pop

      <!--stash 삭제하기-->
      git stash drop 스태쉬번호
      <!--stash 전부삭제하기-->
      git stash clear 

출처 : 코딩애플