FRONT-END

favicon같은 정적요소들 지속적을 dist에서 관리하여 나타내기

parcel-plugin-static-files-copy

favicon같은 파일들이 npm으로 만들어지는 dist폴더안에 자동으로 계속 저장될수 있도록 설정을 위해 사용한다.

관리할 폴더를 생성하여 안에 든 파일들은 자동으로 dist안에 저장될수 있도록 설정한다. package.json으로 관리할 폴더 경로를 지정해준다.

POSTCSS 와 AUTOPREFIXER

npm i -D postcss autoprefixer

웹에서 쓸 수 있는 요소에 따라 적용되거나 적용해지 될지 결정해주는것으로

설치후

ESM 즉 자바스크립트 모듈에서는 Import/export를 사용하며

노드js에서는 commonJS를 사용하여 require() / module.exports를 사용한다.

bootstrap npm으로 import설정하기 (이후 import시 via java로 초기화,성능최적화 해야함)

scss :

@import "/node_modules/bootstrap/scss/bootstrap.scss"

js:

import bootstrap from './node_modules/bootstrap/dist/js/bootstrap.bundle'

bootstrap 정해진 요소들 커스텀마이징 하기

bootstrap등 성능최적화 옵티마이징하기

bootstrap처럼 모든 요소가 들어가있는것을 import하면 무거워지므로 dropdown같은 사용할요소만 지정하여 import한다. 하지만 bootstrap은 popper을 외부에서 가져와 사용하므로 bootstrap을 통째로 import하면 문제가 없지만 사용할 요소만 import하면 popper가 설치되지 않아 오류가 발생하니 popperjs를 일반의존성@으로 설치한다.

bootstrap의 각 요소들은 js/dist안에있다.

npm i @popperjs/core

nvm이란 여러 node.js의 버전을 다운할수 있게해주는 통합프로그램이다.

nvm install ~버전

nvm ls

nvm use ~버전

nvm --version

npm란 html에서 swiper나 구글매터리얼등 각종 패키지를 선언하는것처럼 프로젝트에 미리 설치하는것.

npm init -y : 패키지 관리 선언

설치한 패키지가 모두 삭제되어도 package.json에 이전에 설치한 패키지와 버전이 명시되어있어서 npm install만 명령해도 자동으로 다시 설치된다.

npm install시 -D의 차이

D는 DEVELOP의 약자로 개발에만 쓸시 붙이고 HTML에서 일반적 의존성으로 쓸시는 D를 안붙이고 설치한다.

npm install parcel-bundler -D

npm install lodash 

설치한 parcel 실행을 위해

parcel index.html 을 하면 명령어를 인식못할 수있다. npm init -y 로 생성한 package.json에서 scripts에

"dev": "parcel index.html"을 작성후 npm run dev를 하면 parcel index.html이 작동된다.

"build":"parcel build index.html" 을 npm run build하면 웹에 실제로 난독화된 것으로 나타난다.

import _ from 'lodash' 를 main.js에 선언하여 node_modules에서 lodash를 가져와서 쓴다.

# 제목(Header)

# 제목 1

## 제목 2

### 제목 3

###### 제목 4

# 문장

동해물과 백 두산이 마르고 닳도록

하느님이 보우하사 우리나라만세

# 줄바꿈(뛰어쓰기 두번)

동해물과 백두산이 마르고 닳도록  

하느님이 보우하사 우리나라 만세</br>

# 강조

_이텔릭_  

**두껍게**  

**_이텔릭 + 두껍게_**  

~~취소선~~  

<u>밑줄</u>

# 목록(숫자1로 모두 정렬하기)

1. 순서가 필요한 목록

1. 순서가 필요한 목록

1. 순서가 필요한 목록

    1. 순서가 필요한 목록

    1. 순서가 필요한 목록

1. 순서가 필요한 목록

- 순서가 필요하지 않은 목록

- 순서가 필요하지 않은 목록

- 순서가 필요하지 않은 목록

    - 순서가 필요하지 않은 목록

    - 순서가 필요하지 않은 목록

- 순서가 필요하지 않은 목록

# 링크

[ ]( )

<a href="https://google.com">google</a>

[google](https://google.com)

<a href="https://google.com" title="naver이동">naver.com</a>

[google](https://google.com "naver이동")

# 이미지


[](http://heropy.blog/)

# 인용문

> 남의 말이나 글을 직접 또는 간접으로 따온 문장  

> 네이버 국어사전

>>중첩문

>>>중첩문2

# 인라인 코드 강조

`백틱`

# 블록 코드 강조

```html

<a href="https://google.com">google</a>

```

```css

```

```javascript

```

```bash

```

# 표

| | 표나누기 : 정렬

값 | 의미 | 기본값

:--:|:--:|--:

static | 기준 없음 | o

relative | 요소 자신 | x  

# 원시 HTML

동해물과 <u>백두산</u> 마르고 닳도록</br>

하느님이 보우하사 우리나라 만세

#수평선

---

***

___

vscode로 github자료 바탕화면에 복제하기(clone)

터미널로 복제할 위치로 이동후 git clone github프로젝트주소

vscode로 폴더 열기

열 폴더로 이동후 code . -r

git 명령어

1. 이전 버전으로 돌리기 : git reset --hard head~n

head->master인 최신버전에서 n번 뒤로 돌리겠다.

2. 이전 버전 잘못되돌렸을시 다른 코드 입력전 바로 원 상태로 복구하기 : gir reset --hard ORIG_HEAD

3. 원격저장소에서 branch 가져오기

모든 브랜치 확인 git branch -r 을 한다. -> git checkout -t 모든브랜치확인을통한원격브랜치명

4. 잘못가져온 branch 삭제

master 브랜치로 이동(현재브랜치에서는 삭제못하기때문) -> git branch -d  삭제할브랜치명

5. branch 생성과 동시에 이동하기

git checkout -b 생성할브랜치명

6. 각 로컬 작업환경에서 작업해서 원격저장소에 업로드한 버전정보가 일치하지 않아서 업로드할수 없을시

git pull origin master를 사용하여 버전이 다른 로컬저장소의 충돌을 수정 해결한다.

메인 branch와 현재 작업중인 branch를 병합하기

현재 작업중인 branch를 버전관리할수있도록 git add . 를 한 뒤 git commit -m "버전 수정내용" 을 한다.

이후 원격 저장소에 업로드 git push origin 브랜치이름 한뒤

github로 이동 하여 원격저장소에서 병합을 진행한다.

pull requsts탭 - new pull requests - Compare changes -

base 합쳐질 메인 기준 branch / compare 내가 작업한 합침당할 branch (사라질)

아이디나 비밀번호같이 양식을 입력받는 그룹에는 form 태그를 사용하여 입력된 정보들을 보내는 기능을 한다.

[속성선택자 CSS선언방법]

Input 태그안에 type='submit'인것을 아래 처럼 form까지 쓰고 대괄호[ ] type="submit"이라고 그대로 쓴다.

margin: auto로 가운데 정렬시 해당 요소의 width나 height가 정의되어있어야한다.

부모에 display: flex로 각각 일열로 나열한뒤
나열한 크기의 비율을 flex-grow로 설정한뒤 flex-basis:0을 통해 전체크기를 똑같이 나눌 수 있다.

<strong> 스트롱 태그는 강조할때 쓰는 태그이다.

git 버전관리를 위한 기본 선언

현재 프로젝트에서 변경사항 추적을 시작함을 선언한다.

─────────────────────────────────────────────────────

[관리파일 설정(초록색으로 변경=추적관리가 되는상태)]

git add . //모든파일 추적 지정

git add 파일명 //특정파일 추적 지정

[버전생성] git commit -m 'Start project'

[새 파일 업로드 버전 생성 및 수정] git status로 수정된 modified 빨간색 확인

git add. 이후  modified 초록색 확인후 git commit -m '버전 내용이름'

[github와 연결하기(1회만연결)]

git remote add origin https://github.com/Parkstelth/starbucks.git (github repositories 원격주소입력)

[github에 업로드하기]

git push origin master

[github에 메인페이지에 마크다운 text 업로드하기]

vscode 프로젝트에 README.md 파일을 생성하여 업로드한다.

─────────────────────────────────────────────────────

[새 작업을 위한 branch 만들기]

git branch signin

[특정 branch 접속]

git checkout branch이름

*branch는 초기 init으로 생성된 master나무에는 영향을 미치지않으므로 master로 만들어진 netlify에도 영향이없으므로 master에서 만들어진 웹페이지에서 signin 같은 것들을 branch에서 만들어 작업이 완료되면 signin과 master를 병합하여 하나로 만들면 나타나게 된다.