블록체인하는 만두아빠

ESLint는 위키백과에 따르면 자바스크립트 코드 상에서 발견되는 문제 패턴을 식별하기 위한 도구입니다. 개인적으로 작업하는 프로젝트야 사실 본인만 알아볼 수 있다면 큰 문제가 되지 않겠지만 한 프로젝트를 공동 작업할 경우 공통된 규칙으로 작성해야 협업에 수월할 것입니다. ESLint는 현행 ECMA스크립트 표준을 지원해 코드 품질과 코딩 스타일을 일관성있게 구성할 수 있도록 돕습니다.

ESLint는 VSCode 사용자의 경우 Extension을 통해 간편하게 설치, 사용할 수 있습니다. 혹은 원하는 프로젝트에만 설치, 적용하는 방법도 있습니다.

적용을 원하는 프로젝트 터미널에서 ESLint를 설치해줍니다.

설치 
- npm 사용
$ npm install eslint

- yarn 사용
$ yarn add eslint

npx eslint --init

React 17버전 이후로 Import React from 'react'; 없이도 문제없이 코드를 작성할 수 있습니다만 ESLint는 별도의 설정없이는 이 React Import를 오류로 잡아냅니다. 이렇게요.

오류를 해결하기 위해 일일이 Import React from 'react'; 해주는 방법도 해결방법..이긴 하겠지만 ESLint 규칙에서 이 부분을 꺼버리는 것도 방법이 되겠습니다.

위의 과정대로 생성한 .eslintrc.js 파일 내에 rules 아래에 다음과 같이 입력해주면 됩니다.

module.exports = { 
...

    "rules": {
      ...
    	"react/react-in-jsx-scope": "off",
      ...
    }

...
}

프론트엔드 작업 중 Compile Error는 아니지만 아래와 같이 Warning이 떴습니다.

React를 사용하여 작업 중에 <a> 태그를 사용해서 링크를 연결했는데 이 <a> 태그의 href="" 부분에 유효한 값을 할당하지 않아서 생기는 경고입니다. 

유효한 링크를 걸어두면 쉽게 해결이 가능하나 테스트 중인 경우나 유효한 링크가 준비가 안된 경우 우선적으로 아래의 예시들과 같이 처리하여 오류를 없앨 수 있습니다.

<a href="#!">오류 해결</a>
<a href="/#">오류 해결</a>
<a href="{()=>false}">오류 해결</a>
<a href="javascript:void(0);">오류 해결</a>
<a href="javascript:;">오류 해결</a>

혹은 해당 경고가 뜬 코드의 최상단에 /* eslint-disable jsx-a11y/anchor-is-valid */ 를 입력하여 eslint를 비활성화하는 것도 방법이 되겠습니다. <a>태그가 너무 많아 일일이 처리를 해주기 어려운 경우에 간편하게 사용이 가능합니다.

기존의 Javascript에서는 변수선언할 때 기본적으로 variable을 줄인 var를 사용했습니다만 ES2015(ES6)에서 let와 const가 추가되었습니다. 기존의 var 선언과 다른 점이 있기 때문에 추가된 것이겠죠? var, let, const는 각각의 역할을 가지고 있습니다. 당연한 이야기겠지만 Javascript 개발자들은 이 세 가지의 차이점을 잘 알고 사용하는 것이 필요할 것입니다. 

var 선언

같은 변수명으로 중복 사용이 가능합니다. 여러번 중복으로 사용될 경우 가장 마지막으로 할당된 값이 변수에 저장됩니다. 따라서 var은 재선언되고 업데이트 가능합니다.

var greeting = "hi";
console.log(greeting);
// 출력 : hi

var greeting = "안녕하세요";
console.log(greeting);
// 출력 : 안녕하세요

var 사용은 아주 간편하지만 중복 사용이 가능하기 때문에 생기는 문제점이 있습니다. 코드의 다른 부분에서 같은 이름의 변수를 사용한 적이 있다면 출력 결과가 달라질 수 있습니다. 위의 코드 예제에서 greeting을 통해 "hi"를 출력하고 싶었는데 아래에 같은 이름의 변수로 "안녕하세요"가 선언되었기 때문에 greeting은 최종적으로 "안녕하세요"를 출력합니다. 혼자 작업하는 경우라면 이를 방지하기 위해 기억해두거나 메모를 해둘 수 있겠지만, 여럿이 협업하는 경우라면 문제가 생길 가능성이 있습니다.

let 선언

let은 var 선언의 문제점인 중복문제를 해결하면서도 재선언이 가능합니다. 

let greeting = "hi";
console.log(greeting);
// 출력 : hi

let greeting = "안녕하세요";
console.log(greeting);
// 출력 시 Syntax Error 발생. 변수 greeting이 이미 선언되었다는 에러 메시지 출력 

greeting = "gracias";
console.log(greeting);
// 출력 : gracias

let을 사용한 변수와 같은 이름으로 다시 let 선언하면 Syntax 에러 메시지가 출력됩니다. 어느 부분에서 문제가 생겼는지 확인한 후에 변수를 업데이트할 것인지 변수명 자체를 수정할지 결정하면 됩니다.

const 선언

let은 재선언을 통해서 업데이트가 가능하지만 const는 업데이트도 불가능합니다. 

const greeting = "hi";
console.log(greeting);
// 출력 : hi

const greeting = "안녕하세요";
console.log(greeting);
// 출력 시 Syntax Error 발생. 변수 greeting이 이미 선언되었다는 에러 메시지 출력 

greeting = "gracias";
console.log(greeting);
// 출력 시 Type Error 발생.

const로 선언된 변수는 일정한 상수값을 유지하게 됩니다. 따라서 중복 사용도 재선언을 통한 업데이트도 할 수 없습니다. 따라서 const 선언의 경우 선언하는 시점에 초기화가 되어야합니다.

var, let, const라는 변수를 선언하는 세 가지 방법의 차이를 확실하게 구분하고 필요한 상황에 맞는 방법을 사용하면 되겠습니다.

Nodejs 설치는 Nodejs 홈페이지에서 가능하며 LTS(Long Terms Support) 버전과 최신 버전을 확인할 수 있습니다. 일반적으로 LTS 버전을 다운로드하여 설치하는 것이 여러모로 좋습니다.

개발을 하다보면 프로젝트마다 Node 버전 호환 문제로 다른 버전을 사용해야할 때가 있습니다. 각각 다른 라이브러리나 프레임워크를 사용하게 되는 경우가 많기 때문입니다. 그때마다 Node를 지우고 필요한 버전으로 새로 설치하는 번거로움이 없이 NVM(Node Version Manager)이라는 버전 관리툴을 사용하면 쉽게 버전을 넘나들며 작업을 이어갈 수 있습니다.

Windows 환경의 경우 nvm-windows를 검색하셔서 나오는 Github 페이지에 들어가서 다운로드 가능합니다.

MacOS 환경의 경우 터미널에서 아래의 커맨드를 입력해줍니다

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

제대로 설치되었는지 확인하기 위해서 터미널에서 nvm을 입력해봅니다.

원하는 버전을 설치하기 위해서는 nvm install 이후에 해당하는 버전을 작성해주면 됩니다.

$ nvm install 14.**.**

nodejs 최신 버전을 설치하거나 LTS 버전을 설치하려면 각각 node와 --lts를 입력해줍니다.

$ nvm install node

$ nvm install --lts

설치된 nodejs들의 목록을 한번에 확인하기 위해서 nvm ls를 입력합니다.

nvm ls로 목록이 나타날 때 현재 적용되어있는 버전은 옆에 *가 표시되어 있습니다.

버전 변경을 하기 위해서는 nvm use로 원하는 버전을 선택해주면 됩니다.

삭제는 간단하게 nvm uninstall 후에 삭제를 원하는 버전을 입력합니다.

npm을 통해 의존성(Dependency) 설치할 때 -D 혹은 -save--dev를 사용하여 개발에만 사용되고 실제 브라우저에서는 사용하지 않을 패키지를 별도로 관리할 수 있습니다.

개발용 의존성 설치
npm install -D
혹은
npm install -save--dev

일반 의존성 설치
npm install

Reactjs로 프론트 페이지 개발 중 Axios로 API를 호출하는 가장 기본적인 방법에 대해 알아봅시다.

Axios는 공식 Docs에 의하면, 브라우저와 Node.js를 위한 Pormise 기반 HTTP 클라이언트 입니다.

편하게, Ajax와 함께 프론트와 백엔드 사이의 통신을 편하게 연결해주는 라이브러리라고 보시면 되겠습니다.

사용 방법은 생각보다 더 간단합니다.

우선 설치!

npm install axios

yarn add axios

간단한 예제를 통해서 API를 호출해서 데이터를 화면에 띄워보도록 합시다.

무료로 가상의 API를 제공해주는 Jsonplaceholder를 사용해서 API를 호출해볼 것입니다. 

Jsonplaceholder에서 제공하는 API 중 Comments의 첫번째 내용을 출력해보겠습니다.

import React, {useState} from 'react';
import axios from 'axios';

const App = ()=>{
  const [data, setData] = useState(null);
  const onClick = ()=>{
    axios.get('https://jsonplaceholder.typicode.com/comments/1').then(reponse => {
      setData(reponse.data);
    });
  }
  return (
    <div>
      <div>
        <h3>Axios 테스트해보기</h3>
        <button onClick={onClick}>불러오기</button>
      </div>
      {data && 
        <div>
          <br />
          번호 : {data.postId} <br />
          Email : {data.email} <br />
          Body : {data.body} <br />
        </div>
      }
    </div>
  );
}

export default App;

작성한 예제를 직접 실행해보면 다음과 같은 불러오기 버튼이 뜹니다. 클릭해서 확인해봅시다.

원본으로 제공되는 API는 아래 같이 구성되어 있지만, 우리는 필요한 요소를 가지고 순서를 조금 변경해서 원하는 내용을 GET 요청으로 띄워볼 수 있습니다.

간단한 예제에는 별다른 CSS 적용이 없었지만 Axios를 활용하여 API 요청을 받아오는 방법만 이해한다면, 원하는대로 화면을 구성해서 정보를 띄워볼 수 있을 것입니다.