JavaScript 배열 메소드 ( Array method )

자바스크립트에서 자주 쓰이는 배열 메소드를 정리

Array.isArray() (ES6)

인자에 들어가는 객체가 배열인지 확인할 때 사용
인자 - object

Array.isArray({ a: 1, b: 2}) /// false
Array.isArray([1,2,3]) //true

concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
인자 - item1, item2, …

const arr = [1,2,3]
arr.concat(4,5) // [1,2,3,4,5]
arr.concat([4,5]) // [1,2,3,4,5]
arr // [1,2,3] 원본이 바뀌지 않음

인자에 배열을 넣으면 배열의 원소 순서대로 들어감

every(), some() (ES6)

배열의 모든 원소가 제공한 함수를 통과하는지 테스트하는 메소드 every
배열의 원소중 하나라도 제공한 함수를 통과하는지 테스트하는 메소드 some
callback의 인자로는

  1. currentValue - 현재 순회하는 원소 값
  2. index - 순회하는 원소의 index
  3. array - 순회되는 배열
const arr = [2,4,6,8]
arr.every( el => el % 2 === 0 ) // true
arr.some( el => el % 2 ) // true
arr // [2,4,6,8] 원본이 바뀌지 않음

fill() (ES6)

배열의 시작 인덱스부터 끝 인덱스까지 정적 값으로 채우는 메소드
인자 - value, start(optional), end(optional)
start의 기본값은 0, end의 기본값은 배열의 길이

const arr = Array(3)
arr.fill(2) // [2,2,2]
arr // [2,2,2] 원본이 바뀜

filter() (ES6)

배열의 원소 중 제공된 함수를 통과하는 원소를 반환하는 메소드
인자 - callback

const arr = [1,2,3,4,5]
arr.filter( el => el < 3 ) // [1,2]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

forEach() (ES6)

배열 원소마다 제공한 함수를 실행하는 메소드
인자 - callback
callback의 인자로는

  1. currentValue - 현재 순회하는 원소 값
  2. index - 순회하는 원소의 index
  3. array - 순회되는 배열
const arr = [1,2,3]
arr.forEach( el => console.log(el) )
// 1
// 2
// 3
arr // [1,2,3] 원본이 바뀌지 않음

includes() (ES6)

배열에 특정 원소가 포함돼 있는지 여부를 확인해 true, false로 리턴
인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.includes(3) // true
arr.includes(1,1) // false
arr // [1,2,3,4] 원본이 바뀌지 않음

indexOf(), lastIndexOf()

배열에 특정 원소가 포함돼 있는지 여부를 확인해 있으면 해당 인덱스 만약 없다면 -1을 리턴
lastIndexOf는 반대 순서로 탐색
인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.indexOf(3) // 2
arr.indexOf(5) // -1
arr // [1,2,3,4] 원본이 바뀌지 않음

join()

모든 원소를 연결해 하나의 문자열로 만드는 메소드
인자 - separator

const arr = [1,2,3,4]
arr.join() // "1,2,3,4"
arr.join("..") // "1..2..3..4"
arr // [1,2,3,4] 원본이 바뀌지 않음

map() (ES6)

배열 내의 모든 원소에 대하여 제공된 함수를 호출하고,
결과를 모아 새로운 배열을 리턴하는 메소드
인자 - callback
callback의 인자로는

  1. currentValue - 현재 순회하는 원소 값
  2. index - 순회하는 원소의 index
  3. array - 순회되는 배열
const arr = [1,2,3]
arr.map( el => el * 2 ) // [2,4,6]
arr // [1,2,3] 원본이 바뀌지 않음

push(), pop() / unshift(), shift()

배열의 맨 뒤에 새로운 원소를 추가하는 메소드 push
인자 - item1, item2, …
배열의 맨 뒤 원소를 지우는 메소드 pop
인자 - X
배열의 맨 앞에 새로운 원소를 추가하는 메소드 unshift
인자 - item1, item2, …
배열의 맨 dkv 원소를 지우는 메소드 shift
인자 - X

const arr = [1,2,3]
arr.push(5) // 4 ( 배열의 길이 리턴 )
arr // [1,2,3,5]
arr.pop() // 5 ( 삭제된 원소 리턴 )
arr // [1,2,3]
arr.unshift(2) // 4 ( 배열의 길이 리턴 )
arr // [2,1,2,3]
arr.shift() // 2 ( 삭제된 원소 리턴 )
arr // [1,2,3]

reduce(), reduceRight() (ES6)

배열의 원소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 리턴
reduce는 왼쪽부터, reduceRight는 오른쪽부터 수행
인자 - callback, initialValue ( optional )
callback의 인자로는

  1. accumulator - 누적 계산값
  2. currentValue - 현재 처리값
  3. currentIndex - 현재 처리값의 index
  4. array - 호출된 배열
const arr = [1,2,3,4]
arr.reduce( (a,b) => a+b ) // 10
arr.reduce( (a,b) => a+b, 10) // 20
arr // [1,2,3,4] 원본이 바뀌지 않음

단순히 값을 연산하는 용도 뿐만 아니라 여러가지 역할로 사용이 가능

reverse()

인자: 없음
배열의 원소 순서를 반대로 정렬해 반환

const arr = [1,2,3]
arr.reverse() // [3,2,1]
arr // [3,2,1] 원본이 바뀜

slice()

배열의 start부터 end까지 shallow copy하는 메소드
인자 - start ( optional ), end ( optional )

const arr = [1,2,3,4,5]
arr.slice(2) // [3,4,5]
arr.slice(1, 3) // [2,3]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

splice()

배열의 원소를 삭제하거나 새 원소를 추가하는 메소드
인자 - start, deleteCount, item1, item2, ..
start부터 deleteCount만큼 삭제되고
뒤로오는 인자들은 삭제된 위치에 추가되는 원소들

let arr = [1,2,3]
arr.splice(2) // [2,3] ( 삭제된 배열 리턴)
arr // [1] 원본이 바뀜

arr = [1,2,3]
arr.splice(1,1) // [2]
arr // [1,3]

arr = [1,2,3]
arr.splice(1,1,3,4) // [2]
arr // [1,3,4,3]

sort()

배열을 정렬하는데 사용된다.
인자를 넣지 않으면 기본적으로 유니코드 코드 포인트에 따라 정렬된다.
인자 - compareFuntion ( optional )

const arr = [3,20,12,1,4]
arr.sort() // [1, 12, 20, 3, 4]
arr // [1, 12, 20, 3, 4] 원본이 바뀜

위와같이 숫자를 정렬할 때 유니코드 순서로 정렬되기 때문에
오름차순이나 내림차순으로 정렬하기 위해서는 다음과 같이 한다.

const arr = [3,20,12,1,4]
arr.sort( (a,b) => a-b ) // 오름차순 [1, 3, 4, 12, 20]
arr.sort( (a,b) => b-a ) // 내림차순 [20, 12, 4, 3, 1]

위에서는 ES6의 Arrow function을 사용했다.

toString

배열의 원소를 문자열로 반환
인자 - X

const arr = [1,2,3]
arr.toString() // "1,2,3"
arr // [1,2,3] 원본이 바뀌지 않음
  1. BlogIcon 떱스턴 2018.05.03 18:18 신고

    주소가 바뀌었는지 링크를 클릭해도 접속이 안되네요! 404

  2. BlogIcon 나를지키라능 2019.03.08 16:10

    감사합니다 ^^

알고리즘 문제 풀이시 자주 사용되는 테크닉

문제풀다가 자꾸 검색하게 되는 내용들을 정리

알고리즘 문제 풀이시 자주 사용되는 테크닉

문제를 풀면서 계속 업데이트 예정!

배열이나 문자열에서 유니크한 원소 뽑아내기

const arr = [1,1,4,1,1] 

arr.filter(a => { if ( arr.indexOf(a) === arr.lastIndexOf(a) ) return a }) // [4]

위와 같이 쓰면 배열에서 유니크한 값 4를 얻을 수 있다.

문자열에서도 마찬가지로 문자열을 split으로 쪼개 filter를 사용하면 같은 결과를 얻을 수 있다.

const str = '11411'
const arr = str.split('');

arr.filter(a => { if ( arr.indexOf(a) === arr.lastIndexOf(a) ) return a }) // ['4']

배열로 결과값을 리턴하기 때문에 문자열을 원하면 toString()을 뒤에 붙여주면 되고, 넘버타입을 원하면 Number()로 감싸주면 된다.

배열이나 문자열에서 i 번째 인덱스 내용을 삭제하고 싶을 때

원본을 보존하면서 잘라내는 방법

const arr = [1, 2, 3, 4, 5];
let result = [];

result = arr.slice(0,2).concat(arr.slice(3,arr.length)) // 2번 인덱스 삭제

console.log(result) // [1, 2 ,4, 5];
console.log(arr) // [1, 2, 3, 4, 5]

원본을 훼손하며 잘라내는 방법

let arr = [1, 2, 3, 4, 5];

arr.splice(2, 1) // 2번 인덱스부터 1개를 삭제하겠다는 의미

console.log(arr); // [1, 2, 4, 5]

true, false로 결과를 리턴 할 때

if ( 조건 ) {
    return true
} else {
    return false
}

대신에

return ( 조건 )

만 써줘도 된다

배열에서 같은 값을 가지는 원소의 개수가 주어졌을 때 해당 원소를 구하는 방법

원래는 항상 obj에 배열전체를 돌면서 카운팅을 해놓고 꺼내서 쓰는식으로 했는데 너무 안좋은 방법인걸 알고 찾아보니

```
arr.find( a => arr.filter( b => a === b))

  1. 주니어개발자 2019.11.08 23:55

    자바스크립트로 알고리즘을 공부하는 학생인데요, 주소를 찾을 수 없다고 뜨는데 바뀐 주소로 수정해주실 수 있을까요? ㅠㅠ








CSS 중앙정렬 가이드

수평정렬, 수직정렬에 대해 찾아보다가 잘 설명된 페이지)가 있어 포스팅
예제 코드는 정확히 필요한 부분만 가져왔기 때문에 폰트,배경 색 같은 코드는 빠져있음

수평정렬 ( horizontally )

1. inline 요소를 수평 중앙정렬 시

부모 요소에 text-align: center 적용

<!-- HTML -->
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
</nav>

<!-- CSS -->
<style>
nav {
  text-align: center;
}
</style>

부모 요소인 nav 태그에 text-algin: center를 적용하면
인라인 태그이면서 자식 태그인 a 태그들은 중앙정렬이 된다.

2. block 요소를 수평 중앙정렬 시

block 요소가 한개일 때, 두개 이상일 때를 나누어 알아보자.

2-1. 1개의 block 요소를 수평 중앙정렬 할 때

block 요소는 width 속성을 따로 설정하지 않으면
자동으로 width: auto가 적용되므로 width 설정 후 margin: 0 auto 설정

<!-- HTML -->
<div class="center">
  I'm a block level element and am centered
</div>

<!-- CSS -->
<style>
.center {
  width: 200px;
  margin: 0 auto;
}
</style>

여기서 margin: 0 auto는 위아래 마진은 0 좌우는 남는 여백의 반반씩 가져간다는 뜻

2-2. 2개 이상의 block 요소를 수평 중앙정렬 할 때

부모요소에 text-align: center, 자식 요소의 각각에 display: inline-block을 적용해주면 된다.

<!-- HTML -->
<main class="inline-block-center">
  <div> I'm an element that is block-like with my siblings and we're centered in a row. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<!-- CSS -->
<style>
  .inline-block-center {
    text-align: center;
  }
  .inline-block-center div {
    display: inline-block;
    width: 200px;
    text-align: left;
  }
</style>

display: inline-block을 사용할 때는 width 또는 max-width 값을 설정해줘야 퍼지지 않고 레이아웃이 잡힘.
위의 코드와 같이 작성하면 이미지의 위쪽과 같이 높이가 제각각인 블럭이 만들어지는데
이를 해결하기 위해서는 height, vertical-align: top을 주면
이미지의 아래와 같이 일정한 모양을 잡을 수 있다.

수직정렬 ( vertically )

1. inline 요소를 수직 중앙정렬 할 때

1-1. 한 줄일 경우

disaplay: block 설정 후 heightline-height를 같은 값으로 설정하면 된다.
이 때 white-space: nowrap 속성으로 자동 줄바꿈이 안되도록 해야한다.

<!-- HTML -->
<main>
  <span> I'm a centered line. </span>
</main>

<!-- CSS -->
<style>
main span {
  display: block;
  width: 50%;
  height: 100px;
  line-height: 100px;
  padding: 20px;
  white-space: nowrap;
}
</style>

1-2. 여러 줄일 경우

부모 요소에 display: table, 자식 요소에 display: table-cell, vertical-align: middle 사용

<!-- HTML -->
<div class="center">
  <span>I'm vertically centered multiple lines of text in a CSS-created table layout.</span>
</div>

<!-- CSS -->
<style>
  .center {
    display: table;
  }
  .center span {
    display: table-cell;
    vertical-align: middle;
  }
</style>

2. block 요소를 수직 중앙정렬 할 때

2-1. 정렬할 요소의 높이를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute를 적용해
height 값을 설정하고 top: 50%, marginheight의 절반만큼 마이너스로 중앙 정렬

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
    height: 300px;
  }
  .center div {
    position: absolute;
    top: 50%;
    heigth: 100px;
    margin-top: -50px;
  }
</style>

2-2. 정렬할 요소의 높이를 모를 때

2-1 번의 margin-top 대신 transform: translateY(-50%)를 사용하면 된다.

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
    height: 300px;
  }
  .center div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>


동시에 수평, 수직 정렬을 하고 싶을 때

1. 정렬할 요소의 width와 height를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute 적용 후
top: 50%, left: 50%, margin-topwidth의 절반만큼 마이너스 설정,
margin-leftheight의 절반만큼 마이너스로 설정

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
  }
  .center div {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
  }
</style>


2. 정렬할 요소의 width와 height를 모를 때

1번의 margin-top, margin-left 대신 transform: translateY(-50%, -50%)를 사용하면 된다.

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
  }
  .center div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>



'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (5) 2019.10.31
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
  1. BlogIcon SONYLOVE 2017.04.11 14:38 신고

    가운데 정렬에 애먹었는데 도움이 되겠네요.

  2. ㅇㅇ 2017.10.24 23:03

    수평정렬이 잘 안 됐는데 flex 넣으니까 그냥 되네요.. flex 짱짱
    감사합니다.

  3. 2019.11.02 01:57

    비밀댓글입니다

    • 2019.11.04 15:08

      비밀댓글입니다

redux-saga란?

우선 redux-saga에 대한 설명은 과감히 생략..ㅋㅎㅋ

사가를 써보기로 한 사람중 대부분은 공식 문서를 읽고 왔을 것이라 생각하고
어느정도 돌아가는 흐름은 알 것이라 생각해 따로 적지 않음.

흐름은 어느정도 알겠지만 코드에 적용하기 힘들어서 구글링 하다가 이 블로그까지 오게 되셨을거라고도 생각하니
리덕스 사가를 왜 어떻게 사용하는지 아주 짧은 경험을 바탕으로 적을 예정.

당연히 틀린 부분이 있을 수 있으니 항상 의심하면서 읽으시고
내 생각과 다른 부분이 있다면과감하게 지적 부탁드립니다.,ㅎㅎ

redux-saga를 사용하기로 한 이유

이전엔 리덕스 redux-thunk를 쓰면서 액션쪽에 비동기통신 코드가 번잡하게 들어감에 따라 파악하기 힘들다.
물론 모듈화를 제대로 안한 문제도 있긴 하지만..

사실 다른 프로젝트를 개발할 때 충분히 thunk를 사용할 수 있기야 하겠지만,
만들면서 맘에 들지 않았던 부분은 action이 dispatch만 하는것이 아니라 로직을 담고 작업을 수행한다는 점이였다.

결국 위아래 두가지 이유가 같은 맥락이긴 한데
정리하면 action이 본인의 역할 이외에 다른 영역까지 넘어간 부분이 뭔가 찝찝하고도 구린듯한 느낌
thunk의 다른 단점도 있겠지만 종합하면 redux의 철학을 보존하면서 사용하지 못한 것 같다.

그 다음부턴 뻔한 스토리, 이를 해결해주는 saga를 알게됐고 사용해보려 했다

redux-saga의 흐름

예를통해 설명해보면,
버튼을 클릭하면 1초뒤에 카운터가 1만큼 늘어나는 로직을 짜고싶을 때
redux-thunk와 redux-saga의 흐름을 비교해보자.

구성
버튼을 클릭하면 숫자가 1이 늘어나는 AddToCounter액션이 있고,
여기서 액션은 request, success, failure로 구분지어 있다. (효율적인 디버깅을 위해 구분지음 )
추가로 위에 설명한 프로세스를 진행하는 액션을 AsyncAddToCounter라 하자.

추가적으로 미들웨어 없이는 비동기 처리가 안되는걸로 알고있는데 확실하지 않은 정보임.
정확하게 아시는 분이 있으시다면 댓글 부탁드립니다..

redux-thunk

  • 뷰에서 버튼을 클릭
  • AsyncAddToCounter 액션을 props로 내린 이벤트를 실행
  • AsyncAddToCounter 액션의 프로세스를 실행
  • requestAddToCounter을 리듀서로 디스패치
  • setTimeOut으로 1초뒤에 현재 count state에 1을 더한 값을 담아 successAddToCounter을 리듀서로 디스패치
    • “액션”에서 비동기 처리를 실행, setTimeOut의 경우 failure가 안나오기 때문에 현재 설명에선 패스
    • 일반적으로 Promise의 then, catch로 success와 failure을 나눈다.
  • 리듀서에서 증가한 count state 값을 스토어에 업데이트
  • 업데이트 된 스토어의 count state 값으로 뷰 업데이트

redux-saga

redux-saga에서는 위에서와 같이 프로세스를 담은 AsyncAddToCounter를 따로 만들지 않고,
바로 request를 디스패치하는 방식으로 진행.

  • 뷰에서 버튼을 클릭
  • `requestAddToCounter’ 액션을 props로 내린 이벤트를 실행
  • 이벤트가 실행됨과 동시에 사가의 watcher가 디스패치된 액션을 take로 인지함.
    • 이 때 파라미터를 액션과 동시에 같이 넘겨줄 수 있으며, 이를 흔히 “payload”라 부른다.
  • 사가에서 delay를 통해 1초 지연
    • 액션은 타입과 payload만 넘겨주는 용도로만 사용되고, 실질적인 비동기 로직은 “사가”를 통해 실행 된다.
  • count state를 1 증가시킴
  • 1초 뒤 put을 통해 업데이트된 count state를 담은 successAddToCounter 액션을 디스패치
    • 일반적으로 try, catch문으로 success와 failure을 나눈다.
  • 리듀서에서 증가한 count state 값을 스토어에 업데이트
  • 업데이트 된 스토어의 count state 값으로 뷰 업데이트

둘을 비교했을 때 시작과 끝은 같지만, 실질적으로 로직을 수행하는 부분은 액션과 사가로 명확하게 구분되어 있다.
리덕스 사가를 사용함으로써 리덕스를 구성하는 각자의 롤이 명확하게 구분되어 깔끔하게 코드가 정리됨.

나름대로 이해한 내용을 코드 없이 말로 쓰려니 더 어려웠는데,
틀린부분이 있을 수 있으니 피드백 부탁드립니다. 제발!

언젠가 코드를 추가할 예정..

'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

redux-saga folder structure

프로젝트를 구성할 때 가장 고민되는 폴더구조

특히 리덕스 사가는 명확한 Best Practice가 없어 더욱 결정하기가 힘들었다.

가장 일반적으로 redux를 사용할 때 잡는 폴더 구조는 다음과 같다

src

  • actions
  • components
  • containers
  • reducers
  • store

여기서 store 폴더를 없애고 상단의 엔트리인 index.js에 집어넣을 수 도 있다.

redux-saga를 사용하기 위해 사가들이 들어갈 sagas
Sass가 들어갈 폴더 styles
이미지, 폰트가 들어가는 폴더 assets
서버와의 통신을 위한 api가 들어가는 폴더 api
constant와 lib가 들어가는 폴더 utils를 추가해 아래 이미지와 같이 세팅했다.

이 구조가 베스트는 아니겠지만, 현재의 정보에서는 최선이라 생각했고,
그대로 프로젝트를 진행하려 한다.

추가로 더 나은 방법이나 구조가 있으면, 댓글 부탁드립니다.


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

일일이 웹팩, 바벨을 손보는 시간을 아껴서 개발에 투자하기 위해 react CLI인 create-react-app을 사용해 프로젝트를 생성

현재 18년 11월 기준으로 create-react-app은 version 2로 업데이트 되면서
Webpack 4, Babel7 , PostCSS, Sass 등을 기본적으로 지원하게 되었고
v1과 비교했을 때 추가적인 기능을 사용하기 위해서 웹팩에 따로 세팅한 부분이 없었다.

create-react-app (프로젝트명) 으로 프로젝트를 생성하면 간단하게 최신버전으로 프로젝트가 만들어지고,
yarn start 명령어를 통해 3000포트로 리액트 앱을 띄울 수 있다.

현재 토이 프로젝트로 진행중인 쇼핑몰 프로젝트의 package.json은 다음과 같다.

{
  "name": "mall-front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "cross-env": "^5.2.0",
    "i18next": "^11.9.1",
    "i18next-browser-languagedetector": "^2.2.3",
    "node-sass": "^4.9.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-i18next": "^8.0.8",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.0.4",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0"
  },
  "scripts": {
    "start": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "cross-env NODE_PATH=src react-scripts test",
    "precommit": "lint-staged",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "lint-staged": {
    "*.js": [
      "prettier --trailing-comma es5 --double-quote --write",
      "git add"
    ]
  },
  "devDependencies": {
    "husky": "^1.1.0",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3",
    "redux-logger": "^3.0.6"
  }
}

패키지 각각에 대한 용도는 다음과 같다.

  1. dependencies
  • axios - 비동기 통신
  • classnames - react의 className을 편하게 사용하기 위함
  • cross-env - 프로젝트의 환경변수 및 경로 시작점을 정하기 위함 / src 폴더를 기준으로 절대경로를 작성해 import 시 상대경로 위치를 고민할 비용을 줄임
  • i18next - 페이지 번역을 위한 라이브러리 ( 한/영 페이지 구성 )
  • node-sass - Sass 사용
  • react-router-dom - 리액트 라우터 v4
  • redux, react-redux, redux-saga - 리덕스, 리덕스 사가
  • redux-logger - redux 흐름 파악
  • husky, lint-staged, prettier - 커밋이 되기 전 코드 스타일을 통일 시키기 위함
  1. scripts
  • src를 기준점으로 스크립트 시작, 빌드, 테스트를 실행 할 수 있도록 변경
  • 프리커밋을 통해 lint-staged의 내용대로 코드 스타일 자동 변경
  • eject - 안할예정..
  1. lint-staged
  • —trailing comma es5 - 객체나 함수, 배열 등의 마지막 인자 뒤에 콤마를 붙임
  • —double-quote - 쌍따옴표 사용
  • git add - 커밋 전에 lint-staged를 실행

나머지는 기본값을 그대로 유지

번역 라이브러리를 제외하고 위와 같은 세팅값을 가지기 위한 커맨드
yarn add axios classnames cross-env node-sass react-redux react-router-dom redux redux-saga
yarn add --dev husky lint-staged prettier redux-logged

이렇게 프로젝트는 세팅 완료.


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

React 설치

패키지 매니저 npm 또는 yarn을 통해 설치

yarn이 더 빨라서 yarn을 통한 설치방법을 알아보자.

yarn 설치

우선 npm이 설치되어 있다는 가정하에 순서를 적어보면,

npm install --global yarn, homebrew가 깔려있다면 brew install yarn을 통해 yarn 설치 ( 자세히는 모르지만 후자로 설치하는것이 이슈가 덜 발생하는것으로 알고잇음 )

yarn 업데이트 방법은 yarn self-update이다.

yarn init

터미널에서 프로젝트 파일로 들어간 뒤 yarn init으로 package.json 파일을 생성한다.

npm과 같이 이 파일은 프로젝트에 관한 정보를 담고있다.

그 다음으로 yarn add react 를 통해 프로젝트에 리액트를 추가할 수 있다.

이 때 yarn.lock 파일은 현재 프로젝트에 설치된 패키지의 일관성을 보장하기 위해 버전과, 종속성을 적어두는 역할을 한다.

패키지를 삭제할 땐 yarn remove (패키지명)

패키지를 업데이트할 땐 yarn upgrade (패키지명)를 사용


react 설치 라는 말이 어색한데 붙일말이 딱히없음.,


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/05/05/html/HTML-Standard/


+ Recent posts