Framework
-
본 포스팅부터 모바일 서비스 개발편이 시작됩니다. 진행을 위해 Flutter가 필수적으로 설치되어 있어야 하니 Flutter 설치 글을 먼저 확인해 주세요.모바일 개발편부터는 MacOS를 사용합니다.vscodeFlutter 3.13.94-1. 프로젝트 생성vscode를 실행하고 프로젝트를 생성해 보겠습니다.Command + Shift + P 를 눌러 Next Project를 클릭합니다. Application 선택 후 프로젝트를 생성할 경로를 지정합니다. 프로젝트명을 입력합니다. 이때 프로젝트명은 카멜케이스가 아닌 스네이크 케이스를 사용해야 합니다. 프로젝트가 생성되었습니다. Simulator를 실행하고 Command + Shift + D를 눌러 디버그 실행을 클릭합니다. Simulator는 Xcode 실..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 4편 : Flutter로 모바일 서비스 개발하기 2024. 5. 1. -
최근 Next.js로 만든 대출이자계산기 웹 사이트가 있습니다. 검색 노출을 잘 되게 하기 위해 사이트맵을 제출해봤습니다. 사이트맵을 만들어 구글과 네이버에 제출하는 과정들을 소개합니다.Next 14Vercel사이트맵 만들기사이트맵(Sitemap.xml)은 웹 사이트의 페이지 구조를 검색 엔진에 알려주는데 사용됩니다. 사이트맵을 제출하면 검색 엔진이 웹 사이트의 페이지를 빠르게 찾아 색인화할 수 있고, 이를 통해 검색 결과에 더 많은 페이지가 표시될 수 있습니다.npm 패키지 중 next-sitemap을 통해 sitemap을 쉽게 생성할 수 있습니다. next-sitemap을 설치합니다.npm i next-sitemap 빌드 스크립트에 postbuild를 추가합니다.postbuild: "next-site..
Next-sitemap으로 사이트맵(Sitemap.xml) 제출하기 2024. 4. 29. -
이번 포스팅에서는 지금까지 만든 프로젝트를 실제 웹 서비스로 배포해보겠습니다. Next.js를 배포하는 방법은 여러가지가 있는데, 이번 프로젝트는 Next.js를 개발한 Vercel사의 배포를 사용하겠습니다. 간단한 프로젝트는 Vercel을 이용하면 쉽게 배포할 수 있으며, 호스팅 또한 무료로 제공됩니다.배포 후에는 가비아로 구입한 도메인을 연결해보겠습니다.3-1. 가비아로 도메인 구입하기1. 가비아에 접속해서 상단에 도메인 메뉴를 클릭합니다.calculator라는 도메인은 이미 사용중이기 때문에 사용 가능한 도메인을 입력해보겠습니다. .co.kr, .kr 등 여러 가지가 있지만 co.kr이 보편적으로 많이 사용됩니다. 구매를 원하는 도메인을 검색하고 신청하기를 클릭합니다. 2. 신청 정보를 입력합니다...
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 3편 : 웹 배포하기 2024. 4. 27. -
웹 서비스 개발 마지막 장입니다.오늘은 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.2-5. 계산 결과 공유하기(with 카카오톡 공유하기)카카오 개발자 설정카카오 개발자센터에 접속해서 애플리케이션을 추가하겠습니다. 앱 키의 JavaScript 키가 카카오톡 공유하기 기능에 사용됩니다. 플랫폼 탭에서 Web 플랫폼을 등록합니다. 두 개의 주소를 등록하는데 로컬(http://localhost:3000)과 프로덕션 주소(https://calculator.codedream.co.kr)입니다. 카카오 SDK 추가환경 변수를 관리하는 .env.local 파일을 추가합니다. 앞서 확인한 JavaScript 키를 추가합니다..env.localNEXT_PUBLIC_KAKAO_KEY=b2f44b1ec8a..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 27. -
지난 글에 이어 계산 기능 구현하기 바로 들어가보겠습니다.화면에 보이는 계산하기 버튼을 눌러보겠습니다. ! 가 콘솔에 조회되고 있습니다.다시 코드로 돌아와서 계산기 컴포넌트를 확인해볼까요? 버튼 컴포넌트에 onClick 이벤트로 console.log를 전달했고 정상적으로 실행이 된 것을 알 수 있습니다.이제 이 버튼 컴포넌트를 클릭하면 계산이 될 수 있게 만들어 보겠습니다. 2-4. 계산 기능 구현하기계산하기 버튼 클릭시 아래와 같이 팝업이 뜨며 계산 결과를 확인할 수 있게 할 것인데요. 우선 팝업을 추가해보겠습니다. 아이콘 라이브러리 추가Lucide라는 아이콘 라이브러리를 추가하겠습니다.npm i lucide-react 설치 후에는 사이트에서 원하는 아이콘 클릭 후 Copy JSX로 복사하고 붙여..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 25. -
지난 글에 이어 오늘은 Next.js로 실제 개발을 해보겠습니다.이번 포스팅은 2번째 챕터인 "Next.js로 웹 서비스 개발하기"입니다. 웹 서비스 개발편은 코드양이 많아 총 3장으로 나누어 작성했습니다. 1장에서는 컴포넌트 생성, 스타일 적용이 주 내용이며 2장에서는 생성한 컴포넌트를 활용해 계산 기능을 구현하게 됩니다. 마지막 3장에서는 카카오톡 공유하기를 통해 계산 결과를 공유해보겠습니다.vscode를 실행하고 생성한 프로젝트를 열어보겠습니다.Next 13 버전부터는 디렉토리가 아래와 같이 생성됩니다. Next 13 버전부터는 앱 라우터 방식으로 app 디렉토리 안에 page.tsx(타입스크립트 미적용시 page.js)를 통해 페이지를 찾아가게 됩니다. 터미널을 실행(Ctrl + Shfit + `..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 23. -
스터디 모임에서 Next.js를 공부하고 몇가지 프로젝트를 진행했습니다. 이번에는 개인 프로젝트를 통해 간단한 웹 서비스를 만들어 모바일 어플리케이션까지 만들어 보고자 합니다. Next.js, Flutter를 한번이라도 접해보신 분들은 어렵지 않게 따라하실 수 있습니다. 포스팅은 총 5개의 챕터로 이루어져 있습니다.서비스 기획과 웹 프로젝트 생성1-1. 서비스 기획1-2. Next.js 프로젝트 생성Next.js로 웹 서비스 개발하기2-1. 입력 컴포넌트 만들기2-2. 버튼 컴포넌트 만들기2-3. 스타일 적용하기2-4. 계산 기능 구현하기2-5. 계산 결과 공유하기(with 카카오톡 공유하기)웹 배포하기3-1. 가비아로 도메인 구입하기3-2. GitHub 레포지토리를 Vercel로 배포하기Flutter로..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 1편 : 서비스 기획과 웹 프로젝트 생성 2024. 4. 23. -
이미지 파일을 Multipartfile로 변환하거나 base64 데이터를 파일로 변환하는 방법을 알아보겠습니다. ※ 테스트 환경 Spring Boot 2.7.5 JDK 11 Gradle 1. 의존성 추가 build.gradle // https://mvnrepository.com/artifact/org.apache.tika/tika-core implementation 'org.apache.tika:tika-core:2.9.1' // https://mvnrepository.com/artifact/org.springframework/spring-mock testImplementation 'org.springframework:spring-mock:2.0.8' // https://mvnrepository.com/..
[Spring Boot]이미지 파일 변환, base64 to multipartfile 2024. 4. 18.