[ Week4 JS -> TS ] 깃허브 검색기 TS 변환 #6

Brokyeom · 2022-12-29T14:30:23Z

🎁 PR Point

타입 interface 생성
- 깃허브 데이터의 타입을 별도의 인터페이스로 지정하여 export 하여 사용하였습니다.

export interface UserInfoProps {
  login: string;
  name: string;
  avatar_url: string;
  followers: number;
  following: number;
  public_repos: number;
  html_url: string;
}

// UserInfo.tsx
function UserInfo(userInfo: UserInfoProps) {
  const {
    login,
    name,
    avatar_url,
    html_url,
    followers,
    following,
    public_repos,
  } = userInfo;


// Search.tsx
  const [historyArr, setHistoryArr] = useState<string[]>([]);
  const [openHistory, setOpenHistory] = useState<boolean>(false);
  const [isSearch, setIsSearch] = useState<boolean>(false);
  const [userInfo, setUserInfo] = useState<UserInfoProps>();

이벤트 함수에서 event 인자의 타입 지정에서 오버로드 오류가 발생해서 해결 중인데, 꾸준히 고민해보겠습니다. 처음에 하드코딩한 결과가 지금 어려움으로 다가오는 것 같은.. ㅜㅜ

Happhee

자랫는데! 혹시 도움 필요한 부분이씀 갠톡해죠! 클론바다서 도와주꼐!

Happhee · 2022-12-30T04:44:48Z

week4-ts/src/Router.tsx

+    <BrowserRouter>
+      <Routes>
+        <Route path="/search" element={<Search />}>
+          <Route path=":userId" element={<Search />} />


이거 왜 경로가 다른데 같은 컴포넌트를 보여주나요?

이거 왜 경로가 다른데 같은 컴포넌트를 보여주나요?

중첩라우팅을 통해서 검색 전의 Search 컴포넌트와 검색 후의 컴포넌트의 경로를 다르게 설정한 것이고, 컴포넌트 구조는 똑같기 때문에 경로만 다르게 설정한 것인데 이것이 올바르지 않은 방법일까?

Happhee · 2022-12-30T04:45:37Z

week4-ts/src/api/axios.ts

+  const res = await axios.get(`https://api.github.com/users/${username}`);
+  return res.data;


인스턴스 객체 만들어서 분할하는것도 해보쟝ㅇ!!

Happhee · 2022-12-30T05:38:07Z

week4-ts/src/components/Search.tsx

+  const [historyArr, setHistoryArr] = useState<string[]>([]);
+  const [openHistory, setOpenHistory] = useState<boolean>(false);
+  const [isSearch, setIsSearch] = useState<boolean>(false);
+  const [userInfo, setUserInfo] = useState<UserInfoProps>();


우리 props는 컴포넌트 props에서만 사용하기로 했던 이유알지용?!

Happhee · 2022-12-30T05:47:51Z

week4-ts/src/components/Search.tsx

+      setUserInfo({
+        login: userData.login,
+        name: userData.name,
+        avatar_url: userData.avatar_url,
+        followers: userData.followers,
+        following: userData.following,
+        public_repos: userData.public_repos,
+        html_url: userData.html_url,
+      });


Suggested change

setUserInfo({

login: userData.login,

name: userData.name,

avatar_url: userData.avatar_url,

followers: userData.followers,

following: userData.following,

public_repos: userData.public_repos,

html_url: userData.html_url,

});

setUserInfo(userData);

로 묶을수있게 반환받았으면 좋겟다!

Happhee · 2022-12-30T05:49:27Z

week4-ts/src/components/Search.tsx

+        isSearch={isSearch}
+        placeholder="Search User..."
+      />
+      {openHistory && (


요기는 왜 isOpenHistory로 안하고 변수명 다르게 한 이유가 있을까?!

Happhee · 2022-12-30T05:49:47Z

week4-ts/src/components/Search.tsx

+  }
+`;
+
+const StHistoryCard = styled.div`


article이 더 명확하겟지요?!

Happhee · 2022-12-30T05:50:35Z

week4-ts/src/components/UserInfo.tsx

+  const {
+    login,
+    name,
+    avatar_url,
+    html_url,
+    followers,
+    following,
+    public_repos,
+  } = userInfo;
+


아하 이거때매 props라고 햇는데 사실 이거 서버로부터 받아오는 타입이라 여기서는props 단어를 빼주어야 할것같아!

Happhee · 2022-12-30T05:51:06Z

week4-ts/src/components/UserInfo.tsx

+      <StUserName>
+        <h1>{login}</h1>
+        <p>{name}</p>
+      </StUserName>


이거 h1 태그 있어서 내려서 밧는데 header가 아니도라고?!

Happhee · 2022-12-30T05:51:23Z

week4-ts/src/components/UserInfo.tsx

+        <h1>{login}</h1>
+        <p>{name}</p>
+      </StUserName>
+      <StUserVisitBtn onClick={visitHandler}>Visit {login}</StUserVisitBtn>


버튼 타입어디갓고!!ㅋㅎㅋㅎ

Happhee · 2022-12-30T05:51:36Z

week4-ts/src/components/UserInfo.tsx

+
+  return (
+    <StUserInfoWrapper>
+      <StUserImg src={avatar_url} />


alt태그 어디갓는데,,,ㅠㅠ

alt태그 어디갓는데,,,ㅠㅠ

타스로 변환만 하다가 기본적인 것들을 수정 안하고 허술하게 넘어갔네 얼른 반영할게 쏘리;; ㅜ

woogisea · 2022-12-30T06:49:43Z

week4-ts/src/components/Search.tsx

+  const deleteHistoryHanlder = (e: {
+    target: { parentNode: { textContent: string } };
+  }) => {


이것두,,, 구조분해할당으로 한건가??!

저어도 e: {target: { parentNode: { textContent: string } 요 부분이 어떤 구조인지 궁금해요오!

Brokyeom · 2022-12-30T11:59:27Z

아;; ㅋㅋㅋㅜㅜ 충분히 고민 안하고 타스 변환만 급하게 하다보니 alt 나 웹접근성 등 기존 과제에서 허술했던 부분을 수정을 안하고 변환만 했네요 오늘 잠들기전까지 반영하고 리팩토링 들어갑니다 고마워!!!

pinktopaz

여행 갔다와서 제대로 쉬지도 못했을텐데 호다닥 하느라 수고 많았어 시루~!
코드 보면서 많이 배워갑니다아✨

pinktopaz · 2022-12-30T11:47:25Z

week4-ts/src/common/GolbalStyle.tsx

+const GlobalStyle = createGlobalStyle`
+  ${reset};
+
+  html,


html과 body 모두에 적용해준 이유가 있을까요! html이 body를 감싸고 있어서 html에만 적용해도 적용이 될 것 같은데...! (아니라면 말씀해주셔요)

pinktopaz · 2022-12-30T11:47:53Z

week4-ts/src/common/GolbalStyle.tsx

+    font-size: 62.5%;
+  }
+
+  * {


먼가 * -> html -> body -> 세부 태그 요런 식으로 순서를 맞춰서 쓰면 더 가독성이 좋을 것 같은 느낌!

pinktopaz · 2022-12-30T12:24:21Z

week4-ts/src/components/Search.tsx

+function Search() {
+  const navigate = useNavigate();
+  const [historyArr, setHistoryArr] = useState<string[]>([]);
+  const [openHistory, setOpenHistory] = useState<boolean>(false);


현지 pr에 서히가 달아준 코드리뷰에서 쇽샥!

boolean 네이밍 규칙 is를 붙여주면 좋을 것 같아요오

pinktopaz · 2022-12-30T12:26:15Z

week4-ts/src/components/Search.tsx

+  const deleteHistoryHanlder = (e: {
+    target: { parentNode: { textContent: string } };
+  }) => {


저어도 e: {target: { parentNode: { textContent: string } 요 부분이 어떤 구조인지 궁금해요오!

pinktopaz · 2022-12-30T12:27:45Z

week4-ts/src/components/Search.tsx

+  }) => {
+    setHistoryArr((usernames) =>
+      usernames.filter(
+        (username) => username !== e.target.parentNode.textContent.slice(0, -1)


slice(0,-1) 하면 맨뒤 요소 말하는 거 맞져?! 또 하나 배워갑니다아!

pinktopaz · 2022-12-30T12:35:54Z

week4-ts/src/components/UserInfo.tsx

+      </StUserName>
+      <StUserVisitBtn onClick={visitHandler}>Visit {login}</StUserVisitBtn>
+      <StUserRate>
+        <StUserRateBlock>


요거 map 함수로 묶어줄 수 있을 것 같아!

{["Following", "Follower", "Repos"].map((info) => ( <StUserRateBlock> <p>{info}</p> <span> {info === "Following" ? following : info === "Follower" ? followers : public_repos } </span> </StUserRateBlock> ))}

요런 식으로?! (혹시 해보고 틀리면 알려줘유,,,)

pinktopaz · 2022-12-30T12:39:31Z

week4-ts/src/main.tsx

+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(


여기 파일명이 index.tsx가 아니라 main.tsx로 되어있는데 혹시 index.tsx로 하지 않고 main.tsx로 하는 이유가 있나요?!
나도 보고 궁금해서 찾아봤는데 잘 안나와서!!ㅠㅜㅠ

Brokyeom added 2 commits December 28, 2022 17:58

[ init ] week4-ts 브랜디 퍼블리싱

2e33fbe

[ feat ] 4주차 타입스크립트 변환

eaa0408

Brokyeom added the 4주차 label Dec 29, 2022

Brokyeom requested review from pinktopaz, woogisea, iamphj3 and Happhee December 29, 2022 14:30

Brokyeom self-assigned this Dec 29, 2022

Happhee reviewed Dec 30, 2022

View reviewed changes

woogisea reviewed Dec 30, 2022

View reviewed changes

pinktopaz reviewed Dec 30, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ Week4 JS -> TS ] 깃허브 검색기 TS 변환 #6

[ Week4 JS -> TS ] 깃허브 검색기 TS 변환 #6

Brokyeom commented Dec 29, 2022

Happhee left a comment

Happhee Dec 30, 2022

Brokyeom Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Happhee Dec 30, 2022

Brokyeom Dec 30, 2022

woogisea Dec 30, 2022

pinktopaz Dec 30, 2022

Brokyeom commented Dec 30, 2022

pinktopaz left a comment

pinktopaz Dec 30, 2022

pinktopaz Dec 30, 2022

pinktopaz Dec 30, 2022

pinktopaz Dec 30, 2022

pinktopaz Dec 30, 2022

pinktopaz Dec 30, 2022

pinktopaz Dec 30, 2022

		const res = await axios.get(`https://api.github.com/users/${username}`);
		return res.data;

[ Week4 JS -> TS ] 깃허브 검색기 TS 변환 #6

Are you sure you want to change the base?

[ Week4 JS -> TS ] 깃허브 검색기 TS 변환 #6

Conversation

Brokyeom commented Dec 29, 2022

🎁 PR Point

Happhee 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

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

Brokyeom commented Dec 30, 2022

pinktopaz 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