프론트엔드Explorer

백엔드 작업을 위해 Node를 사용하기 때문에 Node가 서버라고 오해하기 쉽지만, Node는 서버가 아니다. 

Node 공식 홈페이지에도 나와있듯, Node는 javascript runtime이다.

javascript runtime은 javascript 코드를 실행할 수 있도록 해준다. 

그렇다면 javascript로 서버는 어떻게 구동하냐? 

노드는 http라는 모듈을 제공한다.  app.js를 실행하는 순간,

javascript runtime인 노드가 아래의 코드를 실행해서 http가 서버 역할을 수행하게 된다. 

// app.js
const http = require('http'); 
const server = http.createServer(() => {

}); 
server.listen(3065); 

아래 포스팅에 자세히 설명을 해두었다. 

dolphinsarah.tistory.com/21?category=467228

그래도 간단히 설명해보자면, map을 도는 배열의 key를 고유한 값으로 설정하라고 하는 것은,

그렇게 하지 않았을 때 => 배열 전체가 리렌더링 될 필요가 없음에도 리렌더링 되는 것을 방지하기 위해서다.  

이를테면, push를 통해 아이템이 배열 끝에 추가될 경우, 마지막 요소만 변경되었으니 전체를 리렌더링할 필요가 없는 경우. 

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다.

JavaScript 정규표현식

MDN에서는 정규표현식을 문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴이라고 소개한다. 

예를 들어, '/chat/write'에서 '/chat'만 추출하고 싶을 때 정규표현식을 사용한다. 즉 문자열에서 특정 패턴의 문자열만 추출하고 싶을 때 사용한다고 생각하면 된다.

정규표현식은 내가 찾고자 하는 패턴을 표현해주면 된다. 모두 외우고 있을 수 없기 때문에 그때그때 정규표현식 테스트 사이트(regexr.com/)에서 찾아보면 된다. 

나는 location이 '/chat/write'인 페이지에서, '목록으로'라는 버튼을 클릭했을 때 '/chat/list'로 라우팅되기를 원했기 때문에 '/chat/write'에서 '/chat'만 추출하고자 했다. 그래서 '/'로 시작하는 단어 중 첫번째 것만 추출하면 되었다. 

정규표현식은 '/'로 감싸야 한다. 즉, /내가 찾고자 하는 패턴/ 으로 표현해준다. 나는 현재 /와 영어 단어 조합으로 이루어진 패턴을 추출하고 싶으므로, 두 가지 조건을 모두 포함하기 위해 '()'로 묶는다. /에 해당하는 문자열을 찾아야 하기 때문에 대괄호 안에서 감싼다. [/] 이 뒤에 영어 단어(한 글자 아님)가 와야 하므로 \w+로 표현한다. 즉 합치면, /([/]\w+)/가 된다. 

이제 문자열에서 이 패턴과 매치하는 단어를 뽑아주면 된다. 이럴 때 match()를 사용한다. 이 때, match()는 배열을 리턴하므로 0번째 인덱스에 우리가 찾고자 하는 단어가 들어가 있다. 그래서 아래와 같이 작성해주면 된다. 

const location = useLocation().pathname; // ex) /chat/list 
const upperLocation = location.match(/[/]\w+/)[0]; // ex) /chat

// 클릭했을 때 /chat/write로 라우팅 되기를 원한다면 아래와 같이 표현해주면 된다.
<button onClick={() => history.push(`${upperLocation}/write`)}>글쓰기</button>

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다. 

JavaScript 배열에서 max 값 찾기(spread operator)

JavaScript 배열에서 max 값을 찾기 위해서는 spread operator(전개 연산자)를 사용해야 한다.

배열 num의 max 값을 찾기 위해 아래 코드처럼 그냥 바로 Math.max(num) 하면 안된다는 것이다. 

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

console.log(Math.max(num)); 
// 결과: Nan

Math.max()는 입력된 숫자 중 가장 큰 수를 반환한다. 배열에서 가장 큰 값을 찾기 위해 배열을 Math.max의 매개변수로 바로 넣어버리면 배열을 숫자로 인식하지 않기 때문에 Nan을 반환하는 것이다. 

즉, Math.max([1, 3, 5, 7, 9])의 형태가 아닌 Math.max(1, 3, 5, 7, 9) 형태로 들어가야 Max를 제대로 반환하게 된다. 

[1, 3, 5, 7, 9]를 1, 3, 5, 7, 9로 바꾸어 줄 수 있는 것이 spread operator(...), 전개 연산자이다. 

MDN에서는 spread operator를 다음과 같이 설명하고 있다. 

> 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

즉, 배열을 요소로 바꾸어주는 것이라고 생각하면 된다. 

그래서 배열에서 max 값을 찾고자 한다면, 아래처럼 배열 이름 앞에 spread operator를 넣어주면 된다. 

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

console.log(Math.max(...num)); 
// 결과: 9

배열이 특정 요소를 포함하고 있는지 판별(Array.includes())

특정 요소가 몇 번째 인덱스에 있는지 확인하고 싶을 때는 Array.indexOf(),

특정 요소를 배열이 포함하고 있는지 확인하고 싶을 때는 Array.includes() 

for ... in, for ... of 

for ... in은 객체 key 순환, 

for ... of는 객체 value 순환

서버에서 로그인 인증하는 법 

프론트에서 id와 password를 보내면, 백에서는 받아온 id를 먼저 찾고, 이 id가 가지고 있는 password와 받아온 password가 같은지 확인한다. 

dispatch가 먼저일까, 서버와의 통신이 먼저일까

action을 dispatch하는 게 먼저일지 서버로 데이터를 보내는 게 먼저일지를 고민했다. 

그런데 아래처럼, axios post한 결과가 succeed냐, failed냐에 따라 dispatch 해야하는 action이 달라진다면, 서버와 먼저 통신하고, action을 dispatch하는 게 맞을 것이다. 

export function loginRequest(username, password) {
  return (dispatch) => {
      dispatch(login());
 
      // API REQUEST
      return axios.post('/api/account/signin', { username, password })
      .then((response) => {
          // SUCCEED
          dispatch(loginSuccess(username));
      }).catch((error) => {
          // FAILED
          dispatch(loginFailure());
      });
  };
}

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다. 

react redux axios post 

회원가입 폼 제출 시, 해당 user가 넘긴 정보(nickname, phone, role)가 dispatch되고 axios post를 하는 코드를 작성했다.

여기서 잠깐 redux 개념을 정리하고 가자면,,, 

redux는 데이터의 중앙 저장소이다. 각 컴포넌트에서 필요로 할때 꺼내 쓸 수 있는 장소라고 생각하면 된다. 

redux에서 data를 바꾸기 위해서는 action이 필요하고, action을 dispatch하면 중앙 저장소의 data가 변경된다. 그런데 action을 dispatch한다고 data가 자동으로 바뀌는 것은 아니고, reducer에서 어떻게 바꿀지를 구현해주어야 한다.

회원가입 폼을 제출하면, registerUser 액션을 dispatch해 중앙저장소에 user data를 추가해준다.

// components > SignUpPage.js

const onSubmitForm = useCallback(
        async () => {
            const nickname = await makeNickname();
            await dispatch(registerUser({ role, phone, nickname }));
        },
        [role, phone],
);

registerUser 액션은 registerAction을 dispatch하고, axios post를 통해 해당 서버로 data를 넘겨준다.

// reducers > user.js

export const registerUser = async (data) => {
    return (dispatch) => {
        dispatch(registerAction(data));
        return axios.post('http://localhost:8080/users', data);
    };
};

export const registerAction = (data) => {
    return {
        type: REGISTER_USER,
        data,
    };
};

JavaScript insertion sort(삽입 정렬)

삽입 정렬은 array의 두번째 인덱스에서 시작해서 마지막 인덱스가 될때까지, 앞의 요소들과 비교해 작으면 삽입하는 정렬 방식이다. 

function solution(arr){
  const answer = arr;

  for(let i = 1; i < arr.length;  i++){
  	
    // tmp는 비교대상이 될 임시적 변수 
    const tmp = arr[i]; 
    
    // j는 tmp의 앞 인덱스
    let j = i - 1
    
    for(; j >= 0; j--){
      if(tmp < arr[j]){
        arr[j+1] = arr[j]; 
      } 
      
      else{
        // tmp가 더 크면 더 이상 비교할 필요 없다. 앞의 요소들은 이미 정렬된 상태이므로
        break; 
      }
    }
    
    // j가 -1이 된 경우, 즉 모든 요소가 tmp보다 컸다면 arr[0]에 tmp에 들어가야 하고
    /*
    	중간에 break된 경우, 
        예를 들면 j가 2일때 break 되었다면, 
        arr[2]보다는 tmp가 크고, arr[4]보다는 tmp가 작다는 뜻이므로
        j가 3인 자리에 tmp가 들어가야 한다. 
    */
    // 즉, 둘 중 어떤 경우라도 항상 인덱스가 (j + 1)인 자리에 tmp가 들어가야 한다.
    arr[j+1] = tmp; 
  }

  return answer; 
}

let arr = [11, 7, 5, 6, 10, 9]; 
console.log(solution(arr));

JavaScript Array.slice()

slice()는 배열에서 특정 인덱스부터 특정 인덱스까지의 복사가 필요할 때 주로 쓰인다. 즉, 원본 배열은 건드리지 않는 메소드이다. 

arr.slice(begin, end) 형태로 쓰이며, 'begin'번째 인덱스부터 'end - 1'번째 인덱스까지 복사된다. 즉, end 인덱스는 미포함이다.    

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2, 4));
// 결과: ["camel", "duck"]
// 2번째 인덱스부터 (4-1)번째 인덱스까지 복사, 즉, 4번째 인덱스는 미포함

// 배열 전체를 복사하고 싶을 때
console.log(animals.slice());

console.log(animals.slice(2));
// 결과: ["camel", "duck", "elephant"]
// 2번째 인덱스부터 끝 인덱스까지 복사됨

*하루동안 새롭게 알게된 부분, 에러를 해결한 방법 등을 작성하는 개발일기입니다. 다른 사람에게도 설명해줄 수 있도록 제 머릿속에 넣기 위해 정리를 시작하게 되었습니다. 

JavaScript 배열에서 랜덤 값 추출하려면, 배열의 인덱스 값을 랜덤으로 뽑아주면 된다. 

예를 들어, 길이가 10인 배열에서 랜덤 값을 뽑아주려면, 0~9 중에서 하나의 인덱스가 뽑히면 된다. 

Math.random()은 0부터 1미만의 수를 랜덤하게 리턴하므로 범위가 0~9가 되려면 Math.random() * 10, 즉, Math.random() * array.length 한 결과의 소수점을 버림해주면 된다. 

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
const randomVal = num[Math.floor(Math.random() * num.length))]; 

인덱스는 정수이다. 그래서 (Math.random() * 10의 결과로 9.xx와 같이 소수점이 붙은 형태로 리턴될 수 있기 때문에) 소수점을 버려줘야 한다. 

0 <= Math.random() < 1
0 <= Math.random() * 10 < 10

TypeScript는 왜 만들어졌나?

JavaScript는 C나 Java와 같은 C-family 언어와는 구별되는 특성이 있다. 

- Prototype-based Object Oriented Language 

- Scope와 this 

- 동적 타입(dynamic typed) 언어 or 느슨한 타입(loosely typed) 언어 

이와 같은 특성은 클래스 기반 객체지향 언어(Java, C++, C# 등)에 익숙한 개발자를 혼란스럽게 하며, 코드가 복잡해질 수 있고, 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있다. 특히 규모가 큰 프로젝트에서는 주의하여야 한다. 

이런 Javascript의 태생적 문제를 극복하고자 AltJS(JavaScript의 대체 언어)가 등장하였다. 

TypeScript 또한 JavaScript의 대체 언어의 하나로, JavaScript(ES5)의 Superset(상위확장)이다.

TypeScript는 ES5의 Superset이므로 기존의 Javascript(ES5) 문법을 그대로 사용할 수 있다. 또, ES6의 새로운 기능을 사용하기 위해 Babel 같은 별도의 transpiler를 사용하지 않아도, ES6의 새로운 기능을 기존의 JavaScript 엔진(현재 브라우저 or Node.js)에서 실행할 수 있다.   

TypeScript 기초 of 기초

TypeScript와 JavaScript의 차이 

- TypeScript는 JavaScript와 달리 Type을 적는다. 

- JavaScript는 약타입 언어, TypeScript는 강타입 언어 

타입은 왜 적을까? 

- 코드가 조금 길어지더라도 명시적인 코드가 더 좋아서  

- 타입이 있으면, 코드를 읽을 때 이해하기가 더 쉬워서 

- TypeScript는 transpile 때 오류를 찾을 수 있어서 

암묵적 타입 vs 명시적 타입 

타입을 지정해주지 않으면, 알아서 타입을 추론해 타입을 대입한다. 하지만, JavaScript와는 달리 다른 타입을 같은 변수에 대입하려고 하면 오류가 발생한다. 이것은 명시적으로 작성한 변수에서도 마찬가지다. 

명시적으로 작성하기 

예전 JavaScript 개발자들은 암묵적인 코드를 많이 작성했다. 하지만 그런 방식은 코드를 이해하기 힘들게 만든다. 그래서 요즘에는 아래와 같이 arguments를 사용해서 함수를 작성한다고 한다. (*spread operator를 사용하는 이유는 arguments가 몇 개인지 딱 정해지지 않기 때문이다.) 

function bar(...args){
  console.log(args[0], args[1]);
  return 0; 
}
bar(10, 20); 

기본적인 타입

- 변수 뒤에 선언된 number는 숫자 전체를 나타내는 타입

- 조금 더 범위를 좁히고 명확하게 타입을 나타내는 방법은 line 6처럼 'type Age'와 같이 타입을 선언하는 것 

- Age는 나이라는 타입을 나타낸다. 나이는 숫자여야 하기 때문에 'type Age = number'로 선언함 

TS compile

- TypeScript는 컴파일해서 JavaScript 파일이 된다. 프로그램은 컴파일된 JavaScript 파일이 실행되어 돌아간다. 

- 타입은 TypeScript에서 JavaScript로 컴파일될 때 사용된다. 컴파일 된 JavaScript는 우리가 아는 JavaScript와 똑같다. 즉, 그곳에는 타입이 없다. 

- TypeScript에서 컴파일 된 JavaScript가 실행될 때 작동되는 것도 있다. 

객체 타입

객체의 타입을 선언할 때는 아래 코드처럼 표현하고자 하는 객체와 동일 구조를 가진 타입을 선언하면 된다. 이러한 방식을 type Alias라고 한다. 

객체의 타입을 선언하는 방법은 하나가 더 있다. interface는 아래 코드처럼 type 대신 interface를 사용해 선언할 수 있다.

poiemaweb.com/typescript-introduction

velog.io/@wooder2050/%EC%9A%B0%EC%95%84%ED%95%9C-%ED%85%8C%ED%81%AC%EB%9F%AC%EB%8B%9D-ReactTypescript-1%ED%9A%8C%EC%B0%A8