Framework/React,Next.js
-
최근 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. 신청 정보를 입력합니다...
[토이프로젝트]대출이자계산기 만들어보기 - 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..
[토이프로젝트]대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 27. -
지난 글에 이어 계산 기능 구현하기 바로 들어가보겠습니다.화면에 보이는 계산하기 버튼을 눌러보겠습니다. ! 가 콘솔에 조회되고 있습니다.다시 코드로 돌아와서 계산기 컴포넌트를 확인해볼까요? 버튼 컴포넌트에 onClick 이벤트로 console.log를 전달했고 정상적으로 실행이 된 것을 알 수 있습니다.이제 이 버튼 컴포넌트를 클릭하면 계산이 될 수 있게 만들어 보겠습니다. 2-4. 계산 기능 구현하기계산하기 버튼 클릭시 아래와 같이 팝업이 뜨며 계산 결과를 확인할 수 있게 할 것인데요. 우선 팝업을 추가해보겠습니다. 아이콘 라이브러리 추가Lucide라는 아이콘 라이브러리를 추가하겠습니다.npm i lucide-react 설치 후에는 사이트에서 원하는 아이콘 클릭 후 Copy JSX로 복사하고 붙여..
[토이프로젝트]대출이자계산기 만들어보기 - 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 + `..
[토이프로젝트]대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 23. -
스터디 모임에서 Next.js, Flutter를 이용한 프로젝트를 진행해보며 웹, 모바일앱을 배포해볼 수 있었습니다. 그 경험들을 바탕으로 개인 프로젝트를 통해 간단한 웹 서비스를 만들어 모바일앱까지 만들어 보고자 합니다. 이번 프로젝트는 웹 뷰를 이용해서 웹/모바일앱을 동시에 구현해보고, 프로젝트 생성, 배포 방법등과 같은 진행 과정을 자세히 풀어가보려고 합니다. Next.js와 Flutter를 이용해서 개발되며 각 프레임워크를 한번쯤 경험해보신 분들은 어렵지 않게 따라하실 수 있을 것 같습니다. 포스팅은 총 5개의 챕터로 이루어져 있습니다.서비스 기획과 웹 프로젝트 생성1-1. 서비스 기획1-2. Next.js 프로젝트 생성Next.js로 웹 서비스 개발하기2-1. 입력 컴포넌트 만들기2-2. 버튼 ..
[토이프로젝트]대출이자계산기 만들어보기 - 1편 : 서비스 기획과 웹 프로젝트 생성 2024. 4. 23. -
본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다.여기서 더 많은 글들을 확인하실 수 있습니다.예제에 사용된 버전은 다음과 같습니다.npm 9.5.0react 18.2.0typescript 4.9.5 훅(React Hooks)React Hooks는 React 버전 16.8에서 소개되었습니다.훅은 함수 컴포넌트 안의 상태(State)나 생명 주기(Lifecycle)를 다루기 위한 기능입니다. 훅을 공부하기 앞서 리액트에서 말하는 상태와 생명 주기에 대해 먼저 알아볼 필요가 있었습니다.상태와 생명 주기1. 상태(State)상태란 컴포넌트 내부에서 변할 수 있는 값을 의미합니다. 이전 예제의 카드 컴포넌트를 다시 가져오겠습니다. Props로 전달받은 title 아래로 카드를 클릭할 때마다 클릭 수가 증..
React 맛보기 - React Hooks 2024. 3. 28. -
본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다.여기서 더 많은 글들을 확인하실 수 있습니다.예제에 사용된 버전은 다음과 같습니다.npm 9.5.0react 18.2.0typescript 4.9.5리액트 프로젝트를 생성해보겠습니다. 타입스크립트를 사용하기 위해 패키지를 추가합니다.npx create-react-app@latest study-react --template typescript 프로젝트를 실행합니다.npm run start 컴포넌트리액트에서 말하는 컴포넌트는 쉽게 말해 브라우저에 표시되는 페이지의 각 요소들을 말합니다. 이런 사이트가 있다고 할 때 1.메뉴, 2.카드가 컴포넌트인 것입니다.1. 메뉴는 레이아웃 컴포넌트로 사용되고 2. 카드는 리스트에서 하나의 아이템 컴포넌트로 사용되고..
React 맛보기 - React Component 2024. 3. 28.