inblog logo
|
sxias
    환경세팅

    [환경세팅] 20. React 세팅

    문정준's avatar
    문정준
    Aug 20, 2025
    [환경세팅] 20. React 세팅
    Contents
    1. Cursor 설치2. node.js 설치3. 플러그인 설치4. npm5. React App 만들기6. Prettier 세팅 (정렬)
    💡

    세팅

    1. Cursor 설치
    2. node.js 설치
    3. 플러그인 설치 (Cursor)
    • Prettier (코드 포매팅)
    • ESLint (문법 버그 찾아주는거)
    • Reactjs code snippets (코드 조각)
    4. npm (패키지 관리자 - 라이브러리 저장소)
     

    1. Cursor 설치

    Cursor - The AI Code Editor
    Built to make you extraordinarily productive, Cursor is the best way to code with AI.
    Cursor - The AI Code Editor
    https://cursor.com/home?from=agents
    Cursor - The AI Code Editor
     

    2. node.js 설치

    Node.js — Run JavaScript Everywhere
    Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.
    Node.js — Run JavaScript Everywhere
    https://nodejs.org/ko
    Node.js — Run JavaScript Everywhere
     
    • Get Node.js 클릭
    notion image
     
    • docker를 통한 설치 or msi 파일 설치
    notion image
     

    3. 플러그인 설치

    • Prettier
    notion image
     
    • ESLint
    notion image
     
    • React Code Snippets
    notion image
     

    4. npm

    • node.js console에서 설치
    notion image
     
    • 아래 명령어 입력
    npm install -g npm
    notion image
     

    5. React App 만들기

    • 터미널을 열고 다음 명령어 입력
    npx create-react-app myapp
    notion image
     

    6. Prettier 세팅 (정렬)

    1. Formatter 설정
        • 이 설정 적용 시 모든 파일에서 .prettierrc 파일이 필요 (prettier 설정 파일)
    notion image
     
    1. .prettierrc 작성
    { "singleQuote": true, "trailingComma": "all", "arrowParens": "avoid", "semi": true }
     
     
    Share article
    Contents
    1. Cursor 설치2. node.js 설치3. 플러그인 설치4. npm5. React App 만들기6. Prettier 세팅 (정렬)

    Sxias ㆍ a32176740@gmail.com

    RSS·Powered by Inblog