32. [개발일지] - [피파 온라인 4 프로젝트] - 03. 닉네임 요청 기능 개발 (1), 구현 성공 (헤더 인증, 삭제된 깃 기록)

🫨 개발 전 확인

여러 방면으로 찾아보니 Open API 요청 시 중요한 몇 가지가 있었다.

요청 방법, 응답 시 데이터, 요청 URL 등 여러 가지를 공식 문서(사이트)를 통해 확인하고 개발해야 한다는 것을 알았다.

 

 

나는 API Docs(넥슨 공식 API 목록)에서 HTTP 정보들을 확인할 수 있었다.

요청 정보, Reuqest, 응답 정보, Response Body 등 을 확인하였고 이를 참고하여 개발을 하려고 한다.

 

(당황하지 않고 이해할 수 있게 해준 '김영한'님 감사합니다! (HTTP 글 보기))

 

 

 

🔍 정보 정리와 프로젝트 설정

 얻은 정보중 중요한 부분을 나열해 보자

• 요청 URL  :  https://api.nexon.co.kr/fifaonline4/v1.0/users?nickname={nickname}
• 요청 정보 : 닉네임
• 응답 형식과 데이터 : Json형식, AccesID, 닉네임, 레벨

 

여기서 나는 닉네임을 요청 URL로 보내고 JSON 형태로 받아오는 걸 1차적으로 해야 한다는 뜻이다.

그럼 인텔리제이를 열고 프로젝트를 생성해 본다.

(프로젝트 생성 이후에 작성하고 있는 글이라 설정 화면만 참고한다.)

 

plugins {
id 'java'
id 'org.springframework.boot' version '2.7.11'
id 'io.spring.dependency-management' version '1.0.15.RELEASE'
}

group = 'com.example'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'

configurations {
compileOnly {
extendsFrom annotationProcessor
}
}

repositories {
mavenCentral()
}


dependencies {
implementation 'org.springframework.boot:spring-boot-starter'
implementation 'com.fasterxml.jackson.core:jackson-core:2.12.5'
implementation 'com.fasterxml.jackson.core:jackson-databind:2.12.5'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.jetbrains:annotations:24.0.0'


compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'

}

tasks.named('test') {
useJUnitPlatform()
}

 

 

🧑🏻‍💻 오류 대면(헤더 인증 방법)

구글링과 챗 지피티를 통하여 코드를 잘 찾아서 응용하여 변환까지 했다

하지만 요청시 '헤더에 인증이 없다'라는 문구가 확인 됐다.

 

뭔가 신기했다 내가 지금까지 Open API를 사용해 본 적이 없으니 헤더 인증 에러를 처음 만나봤다.

설렘도 잠시 얼른 헤더 인증 방법을 찾아봐야 한다.

 

👍🏻 해결 방법(@Value 사용)

1. application.properties 파일 속 인증 KEY 작성 > api.key={넥슨에서 받은 인증 KEY} 

2. ApiKey 클래스 작성 (이후 빈으로 사용하여 Key 필드에 접근한다)

@Getter // getter 생성
@Component // Spring Context에 Bean으로 등록
public class ApiKey {
    // 인증키 값을 저장하는 불변성 필드
    private final String key;

    // @Value : properties 파일 등에서 값을 읽어와 해당 필드에 주입
    @Autowired // 없어도 이상없지만 api.key가 이상이 있으면 컴파일 단계에서 확인
    public ApiKey(@Value("${api.key}") String key) {
        this.key = key;
    }
}

3. Service 클래스 속 검색 메소드 작성 (10번 줄 apiKey.getKey() 부분을 활용하여 해결)

  private final ApiKey apiKey; // API key 스프링 빈 주입
    
    // 유저 정보 조회 메소드 findByUserinfo
    // nickname으로 넥슨 open API에서 유저 정보를 가져온 후, FifaUser 객체로 변환 후 반환
    public FifaUser findByUserinfo(String nickname) {
        // 넥슨에 요청할 url (open API URL + 작성한 유저이름)
        String url = "https://api.nexon.co.kr/fifaonline4/v1.0/users?nickname=" + nickname;

        HttpHeaders headers = new HttpHeaders(); // HTTP 요청의 헤더 정보를 담아서 보낼 수 있는 객체 생성
        headers.set("Authorization", apiKey.getKey()); // Authorization 정보를 담아서 API에 인증을 하기위해 api key값을 헤더 객체에 저장
        HttpEntity<String> entity = new HttpEntity<>("Userinfo", headers); // HTTP 요청의 본문(헤더도 함께 가능) 정보를 담아서 보낼 수 있는 객체 생성

        // HTTP 요청을 보내고 응답을 받아오는 RestTemplate 객체의 exchange() 메소드를 호출
        // GET 방식으로 요청을 보내고, 응답으로 받은 JSON 데이터를 FifaUser 클래스로 매핑하여 반환
        // (url, 메소드, HTTP 요청 본문 데이터, HTTP 응답 본문 타입)
        ResponseEntity<FifaUser> responseEntity = restTemplate.exchange(url, HttpMethod.GET, entity, FifaUser.class);

        return responseEntity.getBody(); // 최종적으로 반환된 FifaUser 객체의 Body 값을 반환
   }

 

😁 구현 성공!(깃 삭제..)

이제 기능 구현에 성공하였다.

(코드 내용을 보여주고 싶지만 꼬인 깃을 해결하고자 [reset current branch to here]을 눌러버려서 날아갔다..)

 

앞으로 reset current branch to here는 절대 안 눌러야겠다..

 

아무튼 구현에 성공하여도 문제가 남아있었다.

 

비동기적으로 처리되어 입력화면(index.html) '닉네임' 입력 후 [요청] 버튼을 누르면 

'index.html에서 ajax로 값이 바로 넘어온다는 것'이었다. (화면으로 보여주고 싶지만 사라진 게 너무 아쉽다.ㅠ)

 

이렇게 되면 선택해야 한다.

1. 입력 화면에 응답 데이터 동시 노출

2. 입력 화면 출력 화면 구분

 

내가 계획하고 있는 건 입 출력 화면이 구분되는 것이니 코드를 수정해야 한다.

(다음 글에서 계속..)

 

계획 참고 글

30. [개발일지] - [피파 온라인 4 프로젝트] - 01. 아이디어 주제 정하기(리액트, 스프링 부트, 피파