본 포스팅부터 모바일 서비스 개발편이 시작됩니다. 진행을 위해 Flutter가 필수적으로 설치되어 있어야 하니 Flutter 설치 글을 먼저 확인해 주세요.모바일 개발편부터는 MacOS를 사용합니다.vscodeFlutter 3.16.0Dart 3.2.04-1. 프로젝트 생성vscode를 실행하고 프로젝트를 생성해 보겠습니다.Command + Shift + P 를 눌러 Next Project를 클릭합니다. Application 선택 후 프로젝트를 생성할 경로를 지정합니다. 프로젝트명을 입력합니다. 이때 프로젝트명은 카멜케이스가 아닌 스네이크 케이스를 사용해야 합니다. 프로젝트가 생성되었습니다. Simulator를 실행하고 Command + Shift + D를 눌러 디버그 실행을 클릭합니다. Simulato..

이번 포스팅에서는 지금까지 만든 프로젝트를 실제 웹 서비스로 배포해보겠습니다. Next.js를 배포하는 방법은 여러가지가 있는데, 이번 프로젝트는 Next.js를 개발한 Vercel사의 배포를 사용하겠습니다. 간단한 프로젝트는 Vercel을 이용하면 쉽게 배포할 수 있으며, 호스팅 또한 무료로 제공됩니다.배포 후에는 가비아로 구입한 도메인을 연결해보겠습니다.3-1. 가비아로 도메인 구입하기1. 가비아에 접속해서 상단에 도메인 메뉴를 클릭합니다.calculator라는 도메인은 이미 사용중이기 때문에 사용 가능한 도메인을 입력해보겠습니다. .co.kr, .kr 등 여러 가지가 있지만 co.kr이 보편적으로 많이 사용됩니다. 구매를 원하는 도메인을 검색하고 신청하기를 클릭합니다. 2. 신청 정보를 입력합니다...

웹 서비스 개발 마지막 장입니다.오늘은 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.2-5. 계산 결과 공유하기(with 카카오톡 공유하기)카카오 개발자 설정카카오 개발자센터에 접속해서 애플리케이션을 추가하겠습니다.   앱 키의 JavaScript 키가 카카오톡 공유하기 기능에 사용됩니다. 플랫폼 탭에서 Web 플랫폼을 등록합니다. 두 개의 주소를 등록하는데 로컬(http://localhost:3000)과 프로덕션 주소(https://calculator.codedream.co.kr)입니다.   카카오 SDK 추가환경 변수를 관리하는 .env.local 파일을 추가합니다. 앞서 확인한 JavaScript 키를 추가합니다..env.localNEXT_PUBLIC_KAKAO_KEY=b2f44b1ec8a..

지난 글에 이어 계산 기능 구현하기 바로 들어가보겠습니다.화면에 보이는 계산하기 버튼을 눌러보겠습니다.  ! 가 콘솔에 조회되고 있습니다.다시 코드로 돌아와서 계산기 컴포넌트를 확인해볼까요?  버튼 컴포넌트에 onClick 이벤트로 console.log를 전달했고 정상적으로 실행이 된 것을 알 수 있습니다.이제 이 버튼 컴포넌트를 클릭하면 계산이 될 수 있게 만들어 보겠습니다. 2-4. 계산 기능 구현하기계산하기 버튼 클릭시 아래와 같이 팝업이 뜨며 계산 결과를 확인할 수 있게 할 것인데요. 우선 팝업을 추가해보겠습니다.  아이콘 라이브러리 추가Lucide라는 아이콘 라이브러리를 추가하겠습니다.npm i lucide-react 설치 후에는 사이트에서 원하는 아이콘 클릭 후 Copy JSX로 복사하고 붙여..

지난 글에 이어 오늘은 Next.js로 실제 개발을 해보겠습니다.이번 포스팅은 2번째 챕터인 "Next.js로 웹 서비스 개발하기"입니다. 웹 서비스 개발편은 코드양이 많아 총 3장으로 나누어 작성했습니다. 1장에서는 컴포넌트 생성, 스타일 적용이 주 내용이며 2장에서는 생성한 컴포넌트를 활용해 계산 기능을 구현하게 됩니다. 마지막 3장에서는 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.vscode를 실행하고 생성한 프로젝트를 열어보겠습니다.Next 13 버전부터는 디렉토리가 아래와 같이 생성됩니다. Next 13 버전부터는 앱 라우터 방식으로 app 디렉토리 안에 page.tsx(타입스크립트 미적용시 page.js)를 통해 페이지를 찾아가게 됩니다. 터미널을 실행(Ctrl + Shfit + `..

스터디 모임에서 Next.js, Flutter를 이용한 프로젝트를 진행해보며 웹, 모바일앱을 배포해볼 수 있었습니다. 그 경험들을 바탕으로 개인 프로젝트를 통해 간단한 웹 서비스를 만들어 모바일앱까지 만들어 보고자 합니다. 이번 프로젝트는 웹 뷰를 이용해서 웹/모바일앱을 동시에 구현해보고, 프로젝트 생성, 배포 방법등과 같은 진행 과정을 자세히 풀어가보려고 합니다.Next.js와 Flutter를 이용해서 개발되며 각 프레임워크를 한번쯤 경험해보신 분들은 어렵지 않게 따라하실 수 있을 것 같습니다. 포스팅은 총 5개의 챕터로 이루어져 있습니다.서비스 기획과 웹 프로젝트 생성1-1. 서비스 기획1-2. Next.js 프로젝트 생성Next.js로 웹 서비스 개발하기2-1. 입력 컴포넌트 만들기2-2. 버튼 컴..