~☆~ 우하하!!~ 개발블로그

swagger 란 Restful API 의 문서화, 테스트 도구인데, 시각적으로 테스트할 수 있는 UI 를 제공하고 있기 때문에아주 유용하지. swagger 가 적용되면 대충 이런 모습의 UI 화면을 사용할 수가 있어.이번 포스트에서는 API 테스트를 목적으로 diary 프로젝트에 swagger 를 연동해보려고 해.swagger 와 연동하기 위해서는 build.gradle 에 dependency 를 추가해 주어야 해.// Swaggerimplementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.0.2'swagger UI 화면은 http://{ipaddress}:{port}/swagger-ui.html 주소로 이동하면 확인할 수 있어. (자동으로..

diary 프로그램에 메일 발송 기능을 추가해보려고 해.Spring Boot 에서 메일발송 기능을 구현하려면 아래 dependency 를 추가해 주어야 해.implementation "org.springframework.boot:spring-boot-starter-mail" 메일발송이 필요할 때 사용할 설정을 Bean 으로 만들어 사용하도록 할 생각이야. @Configuration 애노테이션을 붙여서 SendMailConfig 클래스를 아래와 같이 작성했어.SendMailConfig.javapackage com.woohahaapps.study.diary.config;import org.springframework.beans.factory.annotation.Value;import org.springfra..

Google Cloud 설정은 https://iwoohaha.tistory.com/318 포스트를 참고하자. 소셜 로그인/회원가입 기능은 OAuth 라는 기능을 사용하는 것이다.더보기OAuth :Open Authorization 즉, 제 3자 애플리케이션이 사용자의 인증 정보를 공유하지 않고도 제한된 접근 권한을 통해 특정 자원에 접근할 수 있도록 하는 권한 위임 방식의 표준 프로토콜이다. 여기에서 제 3자 애플리케이션은 내가 개발하고 있는 애플리케이션을 말한다.Google, Apple, Facebook 등은 사용자정보를 보유하고 있는데, 내가 개발하고 있는 애플리케이션이 제한된 접근 권한을 통해서 이 사용자정보에 접근할 수 있도록 OAuth 기능을 제공하는 것이다.내가 개발하고 있는 애플리케이션은 자원..

AWS S3 를 구성하는 방법에 대해서는 별도의 포스트로 다루겠다.이 포스트에서는 AWS S3 가 구성되어 있다는 전제하에 우분투 서버에서 AWS S3 에 연결하여 파일을 업로드하고 다운로드하는 방법에 대해서 다룬다. awscli 설치우선 우분투에서 AWS S3 에 접속하기 위해서는 awscli 를 설치해야 한다.설치 과정은 다음과 같다.# 1. 최신 버전의 awscli 설치 파일 다운로드curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"# 2. 압축 해제unzip awscliv2.zip# 3. 설치 실행 (관리자 권한 필요)sudo ./aws/install# 4. 설치 확인aws --version 만약 unz..

웹서핑을 하다보면 회원가입이 필요한 사이트에서 Continue with Google 이라는 버튼을 본 적이 있을거다. "Continue with Google" 버튼을 클릭하면내가 로그인한 구글 계정이 표시되고 (만약 여러개라면 선택이 가능), 계속 버튼을 클릭하면 선택한 구글 계정으로 로그인해서 해당 웹사이트의 기능을 이용할 수 있게 된다.  흔히 소셜 로그인이라고 부르는 이 로그인/회원가입 방식을 diary 프로젝트에 구현해보려고 한다.코드 구현에 앞서 구글 클라우드에서 설정해 두어야 할 내용이 있어서 이렇게 별도의 포스트로 설명한다. Google Cloud(https://console.cloud.google.com/) 에 접속하여 구글 계정으로 로그인한다. Google 클라우드 플랫폼로그인 Googl..

이번 포스트는 https://iwoohaha.tistory.com/316 의 연장이다.지난번 포스트에서는 버튼을 클릭하면 단순히 알럿 메시지를 표시하는 정도의 수정이었는데, 이번에는 버튼이 도대체 몇 번이나 클릭을 당했는지를 표시해보려고 한다. 컴포넌트에서 어떤 값을 관리하기 위해서는 상태(state)를 관리해야 하는데, 'react' 로부터 useState 를 import 하는 것으로부터 시작한다.import { useState } from 'react'; node_modules 디렉토리 아래의 react 에서 export 하고 있는 컴포넌트가 무수히 많기 때문에 그 중에서 필요한 useState 만을 가져오기 위한 방법으로 { } 괄호 사이에 useState 를 사용하고 있는 것이다. 이렇게 상태관리..

https://iwoohaha.tistory.com/314 에서 실습해 본 수정의 연장선 차원에서 버튼에 클릭 이벤트를 추가하는 방법에 대해서 알아보자. 우선 클릭 이벤트 핸들러 함수를 만들어보자. function handleClick() { alert('You clicked me!'); } handleClick 이라는 이름의 함수인데, alert 함수를 사용해서 'You clicked me!' 메시지창이 표시되게 했다. 이 함수를 작성해야 하는 위치는 MyButton 컴포넌트(함수형 컴포넌트) 내부이다. MyButton 컴포넌트의 동작과 관계가 있기 때문이다.function MyButton() { function handleClick() { alert('You ..

git 사용중에 이런 사례가 발생했다. (Local에서)로컬에서 프로젝트를 생성했다. 프로젝트 생성과 동시에 로컬에 git repository 를 만들었다. main 브랜치에 초기 커밋(README 파일이 포함됨) 외에 새로운 2개의 수정사항에 대한 커밋을 수행했다. (Remote에서)이 프로젝트를 gitlab 에서 관리하기 위해서 gitlab 에서 새 프로젝트를 생성했다. 새 프로젝트 생성시에 README 파일 하나가 만들어지도록 선택했다. (Local에서)Remote 리파지토리 주소를 로컬 저장소의 remote 주소로 등록했다.main 브랜치로부터 woohaha 라는 브랜치를 새로 땄다. gitlab 에서는 main 브랜치로의 직접 push 가 불가능하기 때문이다.그리고 woohaha 브랜치를 pus..