1. 오류 상황

• 특정 버튼 클릭 시 form 태그를 임의적으로 만들어서 입력한 input 태그들을 form 태그 안에 포함시켜 submit 하도록 코드를 작성 후 테스트 하였지만, submit이 이루어지지 않음
• 개발자 도구 내에서 "Form submission canceled because the form is not connected" 해당 오류 발생

2. 오류 원인

• 해당 form 태그를 DOM에 추가하지 않아서 발생한 오류

3. 해결 방법

• 다음과 같이 body 태그의 자식태그로 form 태그를 추가한다.

사용자 기능 중 회원가입, 비밀번호 찾기 등에서 휴대폰 본인인증 과정에서 생성되는 6자리 인증번호를 만들어보자.

1. Random 객체를 통해 난수 추출

Random random = new Random(); // 랜덤 객체
int randomNum = random.nextInt(9) // 0~9 까지의 난수 1개 생성

• 해당 객체를 통해 0에서 9까지의 한자리 숫자를 추출할 수 있다.
• 추출되는 숫자는 정수형이다.

2. String 문자열 연산을 통해 한가지 씩 추출되는 난수를 결합

String authNum = ""; // 빈 문자열 생성                
authNum += Integer.toString(randomNum); // 생성된 난수를 String 타입으로 변환 후 문자열 연산

• 앞서 생성한 Int형 난수를 문자열로 변환하여 기존 문자열에 결합한다.
• 이러한 작업을 여섯 번 반복하면 6자리의 인증번호가 생성된다.

3. 전체 코드

    public String generateAuthNumber() {
        Random random = new Random();
        int createdNum = 0;
        String authNum = "";
        for (int i=0; i<=5; i++) {
            createdNum = random.nextInt(9);
            authNum += Integer.toString(createdNum);
        }
        return authNum;
    }

4. 결과

1. 루트 비밀번호 변경 명령어

alter user 'root'@'localhost' identified with mysql_native_password by '변경을 원하는 비밀번호';

2. 계정 생성

create user '계정 아이디'@'localhost' identified by '비밀번호';
-- 내부 접근을 허용하는 사용자

create user '계정 아이디'@'%' identified by '비밀번호';
-- 외부 접근을 허용하는 사용자

create user '계정 아이디'@'192.168.0.1' identified by '비밀번호';
-- 특정 IP만 접근을 허용하는 사용자

create user '계정 아이디'@'192.168.%' identified by '비밀번호';
-- 특정 IP 대역만 접근을 허용하는 사용자

3. 권한 부여

grant all privileges on *.* to '사용자'@'localhost';
-- 모든 데이터베이스의 모든 테이블에 모든 권한을 줌

grant all privileges on DB이름.* to '사용자'@'localhost';
-- 특정 데이터베이스의 모든 테이블에 모든 권한을 줌

grant all privileges on DB이름.테이블명 to '사용자'@'localhost';
-- 특정 데이터베이스의 특정 테이블에 모든 권한을 줌

grant select on DB이름.테이블명 to '사용자'@'localhost';
-- 특정 데이터베이스의 특정 테이블에 select 권한을 줌

grant select, insert on DB이름.테이블명 to '사용자'@'localhost';
-- 특정 데이터베이스의 특정 테이블에 select, insert 권한을 줌

grant update(컬럼1, 컬럼2) on DB이름.테이블명 to '사용자'@'localhost';
-- 특정 데이터베이스의 특정 테이블의 컬럼1과 컬럼2의 update 권한을 줌

1. 오류 상황

• strat.spring.io를 통해서 스프링부트 프로젝트를 생성 후 해당 프로젝트를 열어보니 다음과 같은 오류가 발생하면서 자바 파일을 인식하지 못함

2. 오류 원인

• 스프링부트 3 이상 버전으로 생성을 하였기 때문에 InteliJ에서는 자바 17 이상 버전으로 설정을 해야한다.
• 하지만 자바 8버전으로 설정이 되어 있었기 때문에 자바 17버전으로 설정을 변경해줘야 한다.

3. 해결 방법

• InteliJ 상단에 File -> Project Structure -> Project Settings -> Project 로 이동하여 SDK를 Java 17로 변경한다.
• InteliJ 상단에 File -> Settings -> Build, Execution, Deployment -> Gradle 로 이동하여 Gradle JVM을 Java 17로 변경한다.

1. 오류 상황

• 파이썬에서 pymysql 라이브러리를 통해 MySQL DB 연결 후 Insert 작업을 진행하려는데 오류가 발생했다.

conn = pymysql.connect(host='127.0.0.1', user='root', password='1234', db='naverShopping', charset='utf8mb4')
cursor = conn.cursor()
cursor.execute("INSERT INTO review (point, content, writer, reg_date) VALUES(%s, %s, %s, %s)",(star, content, writer, date))

2. 오류 원인

• 여러차례 확인을 해보니 내가 MySQL을 통해 생성한 DB의 인코딩 방식이 UTF-8로 지정되어 있지 않아서 발생하는 문제였다. 

3. 해결방법

• cmd로 MySQL에 접속 후 다음 쿼리를 실행하여 내 Database와 Insert를 실행할 테이블의 인코딩 방식을 UTF-8로 설정해주었다.

ALTER DATABASE [데이터베이스명] CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
ALTER TABLE [테이블명] CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

1. 오류 상황

혼자 공부하는 내용을 원격 저장소에 푸쉬하려다 다음과 같은 오류가 발생했다.

2. 오류 원인

• 알고보니 내 커밋 로그 중에 Google OAuth API 비밀 키 값이 반영이 되어 있었다.
• 그래서 깃허브에서 이를 자동으로 감지하여  보안 및 비밀 정보가 반영된 커밋 로그를 Push 하면 해당 정보가 노출이 되니 푸쉬를 막는것이다.

3. 해결 방법

깃 콘솔에는 해결 방법이 다음과 같이 적혀있다.

To push, remove secret from commit

비밀 및 관련 정보가 반영된 커밋 로그를 삭제하면 된다.

따라서 git rebase 를 통해 커밋 로그를 수정한 뒤에 push를 하였다.

원격에 있는 형상과 커밋 로그를 내 로컬에 그냥 덮어 씌워버리고 싶을 때가 있다.

그러한 목적으로 현재 내 커밋 로그에 원격 커밋 로그를 그냥 Pull 하면 로그가 뒤죽박죽이 되거나 충돌이 나게 될텐데

그냥 원격에 있는거 Ctrl+C and Ctrl+V 하려면 어떻게 해야할까

바로 원격을 Clone 받았을 때로 돌아가면 된다.

1. git ref log를 입력해서 Clone 시점을 찾는다.

2. git reset --hard를 입력해서 해당 시점으로 돌아간다.

• reset이 완료되면 내가 수정하던 소스코드도 Clone 받던 시점으로 돌아가게 될 것이다.

3. Pull을 마저 진행한다.

네이버 로그인에 이어서 카카오 로그인 예제도 진행해보자

카카오 로그인 구현의 흐름은 다음과 같다.

1. API 신청 및 설정
2. 본인 서비스 웹페이지에 카카오 로그인 버튼 생성
3. 로그인을 진행하여 접근 인가 코드 받기
4. 접근 인가 코드를 활용하여 엑세스 토큰 받기
5. 엑세스 토큰을 활용하여 사용자 정보 받기

카카오 로그인 구현은 네이버 로그인보다 좀 복잡하다.

네이버는 로그인을 하면 인증 처리를 내부적으로 실행하여 바로 사용자 정보를 건네줬지만,

카카오는 사용자 정보를 주기 전에 엑세스 토큰(Access Token)을 준다.

이 엑세스 토큰을 가지고 사용자 정보를 한번 더 요청을 해야한다.

1. 애플리케이션 추가

https://developers.kakao.com/

• 카카오 개발자 센터로 접속한다.

• 로그인 API를 이용할 애플리케이션을 추가한다.

• 생성된 애플리케이션을 선택하여 좌측 상단 메뉴에서 앱 키로 이동하면 API 키가 있다.
• 이 JavaScript 키를 잘 보관해둔다.

2. 애플리케이션 설정

• 다음과 같이 카카오 로그인 API를 이용할 내 서비스 도메인 주소를 등록한다.

• 애플리케이션을 등록하면 본인이 사용할 API를 활성화 해야한다.
• 카카오 로그인을 활성화 해준다.
• 로그인 이후 사용자 정보에 대한 접근이 이루어질 Redirect(Callback) URL도 등록한다.

• 로그인하는 사용자가 정보제공에 동의하게끔 하여 서비스에서 사용자들의 해당 정보를 제공받을 수 있다.
• 제공받길 원하는 개인정보를 선택하여 활성화 한다.
• 여러 정보를 제공받기 위해서는 개인정보 동의항목 심사를 받아야한다. 과정이 복잡하니 따로 설명하지 않겠다.

3. 카카오 로그인 SDK 로드 및 초기 설정

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js" integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>

• 카카오 로그인 API를 사용하기 위해서는 SDK 라이브러리를 임포트 해야한다.
• 카카오 로그인 버튼이 들어갈 HTML에 넣어주자.

<a id="kakao-login-btn" href="javascript:loginWithKakao()">
    <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="190" alt="카카오 로그인 버튼" />
</a>

• 다음과 같이 카카오 로그인 버튼을 생성해 준다.

Kakao.init('본인의 JavaScript 키'); // 카카오 로그인 SDK 초기화 함수
Kakao.isInitialized();

function loginWithKakao() {
    Kakao.Auth.authorize({
        redirectUri: 'http://localhost:8045/login/oauth2/code/kakao',
    });
}

• 애플리케이션의 JavaScript 키와 등록했던 리다이렉트를 넣어 초기화한다.
• 카카오 로그인 SDK 초기화하는 코드를 다음과 같이 스크립트에 넣는다.

4. 엑세스 토큰 및 사용자 정보 가져오기

저 로그인 버튼을 누르면 카카오 로그인창이 출력될 것이다.

로그인이 잘 완료가 되면 설정해줬던 Redirect URL로 인가 코드가 전달이 된다.

그 인가코드로 엑세스 토큰을 요청하면 된다.

인가코드 Redirect URL 전달  ->  Redriect URL에서 인가코드로 엑세스 토큰 요청  ->  그대로 이어서 사용자 정보 요청

필자같은 경우에는 스프링 서버를 끼고서 작업했기 때문에 리다이렉트 URL 매핑 메소드를 하나 만들어줬다.

@GetMapping("/login/oauth2/code/kakao")
public String kakaoLoginCallback(@RequestParam String code, Model model) {
    model.addAttribute("kakaoAuthCode", code);
    return "login/kakaoLoginCallback"; // kakaoLoginCallback.html 리턴
}

• 인가코드를 받아서 HTML 페이지에 다시 전달하는 기능만 구현된 매핑 메소드이다.

    function requestToken() {
        $.ajax({
            type: 'POST',
            url: 'https://kauth.kakao.com/oauth/token',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8")
            },
            data: {
                grant_type : 'authorization_code',
                code : `[[${kakaoAuthCode}]]`,
                redirect_uri : 'http://localhost:8045/login/oauth2/code/kakao',
                client_id : '본인의 Client ID',
            },
            success: function(result) {
                getKakaoUserInfo(result.access_token)
            },
            error: function() {
                console.log("토큰 에러");
            }
            
        })
    }

    function getKakaoUserInfo(accessToken) {
        Kakao.Auth.setAccessToken(accessToken);
        Kakao.API.request({
            url: '/v2/user/me',
            data: {
                property_keys: ['kakao_account.profile.nickname', 'kakao_account.email']
            },
        }).then(function(response) {
            let nickname = response.kakao_account.profile.nickname
            let email = response.kakao_account.email
            console.log(nickname)
            console.log(email)
        }).catch(function(err) {
            alert('실패 '+JSON.stringify(err))
            
        });
    }

• 다음과 같이 엑세스 토큰을 받아 사용자 정보를 요청하는 함수를 작성한다.
• 다행히도 사용자 정보 요청 기능은 SDK에 구현이 되어 있으니 Kakao.API.request 형태로 코드를 작성하면 된다.
• property_keys: ['kakao_account.profile.nickname', 'kakao_account.email']: 제공받고 싶은 사용자 정보를 적어서 요청할 수 있다.
• 프로퍼티 요청 양식은 다음 사이트의 '사용자 정보 가져오기' 가이드를 참고한다.
• https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

※ 결과