혜르미온느

몇 년간 진행했던 프로젝트를 보면 바벨 설정이 필수불가결하게 들어가있다. 그만큼 모든 프로젝트에 꼭 필요한 요소라는 뜻인데, 사실 사용하기는 프로젝트를 진행하는 매일 사용하지만 최초에 설정 이후에는 그 존재를 잊곤 한다. 바벨은 히브리어로 '혼돈'이라는 뜻을 가지고 있는데, 성경 속에서 언급되는 바벨탑도 언어의 혼돈(?) 이야기를 담고 있다. 마찬가지로 바벨도 혼돈된 스크립트 언어(?)의 이야기를 담고 있는, 마침 강의에 언급되어 확실하게 정리해보고자 한다. Babel은 transpiler 중 하나인데, 트랜스파일러란 영어의 뜻에서 알 수 있듯이 변환해주는 것을 의미한다. 컴파일러는 프로그래밍 언어를 기계어로 변환해 주는 것을 의미한다면, 트랜스파일러는 프로그래밍 언어를 같은 언어이지만 다른 문법으로 변..

01. 시작하며 섹션에는 총 3가지의 짧은 인강이 준비되어 있는데, 본 포스팅에서는 그 중 학습 환경 구성에서 특히 번들러 관련 항목을 정리해 볼 예정이다. 원시시대(?)의 인터넷을 보면 서비스가 엄청 크지 않았기 때문에 html에서 직접 를 로드하여도 큰 무리가 없었다.(고 한다.) 하지만 요즘 인터넷 서비스를 봐도 알다시피 서비스가 커지고 다양해짐에 따라 script 코드가 방대해지며, 각 파일들의 의존성과 로드 보장 순서 등이 중요한 화두가 되었다. 이를 해결하기 위해 사용하는 것이 바로 번들러이다. 번들러는 인터넷 서비스를 구성하기 위한 모든 모듈 파일들을 하나 또는 그 이상의 파일로 엮어주어 브라우저에서 코드가 잘 돌아갈 수 있도록 도와주는 소프트웨어이다. 좀 더 상세히 말해보자면 js들을 모아..

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

[!이시중] 2021년 11월 20일 12:00에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/61 에서 확인할 수 있음. https://hyermione.tistory.com/9 axios를 통한 오픈 API 연결하기 [!이시중] 2021년 11월 20일 11:25에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/60 에서 확인할 수 있음. 나이가 연차가 몇 년인데, 아직도 api 연결할 때 세팅을 까먹어서 url이 문구로 그냥 나.. hyermione.tistory.com 상단 포스팅에서 axios를 연결하며, api key는 개인 발급을 받는 것이니 환경 변수를 통하여 관리하라고 언급했었다. 그러면서 관련 포스팅을 연결했는데, 해당 포스팅은..

[!이시중] 2021년 11월 8일 12:00에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/49 에서 확인할 수 있음. 알고 있고, 배우고 있는 jest의 matcher들을 정리하는 포스팅으로 제가 더 많이 알아가면 알아갈수록 추가될 예정입니다~ ^0^ matcher란 jest에서 제공하는 테스트 결과값을 확인하는 함수. 하단에 존재하는 matcher list. ctrl + f로 찾는것을 권장합니다. toBe not.toBe toEqual toStrictEqual toBeNull toBeFalsy toBeTruthy 1. toBe test('toBe 사용법', () => { expect(결과값).toBe(기대값); }); // 테스트 통과 사례 test('1 = 1이다',..

[!이시중] 2021년 11월 7일 13:10에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/47 에서 확인할 수 있음. 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가 맞을까', () ..

[!이시중] 2021년 11월 6일 21:21에 최초 작성된 글로써 원글은 https://yuniel.tistory.com/46 에서 확인할 수 있음. 제스트 공식 문서 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 Star..