MISSION8 / 곽민준 #48

mlnwns · 2024-06-25T14:22:05Z

1. 구현 모습

[mission] 2주차 미션입니다! #8

https://eclectic-macaron-b22422.netlify.app/

2. 해결 과정

supabase에서 제작한 table과 연동하여, CRUD중에 CR기능을 구현해보았습니다.
- 처음에는 supabase와 같이 데이터베이스를 작업할 수 있는 툴이 익숙하지 않아 뭐부터 해야 할 지 감이 안잡혔는데, 공식문서를 봐도 이해가 안가서 블로그 글과 유튜브를 통해 사용법을 익혔습니다. 공식문서에 더 익숙해져야 할 것 같습니다.
모달 기능을 라이브러리를 사용하지 않고 구현했습니다.
- react-modal이라는 라이브러리를 사용해 본 적이 있어 이번에는 사용하지 않고 구현해봤습니다. Styled-component 코드가 길어지는 단점이 있는거 같습니다.

3. To 리뷰어에게

[질문] 크롬에서 화면 축소 기능을 사용해서(Command, -) 화면 확대가 75%인 상태로 개발을 했다는 것을 netflify를 통해 배포한 후에 깨닫고 CSS를 다시 수정했습니다. 이런 경험을 가끔 하곤하는데, 개발을 어느정도 한 후에 화면 확대 된 상태나 축소된 상태에서 개발을 했다는 것을 인지한 적이 있으시다면, 그에 맞게 CSS를 바로 수정하시는 과정을 어떻게 효율적으로 하셨는지 궁금합니다. 미리 주의하고 예방하는 방법외에는 하나하나 수정하는 방법밖에 없을까요?
[질문] 아래 링크는 제가 작성한 rem과 px를 비교한 글입니다. 아직 이것과 관련해 궁금한 점이 있는데, border-radius나 border크기를 지정 할 때도 rem을 사용하시는 편인지 궁금합니다. border를 1px 정도의 크기로 지정하려면 rem에서는 0.06정도라 뭔가 소수점 두자리까지 작성하면서 rem을 사용하는게 맞는가 싶으면서도 루트 글꼴 크기에 따라 크기가 변경되는게 맞는거 같기도 하고 멘토님은 어떻게 하시나 궁금합니다.
- https://velog.io/@mlnwns/px%EA%B3%BC-rem%EB%8B%A8%EC%9C%84%EC%9D%98-%EC%B0%A8%EC%9D%B4
[질문] 최근에 반응형을 처음으로 접해보고 적용해봤습니다. 보통 미디어쿼리를 사용해서 반응형을 작성하던데, 너비 크기마다 CSS를 지정해주어야 하고 신경 쓸 부분이 많아서 chakraUI라는 라이브러리를 활용해서 반응형 디자인을 적용하니까 그나마 할 만 했던 것 같습니다. 반응형 디자인을 적용하실 때 멘토님은 어떤 라이브러리나 방식을 활용하시는지 궁금합니다!

시간 내어서 확인해주셔서 감사합니다!! 스터디가 이제 끝나게 되었는데, 그동안 피드백 주시느라 고생하셨습니다🙌🏻

vercel · 2024-06-25T14:22:09Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
donut-study	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 26, 2024 3:15am

loopy-lim

멘토라니... 저도 같은 학생(?)으로서 먼가 영광이네요. ㅋㅋㅋ 바로 본론으로 들어가겠습니다.

처음에 공부하기에는 잘되어 있는 것(ex. react)말고는 바로 사용하기 힘든것에 동의합니다. 저도... 만약 supabase를 처음 썼다고 하면 유튜브와 블로그를 봤을 것입니다.
모달 기능을 라이브러리 없이 구현한 것은 정말 대단한 것 같습니다. 다만 아쉬운 것은 2개 이상의 modal을 사용하기에 이를 react-modal처럼 만들었다면 더 좋은 도전이 아니었을까? 라는 생각이 있었습니다.
단점으로 Steyld-component의 코드가 길어진다고 했는데, 사실 이는 코드가 길어진다기 보다는 CSS가 길어진다. 즉 이를 줄이거나 최대한 합치는 방법을 연구했으면 좋았을텐데... 라는 아쉬움이 조금 남습니다.

To 리뷰이에게

[질문] 크롬에서 화면 축소 기능을 사용해서(Command, -) 화면 확대가 75%인 상태로 개발을 했다는 것을 netflify를 통해 배포한 후에 깨닫고 CSS를 다시 수정했습니다. 이런 경험을 가끔 하곤하는데, 개발을 어느정도 한 후에 화면 확대 된 상태나 축소된 상태에서 개발을 했다는 것을 인지한 적이 있으시다면, 그에 맞게 CSS를 바로 수정하시는 과정을 어떻게 효율적으로 하셨는지 궁금합니다. 미리 주의하고 예방하는 방법외에는 하나하나 수정하는 방법밖에 없을까요?

저는 처음 개발할때부터 width의 한계를 정하고(ex. 1600px), merge: auto를 통해 가운데 정렬을 합니다. 또한, flex와 grid, clamp, max-width등 다양한 css 연산자들을 활용하기에 축소된 상태, 확대된 상태라고 사전에 확인할 수 있었습니다.

[질문] 아래 링크는 제가 작성한 rem과 px를 비교한 글입니다. 아직 이것과 관련해 궁금한 점이 있는데, border-radius나 border크기를 지정 할 때도 rem을 사용하시는 편인지 궁금합니다. border를 1px 정도의 크기로 지정하려면 rem에서는 0.06정도라 뭔가 소수점 두자리까지 작성하면서 rem을 사용하는게 맞는가 싶으면서도 루트 글꼴 크기에 따라 크기가 변경되는게 맞는거 같기도 하고 멘토님은 어떻게 하시나 궁금합니다.

세세한 것, 또는 커지더라도 UI가 변하면 안되는 것들은 px로 고정을 하는 편입니다. 예를 들면 border-radius는 rem으로, border은 px로 많이 사용합니다. 특히 확대나 축소할 때, 또 배율로 지정할 때 문제가 생기기도 합니다. 자세한 내용은 다양한 유튜버가 다루었으므로 링크를 한개 던지고 갑니다.

[질문] 최근에 반응형을 처음으로 접해보고 적용해봤습니다. 보통 미디어쿼리를 사용해서 반응형을 작성하던데, 너비 크기마다 CSS를 지정해주어야 하고 신경 쓸 부분이 많아서 chakraUI라는 라이브러리를 활용해서 반응형 디자인을 적용하니까 그나마 할 만 했던 것 같습니다. 반응형 디자인을 적용하실 때 멘토님은 어떤 라이브러리나 방식을 활용하시는지 궁금합니다!

반응형은 어던것일까요? 거기서부터 접근해야합니다. 저는 이 반응형에 대해 각 디바이스를 비슷한 UI로서 사용자 경험을 이끌어 내고 싶기 위한 시도라고 생각합니다. 여기서부터 접근하면 사실 개발에 친근하게 디자인한다면 미디어쿼리가 복잡해지지 않을 것입니다. 저와 같은 경우에는 최대한 grid의 속성을 이용하여 반응형을 대응하고자 합니다. 그러기 때문에 라이브러리에 기대는 것보다 어떻게 하면 사용자가 매끄럽게 화면의 크기가 변하더라도 같은 경험을 할 수 있을지 고민하면 좋을 것 같습니다.

조금더 이야기하자면...

조금이라도 민감한 key들은 숨기기 바랍니다.
supabase의 supabaseKey가 노출되어 있었습니다. 악의적인 사용자가 DOS공격을 한다면 비용이 얼마나 나올지 상상이 되지 않습니다.
만약 중간에 key를 제거 하고 싶다면, cheripick을 이용하면 좋습니다.
git은 파일 변경 기록을 저장하기 때문에 그 key와 관련된 모든 파일의 git을 추적하여 제거해야합니다. stack을 쌓아서 하기보다는 cheripick이라는 좋은 도구가 있으니 이를 추천합니다.
loading을 구현하는 다른 방법도 있습니다.
Suspense를 적극적으로 활용해보는 것도 좋은 방법이...지 않을까요? 개인적으론 suspense와 하신 것처럼 useState로 loading을 구현한 것 비교하면 정말 좋을 것 같습니다.

먼가... 이야기가 날카로워진것 같네요....ㅋㅋㅋㅋ 그래도 제 말이 정답 이라기 보다는 개인적인 의견에 가깝기 때문에 언제든지 이야기해주세요 ㅠㅠ

그래도 파생된 상태를 구현하고, 이를 활용했다라는 것을 보면 6개월 공부한 프론트엔드인가? 라는 생각을 하면서 제 일자리가 위협을 받고 있다는 생각이 드네요.

스터디 수고하셨습니다!

loopy-lim · 2024-06-26T03:05:22Z

src/App.jsx

+const StyledSection = styled.section`
+  padding: 1rem;
+`;


앞에 Styled라는 prefix를 붙인 이유는 무엇인가요?

스타일컴포넌트와 일반 컴포넌트를 구분하기 어렵다는 피드백을 받았는데, 앞에 Styled나 S.을 붙여보는게 어떻겠냐는 조언을 받아서 이렇게 해봤습니다! 보통은 어떻게 하는 편일까요?

구분해야 하는 이유가 무엇인가요??

사람은 위에서 아래로 내리면서 보기 때문에 일반 컴포넌트와 styled 컴포넌트에 대한 컴포넌트 명을 구분할 수 있다면 가독성이 더 좋아질 것 같다는 피드백이었고 저도 그럴수 있겠다 싶어서 작성해봤는데, 막상 보니까 컴포넌트 작성하는 부분에서 거의 대부분이 앞에 Styled가 붙게 되어 이러면 의미가 있나 싶어 고민되는 부분이긴했습니다!

저도... 약간 붙이는 이유가 궁금했었습니다. 말씀하신 것처럼 다른 사람들은 S.으로 시작하기도 하고, framermotion과 같은 경우에는 m.으로 시작하더라구요.

loopy-lim · 2024-06-26T03:06:46Z

src/App.jsx

+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      const { data, error } = await supabase.from("page").select("*");
+      if (!error) {
+        setData(data);
+      }
+      setIsLoading(false);
+    };
+    fetchData();
+  }, []);


만약 어떠한 이유로 인해서 App이 빠르게 제거되었다가 생성이 되면 어떤 결과가 나올까요?

App컴포넌트가 다시 생성될 때 useEffect훅이 실행되면서, 데이터를 다시 가져올 거 같습니다. 그 외에 어떤 결과가 나올지는 잘 모르겠습니다..!

그러면 그 데이터가 만약 100mb라고 가정했을때, 사용자는 얼마나 기다려야 할까요? (chrome, http2.0기준으로 설명하면 좋을 것 같습니다)

한국의 평균 다운로드 속도는 122Mbps이고, 데이터가 100메가바이트면, 800메가비트니까 800/122=6.56초 동안 기다려야 하는거같은데 계산이 맞는지는 잘 모르겠습니다..!

사실 한 6개 정도인가? 나오고 보통.... 모바일이면 더 낮은 속도이기도 하죠. 사실 그거랑 논외로, 한 3번만 하더라도, 사용자가 19.68초동안 기다려야 하는 것도 사실이기도 하구요...

loopy-lim · 2024-06-26T03:07:18Z

src/App.jsx

+    fetchData();
+  }, []);
+
+  const uniqueTags = [...new Set(data.map((item) => item?.tag))];


파생된 데이터를 쓰는거 너무 좋습니다

loopy-lim · 2024-06-26T03:09:47Z

src/components/Category.jsx

+export default Category;
+
+const StyledCategory = styled.div`
+  width: 15rem;


width가 고정값인 것도 좋지만, 반응형을 살리고 싶다면 clamp를 쓰는 것도 좋을 것 같아요.

완전히 처음 보는 개념이라 공부해보도록 하겠습니다!

loopy-lim · 2024-06-26T03:10:06Z

src/components/Category.jsx

+      <StyleTitle>카테고리</StyleTitle>
+      <ul>
+        {tags.map((tag, index) => (
+          <li key={index}>{tag}</li>


key로서 index를 사용한 이유는 무엇인가요?

배열의 각 항목이 고유한 식별자를 가지지 않을 때, 각 항목을 고유하게 식별할 수 있도록 하기 위해서 index를 사용했는데, index보다는 tag를 사용했어도 됐을까요?

tag가 논리적으로 겹치지 않았을 거 같아서,즉 배열의 유일한 키라 index가 필요 없지 않았나 싶습니다.

loopy-lim · 2024-06-26T03:12:18Z

src/components/Header.jsx

+const StyledTitle = styled.header`
+  font-size: 1.4rem;
+  text-align: center;
+  border-bottom: 1px solid #000000;


border에서 2가지 형태로(rem과 px)쓰셨더라구요. 개인적으론 border와 같은 요소는 px를 애용하긴 합니다.(글자가 크든 작든 상관 없더라구요) 만일 크기에 따라서 두꼐가 달라져야 한다면 rem을 쓰는 것을 고려하긴 할 겁니다. 더 자세한 내용은 comment에 남겨두겠습니다.

넵 영상 시청해보겠습니다! 감사합니다

loopy-lim · 2024-06-26T03:13:17Z

src/components/NewPostModal.jsx

+  const handleSubmit = async () => {
+    await onSubmit({ title, tag, body });
+    onClose();
+    window.location.reload();


어........... 좋은 습관은 아닙니다. 다른 방법이 무엇이 있는지 한번 찾아보면 좋을 것 같아요

window.location.reload 이 부분이 좋은 습관이 아닌거죠? 찾아보도록 하겠습니다!

loopy-lim · 2024-06-26T03:13:38Z

src/components/NewPostModal.jsx

+  };
+
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {


e.target과 e.currentTraget의 차이점은 무엇인가요? 저도 자세히 몰라서 물어보는 겁니다!

<div onClick={handleClick}> <button>클릭</button> </div>

이 코드에서 e.target은 이벤트가 실제로 발생한 요소를 가리켜서 위 코드에서는 클릭된 버튼 요소로 button 부분입니다. e.currentTarget은 이벤트리스너가 부착된 요소를 가리키는데, 위 코드에서는 div에 해당됩니다.

mlnwns added 14 commits May 21, 2024 09:15

feat: reset-css cdn 링크 추가

4f01325

feat: styled-component 설치

36fb29d

feat: supabase 설치

86d67ac

feat: supabase 코드 삽입

adcc96c

feat: 헤더 컴포넌트 구현

df41435

feat: 카테고리 컴포넌트 구현

a594a20

feat: 생성버튼 컴포넌트 구현

f6f38eb

feat: 글 컴포넌트 구현

cdc74bf

feat: 조회모달 컴포넌트 구현

7d007d6

feat: 글 생성 컴포넌트 구현

d300cf3

feat: 컴포넌트 메인페이지에서 적용

93192a6

chore: 불필요한 파일 삭제

2fda464

chore: index.css제거에 따른 코드 수정

acd64dd

style: 컴포넌트 크기 변경

e731a7c

mlnwns added the mission 미션 입니다! label Jun 25, 2024

mlnwns requested a review from loopy-lim June 25, 2024 14:22

mlnwns self-assigned this Jun 25, 2024

vercel bot deployed to Preview June 25, 2024 14:22 View deployment

feat: 공개키 숨김

50d71d1

vercel bot deployed to Preview June 26, 2024 03:15 View deployment

loopy-lim approved these changes Jun 26, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MISSION8 / 곽민준 #48

MISSION8 / 곽민준 #48

mlnwns commented Jun 25, 2024 •

edited

Loading

vercel bot commented Jun 25, 2024 •

edited

Loading

loopy-lim left a comment

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024

loopy-lim Jul 2, 2024

mlnwns Jul 2, 2024

loopy-lim Jul 3, 2024

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024

loopy-lim Jul 2, 2024

mlnwns Jul 2, 2024

loopy-lim Jul 3, 2024

loopy-lim Jun 26, 2024

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024

loopy-lim Jul 3, 2024

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024 •

edited

Loading

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024

loopy-lim Jun 26, 2024

mlnwns Jul 2, 2024 •

edited

Loading

MISSION8 / 곽민준 #48

Are you sure you want to change the base?

MISSION8 / 곽민준 #48

Conversation

mlnwns commented Jun 25, 2024 • edited Loading

1. 구현 모습

2. 해결 과정

3. To 리뷰어에게

vercel bot commented Jun 25, 2024 • edited Loading

loopy-lim left a comment

Choose a reason for hiding this comment

To 리뷰이에게

조금더 이야기하자면...

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

mlnwns Jul 2, 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

mlnwns Jul 2, 2024 • edited Loading

Choose a reason for hiding this comment

mlnwns commented Jun 25, 2024 •

edited

Loading

vercel bot commented Jun 25, 2024 •

edited

Loading

mlnwns Jul 2, 2024 •

edited

Loading

mlnwns Jul 2, 2024 •

edited

Loading