안녕하세요..T를 누르셨군요.

요즘 어떤 기술을 사용하시나요.. 다들.. 저는 이곳에 기술을 그냥 다시 기억하는 식으로 꼬박 꼬박 쭉 적으려고요.. 먼가 안 그러면 혼자 공부하기도 외롭고 그렇더라구요..

여러가지 방법으로 무언가를 만들어가고 있는데, 무엇을 먼저 순서로 할지는 모르겠습니다..

보통 react를 사용할 땐 vite랑 같이 많이 사용하는 것 같습니다. vite 이 곳에 가이드가 잘 나와있는데요 $ npm create vite@latest 를 터미널에 입력해주시면 됩니다. 그런데. 그래도 최근 유행하는 것을 해봅시다. 이건 shadcn 이라고 하는 'A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code.' 그렇다고 합니다. 디자인을 아름답게 도와주는겁니다. 물론.. 아름다움의 기준의 차이는 있겠지만..

일단. 이렇게 깔아주시면 됩니다. 터미널 명령어도 많이 기억하면 좋을 것 같아서 추천드립니다.. 물론.. 몰라도 되는 것 같기도 합니다..

위 방법 vite+shadcn을 사용해서 시작을하시면 vite.config.ts라는 파일이 있을겁니다. config파일은 말 그대로 configuration(설정)을 모아둔 파일입니다. 규모가 커질수록 설정값을 한 곳에 정리하기 위해 쓰는 패턴으로 봐주시면 좋을 것 같습니다. react 자체의 필수 요소는 아닙니다.

>>>>>>>>>>안녕하세요 다시 돌아왔어요. 지난번 엄청 짧게 써서 이번엔 길게 쓸 수 있을까요?

그래서 config는 설정을 위한 파일이라고 생각해 주시면 됩니다. 근데 위처럼 셋팅을 했을 때 이상하게 config가 많은거예요. eslint.config.js, tsconfig.app.json, tsconfig.json, tsconfig.node.json 그리고 이야기 했던 vite.config.ts까지! 하나하나 간략하게 살펴볼게요. 먼저 eslint는 js코드의 문법 오류나 버그를 찾아주는 역할을 하는 친구입니다. ES(Ecma Script) + Lint이렇게 생겼어요. 이 eslint를 설정하는 파일이 바로 eslint.config.js라고 생각해주시면 됩니다. tsconfig.json은 프로젝트 전체 공통 설정 tsconfig.app.json은 React 앱(src) 전용 세부 설정으로 기본 설정을 tsconfig.json에서 가져와 확장하는 식입니다. .. 먼가 너무 TMI같은 느낌이 있네요.. 일단 공식문서에서 쓰여진대로 다운하구 tsconfig.json과 node.json에 값을 바꿔주시고 vite.config.ts 코드도 넣어주시면 vite를 통해서 react,ts+shadCN을 다운 받으신것입니다. package.json에서"dev": "vite",를 확인하고 npm run dev를 해주시면 이제 페이지를 확인 가능하십니다.! 축하축하 전 내일 일찍 일어나서 해야할 일이 있기에.. 오늘은 이렇게하고 다시 올게요..