도쿄에서 개발하기

React - useEffect의 사용법과 예제

도꼬 — Tue, 4 May 2021 20:59:36 +0900

useEffect

리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다.

useEffect(effect, [, deps]);

파라미터

effect함수
- 렌더링 이후 실행할 함수(리액트는 이 함수를 기억 했다가 DOM 업데이트 후 불러낸다.)
- effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다.
deps
- 특정한 값이 변경될 때 effect함수를 실행 하고 싶을 경우 배열안에 그 값을 넣어준다.
  - 예 ) name변수가 변경 될 때 useEffect(effect, [name])
- 빈 배열을 입력할 경우 컴포넌트가 Mount 될 때에만 실행 된다.

componentDidMount 혹은 componentDidUpdate와는 달리 useEffect에서 사용되는 effect는 브라우저가 화면을 업데이트하는 것을 차단하지 않습니다. 이를 통해 애플리케이션의 반응성을 향상해줍니다. 대부분의 effect는 동기적으로 실행될 필요가 없습니다. 흔하지는 않지만 (레이아웃의 측정과 같은) 동기적 실행이 필요한 경우에는 useEffect와 동일한 API를 사용하는 useLayoutEffect라는 별도의 Hook이 존재합니다.

예제

1. 렌더링 될때마다 실행

- Class Component

componentDidMount, componentDidUpdate 이용

- Function Component(useEffect)

useEffect(effect)

2. 컴포넌트가 마운트 될 때만 실행

- Class Component

componentDidMount이용

- Function Component(useEffect)

useEffect(effect, [])

3. 특정 값이 변경 될 때만 실행

- Class Component

componentDidUpdate 이용

- Function Component(useEffect)

useEffect(effect, [value1, value2, ... ])

4. 정리(Clean up) 하기

- Class Component

componentWillUnmount 이용

- Function Component

effect함수에 cleanup 함수를 return

JavaScript - 배열 splice() 사용법 및 예제

도꼬 — Tue, 4 May 2021 19:06:38 +0900

구문

자바스크립트의 splice 함수는 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경 하고 제거된 배열을 반환합니다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

파라미터

start
- 배열의 변경을 시작할 index
- 배열의 길이보다 큰 값일 경우 배열의 길이로 설정
- 음수인 경우 배열의 끝에서부터 요소를 센다.
  - 예 ) array.splice(-n) -> array.length -n과 같다.
  - 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정
deleteCount(Optional)
- 배열에서 제거할 요소의 수
- 생략하거나 값이 array.length - start보다 클 경우 start 부터의 모든 요소를 제거
- 0이하의 값을 설정 할 경우 어떤 요소도 제거하지 않음, 이 경우 최소한 하나의 새로운 요소를 추가해야한다.
item1, item2, ...(Optional)
- 배열에 추가할 요소
- 생략할 경우 요소를 제거하기만 한다.

반환 값

제거한 요소를 담은 배열, 아무것도 제거하지 않을 경우 빈 배열을 반환

예제

1. 요소를 제거하지 않고 2번 index에 '딸기', '사과' 추가

const fruits = ['수박', '바나나', '망고', '두리안'];

const removed = fruits.splice(2, 0, '딸기', '사과');

console.log(fruits);
// ['수박', '바나나', '딸기', '사과', '망고', '두리안'];

console.log(removed);
// [];

2. 2번 index에서 1개 요소 제거

const fruits = ['수박', '바나나', '망고', '두리안'];

const removed = fruits.splice(2, 1);

console.log(fruits);
// ['수박', '바나나', '두리안'];

console.log(removed);
// ['망고'];

3. 1번 index에서 2개 요소 제거 후 '멜론' 추가

const fruits = ['수박', '바나나', '망고', '두리안'];

const removed = fruits.splice(1, 2, '멜론');

console.log(fruits);
// ['수박', '멜론', '두리안'];

console.log(removed);
// ['바나나', '망고'];

4. 끝에서 2번째 요소부터 2개의 요소를 제거

const fruits = ['수박', '바나나', '망고', '두리안'];

const removed = fruits.splice(-2, 2);

console.log(fruits);
// ['수박', '바나나'];

console.log(removed);
// ['망고', '두리안'];

5. 1번 index 포함 이후의 모든 요소 제거

const fruits = ['수박', '바나나', '망고', '두리안'];

const removed = fruits.splice(1);

console.log(fruits);
// ['수박'];

console.log(removed);
// ['바나나', '망고', '두리안'];

JavaScript - 배열 slice() 사용법 및 예제

도꼬 — Tue, 4 May 2021 01:37:50 +0900

구문

자바스크립트의 slice 함수는 원본 배열은 유지하고 begin부터 end까지(end 미포함)의 새로운 배열 객체를 반환합니다.

arr.slice([begin[, end]])

파라미터

begin(Optional)
- 추출 시작할 배열의 index
- 음수 index일 경우 배열의 끝에서부터의 길이를 의미
  - 예) slice(-2)는 배열의 마지막 2개의 요소를 추출
- 값이 undefined일 경우 index 0과 동일 동작
- 배열의 길이보다 큰 index일 경우 빈 배열 반환
end(Optional)
- 추출 종료할 배열의 index, end index를 제외 하고 추출
  - 예) slice(1, 4)는 두번째 요소부터 네번째 요소까지 (1, 2, 3) 추출
- 음수 index일 경우 배열의 끝에서부터의 길이를 의미
  - 예) slice(2, -1)는 세번째 요소부터 끝에서 두번째 요소까지 추출
- 값이 생략 될 경우 배열의 끝(array.length)까지 추출
- 배열의 길이보다 큰 index일 경우도 마찬가지로 배열의 끝(array.length)까지 추출

반환 값

추출한 요소를 포함한 새로운 배열.

예제

1. 배열의 일부를 반환하는 새로운 배열

const numbers = [1, 2, 3, 4, 5];
// 양수 index    0, 1, 2, 3, 4
// 음수 index   -5,-4,-3,-2,-1

console.log(numbers.slice()); // index 0부터 추출(0, undefined, null 동일 동작)
// expected : [1, 2, 3, 4, 5];

console.log(numbers.slice(1)); // index 1부터 추출
// expected : [2, 3, 4, 5];

console.log(numbers.slice(-2)); // 마지막요소부터 마지막에서 두번째 요소까지 추출
// expected : [4, 5];

console.log(numbers.slice(99)); // 배열의 길이보다 클 경우 빈 배열
// expected : [];


console.log(numbers.slice(1, 4)); // index 1부터 index 4까지(index 4제외) 추출
// expected : [2, 3, 4];

console.log(numbers.slice(2, -1)); // index 2부터 마지막에서 첫번째 요소까지(마지막에서 첫번째 요소 제외) 추출
// expected : [3, 4];

console.log(numbers.slice(2, 99)); // index 2부터 마지막에서 요소까지 추출(end가 배열의 길이보다 큼)
// expected : [3, 4, 5];

음수 index와 end의 개념이 조금 헷갈리기 쉬우니 주의 해야합니다.

JavaScript - 배열 find() 사용법 및 예제

도꼬 — Sun, 2 May 2021 23:51:07 +0900

구문

자바스크립트의 find 함수는 callback함수의 조건에 만족하는 첫번째 요소의 값을 반환합니다.

arr.find(callback(element[, index[, array]])[, thisArg])

파라미터

callback function
- 각 요소의 조건을 판단할 함수
- 다음 3가지의 인수를 가집니다.
  1. element - 배열의 현재 요소
  2. index(Optional) - 배열의 현재 요소의 인덱스
  3. array(Optional) - 호출한 배열
thisArg(Optional)
- callback함수를 실행할때 this로 사용되는 값

반환 값

배열 요소를 순회하며 callback 함수을 실행하고 결과가 true(조건에 만족)할 경우 요소의 값을 즉시 반환하고 순회를 멈춥니다. 만족하는 요소가 하나도 존재하지 않을 경우 undefined를 반환합니다.

예제

1. 오브젝트 배열 속 조건에 맞는 오브젝트 찾기

// 실제직업과 다릅니다.
const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// 유부남 찾기
const findedSadGuy = friends.find((friend) => {
  return friend.married === true;
})

console.log('슬픈남자 ', findedSadGuy);

Result

{
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
married: true
  };

JavaScript - 비구조화 할당/구조분해 할당

도꼬 — Sat, 1 May 2021 00:16:10 +0900

비구조화 할당/ 구조분해 할당이란?

배열이나 객체의 속성을 바로 개별 변수에 할당하는 JavaScript의 표현식입니다.

구문

1. 배열

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

2. 오브젝트

const { a, b } = { a: 10, b: 20 };
console.log(a); // 10
console.log(b); // 20

예제

1. 배열 / 오브젝트의 나머지 값 할당

cosnt arr = [10, 20, 30, 40, 50];
const [a, b, ...rest] = arr;
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

const obj = { a: 10, b: 20, c: 30, d: 40, e: 50 };
const { a, b, ...rest } = obj 
console.log(a); // 10
console.log(b); // 20
console.log(rest); // { c: 30, d: 40, e: 50 }

2. 배열의 일부 값 무시하여 할당

const arr = [10, 20, 30, 40, 50];

const [start, , , , end] = arr;

console.log(start); // 10
console.log(end);   // 50

3. 오브젝트 새로운 변수이름으로 할당

const obj = { a: 3, b: 5 };
const { a: aa = 10, b: bb = 5 } = obj;

console.log(aa); // 3
console.log(bb); // 5

React - useState hook의 사용법과 예제

도꼬 — Fri, 30 Apr 2021 23:34:56 +0900

Hook이란

기존의 React에서는 클래스 컴포넌트를 작성해야만 상태(state) 값 관리 및 여러 React의 기능등을 사용할 수 있었지만 , React 16.8버전부터 추가된 Hook을 이용하면 함수 컴포넌트에서도 상태관리등이 사용가능 하도록 되었습니다.

그렇다고 해서 클래스 컴포넌트가 필요 없는 것은 아니며, 상황에 따라 적절히 맞춰 사용 가능합니다.

useState Hook

기본적으로 배열 비구조화 할당문법으로 많이 사용 됩니다.

[state, setState] = useState(initialState);

파라미터

initialState
- state의 초기값 설정

반환값

array (pair of values)
- 이 배열은 아래와 같은 2개의 값을 가지고 있습니다.
  1. 현재의 상태 값(state)
  2. 상태값을 변경하는 함수(setState)

예제

1. 단일 상태값 관리하기

- Class Component

- Function Component(useState)

2. 여러개의 상태값 관리하기

- Class Component

- Function Component(useState)

또는 클래스 컴포넌트의 this.setState처럼 하나의 state를 오브젝트로 하여 여러 상태를 관리하는 방법도 있지만this.setState처럼 state를 병합하는 것이 아닌 대체하는 것임에 주의 하여야 합니다.

JavaScript - 배열 reduce() 사용법 및 예제

도꼬 — Fri, 30 Apr 2021 00:53:30 +0900

구문

자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 합니다.

arr.reduce(callback[, initialValue])

파라미터

callback function
- 다음 4가지의 인수를 가집니다.
  1. accumulator - accumulator는 callback함수의 반환값을 누적합니다.
  2. currentValue - 배열의 현재 요소
  3. index(Optional) - 배열의 현재 요소의 인덱스
  4. array(Optional) - 호출한 배열
- callback함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환합니다.
initialValue(Optional)
- 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과를 누적한 값

예제

1. 배열의 모든 값 (1부터 10까지) 더하기

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const sum1 = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

console.log('sum1 =', sum1);

또는

// callback함수 선언 후 이용
function sumReducer(accumulator, currentNumber) {
  return accumulator + currentNumber;
}

const sum2 = numbers.reduce(sumReducer);

console.log('sum2 =', sum2);

Result

sum1 = 55
sum2 = 55

2. 오브젝트 배열에서 원하는 항목의 값만 더하기

// 실제직업과 다릅니다.
const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// 3명의 나이를 더해봅니다.
// 여기서 초기값 설정이 반드시 필요합니다.
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
}, 0);

console.log('친구들 나이 합 ', ageSum);

Result

96

작동 방식

예제2에서 initialValue를 반드시 넣어 줘야 하는 이유는 reduce의 작동 방식과 관련이 있습니다. (중요!)

initialValue를 설정했느냐 안했느냐에 따라 콜백의 최초 호출 시의 accumulator와 currentValue가 달라집니다.

- initialValue를 설정 한 경우

callback	accumulator	currentValue	currentIndex
1번째 호출	initialValue	배열의 첫번째 요소	0

- initialValue를 설정하지 않은 경우

callback	accumulator	currentValue	currentIndex
1번째 호출	배열의 첫번째 요소	배열의 두번째 요소	1

예를 들어

const number = [1, 2, 3, 4, 5];

function reducer(accumulator, currentValue, currentIndex) {
  const result = accumulator + currentValue;
  console.log('accumulator = ', accumulator, ', currentValue = ', currentValue, ', currentIndex = ', currentIndex, ', result = ', result);
  return result;
}

// initialValue가 없을 경우
number.reduce(reducer);

// 동작
// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3
// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6
// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10
// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

// initialValue가 있을 경우
number.reduce(reducer, 0);

// 동작
// accumulator = 0, currentValue = 1, currentIndex = 0, result = 1
// accumulator = 1, currentValue = 2, currentIndex = 1, result = 3
// accumulator = 3, currentValue = 3, currentIndex = 2, result = 6
// accumulator = 6, currentValue = 4, currentIndex = 3, result = 10
// accumulator = 10, currentValue = 5, currentIndex = 4, result = 15

initialValue가 없으면 배열의 2번째부터 계산이 시작되는데 배열이 비어있으면 당연히 TypeError가 발생합니다.

배열의 요소가 하나 뿐이면서 initialValue가 없는 경우, 또는 initialValue는 주어졌으나 배열이 비어 있는 경우엔 계산할 필요가 없기 때문에 그 값을 callback 호출 없이 그대로 반환합니다.

위 작동방식을 근거로

예제2번의 경우 initialValue가 없을 경우 첫 번째 콜백에서 TypeError가 발생하게됩니다.

const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// initialValue 설정X
const ageSum = friends.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.age;
});

// 첫번째 콜백 실행
// accumulator = { name: '양주진', age: 32, job: '코인러', married: false }
// currentObject = { name: '오영제', age: 32, job: '랩퍼', married: false }
// currentObject.age = 32
// accumulator + currentObject.age = TypeError

JavaScript - 배열 filter() 사용법 및 예제

도꼬 — Thu, 29 Apr 2021 00:50:59 +0900

구문

자바스크립트의 filter함수는 배열의 각 요소를 순회하며 callback함수를 실행하며 조건에 맞는 요소만을 갖는 배열을 반환합니다.

arr.filter(callback(element[, index[, array]])[, thisArg])

파라미터

callback function
- 각 요소의 조건을 판단할 함수로 true를 반환하면 요소를 유지하고 false를 반환하면 제외합니다.
- 다음 3가지의 인수를 가집니다.
  1. element - 배열의 현재 요소
  2. index(Optional) - 배열의 현재 요소의 인덱스
  3. array(Optional) - 호출한 배열
thisArg(Optional)
- callback함수를 실행할때 this로 사용되는 값

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행하고 결과가 true인 요소들만으로 이루어진 새로운 배열을 반환합니다.

예제

1. 배열 속 숫자 중 홀수만 갖는 배열 만들기

const numbers = [1, 2, 3, 4, 5]; // 기존 배열

// filter1 - callback함수를 직접 작성
// 현재 요소를 2로 나눈 나머지가 1일 경우 홀수
const filter1 = numbers.filter(currentNumber => currentNumber % 2 === 1);

console.log('filter1 =', filter1);

또는

// filter2 - callback함수 선언 후 이용
function isOdd(currentNumber) {
  return currentNumber % 2 === 1;
}

const filter2 = numbers.filter(isOdd);

console.log('filter2 =', filter2);

Result

filter1= [1, 3, 5]
filter2= [1, 3, 5]

2. 오브젝트 배열 속 원하는 요소만 갖는 배열 만들기

// 실제직업과 다릅니다.
const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러',
    married: false,
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
    married: false,
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남',
    married: true,
  }
];

// 자유인들만 뽑아봅시다.
const happyPeople = friends.filter((friend) => {
  
  return friend.married === false;
})

console.log('현재 행복한 친구들.. ', happyPeople);

Result

[
  {
    name: '양주진',
    age: 32,
    job: '코인러',
married: false
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼',
married: false
  }
];

JavaScript - 배열 map() 사용법 및 예제

도꼬 — Tue, 27 Apr 2021 12:49:41 +0900

구문

자바스크립트의 map함수는 callback함수 실행한 결과 반환값으로 배열의 길이, 순서를 유지한 새로운 배열을 만듭니다.

arr.map(callback(currentValue[, index[, array]])[, thisArg])

파라미터

callback function
- callback함수는 다음 3가지의 인수를 가집니다.
  1. currentValue - 배열의 현재 요소
  2. index(Optional) - 배열의 현재 요소의 인덱스
  3. array(Optional) - 호출한 배열
thisArg(Optional)
- callback함수를 실행할때 this로 사용되는 값

반환 값

배열을 순서대로 불러 각 요소에 대해 callback 함수을 실행한 결과로 새로운 배열을 만듭니다.

예제

1. 배열 속 숫자의 제곱을 구한 새로운 숫자배열 만들기

const numbers = [1, 2, 3, 4, 5]; // 기존 배열

// map1 - callback함수를 직접 작성
const map1 = numbers.map(currentNumber => currentNumber * currentNumber);

console.log('map1 =', map1);

또는

// map2 - callback함수 선언 후 이용
function calcDouble(currentNumber) {
  // Math.pow(x, y) - x의 y 제곱을 반환합니다.
  return Math.pow(currentNumber, 2);
}

const map2 = numbers.map(calcDouble);

console.log('map2 =', map2);

Result

map1 = [1, 4, 9, 16, 25]
map2 = [1, 4, 9, 16, 25]

2. 숫자배열로 숫자값과 인덱스를 갖는 오브젝트 배열 만들기

가끔 기존의 배열이 숫자배열이라고해서 만들수 있는 배열도 무조건 똑같은 타입의 숫자배열이라고 오해하는 상황이 생기는데

기존 배열의 값과 길이만 이용할 뿐 새로운 타입의 배열을 만드는 것도 가능합니다.

const numbers = [1, 3, 5, 7, 9];

const objectArr = numbers.map((number, index) => ({ number, index }));

console.log('objectArr =', objectArr);

Result

objectArr = [
    {
        "number": 1,
        "index": 0
    },
    {
        "number": 3,
        "index": 1
    },
    {
        "number": 5,
        "index": 2
    },
    {
        "number": 7,
        "index": 3
    },
    {
        "number": 9,
        "index": 4
    }
]

3. 오브젝트 배열을 이용하여 새로운 오브젝트 배열 만들기

map 함수는 기존의 배열을 수정하는 것이 아닌 새로운 배열을 만들기 때문에 상황에 따라 기존 배열을 유지하고 새로운 배열을 만드는 데 쓰기 적합합니다.

// 실제직업과 다릅니다.
const friends = [
  {
    name: '양주진',
    age: 32,
    job: '코인러'
  },
  {
    name: '오영제',
    age: 32,
    job: '랩퍼'
  },
  {
    name: '서준형',
    age: 32,
    job: '2년차 유부남'
  }
];

// 10년 후의 모습을 예상합니다.
const tenYearsLaterFriends = friends.map((friend) => {
  // 나이는 10살씩 더 먹겠네요
  const returnObj = friend;
  returnObj.age += 10;
  
  // 새로운 직업을 갖고 있을 듯 합니다.
  let newJob;
  switch(returnObj.job) {
    case '코인러':
      newJob = '한강뷰 또는 한강속';
      break;
    case '2년차 유부남':
      newJob = '12년차 유부남';
      break;
    default:
      newJob = '무직';
      break;
  }
  
  returnObj.job = newJob;
  
  return returnObj;
})

console.log('10년 후 친구들.. ', tenYearsLaterFriends);

Result

[
  {
    name: '양주진',
    age: 42,
    job: '한강뷰 또는 한강속'
  },
  {
    name: '오영제',
    age: 42,
    job: '무직'
  },
  {
    name: '서준형',
    age: 42,
    job: '12년차 유부남'
  }
];

Laravel - Ubuntu 라라벨 설치

도꼬 — Wed, 13 Sep 2017 00:37:54 +0900

#!/usr/bin/env bash

# 패키지 목록 업데이트

sudo apt-get update

# 시스템 패키지 업데이트

sudo apt-get -y upgrade

## PHP7 설치

sudo apt-get install -y php7.0-cli php7.0-sqlite3 php7.0-curl php7.0-mcrypt php7.0-mysql php7.0-readline php7.0-mbstring php7.0-xml php7.0-zip php7.0-intl

## PHP7 fpm 설치

sudo apt-get install php7.0-fpm

## MySQL 5.7 설치

sudo apt-get install -y mysql-server-5.7 mysql-client-core-5.7

## nginx, redis

sudo apt-get install -y nginx redis-server redis-tools

## composer 전역 설치

curl -O -sS https://getcomposer.org/installer

sudo php installer --install-dir=/usr/local/bin

sudo ln -s /usr/local/bin/composer.phar /usr/local/bin/composer

## laravel설치

composer create-project --prefer-dist laravel/laravel Laravel "5.3.*"