본문 바로가기

전체 글167

Testing - 단위 테스트 단위테스트는 각각의 함수나 클래스 처럼 코드의 작은단위를 테스트 하는 것이다. object 테스트시 많은 의존성을 가지고 있다. 종종 다음 구문으로 넘어가야 할때 mock 필요할 텐데 단위 테스트는 빠르게 쓰고 실행 할수 있다. 따라서 작업을 하면서 테스트가 통과되는지 여부에 대한 빠른 피드백을 얻을 수 있고 Jest에는 편집 중인 코드와 관련된 테스트를 지속적으로 실행할 수 있는 Watch mode. 옵션도 있다. - Mocking 가끔 objects 테스트시 외부 의존성을 가지고 있는 경우 실행을 위해 어떤 의존선을 교체하거나 Mocking 필요한 경우가 있다. 일반적으로 실제 object를 테스트에 사용하는 것이 모의 테스트보다 낫지만 불가능한 상황도 있다. 예를 들어: JS 장치 테스트가 Java.. 2023. 2. 6.
Testing - 테스트 쓰기 앞에서 테스트 가능한 코드 형태로 만들었다면 이제는 실제로 테스트 코드를 써볼때다. React Native는 기본적으로 Jest 테스팅 프레임워크를 탑재 하고 있다. 유닛테스트 방법 it('given a date in the past, colorForDueDate() returns red', () => { expect(colorForDueDate('2000-10-20')).toBe('red'); }); 테스트 설명은 it 함수안에 string으로 써준다. 테스트 설명을 명확하게 쓰도록 한다. 1. Given : 어떤 이전 조건 2. When : 테스팅 함수를 실행하기 위한 어떤 행동 3. Then : 기대하는 산출물 describe 함수는 jest에서 제공하는 테스트 구조화를 도와주는 함수이다. 하나의 .. 2023. 2. 6.
Testing - 테스트 가능한 코드 쓰기 전체 프로그램을 여러 줄의 코드가 있는 하나의 거대한 파일로 작성하는 것 보다 여러 개의 작은 모듈로 작성해야 조립된 전체를 테스트한 경우보다 더 철저하게 테스트할 수 있다. 테스트 가능한 코드란 모듈식 코드를 깔끔하게 작성하는 것을 말한다. 좀더 테스트 가능한 코드로 짜려면 비즈니스 로직(business logic) 과 앱 state (Redux, Mobx, Recoil) 으로 부터 View(React components)와 분리하는 거다. 이래야 react components와 의존성이 없어져서 비지니스 로직 테스트가 가능 해진다. 뭐 이론적으로는 ... 모든 로직과 데이터 component로부터 분리가 가능하다. 이렇게 해야 component들이 rendering 전용이 된다. state들은 모두 .. 2023. 2. 6.
Testing - 정적 분석 정적 분석 확인은 실행 없이 코드를 작성시 에러를 확인 하는 방법이다. react native는 ESLint(Linters)와 TypeScript(Type checking) 지원 한다. Linter 사용하지 않는 코드나, 공통 오류, 스타일에 맞지 않는 것들을 찾아 준다. Type Checking 함수로 전달할 구문이 기존 설계된 것과 일치 또는 맞지 않는 타입을 찾아준다. 2023. 2. 6.
Testing 공식문서 왜?! 테스팅이 필요한가? 기존 코드베이스 확장은 작은 에러들과 엔드(edge)단에 원치않은 큰 실패로 이어질 수 있다. 또한 버그는 사용자의 안좋은 경험과, 궁극적으로 사업성을 잃어 버릴 수 도 있다. 취약한 프로그래밍을 예방 하는 여러 방법 중에 하나는 배포전에 테스트를 하는 것이다. 사람은 누구나 실수를 한다 그래서 테스트팅은 오류를 발견하고 코드가 제대로 작동하는지 확인하는 데 도움을 주기 때문에 중요하다. 또한 새로운 기능을 추가 하거나, 기존 코드를 리팩토링(refactoring) 하거나 프로젝트에 중요한 의존성(dependencies)들을 업그레이드(upgrade) 할때 코드의 안전성을 보증한다. 1. 정적 분석 (Static Analysis) 2. 테스트 할 수 있는 코드 쓰기 (.. 2023. 2. 6.
Custom Hooks 참조: 공식 홈페이지 hook의 규칙 사용하는 이유? 반복되는 로직을 하나로 묶어서 재사용하기 위함이다. 개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다. - 리액트 공식 문서- 컴포넌트와 가장 큰 차이점은 독립적으로 State 를 생성한다 (머 사실 컴포넌트도 강제로 만들수 있기 하지만) 리액트 공식 문서에서 설명한 예제를 가지고 좀더 쉽게 이해를 해보자 import React, { useState, us.. 2023. 1. 31.
Developer Tools 1. Chrome Developer Tools 크롬 브라우저로 디버깅을 하고 싶다면? Developer Menu 에서 "Debug JS Remotely" 선택 하면된다. 그러면 http://localhost:8081/debugger-ui 라는 새창이 뜰것이다. 크롬 브라우어 메뉴에서 Tools → Developer Tools 선택해서, Developer Tools. 활성화 한다. 단축키는 (macOS는 : ⌘⌥I , Windows는 : Ctrl Shift I ) 또한 Pause On Caught Exceptions 도 활성해서 좀더 멋진 디버깅을 할 수 있다. !!! 주의 1 안드로이드 경우 디버거와 스마트폰간 사이에 있는 시간때 가령 애니메이션, 이벤트, 기타등등에 동작이 제대로 안되거나, 결과가 정확.. 2023. 1. 31.
Debugging 참조: React Native 공식 홈페이지 1. 앱에서 개발자 메뉴로 접근 하는 방법 첫번째 방법 : 스마트폰을 좌우로 열심히 흔들어 준다. (스마트폰이 연결이 되어 있다는 전제하에 ) 두번째 방법 : iOS 시뮬레이터 Hardware menu에서 "Shake Gesture" 클릭 세번째 방법 : 앱이 iOS 구동중일때는 ⌘D 앱이 안드로이드에서 구동 중일때는 ⌘M (윈도우는 Ctrl + M) 마지막 방법으로는 adb shell input keyevent 82 명령어 입력 !!!!!!!! 설마 release로 빌드 된곳에 개발자 메뉴 안된다고 하는 사람 없겠지 (당연히 비활성화 됨) !!!!!!! 2. Fast Refresh 활성화 react component가 변화는것을 즉각적으로 앱에 반영 해주는 .. 2023. 1. 31.
Husky 설정 husky 설치 초기설정을 해준다 npx husky-init && npm install # npm npx husky-init && yarn # Yarn 1 yarn dlx husky-init --yarn2 && yarn # Yarn 2+ pnpm dlx husky-init && pnpm install # pnpm 위 명령어를 사용하면 .husky 폴더가 생성된다 스크립트에 사용할 명령어를 추가 하면된다. npx husky add .husky/pre-commit "yarn lint" git add .husky/pre-commit https://typicode.github.io/husky/#/ Husky - Git hooks typicode.github.io !! 트러블 슈팅 {키워드나, 명령어} comma.. 2022. 9. 14.
프로그래머의 뇌 후기 1. 코딩 중 겪는 혼란에 대한 이해 지식의 부족(프로그래밍 언어나 알고리즘 혹은 업무영역에 대한 지식이 없는 경우), 정보의 부족(코드를 이해하기 위해 필요한 정보를 충분히 가지고 있지 않는 경우, 라이브러리 , 모듈, 패키지 정보), 처리능력(코드가 너무 복잡해서 두뇌 처리용량 초과) 두뇌의 기억의 공간을 총 3가지로 나눈다. 첫째 장기기억 공간 (pc로 치면 HDD) 둘째 단기기억 공간 (pc로 치면 ram 또는 Cache) 셋째 작업기억 공간 (pc로 치면 CPU) 따라서 이 3가지 기억공간을 어떻게 효율적으로 사용할지에 대한 설명이 이챕터(chapter)의 중요 포인트이다. 2. 신속한 코드 분석 프로그램은 사람이 읽을수 있도록 작성해야 한다. 기계가 실행하는 것은 부차적인 일이다. -해럴드 아.. 2022. 4. 7.
린터 룰들 Linter rules always_use_package_imports lib 디렉토리 안에 파일들에 상대경로를 못하게 하는 Error 룰 상대경로와 절대경로가 썩여 있으면 개발자끼리 혼란을 일으킬수 있어 절대 경로를 추천하는 룰임. 상대경로는 코드를 한번에 분석하거나 이해하기 어렵거나, 파일의 경로가 변경시, 경로를 재설정하지 않으면 오류가 발생할수 있음. // 아름다운 방법 import 'package:foo/bar.dart'; import 'package:foo/baz.dart'; import 'package:foo/src/baz.dart'; // 그지 같은 방법 import 'baz.dart'; import 'src/bag.dart' import '../lib/baz.dart'; avoid_dynamic_calls 메서.. 2022. 3. 31.
코드 컨밴션 Code Convention (명명 규칙) flutter_lints 또는 lints를 최대한 사용해서 적용할 예정 2.0버전부터는 기본적으로 flutter_lints 포함되어 있으나 커뮤니티에서는 lints가 인기가 많다고 함. 추가적인 설정은 analysis_options.yaml 파일에 https://ychcom.tistory.com/entry/%EB%A6%B0%ED%84%B0-%EB%A3%B0%EB%93%A4-Linter-rules 추가 해서 사용 린터 룰들 Linter rules always_use_package_imports lib 디렉토리 안에 파일들에 상대경로를 못하게 하는 Error 룰 상대경로와 절대경로가 썩여 있으면 개발자끼리 혼란을 일으킬수 있어 절대 경로를 추천하는 룰임. 상대경로는 ychcom.tistory.com 명명 규.. 2022. 3. 31.

티스토리툴바