전체 글
개발자로(18.01.24~)
-
스터디 모임에서 Next.js를 공부하고 몇가지 프로젝트를 진행했습니다. 이번에는 개인 프로젝트를 통해 간단한 웹 서비스를 만들어 모바일 어플리케이션까지 만들어 보고자 합니다. Next.js, Flutter를 처음 접하시는 분들도 어렵지 않게 따라하실 수 있게 준비했습니다. 포스팅은 총 5개의 챕터로 이루어져 있습니다. 서비스 기획과 웹 프로젝트 생성 1-1. 서비스 기획 1-2. Next.js 프로젝트 생성 Next.js로 웹 서비스 개발하기 2-1. 입력 컴포넌트 만들기 2-2. 버튼 컴포넌트 만들기 2-3. 계산 기능 구현하기 웹 배포하기 3-1. 가비아로 도메인 구입하기 3-2. GitHub 레포지토리를 Vercel로 배포하기 Flutter로 모바일 서비스 개발하기 4-1. 웹뷰를 활용해 웹과 모..
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. -
본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다. 여기서 더 많은 글들을 확인하실 수 있습니다. 예제에 사용된 버전은 다음과 같습니다. npm 9.5.0 react 18.2.0 typescript 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. -
본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다. 여기서 더 많은 글들을 확인하실 수 있습니다. 푸쉬 수신은 디바이스의 상태에 따라 설정이 필요합니다. 디바이스 상태는 3가지로 나뉩니다. Foreground : 앱이 실행되어 있고, 화면에 보여지고 있는 상태 Background : 앱이 실행되어 있지만 화면에 보여지지 않는 상태 Terminated : 앱이 종료된 상태 그리고 푸쉬 수신을 위해서는 디바이스 상태와 플랫폼별 설정이 필요합니다. 먼저 Messaging 클래스를 작성합니다. 클래스내 모든 메소드는 static으로 동작하도록 구성했습니다. 1. 파이어베이스 초기화 Firebase와 Local notification 초기화를 담당하는 메소드입니다. 초기화시 등록되는 메소드는 다음과 같습니..
[Flutter]Firebase 클라우드 메세징 사용해보기 - 2편 : 푸쉬 수신 개발 2024. 3. 24. -
본 포스팅은 스터디를 통해 작성한 글을 복사한 내용입니다. 여기서 더 많은 글들을 확인하실 수 있습니다. Android 1. build.gradle(:app) 설정 1-1) SDK 버전 설정 FCM 사용을 위해 최소 버전은 31로 맞춰야합니다. compileSdkVersion과 targetSdkVersion은 33으로 맞춰줍니다. compileSdkVersion 33 defaultConfig { applicationId "com.app.ourchurch" minSdkVersion 31 targetSdkVersion 33 } 1-2) 모듈 추가 dependencies { // Firebase implementation platform('com.google.firebase:firebase-bom:32.7.2..
[Flutter]Firebase 클라우드 메세징 사용해보기 - 1편 : 설치 2024. 3. 24.