Issue 1 - 디렉터리 구조 설계

• HTML
  

• TS
  

• app.ts
  • 2개 이상의 페이지에서 사용하는 ‘뒤로가기’ 버튼 등의 공통 함수
• xxxUtils.ts
  • document 객체 호출 및 사용
  • 렌더링
• xxxForm.ts
  • 브라우저의 사용자 데이터 처리
  • util에 필요한 데이터 전달
  • Service 호출
• xxxService.ts
  • API 호출
• xxx.d.ts
  • 변수 타입 지정

---

Issue 2 - 브라우저에서 ES 모듈 사용 시, 외부 모듈을 불러오지 못함

Uncaught TypeError: Failed to resolve module specifier "axios".

TypeScript는 npm 으로 설치합니다. 하지만 브라우저는 npm 으로 설치된 모듈을 직접 이해하지 못합니다.
브라우저가 모듈을 이해할 수 있게 하는 2가지 방법이 있습니다.

1. CDN(Central Distribution Network) 직접 사용

• HTML에 스크립트를 추가해 CDN을 직접 불러와 전역으로 사용
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 모듈 번들러 사용 (Webpack, Vite)

• webpack.config.js 파일 설정
• ts-loader 설치 후 TS 파일을 Webpack으로 번들링

---

Issue 3 - JS 자동 컴파일 설정

브라우저에서 TypeScript로 작성한 파일을 작동시키기 위해선 JavaScript로 컴파일을 해야합니다.
하지만, TypeScript 파일에 변경 사항이 생겼을 때 매번 수동으로 tsc 명령을 실행해 컴파일을 하는 것이 번거로웠습니다.

자동으로 변경 사항을 즉각 알 수 있는 방법이 없을까하고 찾아보게 됐습니다.

tsc --watch

컴파일 명령어 tsc에 --watch 옵션을 사용하면 watch mode 가 활성화됩니다.
이후에 코드를 작성하면, 변경 사항을 즉각 알 수 있습니다. (터미널이 항상 열려있어야 함)

---

Issue 4 - CORS

웹 개발에서 필수적으로 설정해줘야 하는 Cors Policy 입니다.

1. 클라이언트
   withCredential 옵션과 함께 API 요청 메세지를 전달합니다.

2. 서버
   이번 백엔드는 Spring Security를 통해 사용자 인증을 수행했기 때문에 Security 모듈 내에서 설정을 해줬습니다.

   • Security Chain에서 Cors 설정

     public CorsConfigurationSource corsConfigurationSource() {
          CorsConfiguration configuration = new CorsConfiguration();
          configuration.setAllowedOrigins(List.of("http://127.0.0.1:5500"));
          configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
          configuration.setAllowedHeaders(List.of("*"));
          configuration.setAllowCredentials(true);
     
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          source.registerCorsConfiguration("/**", configuration);
          return source;
      }

   • csrf 비활성화 (활성화 상태 설정 시 클라이언트에게 토큰 요구)

     .csrf(AbstractHttpConfigurer::disable)

---

Issue 5 - 변수 타입 지정 file.d.ts

함수를 사용할 때 유용하게 썼던 부분입니다.

• 변수 타입을 인터페이스로 지정해 함수에 전달할 파라미터들을 객체처럼 지정할 수 있습니다.
• 다만, 지정한 변수를 모두 사용하지 않으면 “User 타입에서 요구하는 프로퍼티가 사용되지 않았음”이라는 오류가 발생합니다.
• ? 를 붙여 변수를 선택적으로 사용할 수 있게 설정할 수 있습니다.

export interface User {
    username: string;
    password: string;
    nickname?: string;
    telephone?: string;
    secureQuestionId?: string;
    answerContent?: string;
}