[오다은] Week12 #396

O-daeun · 2024-05-07T14:56:56Z

요구사항

기본

TypeScript를 활용해 프로젝트의 필요한 곳에 타입을 명시해 주세요.
‘/shared’, ‘/folder’ 페이지에 현재 폴더에서 검색어가 포함된 링크를 찾을 수 있는 링크 검색 기능을 만들어 주세요.

심화

폴더 페이지에 상단에 있는 링크 추가하기 input이 화면에서 가려질 때 최하단에 고정해 주세요.

주요 변경사항

카카오톡 SDK로 카카오톡 공유하기 기능 구현
타입스크립트 설치 및 마이그레이션 작업 완료
기타 리팩토링

멘토에게

배포링크 : https://linkbrary-oh.netlify.app/
공유하기 기능을 구현하기 위해 shared페이지의 api 호출 부분도 수정하고, 리팩토링도 여러 군데 하다보니 시간이 촉박하여 기능 구현은 못 하였고, 타입스크립트로 마이그레이션만 진행 완료하였습니다!
타입에러 수정을 잘 한 게 맞는지 모르겠습니다ㅜㅜ 타입스크립트로 마이그레이션을 잘 했는지 확인 부탁드립니다!!
추후에 멘토님의 코멘트를 참고하여 리팩토링 및 코드 수정, 미완성인 부분 완성해보도록 하겠습니다!
그동안 상세한 코드리뷰 감사했습니다!!! 🥰

…lose로 전달

O-daeun · 2024-05-07T15:21:31Z

src/components/Modal/Modal.tsx

모달 컴포넌트는 각 기능별로 컴포넌트를 나누어서 작업하는 방향으로 리팩토링해볼 계획입니다!!

O-daeun · 2024-05-08T03:34:06Z

src/components/Profile/Profile.styled.ts

+  width: ${({ $size }) => (SIZES as any)[$size].pc}px;
+  height: ${({ $size }) => (SIZES as any)[$size].pc}px;
+
+  @media (max-width: 767px) {
+    width: ${({ $size }) => (SIZES as any)[$size].mo}px;
+    height: ${({ $size }) => (SIZES as any)[$size].mo}px;


이 부분에서 그냥
${({ $size }) => SIZES[$size].pc}px;
이렇게 작성하면 에러가 발생해서 구글링하여 이 페이지를 참고해서 에러를 없애긴 했는데요..!
올바른 해결방안이 아닌 것 같아서 질문드립니다..!
any는 최대한 안 쓰는게 좋다고 배운 것 같은데 어떻게 수정하면 좋을까요..??

$size 는 string 이니 다양한 문자열이 들어올 수 있는데,
SIZES 객체 내에는 키가 s 와 m 밖에 없기 때문에, s 또는 m 이 아닌 문자열이 들어왔을 때 pc, mo 에 접근을 할 수가 없는 건데요

보통 상수는 as const 를 붙여서 객체의 프로퍼티가 변하지 않는 값이라고 못박아두고 사용합니다

const SIZES = { s: { pc: 28, mo: 28, }, m: { pc: 60, mo: 40, }, } as const;

위와 같이 작성하시면 되고, (그러면 고정된 값으로 타입이 추론되기 때문에 Size 라는 인터페이스는 필요없게 됩니다)

export const Img = styled.img<{ $size: 's' | 'm' }>`

이에 맞게 $size 인자도 s 또는 m 으로 줄여주셔야 하는데요

위와 같이 작성했을 때,
혹시 이후 SIZES 객체에 프로퍼티가 추가되었다면 $size 의 타입도 같이 추가해줘야 하므로 유지보수가 불편해집니다
(ex. 'l' 이 추가됐다면?)

그래서

export const Img = styled.img<{ $size: keyof typeof SIZES }>`

와 같이 keyof, typeof 을 이용해 's' | 'm' 과 동일한 결과가 나오게 작성할 수 있습니다

typeof SIZES : SIZES 의 타입을 가져오는 부분

keyof: 해당 타입의 모든 프로퍼티의 키를 유니온 타입으로 가져오는 부분

즉 SIZES 객체의 모든 키를 유니온으로 가져오는거라서 's' | 'm' 이 되는거고, 이후 SIZES 객체에 프로퍼티가 추가되면
이 부분 코드를 수정하지 않아도 알아서 추가된 키값도 참고할 수 있게 됩니다

지금 시점에서 어려울 만한 내용이라,
이해 안가시면 일단 지금처럼 any 로 하고 넘어가셔도 되고
as const + 's' | 'm' 조합 쓰셔도 됩니다 !

O-daeun · 2024-05-08T07:54:22Z

src/contexts/UserContext.tsx

+interface UserContextValue {
+  user:
+    | {
+        id: number;
+        createdAt: string;
+        name: string;
+        imageSource: string;
+        email: string;
+        auth_id: string;
+      }
+    | undefined;
+  setUser:
+    | Dispatch<SetStateAction<boolean>>
+    | Dispatch<SetStateAction<undefined>>;
+}
+
+export const UserContext = createContext<UserContextValue>({
+  user: undefined,
+  setUser: () => {},
+});


Context API에서 타입오류를 해결하는 데에 오래 걸렸는데, 이 코드로 해결은 됐지만 주먹구구식으로 한 것 같습니다ㅜㅜ
잘 작성한게 맞는지 리뷰해주시면 감사하겠습니다!!!

choinashil

다은님 미션 제출 시기가 밀려서 한 주에 2개 미션하느라고 촉박하셨을텐데
끝까지 포기하지 않고 최선다해서 마무리해주시느라고 수고 많으셨습니다!

타입스크립트 처음 접하면 너무 낯설고 어려운데요,
여태까지 새로운 개념 배울 때마다 그랬듯 시간이 지나면서 서서히 익숙해지니
지금 너무 고민하지 않으셔도 될 거 같아요 :)

멘토링 때마다 리액션 잘해주셔서 너무 감사하고 파트3도 화이팅하세요! 😄

choinashil · 2024-05-09T11:27:27Z

src/apis/shareKakao.ts

+  const { Kakao } = window;
+
+  Kakao.cleanup();
+  Kakao.init('d433130307621ad24713cbacf6a9f93b');


이런 키값은 보통 분리해서 관리합니다

외부에 노출되어도 되는 값이라면 상수로만 분리해도 괜찮을 것 같고,
client key, secret key 처럼 노출되서는 안되는 값이라면 환경변수로 관리합니다

환경변수의 개념과, 리액트 또는 next.js 에서 환경변수를 관리하는 방식에 대해서 찾아보세요~

choinashil · 2024-05-09T11:28:34Z

src/assets/styles/global.styled.ts

+
+const GlobalStyle = createGlobalStyle`
+
+  * {


전체적으로 인덴트가 한 칸씩 더 들어갔네요 확인 부탁드립니다!

choinashil · 2024-05-09T11:29:25Z

src/components/Button/Button.tsx

+      {link ? (
+        <S.StyledLink to={link} className={className}>
+          {text}
+        </S.StyledLink>
+      ) : (
+        <S.Button className={className}>{text}</S.Button>
+      )}


choinashil · 2024-05-09T11:35:03Z

src/components/Card/Card.tsx

+  const addDefaultImage = (e: {
+    currentTarget: {
+      src: string;
+    };
+  }) => {


저도 요런 케이스를 많이 작업해보지 않아서 찾아봤는데
event 의 타입을 React.SyntheticEvent<HTMLImageElement, Event> 로 처리하는 것이 일반적이라고 하네요

SyntheticEvent 는 리액트 이벤트의 일반적인 타입을 의미하고,
꺽쇠(제네릭) 내 첫번째 매개변수인 HTMLImageElement 는 이벤트가 발생한 dom 요소의 타입,
두번째 매개변수는 기본 Event 의 타입입니다

자주 사용되는 케이스가 아니라 외워야 되는건 아니고 그때그때 찾아서 대응하면 됩니다!

choinashil · 2024-05-09T11:36:24Z

src/components/Card/Card.tsx

+    e.currentTarget.src = defaultImage;
+  };
+
+  const handleStarClick = (e: React.MouseEvent) => {


React. 가 반복되고 있어서 MouseEvent 자체를 import 해와서 써도 좋을 것 같습니다

useState 나 useEffect 도 보통 React.useState 로 쓰지 않고 import 해서 쓰는 것 처럼요!

import React, { useState, MouseEvent } from 'react'; const handleStarClick = (e: MouseEvent) => {

choinashil · 2024-05-09T11:39:22Z

src/components/MenuButton/MenuButton.tsx

+import React, { ButtonHTMLAttributes, useEffect, useState } from 'react';
+import * as S from './MenuButton.styled';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {


요기도 기본 버튼 요소의 타입 확장하는 방식으로 잘 처리해주셨네요 👍🏽

choinashil · 2024-05-09T11:40:27Z

src/components/Modal/Modal.tsx

+
+interface Props {
+  title: string;
+  semiTitle?: string;


보통 부제를 subtitle 이라고 많이 합니당

choinashil · 2024-05-09T11:41:15Z

src/components/Profile/Profile.styled.ts

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+
+interface Responsive {


추후 시간되시면 interface 와 type 의 차이도 살펴보세요!

choinashil · 2024-05-09T11:55:33Z

src/components/Profile/Profile.styled.ts

+  width: ${({ $size }) => (SIZES as any)[$size].pc}px;
+  height: ${({ $size }) => (SIZES as any)[$size].pc}px;
+
+  @media (max-width: 767px) {
+    width: ${({ $size }) => (SIZES as any)[$size].mo}px;
+    height: ${({ $size }) => (SIZES as any)[$size].mo}px;


$size 는 string 이니 다양한 문자열이 들어올 수 있는데,
SIZES 객체 내에는 키가 s 와 m 밖에 없기 때문에, s 또는 m 이 아닌 문자열이 들어왔을 때 pc, mo 에 접근을 할 수가 없는 건데요

보통 상수는 as const 를 붙여서 객체의 프로퍼티가 변하지 않는 값이라고 못박아두고 사용합니다

const SIZES = { s: { pc: 28, mo: 28, }, m: { pc: 60, mo: 40, }, } as const;

위와 같이 작성하시면 되고, (그러면 고정된 값으로 타입이 추론되기 때문에 Size 라는 인터페이스는 필요없게 됩니다)

export const Img = styled.img<{ $size: 's' | 'm' }>`

이에 맞게 $size 인자도 s 또는 m 으로 줄여주셔야 하는데요

위와 같이 작성했을 때,
혹시 이후 SIZES 객체에 프로퍼티가 추가되었다면 $size 의 타입도 같이 추가해줘야 하므로 유지보수가 불편해집니다
(ex. 'l' 이 추가됐다면?)

그래서

export const Img = styled.img<{ $size: keyof typeof SIZES }>`

와 같이 keyof, typeof 을 이용해 's' | 'm' 과 동일한 결과가 나오게 작성할 수 있습니다

typeof SIZES : SIZES 의 타입을 가져오는 부분

keyof: 해당 타입의 모든 프로퍼티의 키를 유니온 타입으로 가져오는 부분

즉 SIZES 객체의 모든 키를 유니온으로 가져오는거라서 's' | 'm' 이 되는거고, 이후 SIZES 객체에 프로퍼티가 추가되면
이 부분 코드를 수정하지 않아도 알아서 추가된 키값도 참고할 수 있게 됩니다

지금 시점에서 어려울 만한 내용이라,
이해 안가시면 일단 지금처럼 any 로 하고 넘어가셔도 되고
as const + 's' | 'm' 조합 쓰셔도 됩니다 !

choinashil · 2024-05-09T11:56:40Z

src/components/Profile/Profile.tsx

+interface Props {
+  user: string | undefined;
+  src: string | undefined;
+  $size?: string;


참고로 Profile.styled.ts 에서 $size 를 's' | 'm' 으로 한정되게 처리하기 위해서는
여기도 같이 's' | 'm' 으로 맞춰주셔야 합니다

여기가 string 으로 열려있다면 20라인에서 넘겨줄 때 타입이 맞지 않아 에러가 날거라서요

O-daeun added 18 commits May 6, 2024 11:28

test: 노트북 교체 후 테스트

2469b83

feat: 카카오톡 공유하기 script적용 및 useKakaoShare 커스텀훅 구현

54ca7f5

refactor: shared페이지에서 테스트로 호출했던 api 실제 api로 수정

f8edc4b

docs: assets 폴더 내에 이미지는 images 폴더로, global css는 styles 폴더로 옮김

10ea5e3

docs: fonts 폴더를 assest 폴더로 이동

2189e6c

fix: 글꼴 경고로 인해 폰트스타일 format(woff)을 format(font-woff2)로 수정

bbd3698

refactor: modal 컴포넌트에 각 모달마다 필요한 요소 주석처리 및 코드 수정

407b03d

feat: 카카오톡 공유하기 기능 구현 완료

0d26c04

chore: typescript 설치

e2e06db

fix: 카카오톡 공유하기 api파일을 ts로 수정 시 나타나는 에러 수정

e866ba7

rename: api.js를 apis폴더로 이동

56bf87e

fix: shareKakao.ts 타입 오류 수정

f4cc084

refactor(mentor): 변수명 datas -> rawData로 수정, api.ts 파일의 타입에러 수정

1580f6b

fix: Modal.tsx 타입에러 해결 및 타입 가드 작성

667a8c3

fix: Modal.jsx 타입에러 수정 - 타입가드, 스타일드컴포넌트

c92e061

style: 전체적으로 색 변수명 통일

c8c7497

fix: modal의 버튼 안 보이는 오류 수정

87c91a3

refactor(mentor): Button 컴포넌트가 링크 기능이 있을 경우 따로 Link태그를 이용하여 구현하도록 수정

b526c50

O-daeun requested a review from choinashil May 7, 2024 14:57

O-daeun added 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. 미완성🫠 죄송합니다.. labels May 7, 2024

refactor(mentor): boolean형 변수명은 is...로 시작하도록 수정, 모달창 닫는 setter함수를 onC…

5d2d666

…lose로 전달

O-daeun commented May 7, 2024

View reviewed changes

O-daeun added 5 commits May 8, 2024 10:08

fix: CardList.tsx 타입에러 수정

6f18b66

fix: Footer 타입에러 수정

ea2e996

Header 타입에러 수정

55c11c9

fix: LinkInput, MenuButton 컴포넌트 타입 에러

16159b9

fix: Profile 컴포넌트 타입에러 수정

b68c694

O-daeun commented May 8, 2024

View reviewed changes

fix: UserContext.jsx, Search 컴포넌트, Header 컴포넌트 타입에러 수정

25fcf15

O-daeun commented May 8, 2024

View reviewed changes

O-daeun added 7 commits May 8, 2024 17:58

fix: FolderPage 타입에러 수정 (폴더 추가에 input 안 보이는 에러 추후에 수정)

5949295

fix: 폴더 추가 모달에 input 안보이는 에러 해결

92e0b6d

fix: folder페이지 전체일 때 api호출 에러 수정

04d3ff0

fix: shared 페이지에 실제 api 연동되도록 수정

399deb9

style: user 데이터 api 호출 변수명 맞춤

8b4275b

fix: shared 페이지에서 folderId 없을 시 전체 링크가 나오도록 수정

bdd3314

fix: App/index/Main.tsx로 수정 및 타입에러 수정

8b24c0b

choinashil approved these changes May 9, 2024

View reviewed changes

choinashil merged commit 19ff58e into codeit-bootcamp-frontend:part2-오다은 May 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[오다은] Week12 #396

[오다은] Week12 #396

O-daeun commented May 7, 2024 •

edited

Loading

O-daeun May 7, 2024

O-daeun May 8, 2024

choinashil May 9, 2024

O-daeun May 8, 2024

choinashil left a comment

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

choinashil May 9, 2024

		@@ -0,0 +1,55 @@
		import styled from 'styled-components';

		interface Responsive {

[오다은] Week12 #396

[오다은] Week12 #396

Conversation

O-daeun commented May 7, 2024 • edited Loading

요구사항

기본

심화

주요 변경사항

멘토에게

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

choinashil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

O-daeun commented May 7, 2024 •

edited

Loading