본문 바로가기

전체 글

pnpm + vite 프로젝트 설치 명령어 빠른 빌드 속도와 경량화된 설정으로 많이 사용한다고 한다. 1. 전역에 pnpm 설치npm install -g pnpm2. React + Typescript 프로젝트 생성// 현재 경로에 프로젝트 폴더 생성pnpm create vite@latest project-name -- --template react-ts// 현재 경로에 프로젝트 생성pnpm create vite@latest . -- --template react-ts3. 프로젝트에 pnpm 설치pnpm install4. Eslint + Prettier 설치 및 기본 설정pnpm add -D eslint prettier eslint-config-prettier eslint-plugin-react @typescript-eslint/parser @ty.. 더보기
expo 앱 빌드 명령어 정리 로컬에서 앱 테스트 시(예시: 앱 에뮬레이터 연동)Androidnpx expo run:androidIOSnpx expo run:ios 커맨드 실행 시 안드로이드 폴더가 생성되고 해당 코드로 즉시 빌드되며, 연결된 앱 에뮬레이터로 앱이 설치된다.assets 파일이나 json 같은 설정을 건드렸을 경우 android 폴더와 에뮬레이터의 앱을 지우고 재생성을 해줘야 적용된다.배포 목적으로 앱 빌드할 시(예시: apk파일)eas.json(production code)"production": { "developmentClient": false, "distribution": "store", "android": { "buildType": "apk" }, "ios": { .. 더보기
파일 명 변경 시 반드시 체크하기 결론Window, Mac OS는 case-insensitive(대소문자 무시)Linux는 case-sensitive(대소문자 구별) 일반적인 OS 환경에서는 파일 명을 바꿀 때, 대소문자 변경일 경우 같은 파일로 인식하여 이름은 바뀌지만 수정되지 않았다고 인식한다.코딩할 때 파일 명을 변경할 상황이 발생한다면, 직접적으로 바꾸기 보단 명령어를 사용하여 변경해주는게 안전하다. 파일 명 변경 커맨드git mv (루트경로/폴더../현재 파일명) (루트경로/폴더../변경할 파일명)과정컴포넌트명이 소문자인 파일이 있어 앞글자를 대문자로 바꿔주고 모달창의 기능을 테스팅한 코드를 작성 후, 작업 커밋을 깃허브에 푸쉬하고 CI 테스팅을 기다리는데 에러가 발생했다.확인해보니 모달창 컴포넌트의 경로가 잘못되었다고 하더라.. 더보기
React-Native Modal 기존에 React같은 웹 프레임워크 프로젝트는 직접 모달창을 만들거나 모달 라이브러리를 따로 설치해야 했다.그러나 RN은 자체적으로 모달 기능이 내장되어 있어 해당 태그를 사용하면 기본적인 모달 on/off를 책임져준다.import { Modal } from "react-native"; View와 Text를 가져올 때처럼 Modal도 그대로 가져올 수 있으며, 내부 UI 태그 바깥으로 을 감싸주면 된다. e.stopPropagation()}> {mode === "isDone" ? ( Todo를 완료할래요? .. 더보기
Jest expect() expect()는 jest에서 사용하는 테스트 대상 값의 기대 조건을 지정할 때 사용하는 함수이며 검사 방식에 따라 사용하는 메소드가 다르다. 기본 비교 Matcher 설명 예시 toBe(value)정확히 같은 값을 기대 (===)expect(1 + 2).toBe(3)toEqual(value)객체/배열 등 구조까지 같음을 기대expect({ a: 1 }).toEqual({ a: 1 })toStrictEqual(value)toEqual보다 더 엄격 (undefined 등도 체크)expect([1, undefined]).toStrictEqual([1, undefined])toHaveTextContent(value)같은 텍스트 값을 기대expect("moon").toHaveTextContent("moon".. 더보기
react-native expo에서 jest testing 라이브러리 설치npm install --save-dev jest @testing-library/react-native @testing-library/jest-nativeexpo를 활용한 프로젝트를 생성하면 자동으로 jest가 포함되어 설치되지만, 테스트 라이브러리나 설정은 최소한만 제공되어 따로 테스팅 라이브러리를 설치해야 한다. @testing-library/react-native는 컴포넌트를 렌더링하듯이 돌려서 사용자 입장에서 테스트할 수 있는 라이브러리이다. @testing-library/jest-native는 테스트 라이브러리의 기능을 확장하여 유연하게 사용할 수 있게 하는 라이브러리이다. 테스팅 코드import ProfileBox from "@/components/main/ProfileBox".. 더보기
LinearGradient 기존에 구현 중이던 야추 다이스 프로젝트를 삭제했다.이유는 좀 더 대중적인 웹, 앱스럽게 통용되는 프로젝트를 만드는게 이 후 방향성에 도움이 될 것 같아서였다.대신 리액트 네이티브는 꾸준히 학습할 예정이여서 백엔드 포함 간단한 TodoList를 만들 예정이다. LinearGradientLinearGradient는 expo에서 사용할 수 있는 그라데이션 지정 모듈이다.npx expo install expo-linear-gradient해당 명령어로 모듈을 설치해서 사용하며, 태그로 바로 쓸 수있다. import { LinearGradient } from "expo-linear-gradient";import { View } from "react-native";const BoxBg = ({ children }.. 더보기
정처기 공부 04/13 결합도(높은 순 → 낮은 순)내용 결합도(Content Coupling)한 모듈이 다른 모듈의 내부 동작이나 구현을 직접 참조하는 결합도유지보수가 어렵고, 수정이 매우 위험하다.공통 결합도(Common Coupling)전역 변수를 여러 모듈이 함께 사용하는 결합도한 곳의 수정이 모든 곳에 영향을 주고, 디버깅이 어렵다.외부 결합도(External Coupling)외부 환경(파일, DB, 하드웨어 등)에 의존하는 결합도환경 변화에 민감하다.제어 결합도(Control Coupling)함수가 동작 방식까지 외부로부터 제어받는 결합도하나의 함수에 여러 제어가 들어갈 수 있다.스탬프 결합도(Stamp Coupling)필요한 데이터 외에 구조체나 객체 전체를 전달하는 결합도불필요한 의존성이 생길 수 있다.자료 결합.. 더보기