jae_han_e.log

AI가 개발자를 대체할 수 있을까?

Fri, 23 Jan 2026 02:03:04 GMT

서론

생성형 AI가 개발에 도입되던 초반만 하더라도, AI는 개발 생산성을 높여주는 도구일 뿐 설계와 판단의 영역은 개발자의 몫이라는 의견이 대다수였다.🤓

하지만 그로부터 불과 몇 년 사이에 모델의 성능은 눈에 띄게 향상 되었고 AI는 단순 보조를 넘어, 문제를 이해하고 해결하는 방법을 제안하는 단계에 접어들었다. 또한, 국내외 기업에서는 인력 규모를 조정하거나 AI를 활용(개발)할 수 있는 인재를 선별하기 시작했다.🕴

이러한 변화를 지켜보며 "AI는 어디까지 발전할 수 있으며, 그 과정에서 개발자의 역할은 어떻게 바뀌게 될까?" 라는 생각이 들었다. 이 질문에 대한 답을 찾는 과정에서 "Open AI가 제시한 AGI로 가는 5단계 로드맵" 을 발견했다.😀

이 로드맵을 기준으로 현재 AI의 위치와 한계를 정리해 보고 향후 개발자의 역할에 대해 생각해보고자 한다.🧐

AGI란 무엇인가?

Artificial General Intelligence 의 약자로 하나의 모델이 특정 도메인에 한정되지 않고 새로운 문제를 이해하고 학습하고, 해결할 수 있는 범용 인공지능 이다.🧑🏻‍🏫

현재 사용하고 있는 AI는 코드는 잘 작성해 주지만 "왜 이 시스템이 필요한지" 는 판단하지 않고 오류는 잘 해결해주지만 "이 설계가 맞는지" 는 제대로 판단하지 못한다.

AGI는 인간과 동등한 수준의 지능, 창의성을 갖추고 스스로 문제를 정의하고 해결하는 것을 목표 로 하고 있다.💻

AGI로 가는 5단계 로드맵(from. Open AI)

Open AI가 제시한 5단계는 업무 단위로 AI가 어디까지 자동화를 할 수 있을지를 가늠하게 해주는 로드맵으로 볼 수 있다.

개발자의 관점에서 ☝🏻 AI가 코드 생성을 넘어 문제 해결까지 할 수 있는가? ✌🏻 사람 없이도 스스로 일을 끝낼 수 있는가? 🤟🏻 결정과 책임의 영역까지 침범하는가?

를 생각하며 각 단계를 살펴보자 😎

1단계 Conversational AI

AI는 대화형 도구로서 검색 + 문서읽기 + 보일러플레이트 작성 등의 역할을 도와 생산성을 올려준다. 무엇을 만들지, 어떤 방식이 적절한지는 개발자의 판단에 달려있다.😀

주요내용
반복 코드 생성 (CRUD, DTO/VO, API 라우팅, 컴포넌트 등)
정규식, SQL, 스크립트 작성 보조
라이브러리 사용 예시, 코드리뷰

2단계 Reasoners

복잡한 문제를 구성 요소로 분해하고, 원인과 결과의 관계를 분석해 해결 방안을 논리적으로 추론해 제시한다. 이제는 코드만 제공해주는 도구를 넘어 디버깅과 분석을 돕는 동료에 가까워진다. 하지만 이 추론이 항상 옳지는 않기 때문에 판단과 책임은 개발자에게 남아 있다.😃

주요내용
복잡한 버그 발생 경로 추론 및 원인 후보군 정리
성능 테스트 결과 예측
테스트 실패 원인 분석

3단계 Agents

하나의 작업 단위를 스스로 끝내는 실행의 주체가 되는 단계이다. 업무를 부여하면 계획 > 실행 > 검증 > 반영 을 자율적으로 수행한다. 이에따라 결과에 대한 통제와 검증이 더 중요해지며, 개발자의 역할이 작성자에서 감독자로 이동하는 지점이 된다.🫢

주요내용
브랜치 생성 > 코드 수정 > 테스트 > PR 생성 까지 자동화
코드베이스 분석 후 사이드 이펙트를 고려한 이슈 해결

4단계 Innovators

기존 해결책을 조합하는 수준을 넘어, 스스로 학습한 내용을 바탕으로 새로운 접근 방식과 설계 대안을 제시한다. 하지만, AI가 제시하는 대안이 기술적으로 타당하더라도 조직의 상황, 일정, 비즈니스 우선순위 까지 고려한 것은 아니다. 따라서, 의사결정의 선택지를 넓혀주는 조언자에 가깝다.😊

주요내용
성능과 비용 최적화에 대한 창의적 전략 제시
장기적인 확장성을 고려한 아키텍처 제시
장애 예방을 위한 기존 시스템 보완점 제시

5단계 Organizations

개별 작업이나 기능을 넘어 하나의 조직처럼 행동하는 단계이다. 기존 주어진 요구사항을 수행하는 것이 아니라 스스로 문제를 정의하고 우선순위를 정해 설계, 개발, 개선을 하나의 흐름으로 관리할 수 있다. 🥸

이론적으로는 ☝🏻 어떤 기능을 만들어야 하는지 판단하고 ✌🏻 일정과 리스크를 고려해 계획을 수립하여 🤟🏻 개발과 배포, 운영까지 스스로 수행하는 AI조직이 가능해진다.

이 단계에 이르면 비로소 "AI가 개발자를 대체할 수 있는가?" 라는 질문이 현실적인 의미를 갖는다.

하지만, 법적 책임, 윤리, 통제, 신뢰의 문제가 남아있다.

장애가 발생했을 때 책임은 누구에게 있는가?
잘못된 의사결정을 어떻게 되돌릴 것인가?
AI의 판단 과정을 어떻게 설명하고 검증할 것인가?

이와 같은 문제들이 해결되지 않는 한 단기간에 현실화되긴 어려울 것이라고 생각한다.

정리

이 로드맵을 기준으로 살펴보면, AI가 단기간에 개발자를 ㄹ완전히 대체할 가능성은 높지 않아 보인다. 다만, AI는 이미 코드 작성을 넘어 분석과 실행의 영역까지 진입하고 있으며 그에 따라 개발자의 역할은 분명히 변화하고 있다.

개발자는 더 이상 모든 코드를 직접 작성하는 사람이 아니라 AI가 수행한 작업을 검토하고 방향을 조율하며 결과에 책임을 지는 역할로 이동하고 있다. 이 과정에서 문제를 정의하고 설계 의도를 판단하는 역량은 더욱 중요해 질 것이다.

즉, AI와 경쟁하는 개발자가 아니라, AI를 전제로 사고하고 설계할 수 있는 개발자가 되어야 할 것이다. 💪🏻💪

참고

AGI로 가는 5단계 로드맵

Next.js 병렬 라우팅으로 안드로이드 Back 버튼 UX 개선하기

Mon, 12 Jan 2026 08:32:07 GMT

문제의 인식

상황 📝

모바일 웹 또는 WebView 환경에서 팝업이나 모달을 띄운 상태로 안드로이드 Back 버튼을 누르면 사용자가 기대하는 동작은 대부부 아래와 같다.

"현재 화면에 떠 있는 팝업이나 모달이 닫힌다."

하지만 실제로는 팝업이 닫히지 않고, 이전 페이지로 이동하는 현상이 발생했다. 🚨

이는 단순한 UX 불편을 넘어

사용자가 작업하던 맥락이 끊긴다 (데이터가 초기화됨)
다시 페이지에 진입해야 하는 상황이 발생한다.

원인 분석 🧐

1. 팝업 & 모달은 히스토리에 쌓이지 않는다.

대부분의 경우, 팝업이나 모달은 다음과 같이 구현한다.

useState 를 이용한 조건부 렌더링
CSS(z-index, position)로 화면 위에 오버레이

이 경우, 라우팅과 관계가 없으므로 브라우저 히스토리에 아무것도 쌓이지 않는다. 🙅🏻‍♂️

2. 안드로이드 Back 버튼의 동작

안드로이드 시스템에서 Back 버튼을 실행하면 (버튼 터치 or 모션) 웹 관점에서는 window.history.back()이 수행된다.

즉, 히스토리에 쌓여있는 스택을 기준으로 이전 엔트리로 이동한다. 🔙

해결방안 💡

Next.js의 병렬 라우팅을 활용해서 팝업과 모달을 페이지로 만들어 준다.

페이지로 렌더링되기 때문에 히스토리에 쌓여 window.history.back() 으로 제어가 가능하다.

이번 포스팅에서는 버튼 팝업과, 바텀업 다이얼로그를 구현해 볼 예정이다.😎

먼저, 병렬 라우팅이 무엇인지 간단하게 알아보자 📖

병렬 라우팅 (Parallel Routes) 이란?

병렬 라우팅은 특정 경로에 들어 왔을때 하나 이상의 페이지를

동시 또는 조건부로 렌더링 할 수 있게 해준다. 이와 같이 컴포넌트 안에 자식 컴포넌트 두개를 두는 방식이 아니라, 병렬 라우팅을 통해 등록한 페이지들이 자동으로 렌더링 되는 방식이다.

각각의 컴포넌트이기 때문에 각자 설정한 error와 loading을 설정할 수 있고 독립적으로 Stream 되어진다.

Convention 🧑🏻‍💻

병렬 라우트는 폴더명 앞에 @를 붙여 만든다. 그리고 같은 레벨의 layout에 props로 전달된다.

디렉토리를 만들었다고 해서 URL 에 포함되는 것은 아니다.

위 폴더구조에서 layout.js 는 @analytics 와 @team 슬롯을 props로 전달받아 children과 함께 렌더링 할 수 있게 된다.

export default function Layout(props: {
  children: React.ReactNode;
    // 이런식으로 slot들을 전달받는다.
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <>
      {props.children}
      {props.team}
      {props.analytics}
    
  );
}

더 자세한 내용은 [Next.js App Router] (https://velog.io/@jae_han_e/Next.js-App-Router2) 에서 확인할 수 있다.

구현 🧑🏻‍💻

디렉토리 구조 및 레이아웃 설정

@modal 디렉토리 안에 bottomDialog와 buttonDialog 페이지를 생성한다.

App 라우팅으로 /bottomDialog 와 /buttonDialog 경로로 접근이 가능하다.

// app/layout.tsx
export default function RootLayout({
  children,
  modal,
}: Readonly<{
  children: React.ReactNode;
  modal: React.ReactNode;
}>) {
  return (
    
      
        }>
            
              {children}
              {modal}
            
        
      
    
  );
}

루트 레이아웃에 생성한 modal 을 연결해 준다.

이제❗️ 기존 페이지들과 modal 내부 페이지들이 병렬로 라우팅 되어진다. 🙌🏻

☝🏻 버튼팝업

전역 상태관리 라이브러리인 zustand 로 버튼 팝업에 대한 정보를 관리한다.

☝🏻 팝업 정보를 store에 업데이트 시킨다. ✌🏻 router.push() 로 팝업 페이지를 띄운다. 🤟🏻 store 값을 참조해 팝업을 렌더링 한다.

결과를 먼저 확인해 보면, 기존 localhost:3000 페이지와 localhost:3000/buttonDialog 페이지가 병렬로 라우팅 되어 있다.

store 생성 하기
```
// buttonInfoDto.ts
```

import { z } from "zod";

export const buttonInfoDto = z .object({ // 팝업 내용 description: z.string().default(""),

// 팝업 버튼 정보
buttonList: z
  .array(
    z.object({
      buttonName: z.string().default(""),
      onClick: z.function().default(() => {}),
    })
  )
  .default([]),

}) .default({});

export type buttonInfoType = z.infer;

export const initialButtonInfo: buttonInfoType = buttonInfoDto.parse({});

```javascript
// useBottonPopupStore.ts

import { create } from "zustand";
import {buttonInfoType, initialButtonInfo} from '@/shared/model/buttonInfoDto';

interface ButtonPopupState {
  buttonInfo: buttonInfoType;
  setButtonInfo: (buttonInfo: buttonInfoType) => void;
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
}

export const useButtonPopupStore = create((set) => ({
  buttonInfo: initialButtonInfo,
  setButtonInfo: (info) => set({buttonInfo:info}),
  isOpen: false,
  setIsOpen: (isOpen: boolean) => set({isOpen: isOpen}),
}));

store에는 버튼 정보가 들어있는 buttonInfo 와 isOpen 값이 들어 있다.

팝업 정보 업데이트 하기
```
// /app/page.tsx
```

export default function MainPage() { const {setButtonInfo} = useButtonPopupStore() const { push, back } = useRouter();

const handleOnButtonClick = (num: number) => { // 팝업 정보 설정 if(num === 1){ setButtonInfo({ description: "버튼 한개 팝업입니다.", buttonList: [ { buttonName: "확인", onClick:()=> back() } ] }) }else{ setButtonInfo({ description: "버튼 두개 팝업입니다.", buttonList: [ { buttonName: "취소", onClick:()=> back() }, { buttonName: "확인", onClick:()=> back() },

    ]
  })
}

// 팝업 띄우기
push("/buttonDialog", { scroll: false });

} ...

return (

handleOnButtonClick(1)} /> handleOnButtonClick(2)} />

); }


* 팝업 화면
```javascript
// /app/@modal/buttonDialog/page.tsx

export default function ButtonModal() {
  const router = useRouter();
  const { buttonInfo, isOpen } = useButtonPopupStore();
  const [isOneButton, setIsOneButton] = useState(false);
  const {setIsOpen} = useButtonPopupStore()
  const pathname = usePathname();

  const closeModal = () => {
    router.back();
  };

  useEffect(() => {
    setIsOneButton(buttonInfo?.buttonList?.length === 1);
  }, [buttonInfo?.buttonList?.length]); // 의존성 추가

  useEffect(() => {
    if (pathname.includes("/buttonDialog")) {
      setIsOpen(true);
    } else {
      setIsOpen(false);
    }
  }, [pathname]);

  return (
    
      
        
          
        

        
          
            
              
                
                  {buttonInfo?.description}
                

                
                  {buttonInfo?.buttonList?.map((button, index) => {
                    return (
                      
                    );
                  })}
                
              
            
          
        
      
    
  );
}

전역 데이터로 팝업 데이터를 관리하기 때문에 팝업을 띄우고자 하는 화면에서 store 값을 업데이트 시키고 router.push('/buttonDialog') 해주면 된다. 👍🏻

✌🏻바텀 다이얼로그

// /app/@modal/bommomDialog/categoryDetail

export default function ButtonModal() {
  const router = useRouter();
  const [isOpen, setIsOpen] = useState(false);
  const [selectedCategoryId, setSelectedCategoryId] = useState(undefined);

  const [detailCategoryList, setDetailCategoryList] = useState([{categoryDetailId:1, categoryDetailName:"카테고리1"},{categoryDetailId:2, categoryDetailName:"카테고리2"}, {categoryDetailId:3, categoryDetailName:"카테고리3"}, {categoryDetailId:4, categoryDetailName:"카테고리4"}, {categoryDetailId:5, categoryDetailName:"카테고리5"}]);

  useEffect(() => {
    setIsOpen(true);
  }, []);

  const closeModal = () => {
    setIsOpen(false);
    setTimeout(() => {
      router.back();
    }, 200);
  };

  const handleOnSelect = () => {

    setIsOpen(false);

    setTimeout(() => {
      router.back();
    }, 200);
  };

  return (
    
      <>
        
          {/* 카테고리 항목 렌더링 */}
          {detailCategoryList?.map((item) => {
            return (
               setSelectedCategoryId(item.categoryDetailId)}
              >
                {item.categoryDetailName}
                {selectedCategoryId === item.categoryDetailId && }
              
            );
          })}
        
         handleOnSelect()} title={CONFIRM} className="mb-[10px] mt-4" />
      
    
  );
}

버튼 팝업과 마찬가지로, router.push('/bottomDialog/categoryDetail'); 로 이동하면 병렬라우팅 되어진다.

Next.js 환경변수

Mon, 05 Jan 2026 06:59:18 GMT

환경변수의 필요성

환경변수(Environment Variaable)란 애플리케이션 실행 환경에 따라 달라질 수 있는 설정 값 을 의미한다.😊

☝️ 보안성 강화

소스코드에 민감한 정보를 하드코딩해 사용하게 되면 무단 액세스 또는 데이터 유출과 같은 보안 위험이 발생할 수 있다.👿

Ex ) 외부 서비스 API Key, Secret Key, Token 등 ...

✌️ 환경 분리

개발(Development), 스테이징(Staging), 운영(Production) 등 각 환경에 맞는 설정을 하는데 사용한다.

Ex) API 엔드포인트, 데이터베이스 URL, 스토리지 URL 등 ...

👌 유지보수성 향상

특정 값을 코드에 하드코딩하지 않고 변수로 관리하여 애플리케이션 자체를 수정하지 않고도 동작을 변경할 수 있게 한다.

Ex) 외부 서비스 API 주소, Base URL, 로그 레벨 등 ...

🚨 주의사항 클라이언트로 전달되는 환경변수는 반드시 공개되어도 괜찮은 값만 사용해야 한다.

환경변수 설정 방법 📝

1. process.env.NODE_ENV 변수

Next.js가 구동 환경에 따라 자동으로 생성해주는 환경변수이다. 서버와 클라이언트에서 모두 참조할 수 있다.😁

development: 개발환경 ( npm run dev로 실행한 경우 )
production: 배포환경 ( npm run build, next start 로 실행한 경우)
test: 테스트 환경 (Jest or Vitest 를 실행 한 경우)

// next.config.ts
console.log("$$$$ NODE_ENV: ", process.env.NODE_ENV);

// npm run dev
$$$$ NODE_ENV:  development

// npm run build
$$$$ NODE_ENV:  production

2. env 파일의 종류와 우선순위🏆

구동 환경별 환경 변수를 정의하는 파일이다. 해당 파일에 정의한 환경변수는 process.env.변수명 으로 로드할 수 있다.

.env: 모든 환경에서 공통으로 적용할 default 환경 변수를 정의한다.
.env.development: 개발 환경에서 적용
.env.production: 배포 / 빌드 환경에서 적용
.env.local 가장 우선순위가 높아 다른 파일에 영향을 받지 않음

우선순위는 .env.local > .env.${mode} > .env 순으로 높다

.env.local 파일의 우선순위가 가장 높은 이유 💡 개발에 필요한 개인의 로컬 환경변수로 사용되며 팀 공통 설정을 로컬에서 안전하게 덮어쓸 때 사용한다. 그래서.env.local은 기본적으로 .gitignore에 포함된다.

//.env
# 모든 환경에서 기본으로 사용하는 값
NEXT_PUBLIC_API_URL=https://api.env.com
NEXT_PUBLIC_APP_NAME=next-env-example

//.env.development
# 개발 환경에서만 덮어쓰는 값
NEXT_PUBLIC_API_URL=https://api.env.development.com

//.env.local
NEXT_PUBLIC_API_URL=https://api.env.local.com

// src/app/page.tsx
export default function Page() {
  console.log('$$$$ API URL:', process.env.NEXT_PUBLIC_API_URL);
  console.log('$$$$ APP NAME:', process.env.NEXT_PUBLIC_APP_NAME);

  return Check console;
}

// npm run dev
$$$$ API URL: https://api.env.local.com
$$$$ APP NAME: next-env-example

3. `NEXT_PUBLIC_` 접두사의 의미

Next.js에서는 기본적으로 서버에서만 환경변수를 참조할 수 있다. 서버와 클라이언트 모두에서 환경변수를 참조하려면 변수명 앞에 NEXT_PUBLIC 를 붙여주어야 한다.😯

4. next.config 의 env 옵션

next.config.js의 env 옵션에 선언한 값도 process.env로 접근할 수 있다.

...
const nextConfig = {
  env: {
    VERSION: "1.2.1.5",
    BUILD_TIME: new Date().toISOString(),
  },
};

export default nextConfig;

다만, 이 방식은 모든 값이 클라이언트 번들에 포함되며, NEXT_PUBLIC_ 접두사와 상관없이 노출된다. 🚨

따라서 보안이 필요한 환경변수 관리 용도로는 적합하지 않으며,

빌드 설정과 관련된 상수 값을 전달할 때만 제한적으로 사용하는 것이 좋다.👍

마무리

환경변수는 단순한 설정 값처럼 보이지만, 보안, 배포, 유지보수와 깊게 연결된 중요한 요소다.

Next.js의 환경변수 규칙을 정확히 이해하고 사용한다면 보다 안전하고 확장성 있는 프로젝트를 만들 수 있다.

참조 https://m.blog.naver.com/twilight_teatime/223158347614

Vue.js 기본 개념

Fri, 11 Jul 2025 08:10:13 GMT

Vue.js 란 ? 🧐

사용자 인터페이스(UI)를 개발하기 위한 자바스크립트 프레임워크로 Evan You 에 의해 개발 되었다. React에 이어 2번째로 대중적인 프론트엔드 자바스크립트 프레임워크이며 React에 비해 러닝커브가 낮고 직관적인 문법, 뛰어난 성능, 높은 사용자 경험 등으로 개발자들 사이에서 인기 있는 프레임워크이다.

주요 특징 💡

1. 통합 프레임워크

앞서 설명한 React 와 다르게 프레임워크이므로 어플리케이션 구성에 필요한 요소들을 자체적으로 제공한다.

예를 들어 React는 전역 상태 관리를 위해 Redux, Recoil, Zustand 등 추가 라이브러리를 설치해야 하지만 Vue는 자체적으로 상태관리 도구인 Vue jsx를 제공한다.

2. 가상(Virtual) DOM

기존 렌더링의 경우, 화면에 변화가 생기면 모든 요소의 스타일을 다시 계산해 새로 그려주었는데 Vue는 가상DOM을 사용해 변경된 부분만 실제DOM에 그려주기 때문에 효율적이다. ✨

2-1. 최초 렌더링 (Initial Rendering)

최초 렌더링에서는 Diffing 과정을 거치진 않지만 Virtual DOM을 먼저 만들고 실제 DOM으로 변환한다.

** 2-1-1. Vue 인스턴스 생성 및 앱 마운트**

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

createApp(App)으로 Vue 앱을 생성하고, .mount('#app') 을 통해 HTML의 특정 요소(div#app)에 앱을 연결한다.

** 2-1-2. 컴포넌트 초기화** 루트 컴포넌트인 부터 시작해서 하위 컴포넌트들을 트리 구조로 재귀적으로 초기화 한다.

** 2-1-3. 템플릿을 렌더 함수로 컴파일** .vue 파일의

jae_han_e.log

AI가 개발자를 대체할 수 있을까?

서론

AGI란 무엇인가?

AGI로 가는 5단계 로드맵(from. Open AI)

1단계 Conversational AI

2단계 Reasoners

3단계 Agents

4단계 Innovators

5단계 Organizations

정리

참고

Next.js 병렬 라우팅으로 안드로이드 Back 버튼 UX 개선하기

문제의 인식

상황 📝

원인 분석 🧐

1. 팝업 & 모달은 히스토리에 쌓이지 않는다.

2. 안드로이드 Back 버튼의 동작

해결방안 💡

병렬 라우팅 (Parallel Routes) 이란?

Convention 🧑🏻‍💻

구현 🧑🏻‍💻

디렉토리 구조 및 레이아웃 설정

☝🏻 버튼팝업

✌🏻바텀 다이얼로그

Next.js 환경변수

환경변수의 필요성

☝️ 보안성 강화

✌️ 환경 분리

👌 유지보수성 향상

환경변수 설정 방법 📝

1. process.env.NODE_ENV 변수

2. env 파일의 종류와 우선순위🏆

3. NEXT_PUBLIC_ 접두사의 의미

4. next.config 의 env 옵션

마무리

Vue.js 기본 개념

Vue.js 란 ? 🧐

주요 특징 💡

1. 통합 프레임워크

2. 가상(Virtual) DOM

2-1. 최초 렌더링 (Initial Rendering)

2-2. 반응형 데이터 변경 (Reactivity Trigger)

2-3. 렌더 파이프라인

3. 컴포넌트 기반 아키텍처

4. 상대적으로 낮은 러닝 커브

4-1. HTML과 유사한 템플릿 문법

안녕하세요, {{ name }}님!

4-2. SFC(Single File Component) 구조

React 기본 개념

React 란 ?

❗️프레임워크 & 라이브러리

1. 프레임워크

2. 라이브러리

주요 특징 💡

1. 컴포넌트 기반 아키텍처

2. 가상(Virtual) DOM

React 렌더링 과정

3. JSX 기반 문법 사용

Hello, {props.name}!

4. React Hook 제공

대표적인 React Hook

5.풍부한 생태계

React 프로젝트 ESLint & Prettier 설정

서론

🔍 ESLint 와 Prettier 란?

1. ESLint

2. Prettier

🤔 왜 사용해야 할까?

⚙️ ESLint & Prettier 설정 방법

1. React + TypeScript 프로젝트 생성 ( with CRA )

2. ESLint & Prettier 설치

✅ 패키지 종류

3. 설정파일 생성 및 구성

✅ eslintrc.cjs 파일 생성

✅ .prettierrc 파일 생성

✅ .eslintignore 파일 생성

✅ .prettierignore 파일 생성

4. package.json 스크립트 추가

5. IDE 와 연동하기 (WebStorm)

3. `NEXT_PUBLIC_` 접두사의 의미