Assignment/week4

2week/assignment/01.ts

@@ -5,3 +5,46 @@ const person = {
   country: 'ko',
   sex: 'male',
 };
+
+
+type arr1 = ['a', 'b', 'c']
+type arr2 = [1, 2, 3]
+
+// type Arr<T extends any[]> = T;
+// type First<T> = T extends Arr<infer A> ? A : any;
+
+// type First<T extends unknown[]> = T[0] // 가능
+// never[] <-- 진정한 빈 배열
+// type First<T extends unknown[]> = T extends never[] ? never : T[0]; 
+type First<T extends unknown[]> = T extends [infer F, ...unknown[]] ? F : never 
+
+type head1 = First<arr1>;
+type head2 = First<arr2>;
+
+type Last<T extends unknown[]> = T extends [...unknown[], infer L] ? L : never 
+
+type tail1 = Last<arr1>;
+type tail2 = Last<arr2>;
+
+
+
+
+type Fn<A extends number[]> = (...args:A) => any;
+type FnArgs<T> = T extends Fn<infer A> ? A : any;
+
+function test(name: number) {
+  // 값 공간
+  return 3
+}
+type TestFn = FnArgs<typeof test>;
+
+
+type StrFn = (input: string) => string;
+const getSHA: StrFn = (input: string) => {
+  return input;
+};
+
+type PromiseFn<T> = T extends (...args: infer A) => infer R ? (...args: A) => Promise<R> : T;
+const getSHAAsync: PromiseFn<StrFn> = (input: string) =>{
+  return new Promise((res) => input);
+}

3week/assignment/01.ts

@@ -0,0 +1,25 @@
+/**
+ * 문제1
+ * 다음의 파파고 번역 api 명세를 확인하고
+ * 파라미터에 필요한 source 와 target 을 좁혀주세요.
+ * @description: 링크: https://developers.naver.com/docs/papago/papago-nmt-api-reference.md
+ * */
+
+type SupportedLanguague = 
+|'ko'
+|'en'
+|'ja'
+|'zh-CN'
+|'zh-TW'
+|'vi'
+|'id'
+|'th'
+|'de'
+|'ru'
+|'es'
+|'it'
+|'fr';
+
+
+type PapagoParamsSource = SupportedLanguague;
+type PapagoParamsTarget = SupportedLanguague;

3week/assignment/02.ts

@@ -0,0 +1,34 @@
+/**
+ * 문제2
+ * 위의  PapagoParamsSource와 PapagoParamsTarget 를 조합하여 명세에서 언급하는
+ * "번역할 수 있는 원본 언어와 목적 언어는 다음과 같습니다." 의 제약조건을 참고하여 PapagoParams 인터페이스를 개선해 주세요.
+ * */
+
+interface KoParams {
+  source: 'ko';
+  target: SupportedLanguague;
+  text: string;
+}
+interface EnParams {
+  source: 'en';
+  target: 'ja'|'fr'|'zh-CN'|'zh-TW'|'ko';
+  text: string;
+}
+interface JaParams {
+  source: 'ja';
+  target: 'zh-CN' | 'zh-TW' | 'ko';
+  text: string;
+}
+interface ZhCnParams {
+  source: 'zh-Cn';
+  target: 'zh-TW';
+  text: string;
+}
+
+type PapagoParams = KoParams | EnParams | JaParams | ZhCnParams;
+
+const params: PapagoParams= {
+  source: 'en',
+  target: 'ja',
+  text: 'Hello Typescript!'
+}

3week/assignment/03.ts

@@ -0,0 +1,40 @@
+/**
+ * 문제3
+ * 스탑워치 구현을 보고 ui 상태 interface 설계를 개선해주세요.
+ * https://online-stopwatch.ko.downloadastro.com/tools/
+ * */
+
+// 예시 인터페이스이고, 본인이 생각하는 더 나은 인터페이스로 바꾸셔도 됩니다.
+interface TimeInfo {
+  lappedTimeList?: string[];
+  timeFormStart: string;
+  timeFormLastLap: string;
+}
+interface ButtonStyle {
+  color: string;
+  icon: string
+}
+
+interface Initalized extends TimeInfo {
+  type: 'initialized';
+  startButton: ButtonStyle;
+}
+interface Running extends TimeInfo {
+  type: 'running';
+  pauseButton: ButtonStyle;
+  addLapButton: ButtonStyle;
+}
+interface Paused extends TimeInfo {
+  type: 'paused';
+  startButton: ButtonStyle;
+  resetButton: ButtonStyle;
+}
+type StopWatchState = Initalized | Running | Paused;
+
+const initialState: StopWatchState = {
+  type: 'initialized',
+  startButton: { color: 'awf', icon: 'waef' },
+  timeFormStart: '0:00',
+  timeFormLastLap: '0:00',
+  lappedTimeList: []
+}

3week/assignment/04.ts

@@ -0,0 +1,76 @@
+/**
+ * 문제4
+ * 요구사항: naver나 kakao 로그인(Oauth2.0)하기 기능 이용해
+ * 유저의 이름, 닉네임, 프로필 사진을 얻어와 출력하려고 합니다.
+ *
+ * 카카오  사용자 정보 가져오기 api 명세세
+ * https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#req-user-info
+ * 카카오 profile 객체 스키마
+ * https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#profile
+ *
+ * 네이버 프로필 API 호출하기 명세
+ * https://developers.naver.com/docs/login/devguide/devguide.md#3-4-5-%EC%A0%91%EA%B7%BC-%ED%86%A0%ED%81%B0%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-%ED%94%84%EB%A1%9C%ED%95%84-api-%ED%98%B8%EC%B6%9C%ED%95%98%EA%B8%B0
+ *
+ * 위의 명세를 참고하여 다음과 같은 타입을 정의했습니다.
+ * */
+
+interface KakaoUserProfile {
+  nickname: string;
+  profile_image_url: string;
+}
+
+interface KakaoUser {
+  name: string;
+  profile: KakaoUserProfile;
+}
+
+interface NaverUser {
+  nickname: string;
+  name: string;
+  profile_image: string;
+}
+interface UserInfo {
+  name: string;
+  nickname: string;
+  profileImage: string;
+}
+
+declare function getUser(userId: string): NaverUser | KakaoUser;
+
+const isKakaoUser = (user: NaverUser | KakaoUser): user is KakaoUser => {
+  return 'profile' in user;
+}
+
+const getUserInfo = (userId: string): UserInfo => {
+  const userInfo: UserInfo = {
+    name: '',
+    nickname: '',
+    profileImage: '',
+  }
+  const response = getUser(userId);
+  if (isKakaoUser(response)) {
+    const { name, profile: { nickname, profile_image_url }} = response
+    userInfo.name = name;
+    userInfo.nickname = nickname;
+    userInfo.profileImage = profile_image_url;
+  } else {
+    const { nickname, name, profile_image } = response
+    userInfo.name = name;
+    userInfo.nickname = nickname;
+    userInfo.profileImage = profile_image;
+  }
+  return userInfo
+}
+
+// 다음 오류를 해결하기위해 할 수 있는 모든 대안을 적용해주세요.
+function renderUserProfile(userId: string) {
+  const app = document.querySelector('#app')!;
+  const user = getUserInfo(userId);
+  app.innerHTML = `
+   <div>
+       <span>이름: ${user.name}</span>
+       <span>닉네임: ${user.nickname}</span>
+       <img src="${user.profileImage}"></img>
+    </div>
+    `;
+}

3week/assignment/05.ts

@@ -0,0 +1,33 @@
+/**
+ * 문제5
+ * 회원가입 form을 만들어야합니다.
+ * 아이디, 비밀번호, 비밀번호 확인 text input
+ * 추가 정보입력 checkbox
+ * (추가정보입력을 체크하면)
+ * 주소, 전화번호 text input 을 구현하려고 합니다.
+ * 타입을 좀 더 좁게 관리할 수 있도록 개선해주세요.
+ * */
+interface AdditionalInfo {
+  address: string;
+  phone: string;
+}
+
+interface BaseData {
+  id: string;
+  password: string;
+  confirmPassword: string;
+}
+interface SignUpData extends BaseData {
+  additionalInfo?: AdditionalInfo
+}
+
+declare function postSignUpToV1(signupForm: SignUpData): void;
+declare function postSignUpToV2(signupForm: SignUpData): void;
+
+const sendSignup = (formData: SignUpData) => {
+  if (formData.additionalInfo) {
+    postSignUpToV2(formData);
+  } else {
+    postSignUpToV1(formData);
+  }
+};