[박경서] week13 #493

zermzerm · 2023-12-03T14:04:15Z

기본

[기본] ‘/folder’ 페이지를 Next.js 프로젝트에 맞게 변경 및 이전 했나요?
[기본] ‘/shared’ 페이지를 Next.js 프로젝트에 맞게 변경 및 이전 했나요?
[기본] 다른 페이지로 이동이 필요한 곳에 next/link의 Link를 적용했나요?
[기본] Input 컴포넌트에 값이 없는 경우 회색의 placeholder값을 볼 수 있나요?
[기본] Input 컴포넌트에 focus in 하면 파랑색 테두리를 볼 수 있나요?
[기본] Input 컴포넌트에 눈 모양 아이콘을 누르면 비밀번호 가리기/보기 기능이 토글 되나요?
[기본] Input 컴포넌트에 값이 에러케이스일 경우 빨강색 테두리와 에러 메세지를 볼 수 있나요?
[기본] Input 컴포넌트에서 focus out 하면 실행할 함수를 설정할 수 있나요?

주요 변경사항

Next.js로 마이그레이션
모달 안뜨는 부분 수정

스크린샷

멘토에게

원래 Next.js로 마이그레이션이 빨리 진행되면 모달 컴포넌트들에 공통된 부분이 많아서 리팩토링 좀 하고 못했던 검색 기능과 IntersectionObserver 기능을 구현하려고 했으나 마이그레이션 후 모달들에 오류들이 생겨 고치니 케밥버튼쪽에 오류가 생겨서 고치다가 실패해서 미완성인 상태입니다.
다음주에 계속해서 케밥 버튼 오류 수정과 검색 기능 구현 시도해 보겠습니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.

…nd/1-Weekly-Mission into part3-박경서

zermzerm

셀프 코드리뷰 하다 보니까 404페이지 만들어 보는 걸 까먹었네요. 다음에 추가해 보도록 하겠습니다.
매주 기능만 되게 끔 코딩하고 미완성일 때가 많아서 리팩토링을 못하다 보니 코드가 좀 더럽습니다... 시간이 된다면 리팩토링이 정말 하고 싶네요...

zermzerm · 2023-12-03T14:12:22Z

components/Nav.tsx

+  return (
+    <N.NavContainer>
+      <N.NavWrapper>
+        <Link href="/">


지금은 잠깐 만들어 놓은 /페이지로 이동하지만 시간이 나면 첫 주차 때 만든 홈페이지로 이동하게 끔 수정하겠습니다.

zermzerm · 2023-12-03T14:13:48Z

components/folder/FolderCard.tsx

+    const target = e.currentTarget;
+    if (!target) {
+      setClicked(!clicked);
+    }


지금 여기 부분에서 케밥 버튼 누르는 거와 배경을 눌렀을 때 모달 닫히는 부분이 꼬여서 이상하게 작동하고 있어서 수정 중에 있습니다.

zermzerm · 2023-12-03T14:15:00Z

components/modal/FolderPlusModal.tsx

+    <M.ModalBackground ref={back} onClick={backClick}>
+      <M.ModlaWrapper>
+        <M.ModalHeader>{value}</M.ModalHeader>


모달들에서 ModalBackground와 Wrapper등이 다 겹치고 안에 내용들만 달라져서 컴포넌트화 시키고 싶었는데 시간이 없어서 수정하지 못했습니다.

zermzerm · 2023-12-03T14:16:15Z

components/folder/FolderMain.tsx

+    handleLoad();
+  }, [handleLoad]);
+
+  return (


보니까 FolderMain 컴포넌트에 너무 많은 데이터가 들어가 있는 것 같아서 좀 나눠야 될 것 같아 보이네요...

zermzerm · 2023-12-03T14:17:47Z

next.config.js

+        protocol: 'https',
+        hostname: 'codeit-frontend.codeit.com',
+        port: '',
+        pathname: '/static/**',
+      },


오류 뜨는 거 마다 다 추가해 줬는데 이렇게 하는 게 맞는 건가요?

zermzerm · 2023-12-03T14:19:42Z

pages/api/axios.js

@@ -0,0 +1,7 @@
+import axios from 'axios';


수업 때 배운 정적 생성 시도해 보려고 하다가 시간 없어서 axios만 남게 되고 안쓰였네요.

저도 시도만 해봤다는..

oauch

13주차 과제하시느라 수고하셨습니다 🙇🏻

oauch · 2023-12-04T09:18:18Z

.github/delete-merged-branch-config.yml

머지한 후, 브랜치 자동 삭제해주는 기능이군요 👍🏻

오 좋은 기능이네요

오.. 그런 기능이었군요..!

oauch · 2023-12-04T09:20:45Z

components/Input.tsx

+
+  return (
+    <div style={{ backgroundColor: '#f0f6ff' }}>
+      <Div>


이거는 모든 팀원들한테 해당하는 건데 저희 Styled~ 라고 네이밍 했으니까
이것도 Styled~로 시작하는 네이밍으로 하면 좋을 것 같습니다 😶

바꾸겠습니다!

oauch · 2023-12-04T09:23:09Z

components/folder/FolderMain.tsx

+    try {
+      const target = e.currentTarget;
+      setValue(target.textContent ?? '');
+    } catch {}
+    setOnModal(!onModal);


이 부분에서 catch문 안에 아무 값도 없는 상태인데
혹시 이렇게 작성하신 이유가 있을까요?
로직에 문제 없다면 try~catch문을 없애는 것도 좋을 것 같습니다 👻

없애도 똑같을 것 같네요! 여기서 런타임에러가 날 수 있다면 유의미 하겠지만 저도 안날 것으로 보여요!

예전에 짜다가 남은 흔적 같습니다. 없애겠습니다!

oauch · 2023-12-04T09:24:10Z

components/folder/FolderMain.tsx

+    try {
+      const target = e.currentTarget;
+      setValue(target.textContent ?? '');
+    } catch {}
+    setOnDeleteModal(!onDeleteModal);


이 부분도 위랑 같은거 같습니다!

oauch · 2023-12-04T09:28:03Z

next.config.js

+  images: {
+    remotePatterns: [


images: { domains: [ "codeit.kr", ... ], },

저는 이런 식으로 도메인 주소 넣어줬습니다!

저도 윤혁님 방식 추천!

oauch · 2023-12-04T09:31:43Z

.babelrc

종민님한테도 코드 리뷰 했던 거지만 next 버전이 올라가면서 이런 방법도 생겼다는 걸 알려드리고 싶었습니다!
현재 코드에서 방법 1 사용하셨는데, 방법 2 로도 가능합니다!
링크

오 신기하네요. 감사합니다!

summerkimm

경서님 13주차도 고생 많으셨습니다!!

summerkimm · 2023-12-04T15:23:36Z

.github/delete-merged-branch-config.yml

summerkimm · 2023-12-04T15:36:24Z

pages/api/axios.js

@@ -0,0 +1,7 @@
+import axios from 'axios';


저도 시도만 해봤다는..

summerkimm · 2023-12-04T15:37:25Z

public/ala.jpg

...? 어디 쓰신거죠 ㅋㅋㅋㅋ

아.. 예전 카카오톡 공유 이미지로 해보려고 넣어 놓은 이미지 파일 같습니다 ㅎㅎ...

yusunghyun

오랜만이네요 경서님 ! 고생 많으셨습니다 :)
next로 넘기느라 힘드셨을탠데 잘 마무리하신 것 같아요! 일단 이관만 되면 그 다음은 점진적으로 개선하기에 좋다고 생각합니다!

전반적으로

props 수정 : props에 js 문법 =을 이용하여 직접적으로 수정하면 물려주는 부모 입장에서 어떤 props인지 예측을 못하는 경우가 있습니다 props는 직접적으로 건들지 않고 리뷰대로 || 등을 사용하거나 복사하기를 권장드립니다
api : getData가 아주 유용하게 쓰여서 좋은 것 같네요 👍 더 나아가서 모든 api에 대해서 get~를 만들고 as를 이용해서 리턴 타입을 실제 api response 와 똑같이 운영하면 더 안전한 TS가 되고 만드신 타입들이 재사용될 여지도 커서 좋을 것 같습니다
esli

를 우선 하면 다음 진행에 도움이 되실 것 같아요! TS나 next나 모두 react를 위해 사용된다고 생각해서 get~~Props 정도만 도입 되면 react와 TS 고도화 하시는 방향이 좋을 것 같습니다! 팀원분들 코드리뷰 하면서 여러 폴더구조와 재사용되는 부분을 보면 도움이 되실 것 같아요!

한주간 고생 많으셨고 궁금한점 태그나 DM으로 편하게 물어봐주세요!

yusunghyun · 2023-12-04T19:18:23Z

pages/sharedPage.tsx

파일명을 shared로 바꿔야할 것 같습니다!(folder도 )

yusunghyun · 2023-12-04T19:19:28Z

pages/sharedPage.tsx

+export interface ItemState {
+  id: number;
+  createdAt: string;
+  url: string;
+  title: string;
+  description: string;
+  imageSource: string;
+}


ItemState 보다는 SampleFolderData 등 더 명시적으로 지어도 될 것 같아요!

yusunghyun · 2023-12-04T19:20:15Z

components/folder/FolderCard.tsx

+interface Props {
+  item: LinksProps;
+}
+
+const Div = styled.div`
+  position: relative;
+  width: 21px;
+  height: 17px;
+`;
+
+const StarDiv = styled.div`
+  width: 34px;
+  height: 34px;
+`;
+
+const StarImg = styled(Image)`


NIT
styled 많아지면 매번 스크롤해야해서 하단에 위치하기를 권장드려요:)

yusunghyun · 2023-12-04T19:20:51Z

components/folder/FolderCard.tsx

+  const apiDate = new Date(link.item.created_at);
+  const elapsedTime = dateCalculator(apiDate);
+  const year = apiDate.getFullYear();
+  const month = apiDate.getMonth() + 1;
+  const days = apiDate.getDate();


비 react 로직들은 컴포넌트 밖에 있어도 상관없고 안에 있으면 랜더링때마다 새로 선언된다는 점 알아주세용

오 알아갑니다!

yusunghyun · 2023-12-04T19:22:21Z

components/folder/FolderCard.tsx

+    setClicked(!clicked);
+    setShowDeleteModal(!showDeleteModal);


setClicked(prev=>!prev); setShowDeleteModal(prev=>!prev);

위 처럼 순수하게 하는게 랜더링 등에도 권장패턴입니다 :)

yusunghyun · 2023-12-04T19:24:20Z

components/folder/FolderCard.tsx

+          <C.CardImgDiv>
+            <C.CardImg
+              className="card-img"
+              src={link.item.image_source}


props를 건드는게 좋지 않을 수 있어서 위에 if문 보다는 여기에서

src={link.item.image_source || '/no-image.svg'}

이렇게 사용하시기를 권장드려요 :)

오 이런 방법이 있었네요! 바꾸겠습니다!

yusunghyun · 2023-12-04T19:24:58Z

next.config.js

+  images: {
+    remotePatterns: [


저도 윤혁님 방식 추천!

yusunghyun · 2023-12-04T19:26:00Z

components/folder/FolderMain.tsx

+    try {
+      const target = e.currentTarget;
+      setValue(target.textContent ?? '');
+    } catch {}
+    setOnModal(!onModal);


없애도 똑같을 것 같네요! 여기서 런타임에러가 날 수 있다면 유의미 하겠지만 저도 안날 것으로 보여요!

yusunghyun · 2023-12-04T19:37:25Z

components/styled-component/SharedPageStyledComponent.ts

개인적으로 styled-component 폴더를
style로 이름을 바꾸고 components 밖으로 빼고 이안에 폴더를 또 만들어서 8개를 나누기를 권장드립니다 앞으로 더 편해질 것 같아요!
ex) style/folder/FolderMainStyledC...

옮겨보겠습니다!

yusunghyun · 2023-12-04T19:37:55Z

components/dateCalculator.ts

js만 있는 로직들은 components 밖에 utils 만들어서 몰아넣기를 추천드립니다!

qooktree1 · 2023-12-05T10:26:29Z

components/Card.tsx

+const Div = styled.div`
+  position: relative;
+  width: 340px;
+  height: 234px;
+`;


C. 으로 시작하는 Styled Components와 Div의 Naming이 구분되어서 혹시 다른 의도가 있는 코드인가요??

전에 한번 styled-components로 바꾼 뒤에 추가적으로 Image 컴포넌트 때문에 필요한 거라 여기에 그냥 적어뒀습니다!

qooktree1 · 2023-12-05T10:35:17Z

components/Input.tsx

+  const [isError, setIsError] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [value, setValue] = useState('');
+
+  const handleVisibility = () => setIsVisible(!isVisible);
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {


setter함수 내에 state를 그대로 쓰는 게 안티패턴이라고 본 것이 기억나네요

https://sangcho.tistory.com/entry/Commons-Mistakes-with-React-useState

오 감사합니다!

qooktree1 · 2023-12-05T10:36:55Z

components/Nav.tsx

+    } else if (url === '/folder') {
+      const { data } = await getData('users/1');
+      setLogin(data);


DEFAULT USER ID와 같이 공통으로 쓰일 것 같은 상수는 따로 관리해서 import 받는 것도 좋을 것 같아요 :)

상수화 해보겠습니다!

qooktree1 · 2023-12-05T10:39:03Z

components/SharedHeader.tsx

+`;
+
+export default function SharedHeader() {
+  const [user, setUser] = useState<UserState>({


저도 하나의 state로 객체로 관리하는 것을 연습해봐야겠네요 👍

qooktree1 · 2023-12-05T10:54:48Z

components/modal/FolderShareModal.tsx

+    Kakao.cleanup();
+    Kakao.init('512cd8a8ece57b97899c8cc612089c7d');
+  }, []);


KAKAO JAVASCRIPT KEY는 env 파일로 관리해주는 것이 좋을 것 같아요. :)

withyj-codeit and others added 4 commits September 3, 2023 21:57

chore: 머지 후 브랜치 삭제 github action 추가

93a0e93

Merge branch 'part3-박경서' of https://github.com/codeit-bootcamp-fronte…

41129ae

…nd/1-Weekly-Mission into part3-박경서

Refactor : Next.js로 마이그레이션

43a3c5a

Fix : 케밥 버튼 오류 수정(했지만 다른 오류 발생)

f9fd509

zermzerm requested review from yusunghyun, qooktree1, summerkimm, arky02 and oauch December 3, 2023 14:04

zermzerm self-assigned this Dec 3, 2023

zermzerm added the 미완성 죄송합니다.. label Dec 3, 2023

Fix : 남은 a태그들 Link태그로 수정

1bbc6e6

zermzerm commented Dec 3, 2023

View reviewed changes

oauch reviewed Dec 4, 2023

View reviewed changes

summerkimm reviewed Dec 4, 2023

View reviewed changes

yusunghyun approved these changes Dec 4, 2023

View reviewed changes

yusunghyun merged commit 1e827d3 into codeit-bootcamp-frontend:part3-박경서 Dec 4, 2023

qooktree1 reviewed Dec 5, 2023

View reviewed changes

[박경서] week13 #493

[박경서] week13 #493

Conversation

zermzerm commented Dec 3, 2023

기본

주요 변경사항

스크린샷

멘토에게

zermzerm 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

oauch 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

summerkimm 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

yusunghyun 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

qooktree1 Dec 5, 2023 • 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

zermzerm left a comment •

edited

Loading

qooktree1 Dec 5, 2023 •

edited

Loading