개발 공부

1. 폴더 구조my-admin-app/├─ src/│ ├─ app/│ │ ├─ layout.tsx // 전체 레이아웃 컴포넌트│ │ ├─ page.tsx // 메인 페이지│ │ ├─ login/│ │ │ └─ page.tsx // 로그인 페이지│ │ ├─ dashboard/│ │ │ ├─ layout.tsx // 대시보드 페이지 전용 레이아웃│ │ │ └─ page.tsx // 대시보드 페이지│ ├─ components/│ │ ├─ Header.tsx // 헤더 컴포넌트│ │ ├─ Sidebar.tsx // 사이드바 컴포넌..

안녕하세요! 오늘은 Next.js의 기본 폴더 구조와 각 폴더의 역할에 대해 알아보겠습니다. Next.js는 React 기반의 강력한 프레임워크로, 효율적인 개발을 위한 구조화된 폴더 시스템을 제공합니다. 이 구조를 이해하면 프로젝트를 더 체계적으로 관리할 수 있답니다. 자, 그럼 하나씩 살펴볼까요?Next.js의 기본 폴더 구조my-next-app/├── app/├── components/├── lib/├── public/├── styles/├── .env├── .gitignore├── next.config.ts├── package.json└── README.md각 폴더와 파일의 역할1. app/ 디렉토리Next.js 13 버전부터 도입된 새로운 라우팅 시스템의 중심입니다. 여기에는 페이지, 레이아웃,..

Next.js를 사용하여 웹 애플리케이션을 개발할 때 로그인 상태를 효율적으로 관리하는 것은 매우 중요합니다. 이때 Context API와 Redux라는 두 가지 주요 상태 관리 도구를 고려할 수 있는데요. 두 방식 모두 장단점이 있으므로 프로젝트의 요구 사항에 맞게 선택하는 것이 좋습니다. 이번 포스트에서는 Next.js에서 로그인 상태를 관리하기 위해 Context API와 Redux를 어떻게 사용할 수 있는지, 어떤 경우에 어떤 것을 선택하는 것이 유리한지 비교해 보겠습니다.1. Context API로 로그인 상태 관리하기Context API는 React에 내장된 기능으로, 간단한 상태 관리를 위해 훌륭한 선택입니다. Next.js 프로젝트에서 인증 상태와 같이 전역적으로 사용되는 상태를 관리하기 ..

Next.js 어드민 웹 개발: Tailwind CSS를 사용해야 할까?안녕하세요, 개발자 여러분! 오늘은 Next.js로 모바일 앱의 어드민 웹을 개발할 때 Tailwind CSS를 사용하는 것에 대해 이야기해보려고 합니다.Tailwind CSS란?Tailwind CSS는 유틸리티 우선(utility-first) 접근 방식을 채택한 현대적인 CSS 프레임워크입니다. 기존의 Bootstrap이나 Foundation과는 달리, Tailwind는 미리 정의된 컴포넌트 대신 작은 유틸리티 클래스들을 제공합니다.Tailwind CSS의 장점빠른 개발 속도미리 정의된 유틸리티 클래스를 사용하면 CSS를 직접 작성하는 것보다 훨씬 빠르게 UI를 구축할 수 있습니다. 이는 어드민 패널과 같이 복잡한 인터페이스를 개발..

Next.js로 모바일 앱 어드민 웹 구축하기: TypeScript를 사용해야 할까?안녕하세요, 개발자 여러분! 오늘은 Next.js를 사용하여 모바일 애플리케이션의 어드민 웹을 구축할 때 TypeScript를 사용해야 할지에 대해 이야기해보려고 합니다.TypeScript, 꼭 필요할까?Next.js 프로젝트를 시작할 때 마주치는 첫 번째 질문 중 하나가 바로 이것입니다: Would you like to use TypeScript? » No / Yes 이 질문에 대한 답변은 프로젝트의 성격과 팀의 상황에 따라 달라질 수 있지만, 모바일 앱의 어드민 웹을 구축하는 경우라면 TypeScript를 사용하는 것이 좋습니다. 그 이유를 자세히 살펴보겠습니다.TypeScript 사용의 장점코드 품질 향상어드민 시스..

1. Visual Studio Code 설치Visual Studio Code 공식 웹사이트에서 Windows용 설치 파일을 다운로드합니다.다운로드한 .exe 파일을 실행하고 설치 마법사의 지시를 따릅니다."PATH에 추가" 옵션을 선택하여 명령 프롬프트에서 code 명령을 사용할 수 있게 합니다.설치가 완료되면 VS Code를 실행합니다.2. Node.js 설치Node.js 공식 웹사이트에서 Windows용 LTS 버전을 다운로드합니다.다운로드한 .msi 파일을 실행하고 설치 마법사의 지시를 따릅니다.설치가 완료되면 Windows 명령 프롬프트를 열고 다음 명령어로 설치를 확인합니다:node --version npm --version3. Next.js 프로젝트 생성Windows 파일 탐색기에서 프로젝트를..

웹 프로그래밍을 할 때 사용할 IDE나 텍스트 에디터를 고르는 건 매우 중요한 일입니다. 특히 Express.js와 Next.js를 사용한 웹 프로젝트라면, 적합한 도구를 고르는 것이 더 중요하죠. 여기서 고민이 되는 것은 바로 IntelliJ와 **Visual Studio Code (VS Code)**입니다. 이 두 도구는 각기 다른 장점이 있지만, 어떤 상황에서 더 적합한지 알아보겠습니다.IntelliJ로 웹 프로그래밍하기IntelliJ는 원래 Java 개발을 위해 널리 사용되는 IDE로 잘 알려져 있습니다. 하지만, Express.js와 Next.js 같은 JavaScript 기반 웹 프레임워크 개발도 잘 지원합니다. 특히, IntelliJ의 강력한 코드 분석 및 디버깅 도구는 대규모 프로젝트를 관..

Java와 JSP의 조합으로 웹 애플리케이션을 개발하는 경우, 흔히 WAS(Web Application Server)를 통해 서버에서 클라이언트 요청을 처리하고, 필요한 데이터를 전달하면서 웹 페이지를 렌더링하게 됩니다. 그런데 최근 많이 사용되는 Next.js는 서버와 클라이언트의 경계를 허물며, 단일 프레임워크로 백엔드와 프론트엔드 역할을 동시에 수행할 수 있어 많은 주목을 받고 있죠.Next.js의 기능과 장점Next.js는 React 기반의 풀스택 프레임워크로, 페이지 라우팅, 서버 사이드 렌더링(SSR), 정적 생성(SSG) 및 API 라우팅을 자체적으로 제공합니다. 이러한 기능을 활용하면 페이지 렌더링과 데이터 API 제공을 단일 프로젝트에서 구현할 수 있어, 기존의 WAS 역할을 대체할 수 ..

Node.js: 서버에서 JavaScript를 실행하게 해주는 환경(런타임).React: UI를 만들기 위한 프론트엔드 라이브러리.Next.js: React를 기반으로 서버 사이드 렌더링과 같은 서버 기능까지 지원하는 프레임워크로, 서버와 클라이언트 양쪽에서 모두 동작할 수 있음. Node.js서버 사이드 JavaScript 런타임이야. 브라우저가 아닌 서버에서 JavaScript를 실행할 수 있게 만들어주는 환경.이걸 통해서 데이터베이스와 소통하거나 파일을 다루는 등의 서버 작업을 JavaScript로 할 수 있음.Express.js 같은 웹 프레임워크를 이용해서 백엔드 서버를 구축하는 데 자주 사용된다.React프론트엔드 라이브러리로, 주로 사용자 인터페이스(UI)를 구축하는 데 사용된다.React를..

문제 ) VM 에서 호스트의 파일을 사용해야 하는데 호스트와 vm 간 네트워크 연결이 없는 경우 해결 ) enhanced session mode 에서 driver를 선택하면 된다. 방법 ) 1. Hyper-V Manager 실행 > VM 선택 > Hyper-V Setting > Enhanced Session Mode Policy > Allow enhanced session mode 2. Connect > Show Option > Local Resources 3. More > Drives > 원하는 드라이브 체크