WIL ⎮ 타입스크립트 스터디 8,9차 ➕ Swagger 설정 ➕ JS 코딩테스트

🎧 타입스크립트 스터디 8,9차

리액트 훅

1. 리액트 훅의 등장 배경
2. useState에 타입스크립트 적용해 컴파일 타임에 타입 에러 발생시키기
3. useEffect 타입
   1. useEffect의 콜백함수에는 비동기 함수가 들어갈 수 없다?
   2. useEffect의 deps의 얕은 비교
   3. 의존성 배열에 부모의 props를 넣으면 안되는 이유
   4. useLayoutEffect는 무엇인가? useEffect와의 차이점

4. useRef 의 3가지 타입과 useRef를 props로 넘겨주는 방법

   +. 타입스크립트 타입 버전과 리액트 버전 주의!!!

상태 관리

1. 변하지 않는 값이라 객체 참조 동일성을 유지해야 할 때 useRef를 권장한다. useState를 권장하지 않는 이유.
2. SSOT 지키기

타입스크립트의 객체 지향

1. 노미널 타이핑과 구조적 타이핑
2. 웹개발에서의 객체 지향에 대하여.

🎧 Swagger 설정하기

스웨거(Swagger)란? API 문서를 자동으로 생성해주는 도구로, 이를 통해 RESTful API의 구조와 동작 정의 가능

1. 의존성 추가

// build.gradle
//8. Swagger
implementation 'org.springdoc:springdoc-openapi-starter-webmvc-ui:2.6.0'

1. SwaggerConfig 설정

import io.swagger.v3.oas.annotations.OpenAPIDefinition;
import io.swagger.v3.oas.annotations.info.Info;
import io.swagger.v3.oas.models.Components;
import io.swagger.v3.oas.models.OpenAPI;
import io.swagger.v3.oas.models.security.SecurityRequirement;
import io.swagger.v3.oas.models.security.SecurityScheme;
import lombok.RequiredArgsConstructor;
import org.springdoc.core.models.GroupedOpenApi;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

import java.util.Arrays;

@OpenAPIDefinition(
        info = @Info(title = "HD API",
                description = "api명세서입니다.",
                version = "v1"))
@RequiredArgsConstructor
@Configuration
public class SwaggerConfig {

    @Bean
    public OpenAPI openAPI(){
        SecurityScheme securityScheme = new SecurityScheme()
                .type(SecurityScheme.Type.HTTP).scheme("bearer").bearerFormat("JWT")
                .in(SecurityScheme.In.HEADER).name("Authorization");
        SecurityRequirement securityRequirement = new SecurityRequirement().addList("bearerAuth");

        return new OpenAPI()
                .components(new Components().addSecuritySchemes("bearerAuth", securityScheme))
                .security(Arrays.asList(securityRequirement));
    }

    @Bean
    public GroupedOpenApi ApiLogin() {
        String[] paths = {"/api/login/**"};

        return GroupedOpenApi.builder()
                .group("API Login")
                .pathsToMatch(paths)
                .build();
    }
    @Bean
    public GroupedOpenApi ApiItem() {
        String[] paths = {"/api/item/**"};

        return GroupedOpenApi.builder()
                .group("API Item V1")
                .pathsToMatch(paths)
                .build();
    }
}

1. application.yml 설정

2. Swagger UI에서 API 문서 확인

   local:8080/swagger-ui/index.html로 접속해서 확인

🎧 https 설정하기

+.

🎧 자바스크립트 코딩테스트

• array.splice(1,3)
• “A”.charCodeAt()
• String.fromCharCode(”65”)
• input.shift() / input.unshift()
• let line = require(“fs”).readFileSync(process.platform === “linux” ? “/dev/stdin” : “./input.txt”).toString().trim()
• 나누기 후 소수점 제거 필수 (~~)