단위 테스트 기법에 대해 공부를 하던 중 React 에서 사용할 수 있는 testing framework JEST에 대해 알게되어 사용해보고 정리한 글입니다. 오류가 있을 수 있으니 알려주시면 감사하겠습니다. JEST란? 편리함에 포커스를 맞춘 Javascript Testing Framework Babel, Typescript, React, Angular, Vew 등 Javascript 기반 라이브러리에서도 사용이 가능하다. 페이스북에서 만들었고, 오픈소스 라이브러리이다!! [github]!https://github.com/facebook/jest 특징 zero config - 대부분의 Javascript Project에서 configuration 없이 작동하는 것을 목표로 한다. Typescript나 ..
문제 서울시에서 제공하는 OpenAPI로 지하철 정보를 보여주는 프로젝트를 진행하다 난관에 부딪혔다. 메뉴를 Input 태그의 button으로 구성하고, onClick 시에 Input의 name에 따라 해당하는 메뉴로 넘어가는 Header Component를 구현하고 있었는데 name 태그를 찾을 수 없다는 오류가 떴다. Javascript에서는 Type 선언이 없기 때문에 Tag의 Attribute를 쉽게 불러올 수 있지만, TypeScript를 사용하다보니 Input에서 name attribute를 불러오는데 애를 먹었다. 과정 시작 코드는 다음과 같았다. const HandleClick = (event:React.MouseEvent) => { const e = event.target; console..
Platform Exception 문제해결. 학교에서 대여한 맥북을 반납하고, 부득이하게 윈도우 환경의 데스크탑에 프로젝트를 이전해왔다. 세팅을 끝내고, 작업을 시작하려 에뮬레이터에 빌드했는데, 로그인 화면에서 홈 화면으로 이동이 안됐다. 에러 로그를 확인해보니 Platform Exception(sign_in)이 떠 있었다.(고칠 때 캡처를 해둘 껄 그랬다.) 해결 방법은 의외로 간단하다. 개발 기기를 바꿔 SHA 인증서를 새로 입력해줘야 했던 것이다. 먼저, SHA인증서를 확인한다. cd ./android keytool -list -v -keystore debug.keystore 이후, Firebase의 프로젝트 설정에 들어가서 찾은 SHA인증서를 등록해주면 된다! AlertDialog Width 조절..
정의 Knapsack Problem은 일정 무게를 담을 수 있는 배낭 안에 담을 수 있는 물건의 총량을 최적화 하는 문제이다. 배낭의 크기, 물건의 개수, 각 물건의 무게와 가치가 주어질 때, 배낭에 넣을 수 있는 물건들의 가치가 최대가 되게 하는 조합을 찾는 문제이다. Knapsack Problem은 크게 0-1 Knapsack Problem과 Fractional Knapsack Problem으로 나뉜다. Knapsack Problem의 예제는 백준 문제 12865번. 평범한 배낭 문제를 풀었다. 0-1 Knapsack Problem 물건을 쪼개 배낭에 넣을 수 없을 때, 각 물건을 배낭에 넣을 지 말지 결정하는 문제. Dynamic Programming으로 문제를 해결할 수 있다. 접근 방식 Data..
개인의 짧은 식견으로 작성했으니, 많은 조언 부탁드립니다. 설명 이분탐색은 기본적으로 Array와 같은 자료 구조에서 특정 값을 찾아낼 때 쓰인다. 찾고자 하는 값과, 현재 보고 있는 값을 비교하여 왼쪽과 오른쪽으로 탐색 범위를 쪼개 다시 탐색하는 과정을 거친다. 보고 있는 값과 찾고자 하는 값의 대소관계가 분명해야 하기 때문에, 이분 탐색을 사용하기 위해서는 배열이 정렬되어 있어야 한다. 한번 탐색마다 탐색 범위를 반으로 축소하기 때문에(left or right), O(nlogn)의 TC를 갖는다. 사용처 배열 속의 특정 값을 찾고자 할 때. 배열의 값들을 활용하여 찾아야 할 값에 특정 범위 내의 최적해를 찾을 때. Code 가장 기본적인 이분탐색 코드는 다음과 같다. ```cpp #include #i..
1. Preview 하나의 테이블에 같은 성격의 컬럼이 들어가는 경우가 있다. 예를 들어, 팀원 구성 테이블이 있을 수 있겠다. 팀 테이블을 팀장, 팀원으로 구성할 경우에, 다른 팀의 팀원으로 속해있지 않은 팀장을 모두 찾는 쿼리를 구성해보고자 한다. 2. Preset MEMBER_ID MEMBER_NAME 1 홍길동 2 김길동 3 이길동 4 박길동 5 고길동 LEADER_ID MEMBER_ID 1 2 1 3 4 1 4 3 4 5 3. Query 위의 테이블 구조에서 다른 팀의 팀원으로 일하지 않는 사람을 찾는 쿼리를 작성해보자. select * from team where team.LEADER_ID not in (select MEMBER_ID from team); 4. Wrap-up 모르는 것을 인지했..
1. Preview JWT의 보안을 강화하기 위해 Refresh Token 기법을 사용한다. JWT를 탈취 당할 경우, 만료시간까지 해커가 자유롭게 사용할 수 있기 때문에 사용자의 최초 인증 시 JWT와 함께 Refresh Token을 던진다. 서버는 JWT의 만료시간을 짧게 설정하고, Refresh Token을 길게 설정한다. 그리고, JWT가 만료되었을 때, 클라이언트로부터 Refresh Token을 받아 새 JWT를 생성해주는 방식이다. 2. Refresh Token의 탈취 하지만, 같은 문제가 Refresh Token한테도 있다. Refresh Token이 탈취된다면? 어떻게 될까? Refresh Token의 만료시간은 JWT보다 길기 때문에, Refresh Token이 유효한 시간동안 계속해서 ..
1. Preview - 사실 처음부터 타입스크립트가 어떻게 자바스크립트 코드로 변환되는 지 관심 있었던 것은 아니다. 시작은 React에서 제공하는 컴포넌트의 다양한 타입에 대한 정확한 사용법을 알고 싶었다. 타입을 확인하는데 다음과 같은 코드를 발견하고 경악했다. 다음은 리액트 소스 코드의 일부분이다. type ReactFragment = Iterable; type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined; ??? ReactFragment Type은 Generic으로 ReactNode 타입을 사용하고, 그 ReactNode 타입 안에는 ReactFragment타입..
