안녕하세요.
저는 글로벌 융합기술정보제공 플랫폼 믹스드코드닷컴에 웹 프론트엔드 분야 AI 전문 강사 여진입니다.
여러분을 온라인을 통해 만나뵙게되어 반갑습니다.

오늘 여러분들과 함께할 공부할 내용은 웹 풀스택 개발 프레임워크인 Next JS 기반에서 웹 프로젝트 개발시  자주 사용하는
VS Code 툴의 주요 익스텐션 설치 및 용도에 대해 알아보도록 하겠습니다.

영상내에 발표자료는 아래 구글 드라이브에서  다운로드  및 확인가능합니다.
https://bit.ly/4gMSBQn 

오늘 함께 보실 영상은 최근 믹스드코드닷컴에서 진행한 NEXT JS 기반 LangChain JS 기술 활용 무료 세미나 내용중
VS Code 익스텐션 설치 부분만 편집한 내용을 기반으로 제작한 영상으로 내용중 일부가 매끄럽지 못하더라도 양해 부탁드립니다.

그럼 본격적으로 원활한 Next JS 기반 개발을 위해서 빠르게 VS Code 개발툴의 확장툴 익스텐션 4가지를 설치해보도록 하겠습니다.
먼저 프리티어 코드 Formatter 를 설치하겠습니다.
여러분들 코딩을 하다 보면 줄과 칸이 안 맞는 경우가 많죠?
그런 문제들 때문에 코드의 가독성이 떨어집니다.
이런 문제를 해결하기 위해 프리티어 코드포맷터 익스텐션을 설치합니다.

먼저 VS Code 개발 툴을 여시구요.
좌측 메뉴에 익스텐션 메뉴를 클릭해 원하는 개발 확장툴을 설치할수 있습니다.

비주얼 스튜디오 코드에 Next JS를 개발하기 위한 확장 플로그인을 설치할께요. 

좌측 메뉴에 보시면 VS Code 개발 툴의 기능을 확장해 주는 이 익스텐션이라는 메뉴가 있어요. 

여기 익스텐션 메뉴를 선택해주세요. Next JS 기반에서 리액트를 개발하려면 이 네 가지 익스텐션 정도는 반드시 설치를 해놓고 개발 하시면 매우 편리합니다. 

그래서 아무리 바빠도 이거는 설치해주세요. 

익스텐션 메뉴에 첫 번째 Prettier 라고 조회해 보세요. 

프리티어라고 입력해보면 여기 이 프리티어 코드 포맷터 저는 설치가 돼 있으니까 설치 안 할 건데요 

설치가 안 되신 분들은 꼭 설치해주세요.프리티어 코드 포매터를 설치합니다. 개발 툴에 설치가 됩니다. 

이 Prettier Formatter 를 설치하고 추가적인 VS Code 환경 설정만 해주시면 개발 소스를 저장할 때마다 바로 코드 정렬이 적용됩니다. 

프론트엔드 개발시 코드 정렬작업을 자동화해줍니다. 설치 진행해주시구요. 

이건 비주얼 스튜디오 코드 확장 툴로 설치를 하는 거에요.

Prettier Formatter 익스텐션 설치가 완료되면 두 번째로 해주실 작업은 VS Code 환경설정 작업을 추가로 해주셔야 돼요. 

설정하는 방법은 어렵지 않습니다. 여기 B에 설정하는 거 이 부분을 진행 하시면 돼요. 

설치가 끝나신 분들은 Formatter 이용 자동 코드 정리 요거 설정을 하시면 돼요. 

저와 같이 진행 하시면 됩니다. B부터 하시면 돼요. B의 스텝 1 2 3를 그냥 순서대로 진행 하시면 됩니다. 

b의 스텝 1 2 3가 어디 있을까요? 비주얼 스튜디오 코드에 여기 보시면 좌측 하단에 가장 하단에 보시면 이 환경 설정 아이콘이 있습니다. 

설정 아이콘의 Settings 메뉴를 클릭해주시구요. VSCode Settings 메뉴는 설정하는 항목이 너무 많아요. 

많기 때문에 빨리 찾기 위해서 조회기능을 이용합니다. Format,Format On Save 라는 걸로 해서 검색을 해볼게요. Format On Save 라고 해서 검색을 해보시면 여기 Edit Format On Save 라는 옵션이 있는데 

이부분이 체크가 안 돼 있을 겁니다. 처음 설치하시는 분들은 이 항목 반드시 체크해 주세요. 이 항목 체크를 하게 되면 파일을 저장할 때마다 자동으로 포맷 정책에 따라 코드가 자동 정렬이 됩니다. 

이항목을 반드시 프론트 엔드 개발하실 때는  체크 적용하시고요.

Format On Save 에서 체크를 하시면 특정 파일에 개발 소스 코딩 한 다음 파일 저장할 때마다 코드 정렬이 자동으로 적용됩니다.

저장할 때에 대한 설정작업은 완료 되었구요. 그러면 저장시 어떤 포맷터 프로그램이 적용될지에 대한 포맷터 지정 설정이 필요합니다. 

포맷터 프로그램이 언어별로 다양하기 때문에 어떤 종류의 포맷터를 통해서 코드 정렬을 할지를 설정해줍니다. 

우리는 방금 프리티어를 방금 설치를 했으니까 프리티어를 기반으로  이 코드들이 정렬 되게끔 해야 되기 때문에 설정을 추가해 주셔야 돼요. 

체크만 하시면 되구요.설정 항목을 하나 더 찾는데 두 번째는 Default Formatter 라는 키워드로 검색해 보세요. 

Default Formatter Step 2입니다.Step 2 Default Formatter 를 검색 해보시면 여기 Edit 에 Default Formatter 라는 옵션이 있어요. 

환경 설정 옵션이 있고 여기 클릭을 해보시면 프리티어 코드 포맷터를 선택해 줍니다.

포맷터 종류가 많아요.프리티어 코드 포맷터 이것을 반드시 선택해 주시면 이제 소스를 저장할 때마다 코드가 프리티어 포맷터에 의해서 자동으로 코드가 정리 됩니다.

여기까지 설정 모두 진행 하셨다면  설정창을 닫으시고 다음으로 이제 포맷터가 코드를 정리할때마다 코드를 어떤 기준에 의해서 정렬할지에 대한 프리티어 설정파일을 만드는 마지막 Step3 단계입니다.

Step3! 

프로젝트 루트에 .prettierrc 프리티어 rc 채팅창에 전달 드렸어요.채팅창에 전달 드렸습니다. 

파일명 복사하셔 가지고요.프로젝트 루트에 프로젝트를 선택하시고 오른쪽에 새파일 아이콘 클릭 또는 프로젝트를 선택하시고 오른쪽 마우스 클릭 새 파일 선택해서 파일명을 입력합니다.

그래서 새 파일 에서 이렇게 점 prettier rc 파일을 만듭니다. 앗 저는 실수로 프로젝트가 아닌 루트 작업폴더에 파일을 만들어 버렸네요. 방금 프로젝트에 안 만들고  작업폴더에 만들어졌습니다. 

이거 드래그 앤 드롭해서 여기 안쪽에 다 넣을게요.

넥스트 리액트 앱 프로젝트 안에 꼭 만드셔야 됩니다. 

넥스트 리액트 앱 프로젝트에 .prettierrc 파일을 만드신 후  여기 보시면 자바스크립트 제이슨 형태의 이런 설정 내용이 있습니다. 

채팅창에 전달 드렸구요.

채팅창에 전달 드렸고 이 설정값을 그대로 여기 파일에 붙여 넣고 파일을 저장합니다.

앞으로는 코딩 후 파일 저장시 방금 설정한 정보를 기준값으로 코드가 자동 정리가 될 거예요. 

이렇게 해서  프리티어 설정은 다 끝났어요. 아무리 급해도 이런 설정은 하고 개발을 진행하시면 좋구요.

두 번째 익스텐션은 ES Lint 확장 툴 설치입니다. 

자바스크립트 언어 코딩을 하다 보면 자바스크립트 코딩 문법이 틀릴때 자동으로 알려주거나 경고를 해주는 기능을 ES Lint라는 익스텐션이 제공합니다.

그래서 ES Lint 를 쓰려면 개발 툴에 ES Lint 확장 툴을 설치해 주시기만 하면 됩니다. 

저기 넥스트 JS 프로젝트내에서는 따로 설정 할게 없어요.

여기 보시면 넥스트 JS 프로젝트에서는 지금 우리가 사용하고 있는 Next JS 버전이 14버전입니다. 

넥스트 JS 현재 14버전을 쓰고 있는데 넥스트 JS는 11버전 이후 부터는 ES Lint 관련 설정이 기본적으로 소스상에 모두 되어 있어요. 

단지 개발 툴에 ES Lint 라는 확장 툴만 설치해주시면  ES Lint 문법검사 기능이 자동으로 적용 됩니다.

별도로 프로젝트내에 설정해 줄 부분이 없습니다. 

좌측에 확장 툴로 이동합니다. 

좌측에 확장 툴로 가셔서 ES Lint 라고 키워드 검색을 해보세요.

좌측에 확장 툴 여기 익스텐션으로 이동 키워드  검색후 ES Lint를 선택하시고 설치가 안 돼 있으면 설치를 진행해주세요.

설치만 해 주시면 돼요. 프로젝트에 설정할 게 없어요. 기본적으로 프로젝트에 ES LINT 패키지 설치 및 설정이 모두 완료되어 있습니다. 

넥스트 제이에스 14 버전은 그래서 참 편리합니다. ES Lint 설치를 마무리했으면 앞으로 자바스크립트와 타입스크립등의 코딩 문법 검사를 해당 익스텐션이 자동으로 문법 검사를 실시후 경고 또는 오류 표시를 

소스상에 표시해줍니다.

우리는 향후 리액트 기술을 이용해 화면 컴포넌트를 개발할 거예요. 

화면 컴포넌트를 개발할 건데 화면 컴퍼넌트를 개발할 때 화면과 관련된 JSX 코드를 포함한 jsx 또는 tsx 파일내에  코딩을 진행 해야 되는데 

이런 기본적인 화면 컴퍼넌트의 기초 코드를 자동으로 만들어주는 익스텐션 기능이 있어요.

화면을 파일 단위로 만들 때마다  파일내에 기본적인 컴포넌트 코드 구조를 모두 매번 매번 만들거나 복사 붙여넣기 하면 불편할 거잖아요. 

해당 익스텐션은 기본적으로 페이지 컴퍼넌트 또는 재활용 화면 컴포넌트 파일에 대한 기본 함수형 컴포넌트 코드를 자동으로 생성해주는 코드 스니펫 기능을 제공합니다. 

스니펫은 코드 조각이라는 뜻이죠. 그러니 코드 조각을 자동으로 만들어주는 넥스트 JS 전용 코드 스니펫 익스텐션이 프로그램이 따로 있어요. 

따라서 넥스트 JS 스니펫 확장 툴을 설치해 주시면 빠르게 페이지 컴포넌트 소스를 만들고 좀더 효율적으로 개발을 진행할 수가 있습니다. 

그래서 스니펫은 설치만 하시면 됩니다. 채팅창에 전달 드렸고요. 이것도 확장 툴만 설치해 주시면 돼요.

좌측에 익스텐션 메뉴로 이동합니다. 

익스텐션으로 이동후  ES Lint 대신에 NextJS snippets 라고 검색하면 검정색으로 돼 있는 확장 플러그인이 있어요. 

이걸 설치해 줍니다. 설치해 주시면  간단한 명령어만 입력하면 자동으로 함수형 컴포넌트의 코드 소스가 자동으로 쭉쭉쭉쭉 만들어져요. 

추가적인 명령어들을 이용하시면  다양한 소스코드를 빠르게 만들 수도 있습니다만 그건 차차 공부하시면 될 것 같고요.

반드시 익스텐션을 설치해 주시구요. 그래야 저와 함께 수업을 진행할수 있습니다.

넥스트 제이에스 스니펫 중에 가장 많이 쓰이는 명령어가 nafe예요. 

함수형 컴포넌트 소스를 자동으로 만들어줍니다. 

nafe 만 먼저 알고 계세요. 몇 번 해보시면 익숙해지실거구 실제 개발시 사용해보시면 많은 도움이 됩니다.

마지막으로 Next JS 기반 리액트 개발을 위해 추가로 설치해 주실 것은 테일윈드 CSS 인텔리센스 익스텐션입니다. 

이제 우리가 테일윈드 코드를 작성을 할 건데 테일윈드 코드를 작성할 때 자동으로 테일 윈드 코드를 이렇게 추천해 준다거나 

자동 코드 완성해 주는 그런 인텔리센스 기능을 제공해 주는 테일 윈드 CSS 인텔리센스라는 확장 툴을  마지막으로 하나만 설치해 주시면 

넥스트 JS 리액트 프로트엔드 개발 준비는 모두 완료됩니다.

채팅창에 넣어드리도록 할게요. 

익스텐션 설치에 많은 시간이 소비되었지만 어쩔 수 없어요. 

짧은 시간 안에 프론트엔드,백엔드,랭체인 JS 개발을 진행할건데 

향후 3시간 동안에는 Next JS기반 프론트엔드,백엔드,랭체인 JS 개발에만 집중을 할 거예요. 

랭체인 JS를 중심으로 코딩을 진행할거지만  프론트엔드와 백엔드 개발 환경은 완벽히 확보해야 되기 때문에 

확장툴 설치에 좀 시간이 들더라도 향후에 함께 심화 과정도 진행을 할 건데 그거 할 때는 훨씬 편리 하시겠지요. 

마지막으로 하나만 더 설치하고 이제 바로 개발에 들어가도록 하겠습니다.

확장 툴로 이동합니다. 

확장 툴로 가셔서 Tailwind CSS Intellisense 라는 익스텐션을 찾아보세요.

그러면 이런 확장툴이 나옵니다. 

이것도 설치해 주세요. 

확장 툴 이 네 가지만 설치하시면 넥스트 JS 개발은 엄청 손쉽게 진행됩니다.

이렇게 설치를 해 주시면 기본적인 Next JS 개발환경 준비 작업은 완료되었습니다.

마지막으로 설치한 테일윈드 CSS 인텔리센스 기능은 두 가지 핵심 기능을 제공합니다.

첫번째로  테일윈드 문법 유틸리티 클래스 코딩을 하면 자동으로 유틸리티 클래스를 추천해 주고요. 

두번째로는 유틸리티 클래스를 선택하면 그 클래스가 실제 어떠한 순수CSS로 변환되는지 코드를 미리 보기를 해줘요. 

그래서 내가 유틸리티 클래스의 용도를 잘 몰라도 특정 유틸리티 클래스를 선택 하거나 마우스를 갖다 대면 오리지널 CSS 코드로 변환해서 보여주기 때문에 

CSS 코드에 대해 이해하고 계시면 이 유틸리티 클래스를 쓰면 되겠구나 이렇게 바로 직관적으로 알 수가 있어요.

그래서 이걸 설치해서 사용하면 CSS 작업시 매우 편리합니다.

모두 완료되었구요 지금까지 수고 많으셨습니다. 

혹시나 설치된 익스텐션을 인식 못할 수도 있으니까 여기까지  준비되신 분들은 개발 툴을 한번 닫고 다시 실행해주시기 바랍니다. 

VS Code를 다시 실행후 Next JS 프로젝트를 열고 즐거운 Next JS 기반 코딩 하시기를 바랍니다.

그럼 다음시간에 뵙도록 하겠습니다. 감사합니다.