devtools
[Flutter] 플러터 개발 환경 구축 for macOS
[Flutter] 플러터 개발 환경 구축 for macOS
2024.09.03Android Studio❶ Android Studio 설치 (JetBrains ToolBox로도 설치 가능)brew install android-studio ❷ Android Studio 실행 - Setup Wizard - Install Type에서 Standard 선택 후 설치. Standard 선택 시 안드로이드 개발에 필요한 SDK, 빌드 툴, 에뮬레이터가 자동으로 설치된다. Setup Wizard는 Android Studio를 처음 실행했을 때 나온다.❸ Settings(⌘ ,) - Android SDK 메뉴 - SDK Tools 탭 - Android SDK Command-line Tools 체크.❹ Flutter, Dart 플러그인 설치 Flutter / Dart SDK💡 Flutter SD..
[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축
[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축
2024.07.22코드 품질을 보장하고, 기능이 의도한 대로 동작하는지 확인하기 위해 테스트 코드를 작성한다. 특히 기능 추가나 리팩토링을 할 때 테스트 코드가 있으면 기존 기능이 올바르게 작동하는지 쉽게 확인할 수 있고, 심리적인 안정감을 주는 장점도 있다. 프론트엔드 테스트 종류는 크게 단위 테스트, 통합 테스트, E2E 테스트, 정적 테스트로 나뉜다. 테스트 종류설명예시주요 도구단위 테스트(Unit Test)개별 함수, 컴포넌트, 모듈의 동작 검증버튼 클릭 시 특정 함수 호출 여부Jest, Vitest, Mocha, Jasmine 등통합 테스트(Integration Test)여러 모듈이 함께 잘 작동하는지 확인상품 구매 시 잔액 업데이트, 재고 변경Jest, Vitest, React Testing Library 등E..
[DevTools] ESLint 9 Flat Config + Prettier 설정 (TypeScript, React)
[DevTools] ESLint 9 Flat Config + Prettier 설정 (TypeScript, React)
2024.06.30Flat ConfigESLint 8.21.0 버전부터 구성 파일에 큰 변화가 생겼다. 기존 .eslintrc 파일 대신 플랫 구성(Flat Config)을 사용하는 eslint.config.js 형식이 새로 도입된 것. 플랫 구성은 extends나 overrides 같은 계층 구조없이 각 구성을 이루는 객체들을 포함한 1차원 배열로 표현한다. 이를 통해 규칙을 세분화해야 하는 상황에서 더 유연하게 대응할 수 있게 됐다. e.g., 구성 객체 1-자바스크립트 규칙, 구성 객체 2-타입스크립트 규칙 필요한 플러그인은 직접 import 한 후 사용하는 방식으로 변경돼서 종속성을 더 명확하게 관리할 수 있다.// eslint.config.js 파일 예시import eslint from '@eslint/js';i..
[DevTools] nvm보다 40배 빠른 노드 버전 관리 도구 — fnm
[DevTools] nvm보다 40배 빠른 노드 버전 관리 도구 — fnm
2024.06.18Node 버전 관리 도구로 줄곧 nvm을 사용하다가 Rust로 작성된 fnm이 nvm에 비해 40배 이상 빠르다는 글을 보고 바꿔야겠다고 마음먹었다. volta, fnm 둘 중 고민하다가 결국 fnm을 선택했다. nvm 인터페이스와 거의 동일하고 .nvmrc 파일을 지원하는 점이 마음에 들었다. nvm은 bash 스크립트로 작성됐기 때문에 기본적으로 Unix 계열에서만 작동하는 반면, fnm은 Windows도 지원하는 장점이 있다. fnm으로 바꾸고 나서부터 터미널 로드 속도가 훨씬 빨라진 게 체감된다. 참고로 fnm은 Fast Node Manager의 약자다. 설치 방법더보기❶ nvm 관련 파일 삭제 : rm -rf ~/.nvm❷ ~/.bashrc, ~/.bash_profile, ~/.zshrc, ~..
[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정
[DevTools] Prettier 주요 포맷팅 옵션과 추천 설정
2024.06.15들어가며자바스크립트를 사용하는 개발은 코드 포맷팅 도구로 Prettier를 많이 사용한다. Prettier는 .prettierrc (혹은 .prettierrc.js) 구성 파일에 원하는 코드 스타일을 커스터마이징 할 수 있는데, 한국어로 구글링 하면 많이 나오는 국룰 커스텀(?)을 별생각 없이 사용하고 있었다.// .prettierrc{ "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80} 사용하는데 큰 문제는 없었지만 언제 한 번 선호하는 코드 스타일에 따라 설정을 손봐야겠다는 생각을 하던 참에 우연히 My Code Formatting Guidelin..
[DevTools] 웹에서 VSCode 사용하기 - github.dev / github1s
[DevTools] 웹에서 VSCode 사용하기 - github.dev / github1s
2024.05.29웹에서 레포지토리를 살펴보다가 코드를 좀 더 편하게 들여다보고 싶을 때 github1s 서비스를 이용해서 웹 기반 VSCode 환경으로 볼 수 있다. github1s를 사용하려면 github 도메인 뒤에 1s를 붙여서 github1s.com/... 주소로 이동해야 한다. 보통은 주소를 변경해주는 자바스크립트 코드를 즐겨찾기에 추가해 두고 사용한다.javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' }) 그러다 우연히 Github에서 공식으로 제공하는 github.dev라는 서비스를 발견했다. gi..
[AWS] VSCode에서 AWS EC2 원격 연결 / EC2 메모리 부족 해결
[AWS] VSCode에서 AWS EC2 원격 연결 / EC2 메모리 부족 해결
2024.05.29터미널로 AWS EC2에 접속해서 서버 코드를 수정하려면 Nano나 Vim 등을 이용해야 한다. 익숙한 VSCode 환경이 아니기 때문에 오타가 발생할 가능성도 높고, 이 에디터들의 기본 설정은 Linter도 안되기 때문에 불편하다. VSCode 확장 기능을 이용해 AWS EC2에 원격 접속한 후 VSCode에서 코드를 직접 수정할 수 있다. VSCode에서 EC2 인스턴스 SSH 연결❶ VSCode 확장기능 Remote SSH 설치 (링크) ❷ CMD SHIFT P 명령 커맨드 → Remote-SSH: Connect to Host → Configure SSH Hosts → 사용자 수준의 config 파일 클릭 ❸ SSH Config 파일 설정# 입력 예시Host aws-ec2-seoul-privat..
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
2024.05.24Intro프론트엔드 영역에선 .jsx, .tsx, .vue 등의 확장자를 가진 파일을 사용하지만 브라우저는 이를 이해하지 못한다. 때문에 이러한 파일들은 모두 .js 파일로 변환해야 한다. 모든 파일을 하나의 .js 파일로 만들 수 있지만 이 방식은 성능에 부정적인 영향을 줄 수 있으므로 권장되지 않는다. 대신 여러 .js 파일(chunks)로 변환한 뒤 필요한 순간에만 로드(지연 로딩)하는게 성능에 더 유리하다. 특히 초기 로딩 시간을 줄일 때 유용하다. Vite, Webpack 같은 번들러는 보통 index, vendor 두 개의 메인 chunk를 생성한다. 참고로 Vite 2.9 버전부턴 Production 종속성 모듈이 index chunk에 포함된다.index : App.tsx와 같은 어플리케이..
[Git] 1Password에 저장한 SSH 키로 Git 커밋 서명하기
[Git] 1Password에 저장한 SSH 키로 Git 커밋 서명하기
2024.05.18Git 2.34 이후 버전부터 SSH 키를 이용한 커밋 / 태그 서명을 지원한다. 1Password SSH 통합 기능을 사용하고 있다면 GPG 키 없이 1Password 앱에서 Git 커밋 서명을 자동으로 구성할 수도 있다. 커밋을 서명하면 GitHub 계정에 연결된 SSH 공개키로 실제 사용자가 변경한 내용인지 검증 할 수 있다. 그럼 다른 사람의 서명하지 않은 커밋을 방지할 수 있다.GPG(Gnu Privacy Guard)는 GNU 프로젝트에서 개발한 오픈소스 암호화 소프트웨어다. 공개키 암호화 방식을 사용하며, 암호화, 서명, 인증 등의 기능을 제공한다. 요구 사항1Password 버전 8이상의 데스크톱 앱Git 2.34 혹은 이후 버전1Password SSH Agent 활성 (참고 포스팅)1Pas..
[DevTools] iPhone 아이폰 사파리에서 디버깅 / 콘솔 사용하기
[DevTools] iPhone 아이폰 사파리에서 디버깅 / 콘솔 사용하기
2024.05.16Safari 개발자 도구💡 아이폰 화면이 잠겨있을 땐 콘솔을 사용할 수 없다. ❶ 맥북 ⇄ 아이폰 USB 연결❷ 아이폰 설정 → Safari → 고급 → 체크❸ macOS 사파리 설정 → 고급 → 체크❹ macOS 사파리 상단 메뉴 → 개발자용 → 아이폰 기기 이름 → 아이폰 사파리에 열려있는 웹사이트 선택❺ macOS 사파리 콘솔 창에서 현재 연동중인 웹사이트의 속성 확인 iOS Simulator💡 Status bar(노치 영역), Nav bar, Tab bar(주소창 영역), Home indicator 같은 아이폰 UI를 그대로 표현하므로 실물 기기를 이용할 때 어떻게 보일지 확인할 수 있다. 설정을 완료한 후 Xcode 실행 없이 스포트라이트에서 Simulator를 검색한 후 바로 실행할 수..
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
[DevTools] Tailwind CSS 유틸리티 클래스 자동 정렬 플러그인
2024.05.13prettier-plugin-tailwindcss 플러그인을 사용하면 TailwindCSS의 유틸리티 클래스 정렬 규칙에 따라 클래스를 자동 정렬해준다. 이전까진 Tailwind Formatter 같은 IDE 플러그인을 사용해서 정렬이 필요할 때마다 부가기능을 실행(⌃ ⇧ H)했는데 그럴 필요가 없어졌다. prettier-plugin-tailwindcss 플러그인을 설치하고 파일 저장시 자동 포매팅 되도록 IDE를 설정하면, 유틸리티 클래스도 함께 정렬돼서 편하다. 참고로 클래스 자동 정렬 외에도 잘못 입력한 클래스 오류 표시, 축약(shorthand) 사용 강제, 임의(arbitrary) 값 사용 금지 같은 규칙이 적용된 eslint-plugin-tailwindcss ESLint 플러그인도 있다. 설정..
[DevTools] 개발자 친화적인 터미널 LS — PLS
[DevTools] 개발자 친화적인 터미널 LS — PLS
2024.05.10pls는 개발자 친화적인 기능을 가진 이쁘고 강력한 터미널 ls 툴이다. pls에서 p는 아래 의미를 포함한다.Pretty (the output from pls surely looks better)Powerful (pls has lots of features and endless customisation)Programmer (pls is geared towards developers)Professional (pls can be extensively tweaked by the pros)Python (pls is written in Python!) 쉬운 사용법, 폴더/파일 아이콘 표시, 프로그래밍 언어별 파일명 색상 구분(*.js 파일 노락색으로 표시 등), 중요 파일은 굵게 혹은 밑줄로 표시, 중요하지 않..