반응형 Front-End6 React + Vite + TypeScript 자주 쓰는 셋업 정리 (ESLint + Prettier 포함) 프로젝트를 새로 시작할 때마다 리액트 셋업을 반복하는 일이 많다 보니, 이번에 정리해두기로 했다. 항상 쓰는 조합은 React + Vite + TypeScript, 그리고 코드 스타일을 맞추기 위해 ESLint + Prettier까지 같이 설정해둔다. 처음 설정할 때 헷갈렸던 부분이나 자주 쓰는 옵션들도 같이 정리해본다.1. Vite + React + TypeScript 프로젝트 생성아래 명령어로 Vite 기반 리액트 프로젝트를 만든다.npm create vite@latest입력하면 CLI에서 아래처럼 선택하게 된다.✔ Project name: » my-app✔ Select a framework: » React✔ Select a variant: » TypeScript프로젝트 생성 후:cd my-appnp.. 2025. 8. 5. React Tailwind CSS 다크모드 구현하기 (설정 + 전환 버튼까지) 다크모드 적용 방법 (Tailwind 기반)1. tailwind.config.js 파일에 옵션 추가/** @type {import('tailwindcss').Config} */export default { darkMode: "class", // 이 줄 추가 content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [],};darkMode: "class"로 설정하면처럼 다크모드 적용 여부를 수동으로 제어할 수 있음2. index.html에 dark 클래스 추가 (기본 다크모드로 시작할 경우)또는 React에서 자동 적용하려면 document.documentElement.classList.a.. 2025. 7. 13. Flutter Android 앱 에뮬레이터에서 실행하기 – AVD 생성부터 flutter run까지 Android 에뮬레이터 실행하기Android Studio 시작 화면에서More Actions → Virtual Device Manager를 클릭한다.Vanguard 충돌 경고에뮬레이터를 실행하면 아래와 같은 알림이 뜰 수 있다:"Vanguard anti-cheat software is detected..." 이건 Riot Vanguard라는 안티치트 소프트웨어 때문인데,가상화 기능(Hypervisor) 과 충돌해서 에뮬레이터가 제대로 동작하지 않을 수도 있다고 한다.헤헿... 일단은 OK 눌러서 무시하고 진행했다. 에뮬레이터 실행 완료알람을 넘기면 Android 에뮬레이터가 실행된다.홈 화면이 뜨는 걸 보면 잘 작동하는 상태다. 연결된 기기 확인이제 VS Code에서 아래 명령어를 실행:flutter .. 2025. 6. 28. Flutter Android 앱 개발 환경 설정 – Flutter와 Android SDK 연결 Android Studio 설치 후 해야 할 일 정리전 포스팅에서는 Flutter로 Android 앱을 만들기 위해 Android Studio 설치 과정을 정리했다.이번에는 설치 이후에 Flutter와 Android SDK를 제대로 연결하는 과정을 정리해보려고 한다.나는 지금 VS Code에서 Flutter 앱을 개발 중인 상태다. 1. Android SDK 경로 연결설치가 끝난 뒤, 아래 명령어를 터미널에 입력해서 Flutter에 Android SDK 경로를 등록해준다.flutter config --android-sdk "C:\Users\PC\AppData\Local\Android\Sdk" 터미널에 flutter doctor를 입력해본다.이제 환경 상태를 확인해보면 아래와 같다: Flutter SDK.. 2025. 6. 28. 이전 1 2 다음 반응형