FRONT-END

외부함수가져오기

[이름이 없는 함수 - 외부로 한개만 보낼수있음]

내부 : import 함수이름 from './외부함수위치' //함수이름 변경가능

외부: export default function 함수이름 ( ) { ~ } //함수이름 생략가능

[이름이 있는 함수 - 외부로 여러개를 보낼수 있음]

내부 : import {함수이름} from './외부함수위치' 

내부한번에 가져오기 : import * as 받을 아무 함수명 from './외부함수위치'

외부 : export function 함수이름 ( ) { ~ }

lodash 메소드

_.uniqu

요소의 중복된 값을 제거한다.

_.uniqBy(적용할요소, '중복제거할값')

_.uniqBy(user,'name')

_.uniqBy(합칠요소1,합칠요소2,'중복제거할값')

_.unionBy(user,user2,'name')

(user, {name:'park')

user배열안에 name이 'park'인 배열요소를~ ▼

._find(찾을배열, {요소}) //찾을 요소 전체

._findIndex(찾을배열, {요소}) //찾을요소 번호

_.remove(적용배열, {제거할 요소})

JSON

json은 문자데이터이나 자바스크립트로 import하면 객체데이터 처럼 사용된다.

json의 문자데이터로 바꿀시 JSON.stringify(객체요소) 를 하면 json형식의 문자데이터로 바뀐다.

json의 문자데이터 형식인것을 자바스크립트의 객체 형식으로 바꾸기위해 JSON.parse(json문자데이터요소) 를 한다.

Storage

storage에는 key의 값인 value는 jason형태로 저장된다.

setItem 스토리지에 키,값 저장

getItem 스토리지에 저장된 값 가져오기

axios

json문자열로 된 웹페이지문서를 console로 가져와 정리하기

axios 선언 : import axios from 'axios'

배열 메소드는 [ ] . 메소드 를 바로 쓸수있으나

객체 메소드는 Const 새 객체 = Object . 메소드 (기존 객체들) 로 Object를 써야한다.

Object.assign() 값을 합칠때 // 합치고나면 합침을 당한 앞 객체는 값이 덮어쓰여짐

Object.keys() 값의 key값만 배열로만듬

user['email'] // 객체['key이름']

객체데이터도 인덱싱을 할수 있다

구조분해

전개연산자는 배열이름을 표현할때 ... 을 같이 .을 3개찍는다

function에서 (매개변수)를 받을때 매개변수에 ...을 붙일시 나머지 매개변수를 모두받는 rest parameter가 된다.

데이터불변성

원시데이터(string,number 등)는 바라보는 메모리위치가 값이 같으면 한곳에 위치하고 복사해버려도 두값이 같은곳에 위치한다.

참조형데이터(object,array 등)은 값이 같아도 바라보는 위치가 다르며 값을 복사하면 위치가 같아지고 같은공간에 있는 값중 하나만 바꿔도 안에 모든값이 같이 바뀐다.

객체데이터의 서로간 영향없이 새 메모리에 복사하는법

1. Object.assign({ }, 복사할객체) 사용

2. { ...복사할객체} 전개방식으로 { } 사용

배열이나 객체안에 다른 참조데이터가 없을시

복사시에는 위 방식대로 Object.assign 이나 ... 으로 { }를 사용해서 얉은복사를 할수있으나

배열이나 객체안에 또 다른 참조데이터가 있을시. 아래처럼 깊은 복사를 하여야한다.

깊은복사 :  loadsh의 _.clonedeep(객체) : 모든추가되는 요소들도 다 서로 영향없이 따로 새 메모리에 복사됨.

배열 메소드

concat 은 배열간에 합쳐서 하나의 배열로 출력한다.

numbers.concat(fruits)

forEach는 반환하는 값이 없고

map은 forEach처럼 요소별로 한번씩돌아가면서 return을 통해 특정값을 반환하므로 저장 할 수 있다. 

filter는 map처럼 return되는 값중에 true인 값의 요소들을 배열로 저장한다.

find ~ test 는 요소에서 test앞 조건에 만족하는 요소를 찾아 단어로 나타낸다.

findIndex ~ test는 요소에서 test앞 조건에 만족하는 요소의 번호(zero베이스)를 찾아 번호로 저장한다.

배열.push(값) 은 배열 가장 뒤에 요소를 추가한다.

배열.unshift(값) 은 배열에서 가장 앞에 요소를 추가한다.

배열.reverse( ) 은 배열의 순서를 반대로 뒤집는다.

배열.splice(인덱스번호, 지울갯수, 추가할값) 는 인덱스번호기준부터 지울갯수만큼 지우고 값을 추가하라.

const int = parseInt(str) // parseInt 는 number 정수 로 타입을 바꿔준다.  

constfloat = parseFloat(str) // parseFloat는 number 소수로 타입을 바꿔준다.

함수의 종류

1. 표현형

const exam = function(a){

console.log(a*2)

}

exam(1)

1.1 선언형-호이스팅가능

function exam(a){

console.log(a*2)

}

exam(1)

2. 화살표형

const exam = a => a*2

console.log(exam(1))

// => 으로 리턴할시 {return ~}은 그냥 생략가능하나 return하는 값이 { } 인 객체형일시 ({ ~ }) 을 써야한다.

3. 즉시실행

const a=1;

(function ( ) {

console.log(a)

})( )

함수를 한 스크립트로 만들어 밖으로 내보낼 준비를 한다. 

내보낼 함수 앞에 export default 를 붙인다.

외부에서 함수를 받기 할 스크립트에 import 외부함수명 from 외부함수위치 를 선언한다.

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

const나 let은 특정 블록 { }범위내 에서만 유효한 범위를 가진다.

var은 함수 범위내에서 큰 범위를 가진다.

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를 사용하여 버전이 다른 로컬저장소의 충돌을 수정 해결한다.