[ 3주차 JS 👉 TS ] 💖 꺄아ㅏㅏ너므 귀여워 💖 #9

Happhee · 2022-05-26T09:15:56Z

✨ 구현 기능 명세

JS 👉 TS 로 변환하였습니다!

🎁 PR Point

page 나눌때, Error404, Intro, WorldCup, Result 총 4개로 설정하였슴댜
styled.d.ts에 정의할때, fonts 는 css를 반환해서 ThemedCssFunction로 타입 정의하였슴댜
공통적인 Header를제외한 부분들을 component로 분리하였습니댜!
handler를 상위 컴포넌트에서 넘겨주는 방법을 적극활용하였습니다!!

-EmoticonItem을 interface로 정의해 사용하였습니댜!

😭 어려웠던 점

합세도 타쓰로 해서 이제 살짝 어느정도 익혀진것같아여!!!

하지만,,,분명 허점이 있을거라 생각하기에,,,, 피드백 다ㅏㅏㅏ받고싶슴니다ㅠㅠㅡㅠㅡㅠ

github-actions · 2022-05-26T09:16:20Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

joohaem

초기세팅 아주 뿌듯ㅎ하네료,~~ 울써히체고🔥🔥

joohaem · 2022-05-28T01:14:14Z

week3-ts/src/App.test.tsx

+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});


🤩🤩🤩🤩

joohaem · 2022-05-28T01:21:47Z

week3-ts/src/components/common/Header.tsx

+interface HeaderProps {
+  title?: string;
+  round?: number[];
+}
+export default function Header(props: HeaderProps) {


Header 재사용 좋다 !!

그치그치그치!!!!!!!!!!!! 헤더 재사용 조아~>.<

joohaem · 2022-05-28T01:22:55Z

week3-ts/src/components/Intro/IntroMain.tsx

+  const handleClick = () => navigate('/worldCup');
+  return (
+    <StIntroWrapper>
+      <StContentImg imgUrl={mainImageUrl} />
+      <StGameButton onClick={handleClick}>GAME START</StGameButton>


navigate 밖에 기능이 없다면, Link 태그를 사용하는게 좀 더 웹표준에 적합할 것 같당

웹표준에 적합하다는 말이 어떤 뜻인지 설명해줄수잇나아?!

웹표준은 HTML, CSS 등에 대한 WC3규격(문법) 준수 등을 말하고, 웹의 사용성 및 접근성을 보장해줄 수 있다고 설명할 수 있을 것 같네-

navigate의 동작을 함에도 불구하고 기본 button 태그를 사용한 건 HTML의 문법에 적합하지 않는다고 생각해
a 태그와 이에 맞는 Link 태그를 사용하는 것이 웹의 사용성을 높일 수 있으니까 말이지!!

읽어보면 좋을 참고 문서

joohaem · 2022-05-28T01:24:19Z

week3-ts/src/components/WorldCup/WorldCupSection.tsx

+  const navigate = useNavigate();
+
+  const handleClickImage = (emoticon: EmoticonItem) => (event: React.MouseEvent<HTMLDivElement>) => {
+    const image = event.target as HTMLDivElement;


as 말고 내로잉을 시켜주는 건 어떨까욥!

if (event.target instanceof HTMLDivElement) { const image = event.target; image.classList.add('imageClick'); setTimeout(() => { image.classList.remove('imageClick'); if (emoticons.length > 2) { handleWinners([...winners, emoticon]); handleEmoticons(emoticons.slice(2)); handleRound([round[0] + 1, round[1]]); } else { if (winners.length === 0) { navigate('/result', { state: emoticon }); } else { const nextStepEmoticon = [...winners, emoticon]; handleEmoticons(nextStepEmoticon); handleWinners([]); handleRound([1, round[1] / 2]); if (round[1] / 2 === 2) handleTitle('준결승'); if (round[1] / 2 === 1) handleTitle('결승'); } } }, 1000); }

바꺼따 ㅎㅅㅎ

joohaem · 2022-05-28T01:29:28Z

week3-ts/src/components/Result/ResultMain.tsx

+        <StFirecrackerImg imgUrl={leftFirecracker} position={'20%'} />
+
+        <StArticleImg imgUrl={state.url}>
+          <StArticleTitle>{state.name}</StArticleTitle>
+        </StArticleImg>
+        <StFirecrackerImg imgUrl={rightFirecracker} position={'80%'} />


'20%', '80%' 로 position 값을 직접 지정할 수 있게 되면, css 코드와 분리가 되지 않게 되는 것 같아

그래서 나같으면 position 보다 isright boolean 정도로 줘서,

background-position: ${(props) => props.isright ? "80%" : "20%"} center;

정도로 작성할 것 같네!

joohaem · 2022-05-28T01:29:48Z

week3-ts/src/components/Result/ResultMain.tsx

+interface ResultLocation {
+  state: EmoticonItem;
+}
+export default function ResultMain() {
+  const { state } = useLocation() as ResultLocation;


이런데서는 as로 지정하는게 맞는거지? 우리가 설정한 거니까?!!
그게 아니라며는 네로잉이 적합한거구?!

그렇게 기준을 나눌 수도 있을 것 같다 !!
다른 방법이 있다기보다 useLocation 훅의 타입 명시를 해주는 게 따로 제공되지 않아서 as 사용하는 내용들밖에 못찾는 것도 있겠구!

배워갑니다앙 ~

joohaem · 2022-05-28T01:30:53Z

week3-ts/src/components/common/Header.tsx

+        {title !== undefined ? `${title}` : ''}
+        {round !== undefined ? ` ${round[0]}/${round[1]}` : ''}


Suggested change

{title !== undefined ? `${title}` : ''}

{round !== undefined ? ` ${round[0]}/${round[1]}` : ''}

{title && `${title}`}

{round && ` ${round[0]}/${round[1]}`}

정도로 될 수 있으려나-

키야오키

github-actions · 2022-05-30T01:57:24Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

Happhee · 2022-05-30T02:00:54Z

세심한 코드리뷰 감쟈합니다 ㅎㅅㅎ 덕부네 타쓰 금방저긍왕료오

github-actions · 2022-05-30T02:01:47Z

오늘도 할할놀놀을 몸소 실천 중인 웹파트원 ! 화이팅 :)
과제 레퍼런스 참고해서 빠트린 부분은 없는 지 체크해볼까요?

henization

폴더구조 깔끔.. 새로운거 항상 꼭시도함... 진짜 최고다 홍서히~~~ 🍰

henization · 2022-06-20T13:13:57Z

week3-ts/src/App.test.tsx

+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});


test 코드 !!!!! 짱인데~ ~

ㅎㅎㅎㅎ 웹심화에서 배웠지 ㅎㅎ

henization · 2022-06-20T13:14:36Z

week3-ts/src/assets/asset.d.ts

+declare module '*.jpg';
+declare module '*.png';
+declare module '*.jpeg';
+declare module '*.gif';


타스에서는 .d.ts 파일을 만들어줘야한다 무좍건 명심..

나도 명.심.

henization · 2022-06-20T13:16:21Z

week3-ts/src/assets/images/index.ts

+  name: string;
+  url: string;
+}
+export const emoticonItems: EmoticonItem[] = [


이 부분 주함이 내 코드리뷰할 때 얘기했던 것처럼 다른 폴더에 정의해서 export 시키는게 의미 분리에 더 좋을 거 같아용!

마자마자 ㅎㅎㅎ 리뷰끝나고 수정해볼라구 ㅎㅎ
다시 한번 짚어줘서 고마워 ㅎㅎ

henization · 2022-06-20T13:22:01Z

week3-ts/src/components/common/Header.tsx

+      <StHeader>💖 꺄아ㅏㅏ너므 귀여워 💖</StHeader>
+      <StSubHeader>
+        {title && `${title}`}
+        {round && ` ${round[0]}/${round[1]}`}


이런식으로 Header를 Intro에서도 재사용이 가능하게 했꾸만!! 짱짱~

마쟈여!!!!!>.<

henization · 2022-06-20T13:22:31Z

week3-ts/src/components/common/Header.tsx

+  round?: number[];
+}
+export default function Header(props: HeaderProps) {
+  const { title, round } = props;


구조분해할당 짱~

henization · 2022-06-20T13:38:14Z

week3-ts/src/components/WorldCup/WorldCupSection.tsx

+  overflow: hidden;
+
+  .imageClick {
+    animation: ${imageClick} 0.4s infinite linear alternate;


애니메이션 짱~

henization · 2022-06-20T13:38:54Z

week3-ts/src/components/WorldCup/WorldCupSection.tsx

+    animation: ${imageClick} 0.4s infinite linear alternate;
+  }
+`;
+const StArticleImg = styled.div<{ imgUrl: string }>`


이미지 props 이렇게 받아와서 쓰는구만!! 맹심하겠어

henization · 2022-06-20T13:42:34Z

week3-ts/src/components/Result/ResultMain.tsx

+interface ResultLocation {
+  state: EmoticonItem;
+}
+export default function ResultMain() {
+  const { state } = useLocation() as ResultLocation;


배워갑니다앙 ~

henization · 2022-06-20T13:43:42Z

week3-ts/src/components/Result/ResultMain.tsx

+        <StFirecrackerImg imgUrl={leftFirecracker} position={'20%'} />
+
+        <StArticleImg imgUrl={state.url}>
+          <StArticleTitle>{state.name}</StArticleTitle>
+        </StArticleImg>
+        <StFirecrackerImg imgUrl={rightFirecracker} position={'80%'} />


henization · 2022-06-20T13:44:36Z

week3-ts/src/style/styled.d.ts

+declare module 'styled-components' {
+  export interface DefaultTheme {
+    fonts: {
+      header: ThemedCssFunction;


팅기해여!!!

이런 타입명도 있구나

나도 싱기해 >.<

Happhee added 10 commits May 24, 2022 12:34

init : 🚧 typescript-react 초기셋팅

234d0ab

css : 🎨 styled 초기 셋팅

f85115c

css : 🎨 이미지 셋팅

1813904

css : 🎨 이미지 d.ts 추가

f095d7b

css : 🎨 글자 크기 조정

3800c65

feat : ✨ intro, result, worldCup 라우터 구현

4bdfb22

feat : ✨ 헤더 구현

7228dc1

feat : ✨ IntroMain 구현

765ded6

feat : ✨ 월드컵 섹션 구현

43765fb

feat : ✨ 결과 main 구현

080a3df

Happhee requested review from joohaem, henization and Brokyeom May 26, 2022 09:15

Happhee self-assigned this May 26, 2022

Happhee requested a review from say-young516 May 26, 2022 09:16

joohaem approved these changes May 28, 2022

View reviewed changes

chore : ⚙️ 피드백 반영해서타입 네로잉

ab5421c

chore : ⚙️ 삼항 연산자 대신 && 연산자로 판별

78123d4

henization reviewed Jun 20, 2022

View reviewed changes

henization approved these changes Jun 21, 2022

View reviewed changes

Happhee merged commit ed8ca1c into main Jun 28, 2022

		{title !== undefined ? `${title}` : ''}
		{round !== undefined ? ` ${round[0]}/${round[1]}` : ''}

[ 3주차 JS 👉 TS ] 💖 꺄아ㅏㅏ너므 귀여워 💖 #9

[ 3주차 JS 👉 TS ] 💖 꺄아ㅏㅏ너므 귀여워 💖 #9

Conversation

Happhee commented May 26, 2022

✨ 구현 기능 명세

🎁 PR Point

😭 어려웠던 점

하지만,,,분명 허점이 있을거라 생각하기에,,,, 피드백 다ㅏㅏㅏ받고싶슴니다ㅠㅠㅡㅠㅡㅠ

github-actions bot commented May 26, 2022

joohaem 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 30, 2022

Happhee commented May 30, 2022

github-actions bot commented May 30, 2022

henization left a comment • 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

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

henization left a comment •

edited

Loading