728x90

Javascript 8

react creat-react-app 설치, eslintrc.js 통해 eslint 설정하기

react CRA는... 정말 모든 게 다 있다. 코딩을 하던 중 eslint 규칙을 한 곳에서 설정해야겠다.라고 생각이 들어 package.json을 찾아보니, 웬걸. react CRA는 eslint까지 설정하고 있었다. 덕분에 손 안 대고 코 풀 정도로 쉬운 설정이 가능하였다. 보통은 명령어를 통하여 많이 설치하곤 한다. npm i eslint https://www.npmjs.com/package/eslint eslint An AST-based pattern checker for JavaScript. www.npmjs.com 나는 먼저 최상단 root에 eslint를 설정할 수 있는 eslintrc.js 파일을 생성하였다. 그리고 내부에는 package.json에 기본적으로 설정되어 있던 코드와 내가..

axios를 통한 오픈 API 연결하기

나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다. 짜릿해. 나를 반성하는 마음으로 또 나와같이 할 때마다 검색을 해보시는 분들을 위하여 정리해보도록 한다. 심지어 이 글은 내가 예전에 만들었던 코드들을 기반으로 작성한다. 과거의 나는 오늘의 내가 다시 헤맬줄은 몰랐겠찌 ㅎ.ㅎ... (사실 진짜 별거 없어서 쓰기 부끄럽..) * 오픈 api를 사용하려면 회원가입을 통하여 각자에게 맞는 발급키를 받아야 한다. 해당 포스팅은 키를 발급받았다는 가정하에 진행한다. * 보통 발급 key값은 필수일테고, 이외의 것은 사용하고자 하는 api의 필수값에 따라 다르다...

[jest로 test하기] jest matcher 모음집 (+계속 추가중)

알고 있고, 배우고 있는 jest의 matcher들을 정리하는 포스팅으로 제가 더 많이 알아가면 알아갈수록 추가될 예정입니다~ ^0^ matcher란 jest에서 제공하는 테스트 결과값을 확인하는 함수. 하단에 존재하는 matcher list. ctrl + f로 찾는것을 권장합니다. toBe not.toBe toEqual toStrictEqual toBeNull toBeFalsy toBeTruthy toBe test('toBe 사용법', () => { expect(결과값).toBe(기대값); }); // 테스트 통과 사례 test('1 = 1이다', () => { expect(1).toBe(1); }); 기대값과 결과값의 일치 여부 확인 - 일치 해야 테스트 통과 not.toBe test('not toB..

[jest로 test하기] 간단 명료한 Jest의 기본사항 모음

제스트 공식 문서 https://jestjs.io/ Jest By ensuring your tests have unique global state, Jest can reliably run tests in parallel. To make things quick, Jest runs previously failed tests first and re-organizes runs based on how long test files take. jestjs.io 제스트 설치하기 https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using yarn: jestjs.io yarn add --dev jest npm install --save-..

[뷰쟁이의 리액트 시작하기] react useEffect로 랜더링 상태 관리하자

react에서 hook을 도입하면서 제일 좋아진 이점은 바로 함수형 컴포넌트 + 상태 관리가 한 번에 된다는 점이었다. hook에 대한 자세한 사항은 다음 포스팅을 읽으면 좋을 듯 하다 -! https://yuniel.tistory.com/42 [뷰쟁이의 리액트 시작하기] 리액트 hook 이란? React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이 yuniel.tistory.com 아무튼 개인적으로 그 중에 가장 체감적으로 많이 느껴지는 부분은 바로 useEffect를 사용할 때이다. 아마 랜더링 될 때, 업데이트될 때, 렌더링이 디스트로이 될 때 모..

[뷰쟁이의 리액트 시작하기] react useState로 변수를 선언해보자

뷰쟁이가 react를 처음 맞이하고 가장 적응이 안 되었던 부분은 바로 변수의 선언이다. 우선 react hook에서는 useState를 통하여 변수를 선언하고, 초기화시키고, 변형시킬 수 있다. 물론 흔히 아는 방식처럼 const test = ‘테스트입니다’; 라는 식으로도 선언과 초기화를 시킬 수 있지만, 이는 변형시킬 수 없다는 문제가 있다. 뒤의 글을 읽으면 자연스레 이해하게 되리라. 먼저 useState를 쓰는 형식이 있다. const [ 변수명, 변수정의함수 ] = useState(기본값); const [ count, setCount ] = useState(0); 즉, count + 1을 하기 위하여 반드시 setCount(count + 1)} > 다음과 같은 형식으로 써야만 인식한다. 이는 ..

[뷰쟁이의 리액트 시작하기] 리액트 hook 이란?

React는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 있습니다. 그 중 클래스형 컴포넌트를 사용했던 이유는 코드 내의 상태 변화나 라이프 사이클(componentDidMount 등)을 사용하기 위함이었습니다. 그러나 클래스형 컴포넌트의 치명적인 단점은 컴포넌트 사이에서 상태 로직을 재 사용하기 어려우며, 이에따라 코드가 길고 복잡해짐을 야기합니다. 이를 보완하기 위하여 나온 것이 바로 hook입니다. (스우파 HOOK 아님 주의. 아이키 언니 멋있어요>

[뷰쟁이의 리액트 시작하기] 리액트를 알아보자.

글을 시작하며.. (첫 시작을 알리는 벅찬 잡담이 시작됩니다... 지루하신 분은 스크롤을 시원하게 한 번 내려주시길..!) 인생을 흘러 흘러 살아오다가 문득 눈을 떠서 바라본 지금의 나는 VUE를 사용하는 프론트엔드 개발자가 되었다. 세상에 여러 직업이 많고, 하고 싶은 것도 참 많은 나였지만 그 중에 프론트엔드 개발자는 없었고, 생각도 해 본 적이 없었다... 아무튼 프론트엔드의 세계에 발을 들이게 되었는데, 기왕 할거면 전문가가 되어야 하지 않겠는가..! VUE에만 국한 될 수 없어 React를 하자고 마음먹은지 엄~청 오랜 시간이 지났지만 도무지 하지 않는 나를 채찍질 하기 위해 또 그간 많은 블로그들의 도움을 받았기에 이제는 나도 도움을 주고자 오늘부터 리액트를 포스팅하기로 했다- 작심삼일이 되지..

728x90