글쓰고 싶은 개발자

일반 과목들을 공부할 때, 개념서를 먼저 훑는 편이다. 한 번 훑는 것에 그치지 않고 몇 회독씩 반복하며 공부하는 타입이라 대학 다니면서 전공과목 시험공부도 실습보다는 전공서적을 몇 번씩 읽으며 준비하곤 하였다. 그런 방법으로 꽤 좋은 성적을 받으며 다녔다. 막상 사회에 나와보니 무조건 개념서 회독이 답이 아님을 하루하루 느낀다. 개념이 중요하지 않다는 말은 절대 아니고, 개념만 이해했을 때 분명 한계가 있다는 뜻인데, 이게 개발에서는 더욱 많이 적용되는 것 같다. 기능의 비즈니스 로직을 구현하는 알고리즘에는 단순 개념의 100 회독보다는 10번의 노하우가 더 유용할 때가 많기 때문이다. 그런 면에서 '백문이 불여일견'이라는 말을 공부법에 적용시키는게 좋다고 생각했는데, 직접 부딪히며 코딩해보는 방법이다..

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에 기본적으로 설정되어 있던 코드와 내가..

https://yuniel.tistory.com/60 axios를 통한 오픈 API 연결하기 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나오면 당황해버린다... 허허... 실무에만 신경쓰고 개인 포트폴리오를 잘 안 하다보니 할 때마다 매 번 새롭다 yuniel.tistory.com 상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은 웹팩으로 설치한 경우라서 해당이 안 되시는 분들에게는 매우 불친절한 설명이라고 생각이 들었다. https://yuniel.tistory.com/34

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

알고 있고, 배우고 있는 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..

toBe vs toEqual jest를 처음 배우면 예시로 가장 많이 나오는 것이 아마 toBe일 것이다. test('1 = 1이다.', () => { expect(1).toBe(1); }); 영어처럼 해석을 해 본다면 아마 1이 1이기를 기대한다 정도 되지 않을까. 조금 더 공부하다보면 비교를 할 수 있는 여러가지 문법이 나오는데, 그 중에서도 toBe와 toEqual은 같은든 매우 다른 양상을 보인다. 예를들어 test('1+1 = 2가 맞을까', () =>{ expect(1+1).toBe(2); }); test('1+1 = 2가 맞을까', () =>{ expect(1+1).toEqual(2); }); 의 상단 두 구문은 toBe와 toEqual 모두 true를 반환하여 test를 통과한다. 여기까지..

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

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

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