목록개발 (53)
게으른개발너D
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ctydSp/btsyU3wWgWi/kvpOKEhrAoxjLuMAjuHX21/img.png)
유닛 테스트 : 코드가 제대로 작동하는지 확인하기 위해 애플리케이션의 개별 모듈을 독립적으로 테스트(종속성과의 상호 작용없이)하는 것을 의미함. 통합 테스트 : 다른 모듈이 그룹으로 결합될 때 잘 작동하는지 확인하는 것을 의미함. 기능 테스트 : 시스템의 기능 조각(종속성과 상호 작용 할 수 있음)을 테스트하여 코드가 올바른 작업을 수행하는지 확인하는 것을 의미함. 통합 테스트와 관련이 있지만, 모든 코드가 함께 실행되는 상태에서 전체 애플리케이션의 기능을 확인하는 테스트를 의미함. 관리 방법 프로젝트를 진행하면서 가장 큰 고민 중 하나는 '테스트 코드를 어떻게 작성하고 관리하는가' 이다. 프로젝트가 커질수록, 기능이 복잡해질수록 테스트 코드를 작성하고 관리하는 것은 쉽지 않은 일이다. 이러한 상황에서 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/VZVRd/btsyVYVRkSJ/kshgKkAv4qLagt2qdTsr91/img.png)
https://github.com/jestjs/jest GitHub - jestjs/jest: Delightful JavaScript Testing. Delightful JavaScript Testing. Contribute to jestjs/jest development by creating an account on GitHub. github.com 1. jest jest는 facebook에서 만든 테스팅 라이브러리다. 출시 초기에는 프론트앤드에서 주로 쓰였지만 최근에는 백앤드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. 비교적 사용이 간단하며 Babel, Typescript 등에 모두 사용할 수 있다. zero config jest는 zero configuration 철학을 가지고 있..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2RPcS/btssHyuje49/576aM3SJAsr57qY4Q4dzIK/img.png)
개발을 하다가 API를 불러오는데 복잡한 로직이 필요없어 React Query를 쓰지 않고 Async/ Await를 통해 api를 불러오고 있었다. 하지만 가장 눈에 거슬리는 것은 리스트 item들을 API로 불러온 후 상세보기 화면으로 진입, 그 후에 뒤로가기를 하면 다시 API를 호출하여 loading 아이콘이 빙글빙글 돌고 있는 것이다. 날짜별로 localStorage에 저장한 후 다시 불러와 지난 날짜 data들은 삭제할까 싶다가 그냥 React Query를 사용하기로 했다. 역시 caching 기능을 무시할 수 없다.ㅠㅠ react query는 fetching, caching, 서버 데이터와의 동기화를 지원해주는 라이브러리이다. 즉, React 환경에서 비동기 query 과정을 도와주는 라이브러..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/sngVv/btsr0XBVUDX/EUWuJU8WbjTA19d8moEU31/img.png)
google maps나 google books 등의 embed를 사용하거나 window 객체에 property를 추가하는 일이 있을 수 있다. 예를들어 google books 미리보기 embed를 사용하는 경우이다. html 파일에 script 태그를 사용하여 API 로더를 포함시킨다. 하지만 위의 html이 아닌 다른 ts 파일에서 아래와 같이 작성하면 window는 google이라는 property의 존재를 알지 못한다. window.google.books.load(); function initialize() { var viewer = new window.google.books.DefaultViewer(document.getElementById('viewerCanvas')); viewer.load('..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dORm0K/btsrZkKuIP4/ttwxDxzuKabai4J0dxNrt0/img.jpg)
메모리 (Memory) 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리는 데이터를 저장할 수 있는 셀 (memory cell)의 집합체이다. 메모리 셀 하나의 크기는 1바이트 (8비트)이며, 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어들인다. 각 셀은 메모리 공간의 위치를 나타내는 고유의 메모리 주소 (memory address)를 갖는다. ✨ 4.1 변수란? 변수는 왜 필요한가? 10 + 20 이란 코드를 실행하면 값 10과 20은 메모리 상의 임의의 위치 (메모리 주소)에 기억(저장)되고 CPU는 이 값을 읽어들여 연산을 수행한다. 연산 결과인 30 또한 메모리 상의 임의의 위치에 저장된다. 하지만 CPU가 만들어낸 숫자 30을 재사용할 수 없다. 30을 재사용하려..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/buO6qT/btsqtaDanmv/kFfFq6YTgg08k6K6Yv9ZF0/img.jpg)
1. test file 생성 파일명에 .spec, .test 를 넣어주면 test file로 인식된다. ex) login.test.js 2. test code 작성 test("테스트 설명", () => { expect("검증 대상").toXxx("기대 결과"); }); function solution(n) { let answer = '' const nArr = [1, 2, 4]; while(n) { answer = nArr[(n - 1) % 3] + answer; n = n % 3 === 0 ? (n / 3) - 1 : Math.floor(n / 3); } return answer; } // 테스트 코드 시작 describe('math.js', () => { // test() : 하나의 테스트 케이스를 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QW7c1/btspVNphle1/O1tudysJzAcaV4StNh5zc1/img.jpg)
✨ 스코프 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻한다. 어디서도 접근 가능한 전역 스코프(Global Scope)가 있고, 해당 스코프 컨텍스트 안에서만 접근 가능한 지역 스코프(Local Scope)로 나뉜다. const a = 5; // Global Scope { const b = 3; // Local Scope console.log(a, b); // 5, 3 } console.log(a, b); // Error! var를 사용하면 개발자가 예상치 못한 오류가 생길 수 있다. 블록 내부에 새롭게 선언하더라도 블록 외부 값도 변하게 된다. var a = 5; { // 호이스팅 되어 변수 선언이 상단으로 올라가버린다. var a = 10; console.log(a); // 10 }..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/eo0nCB/btspZCnsqf5/5EajJRUUWb2KBr4bamHyV1/img.jpg)
✨ Control Flow Control Flow는 우리가 흐름을 제어하는 방법 중 하나로, 조건이나 반복을 통해 상태를 제어하는 것을 말한다. 코딩을 처음 배울 때 다루는 if와 for 등의 방법이 있다. 흐름제어는 두가지 방법이 있다. Control Flow, Data Flow Control Flow 우리가 일반적으로 알고있는 조건문이나 반복문 goto if/ then/ else switch/ case for/ while let a = [1, 2, 3, 4, 5]; for (let i = 0; i < 5; i += 1) { if (a[i] % 2 === 0) { console.log(a[i]); } } Data Flow 함수형 프로그래밍 방식으로 구현이 가능함 stateless recursion pi..