전체 글
개발자로(18.01.24~)
-
이번 포스팅에서는 지금까지 만든 프로젝트를 실제 웹 서비스로 배포해보겠습니다. Next.js를 배포하는 방법은 여러가지가 있는데, 이번 프로젝트는 Next.js를 개발한 Vercel사의 배포를 사용하겠습니다. 간단한 프로젝트는 Vercel을 이용하면 쉽게 배포할 수 있으며, 호스팅 또한 무료로 제공됩니다.배포 후에는 가비아로 구입한 도메인을 연결해보겠습니다.3-1. 가비아로 도메인 구입하기1. 가비아에 접속해서 상단에 도메인 메뉴를 클릭합니다.calculator라는 도메인은 이미 사용중이기 때문에 사용 가능한 도메인을 입력해보겠습니다. .co.kr, .kr 등 여러 가지가 있지만 co.kr이 보편적으로 많이 사용됩니다. 신청하기를 클릭합니다. 2. 신청 정보를 입력합니다.이후에는 기본값 ..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 3편 : 웹 배포하기 2024. 4. 25. -
지난 글에 이어 계산 기능 구현하기 바로 들어가보겠습니다.화면에 보이는 계산하기 버튼을 눌러보겠습니다. ! 가 콘솔에 조회되고 있습니다.다시 코드로 돌아와서 계산기 컴포넌트를 확인해볼까요? 버튼 컴포넌트에 onClick 이벤트로 console.log를 전달했고 정상적으로 실행이 된 것을 알 수 있습니다.이제 이 버튼 컴포넌트를 클릭하면 계산이 될 수 있게 만들어 보겠습니다. 2-4. 계산 기능 구현하기계산하기 버튼 클릭시 아래와 같이 팝업이 뜨며 계산 결과를 확인할 수 있게 할 것인데요. 우선 팝업을 추가해보겠습니다. 아이콘 라이브러리 추가Lucide라는 아이콘 라이브러리를 추가하겠습니다.npm i lucide-react 설치 후에는 사이트에서 원하는 아이콘..
[토이프로젝트]Next.js를 이용해 대출이자계산기 만들어보기 - 2편 : Next.js로 웹 서비스 개발하기 2024. 4. 25. -
지난 글에 이어 오늘은 Next.js로 실제 개발을 해보겠습니다.이번 포스팅은 2번째 챕터인 "Next.js로 웹 서비스 개발하기"입니다.vscode를 실행하고 생성한 프로젝트를 열어보겠습니다.Next 13 버전부터는 디렉토리가 아래와 같이 생성됩니다. Next 13 버전부터는 앱 라우터 방식으로 app 디렉토리 안에 page.tsx(타입스크립트 미적용시 page.js)를 통해 페이지를 찾아가게 됩니다. 터미널을 실행(Ctrl + Shfit + `)하고 npm run dev를 입력합니다.주소 창에 localhost:3000을 입력해 접속합니다. app/page.tsx가 실행된 화면입니다.아래 더보기란을 확인하고 디버그 모드를 추가 설정합니다.더보기아래 표시된 영역 중 아무..
[토이프로젝트]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. 계산 기능 구현하기웹 배포하기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. -
출처 Developer Roadmaps Step by step guides and paths to learn different tools or technologies roadmap.sh
프론트엔드 로드맵 2024. 4. 8. -
출처 Developer Roadmaps Step by step guides and paths to learn different tools or technologies roadmap.sh
백엔드 로드맵 2024. 4. 8. -
작년에 DB Replication을 통해 리더/라이터 인스턴스를 분리하는 작업을 하고 MySQL을 Aurora MySQL로 이전했는데요. 시간이 좀 지나고 나니 기억이 흐릿해져 복습겸 포스팅을 작성했습니다. ※ 테스트 환경 Spring Boot 2.7.5 JDK 11 AWS Aurora MySQL 8.0 MyBatis DB Replication 사용 이유 DB Replication은 데이터베이스 이중화 방법으로써 DB 서버의 부하를 방지하기 위해 사용합니다. replication은 일반적으로 읽기/쓰기 작업을 구분해 데이터베이스 구조를 나누는 방법이 있습니다. 하나의 Writer(Master) 인스턴스를 두고 여러 개의 Reader(Slave) 인스턴스를 구성하는 방법입니다. Aurora MySQL은 클..
[Spring Boot]DB Replication 설정(Aurora MySQL) 2024. 4. 8. -
1. google style guide 다운로드 2. Code Style 적용하기 다운 받은 파일의 압축을 풀게 되면 intellij-java-google-style.xml 파일이 존재합니다. 인텔리제이 실행 후 File - Settings - Editor - Code Style을 확인합니다. import Scheme을 통해 다운 받은 xml 파일을 적용합니다. 3. 자동 정렬 다시 Settings - Tools - Actions on Save를 확인합니다. Reformat Code를 체크하고 파일 타입에 Java를 선택해줍니다. 4. 적용 마지막으로 APPLY 후 코드를 저장(Ctrl + S)해보면 자동 정렬이 되는 것을 확인할 수 있습니다.
[IntelliJ]google style guide 적용하기 2024. 4. 5. -
오랜만에 앱 배포를 하던 중 아래와 같은 경고 문구가 날아왔습니다. 앱스토어에 배포 과정 중 뭔가 변경되었나 봅니다. 아직까지 배포에 문제는 없지만 5월 1일까지는 수정을 꼭 해야할 것 같습니다. API를 사용하는 경우 'PrivacyInfo'라는 이름의 privacy manifest 파일을 포함하고 있어야한다고 합니다. 하단 링크를 통해서 각각의 API 사용 이유에 대한 코드를 파일에 추가할 수 있습니다. 1. App Privacy 파일 생성 Xcode를 실행 후 File - New - File을 통해 App Privacy 파일을 생성합니다. 타겟에는 Runner를 체크해줍니다. 2. Privacy Accessed API Types 추가 App Privacy Configuration에 +버튼을 클릭 후..
ITMS-91053: Missing API declaration 2024. 4. 3. -
오랜만에 알림톡을 다시 구현할 일이 생겼는데요. 연동 방법을 포스팅으로 남겨도 좋을 것 같아 내용을 정리해봤습니다. 알림톡 사용을 위해서 NHN Notification - KakaoTalk Bizmessage 서비스를 사용했으며, 발신 프로필이 등록되어야 테스트할 수 있습니다. ※ 테스트 환경 Spring Boot 1. 알림톡 템플릿 등록 알림톡 전송시 사용될 템플릿이 등록되어야 합니다. NHN 접속 후 알림톡 - 템플릿 관리로 이동합니다. 템플릿 등록을 통해 각 내용을 기입합니다. 템플릿 내용에는 변수를 사용할 수 있습니다. 템플릿에는 변수를 사용해서 내용을 등록해두고 API 호출시 변수에 대응하는 값을 넣어주면 호출 내용대로 알림톡이 발송됩니다. *템플릿 : #{이름} 알림톡입니다. *API 호출 :..
[Spring Boot]알림톡 보내기 2024. 3. 28. -
본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다. 여기서 더 많은 글들을 확인하실 수 있습니다. 예제에 사용된 버전은 다음과 같습니다. npm 9.5.0 react 18.2.0 typescript 4.9.5 훅(React Hooks) React Hooks는 React 버전 16.8에서 소개되었습니다. 훅은 함수 컴포넌트 안의 상태(State)나 생명 주기(Lifecycle)를 다루기 위한 기능입니다. 훅을 공부하기 앞서 리액트에서 말하는 상태와 생명 주기에 대해 먼저 알아볼 필요가 있었습니다. 상태와 생명 주기 1. 상태(State) 상태란 컴포넌트 내부에서 변할 수 있는 값을 의미합니다. 이전 예제의 카드 컴포넌트를 다시 가져오겠습니다. Props로 전달받은 title 아래로 카드를 클릭할 때..
React 맛보기 - React Hooks 2024. 3. 28.