[react-spa-routing 미션] 김준수 미션 제출합니다. #2

gogo1414 · 2025-01-16T06:26:31Z

안녕하세요, 리뷰어님🤗
새로운 미션의 시작이네요! 미션 제출을 늦게해서 죄송해요😭
면접이 어제라 계속 준비하느라 미션하는 것을 놓쳤네요...

이번 미션은 어떠셨나요??
저는 미션 자체는 이제까지 배운 것들을 활용하는 느낌이라 다시 회고하는 느낌이 많이 들었던거 같아요!
다만, 상태 관리에 있어서 저희가 배웠던 걸 사용하기에 점심 뭐먹지 미션보다 더 관리할게 적은 느낌이라 따로 사용하진 않았답니다..

�미션을 최대한 빠르게 진행해서 제출하는것을 목적으로 둬서 잘 한지는 모르겠네요.. 그래도 미션에서 요구하는 부분은 최대한 처리해보려고 했답니다!

주요 기능 & 기능 요구 사항

홈 화면 : 컴포넌트로 구현!
카테고리별 뉴스 필터링 : API 내에서 조절 가능하도록 설정
기사 상세 페이지 : 기사 목록을 클릭하면 해당 기사의 사이트로 넘어가도록 설정했습니다.
페이지 간 이동 : 이건 사용이 된건지 안된건지는 잘 모르겠네요... 제 노트북에서는 매끄럽게 넘어가고 있어요! (카테고리 변경 시 API 요청은 1회 씩 발생하고 있어요!)
사진의 경우 링크가 존재하지 않으면 나오지 않도록 처리를 했습니다.
다크 모드 버튼을 만들어 원할하게 작동하는 것을 확인했습니다!

SPA

하나의 HTML 페이지에서 모든 콘텐츠를 로드하고, 필요한 데이터만 동적으로 변경하는 방식입니다.

MPA와의 차이

필요한 부분만 동적으로 불러오는 방식으로 속도의 차이가 존재하며, 여러개의 페이지가 아닌 단일 페이지로 구성되는 차이가 존재합니다!
다만, SPA는 클라이언트에서 렌더링이 진행되기 때문에 초기 로딩 시간이 느릴 수 있습니다!

참고자료

Vite 공식문서
env process 간단 해결법
News API docs
axios

화면 캡쳐

고생하셨습니다!

wzrabbit

@gogo1414 👋🏻

드디어 점심 뭐 먹지를 떠나 새로운 미션이군요. 점심 뭐 먹지 미션에서는 하나하나 사용해야 하는 기술을 지정해 드렸는데요, 이번 미션에서는 정말 "무슨무슨 기능을 구현해라" 는 목표만 드렸어요. 가이드라인 없이 목표만 보고 스스로 판단해서 기술을 사용하고 구현해 본다라... 색다른 느낌이 드셨을 것 같네요 👍🏻

1️⃣ 준수님의 "뉴스 애플리케이션" 이용 소감

사용자의 입장에서, 기능 위주로 준수님의 애플리케이션을 사용해 보았어요.

👍🏻 뉴스 정보와 썸네일이 기본적으로 잘 표시되었고, 작성자가 없는 경우와 썸네일이 없을 수 있는 경우를 고려해 UI에 이러한 처리를 제대로 해내신 것 같습니다.

👍🏻 썸네일의 경우 크기가 제각각이라서 화질로 인해 이미지가 찌그러지는 문제가 생기기 마련인데 이를 CSS의 속성을 이용해 자연스럽게 표시한 것도 인상깊었습니다.

👍🏻 다크 테마가 잘 적용되고 클릭할 때마다 서서히 변하는 은은한 연출이 좋아 완성도가 높다는 느낌을 받았어요.

➕ [Removed] 로 보이는 아예 지워진 기사가 간혹가다가 보이던데, 이 기사를 클릭하면 https://removed.com/ 이라는 작동하지도 않는 이상한 사이트로 연결되더라고요. API 측에서 이러한 응답을 했음은 알지만 지워진 기사라면 아예 뉴스 목록에 표시하지 않거나, 클릭해도 아무 일도 안 일어나도록 별도의 처리가 있으면 좋을 것 같아요. 현재로써는 당황하기 쉬운 UI가 될 수 있을 것 같아요.

➕ 테마의 경우 새로고침을 하더라도 설정이 유지되었으면 좋겠어요. 그러면 사용자 입장에서 더 편하게 사용할 수 있지 않을까라는 생각이 들어요.

➕ Technology 카테고리의 경우 해당 카테고리를 골랐을 때 Loading... 문구만이 보여요. 실제로는 카테고리 이름에 오타가 있어 검색 결과가 없었던 경우인데 상황에 맞는 문구를 보여주는 것이 필요해 보여요.

2️⃣ 다음 단계에서 구현해 볼 사항들

프로그래밍 요구사항에 관련된 리뷰이자 다음 단계에서 구현해보면 좋을만한 점들을 몇 개 제시해 드리고자 해요.

다음 주차에서 애플리케이션을 개선해 보시면서, 같이 적용해 보시면 좋을 것 같습니다.

1️⃣ Client-Side 라우팅 적용하기

페이지 간 이동 : 이건 사용이 된건지 안된건지는 잘 모르겠네요... 제 노트북에서는 매끄럽게 넘어가고 있어요! (카테고리 변경 시 API 요청은 1회 씩 발생하고 있어요!)

이번 미션의 핵심 요구사항이었는데, 아쉽게도 적용되지 않았어요. 미션에서의 라우팅이라는 것은 사용자가 특정 주소로 접속해 해당 주소에 대응하는 페이지를 요청하면, 그에 대응하는 페이지를 보여 주어야 하는 요구사항이었어요.

준수님의 애플리케이션에서는 엄밀히 말하면 화면은 여러 개인 것처럼 볼 수 있으나 URL이 바뀌지 않으며 루트 내에서 모든 컨텐츠를 보여주고 있어요. 의도한 요구사항은 localhost:5173/technology, localhost:5173/business 와 같이 라우트를 나누고 사용자가 이러한 주소에 접속한 경우 그 주소에 대응하는 적절한 페이지를 보여주는 것 입니다. 잘 활용하면 카테고리에 걸맞는 기본적인 페이지뿐만 아니라 어떤 라우트에도 일치하지 않는 경우 404 페이지를 보여주도록 고도화할 수 도 있어요.

react-router-dom 의 공식 문서 를 참고하여 이 요구사항을 수행해 보세요.

이 요구사항을 수행하시면 페이지가 여러 개로 분리된 것처럼 보일텐데, 이래도 여전히 SPA인지에 대해 알아보셨으면 좋겠어요. 프론트엔드에서 라우팅을 사용하는 것은 실제로 여러 HTML 파일을 준비해놓고 반환하는 것일까요? 아니면 기존의 SPA 애플리케이션과 같이 필요한 부분만 동적으로 바뀔까요?

필요한 부분만 동적으로 불러오는 방식으로 속도의 차이가 존재하며, 여러개의 페이지가 아닌 단일 페이지로 구성되는 차이가 존재합니다!
다만, SPA는 클라이언트에서 렌더링이 진행되기 때문에 초기 로딩 시간이 느릴 수 있습니다!

2️⃣ 용도에 맞는 태그, 그리고 시멘틱 태그

<div>, <span> 을 사용해도 기능상으로 큰 문제는 없지만, 때로는 이 태그에 특수한 기능을 실어주고 싶을 때도 있을 것이고, 때로는 이 태그에 의미를 부여해 주고 싶을 때도 있어요.

용도에 맞는 태그를 이용하면 그 태그만의 기능을 누릴 수 있는 것은 물론, 읽기 쉽고 기능을 짐작하기 쉬운 마크업을 작성하실 수 있고, 더 많고 풍부한 정보를 제공할 수 있으며, 접근성 또한 향상시킬 수 있어요. 그렇기 때문에 용도에 맞는 태그와 시멘틱 태그들을 적절한 상황에서 사용하는 것은 굉장히 중요하다고 할 수 있어요.

다음 주차에서 고도화하실 때, 컴포넌트에 사용된 태그를 다시 한 번 점검해 보시고, 어떤 태그를 그대로 두는 것이 좋을지, 어떤 태그를 개선해보는 것이 좋을지 고민해 보시면 좋을 것 같아요.

구체적인 장점 및 추천 글은 이 코멘트 에 해두었으니 참고하시면 좋을 것 같습니다.

3️⃣ 미션: 새로고침을 하더라도 다크 테마 관련 설정이 유지되도록 해 보기

서버가 없는데 이게 가능할까요? 물론이고 말고요! 프론트엔드에는 localStorage 라는 것이 있습니다! 민감한 사용자 정보들은 서버에 두는 것이 좋지만, 다크 테마 설정은 민감한 정보는 아니잖아요? 서버를 두기에는 너무 쓸데없는 비용이 들기도 하고요. 이렇게 덜 민감한 정보들을 사용자의 브라우저에 저장해 두고 관리하고 싶으실 때 localStorage 를 사용해 보실 수 있습니다.

사용자가 사이트에서 새로 고침을 하더라도 이전에 설정해 두었던 라이트 테마 또는 다크 테마가 유지되어 설정이 적용되도록 개선해 보실 수 있으신가요?

리뷰는 이 정도로 해 볼게요! 그럼, 더 높은 완성도의 애플리케이션을 만들기 위해 힘써주시길 바래요, 화이팅! (만약 시간이 부족하시다면 1️⃣, 2️⃣, 3️⃣ 순으로 수행해 보시면 좋을 것 같습니다.)

wzrabbit · 2025-01-16T06:44:34Z

package.json

@@ -10,8 +10,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "axios": "^1.7.9",


axios를 사용하지 않더라도 서버와의 비동기 통신은 문제없이 할 수 있을텐데, axios라는 라이브러리를 기술 스택으로 고르신 이유가 있으신가요? 어떤 장점을 생각하며 이 기술을 도입하셨나요?

간단한 것이어도 괜찮으니 npm install axios 를 치실 때 하셨던 생각을 들려주셨으면 좋겠어요 📝

어떠한 이유로 axios를 사용해야 했는지에 대한 고민은 많이 안했던거 같아요🥲
우선 README.md에 적혀있는 참고 자료의 axios 공식문서를 보고 해당 라이브러리를 사용해야겠다고 생각한거 같아요!

지금 간단하게 생각을 해보자면 저희가 이전까지 했던 부분에서는 params를 사용하지 않고 데이터 저장 요청을 보낼 때도 RequestBody를 사용했는데 이번 외부 API를 사용하면서 params를 이용해야 한다는 점과 axios가 해당 부분을 손쉽게 이용할 수 있게 해준다는 점에서 좋은 라이브러리라는 생각이 드네요!

wzrabbit · 2025-01-16T06:49:11Z

src/data/category.js

+export const categoryList = [
+    { id : 'c1', name: 'All' },
+    { id : 'c2', name: 'Business' },
+    { id : 'c3', name: 'Entertainment' },
+    { id : 'c4', name: 'General' },
+    { id : 'c5', name: 'Health' },
+    { id : 'c6', name: 'Science' },
+    { id : 'c7', name: 'Sports' },
+    { id : 'c8', name: 'Technoloy' },
+];


이 방법도 가능하기는 하지만, categoryList의 name은 카테고리를 관리하는 특성상 겹치는 값들을 개발자가 추가하지는 않을 것 같아보여요. 이 경우라면 그냥 name을 React의 key 값으로 사용해 보시는 것에 대해서는 어떻게 생각하실 지 여쭤보고 싶어요. 구조를 간단하게 만들 수 있을 것 같아보여 적어보아요.
id의 쓰임새가 React key를 제외한 다른 것도 있다면, 어떤 용도로 구현하셨는지 의견을 공유해 주실 수 있으신가요?

categoryList 변수 특성상 절대로 내부의 값들이 변경되어서는 안 될 것으로 예상되는데, categoryList를 사용하는 개발자에게 변경되어서는 안 된다는 사실을 어떻게 하면 코드로 표현할 수 있을까요?

wzrabbit · 2025-01-16T06:50:39Z

src/components/NewsCard.jsx

+            <Info>
+                <SourceName>{article.source.name}</SourceName>
+                <NewsTitle>{article.title}</NewsTitle>
+                {<Author>{article.author ? `by ${article.author}` : 'No author'}</Author>}


Suggested change

{<Author>{article.author ? `by ${article.author}` : 'No author'}</Author>}

<Author>{article.author ? `by ${article.author}` : 'No author'}</Author>

중괄호를 생략할 수 있어 보이는군요?

추가로, 이런 자잘한 코드 포맷팅을 하나하나 신경쓰기 힘드시면, Prettier 라이브러리 사용을 권장드려요. 인덴트 통일, 줄 바꿈, 들여쓰기, EOF 등등 신경쓸 것이 정말 많은데 Prettier를 사용하면 이 코드들이 자동으로 모두 교정돼요. 상당히 편하고 적은 노력으로 일관성이 잘 갖춰진 코드를 적으실 수 있을 거에요.

저번에도 알려주셨던 라이브러리네요! 아직도 제가 사용해보질 않아서... 적용해보도록 해야겠네용!

wzrabbit · 2025-01-17T01:32:55Z

src/App.jsx

+            setArticles(data.articles);
+        };
+        getArticles();
+    }, [category, API_KEY]);


좋은 dependency array 사용이네요 👍🏻이렇게 로직에 영향을 주는 값들을 dependency array에 두면 이후 이 값들이 변경되더라도 useEffect 내부의 코드는 항상 최신 값들이 반영된 상태로 올바르게 작동할 거에요

또한 getArticles를 useEffect 내부에 두셨기 때문에 매 리렌더링마다 이 함수는 dependency array가 변경되지 않는 한 새로 함수가 생성되지 않을 거에요. 불필요한 연산을 줄일 수 있을 거라 생각되네요

감사합니다😊

wzrabbit · 2025-01-17T01:37:30Z

src/App.jsx

+                {articles && articles.length > 0 ? (
+                    articles.map((article, index) => (
+                        <NewsCard key={index} article={article} />
+                    ))
+                ) : (
+                    <p>Loading...</p>
+                )}
+            </main>
+        </>
+    )


articles의 길이가 0이면 로딩중인 것으로 판단하시는 건가요? 만약 정상적으로 기사들을 받아왔는데 길이가 0인 것이라면 이 때는 "로딩 중"이라기보다는 "조건에 맞는 기사들을 찾지 못한 상황" 이라고 보아야 하지 않을까 하는 생각이 들어요

아직 데이터를 받아오지 못해 articles의 길이가 0인 것이랑, 데이터를 받아왔는데 articles의 길이가 0인 경우는 어떻게 구분해볼 수 있을까요? 꼭 이 API가 아니어도 검색된 결과가 없는 경우는 흔하기에 고민해 보실 만한 주제라고 생각해요.

해당 부분에 대해 고민해봐야 겠네요...

실제로 현재 로딩만 뜨고 안나오는 페이지도 존재해서 수정해야겠어요!!

해당 부분이 오타때문에 로딩만 뜨고 있던거였네요!

wzrabbit · 2025-01-17T02:22:59Z

src/components/NewsCard.jsx

+const CardContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;


margin-bottom 을 사용하는 방법도 좋지만, 부모 요소인 <main>에 display: flex 스타일을 적용하고, <main>에 row-gap: 1.5rem 과 같은 스타일을 적용해 자식 요소들인 뉴스 카드들을 일정한 간격으로 배치해볼 수도 있답니다 😸

만약 뉴스 카드 자체에 margin을 두는 게 싫으시거나, margin 없이 재사용을 고려하여 관리하고 싶으시다면 이 방법을 추천드리지만, 지금 사용하고 계신 방법도 흔하고 좋게 간주되는 방법 중 하나에요. 오히려 디테일한 간격을 띄워야 하는 경우에는 margin이 더 좋을 수도 있어요. 그러니 상황을 고려하여 판단해 보셔도 좋을 것 같아요

감사합니다😊
알려주신 부분은 다른 부분에서 사용해볼 수 있으면 해볼게요!

wzrabbit · 2025-01-17T02:24:12Z

src/components/NewsCard.jsx

+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.01);
+  }


transform 과 transition 을 이용한 자연스러운 애니메이션 효과가 돋보이네요 👍🏻 사용자 입장에서 더 명확하고 심심하지 않은 UI가 될 수 있을 것 같아요

wzrabbit · 2025-01-17T02:28:17Z

src/components/NewsCard.jsx

+const Thumbnail = styled.img`
+  width: 120px;
+  height: 100px;
+  object-fit: cover;


탁월한 선택이라고 생각해요 👍🏻 뉴스 기사의 썸네일 이미지 크기는 제각각인데 그걸 같은 크기의 이미지로 보여주어야 하잖아요? 사진 비율로 인해 이미지가 찌그러질 수 있는데 그에 대응한 좋은 스타일링이라고 생각되네요

wzrabbit · 2025-01-17T02:51:41Z

src/components/NewsCard.jsx

+    const handleClick = () => {
+        window.open(article.url, '_blank');
+    }
+
+    return (
+        <CardContainer onClick={handleClick}>


<CardContainer>는 <div>이고, 클릭 시 handleClick 핸들러 함수가 실행되어 window.open을 이용해 뉴스 기사 페이지를 여는 방법을 사용 중이시군요? 이 방법도 충분히 가능하지만, 이번에는 <a> 태그를 추천드려 보고 싶네요?

아래는 <a>를 추천드리는 이유에요.

<a> 는 외부 링크로 연결되는 하이퍼링크 를 문서에 사용하기 위한 태그입니다. href attribute만 제공해 주면 JavaScript 함수 없이도 클릭 시 그 외부 링크로 연결해 줍니다. 그게 그 태그의 기본 역할이니까요. 목적을 생각한다면 이 태그가 더 어울리지 않을까요?

<a> 는 존재 자체로 자신의 의미를 시사하고 있어요. <a> 태그가 사용된 것을 개발자가 확인한다면 내부 코드를 보지 않아도 이 요소는 외부 링크로 연결해주는 역할을 수행한다는 것을 빠르게 알 수 있어요. 반면 <div>는 자체적으로는 특수한 의미를 지니지 않는 태그에요.

<div>의 사용이 항상 지양된다는 뜻은 아닙니다! 요소가 특별한 기능 및 의미를 지니고 있지 않다면 <div>를 사용하는 것이 더 명확할 수도 있어요. 요소가 특정한 역할을 한다면 그에 대응하는 태그를 이용해 보시고, 몇몇 태그에서 제공하는 동작을 사용하기 싫으시거나 별다른 의미를 부여하고 싶지 않다는 의도가 명확하시다면 <div>, <span> 등을 사용해 보시면 좋을 거에요.

접근성 면에서도 더 좋아요. 프론트엔드 개발자는 모든 유저가 서비스를 원활하게 이용할 수 있도록 최선을 다해야 합니다. 모든 유저 라는 것은, 신체적 및 인지적으로 장애가 있으신 분들도 포함합니다. 이분들 중 몇몇 유저분들은 스크린 리더를 이용한 청각 정보 에 크게 의존합니다. 사용자가 몇몇 요소를 선택하면, 스크린 리더가 이 요소의 정보를 알려주는 식이에요. 여기에서 <a> 를 사용한다면, 별다른 추가 작업을 하지 않아도 스크린 리더는 해당 요소가 외부 페이지로 연결되는 하이퍼링크라는 사실을 사용자에게 전달합니다. 노력 대비 효과도 큰 옵션이에요.

직접 스크린 리더를 사용해 보고 싶으신가요?

Chrome VOX 사용해 보기

접근성까지 포함하면 꽤 깊은 개념을 알려드린 것이긴 하지만, 그만큼 역할에 맞는, 그리고 별다른 특수한 기능의 차이는 없어도 의미를 부여해주는 몇몇 시멘틱 태그들 (<header>, <footer>, <nav>, ...) 의 적절한 사용은 중요합니다.

앞으로도, 어떤 태그를 쓸지, 이 태그에는 의미를 더할 수 있을지, 반대로 이 태그에는 의미를 빼는 것이 오히려 좋을지 -- 호시탐탐 각을 보고 노려보시면 더 좋은 연습이 될 수 있을 거라 생각해요.

관련 글들도 추천드려요.

알아두면 쓸모 있는 시멘틱 마크업

시맨틱 태그 (Semantic Tag)란? – 태그 요소의 종류와 이점

보내주신 Chrome VOX를 직접 사용해보고 싶었는데 지원이 안된다고 해서 다운은 못하네요🥲

접근성 면에서도 더 좋아요. 프론트엔드 개발자는 모든 유저가 서비스를 원활하게 이용할 수 있도록 최선을 다해야 합니다. 모든 유저 라는 것은, 신체적 및 인지적으로 장애가 있으신 분들도 포함합니다.

해당 부분은 바로 이해가 되었어요. 모든 사용자를 고려했다는 말이 크게 와닿네요! 앞으로 해당 부분도 같이 고민해보면 좋을거 같아요!

알려주신 다른 관련 글들도 감사합니다!

wzrabbit · 2025-01-17T03:07:14Z

src/style/GlobalStyle.js

+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;


box-sizing: border-box 스타일은 무슨 역할을 수행할까요?

저도 해당 스타일이 왜있는지 확인하다가 잘못 넣은걸 깨달았네요..😅

gogo1414

안녕하세요, 의천님😊
새로운 미션은 제가 스스로 해보는거라 말씀하신 것처럼 색다른 느낌이 많이 들었어요!

우선 이용 소감에 적엉주신 사항들은 아래와 같이 진행해봤어요! 새로고침의 경우 조금 더 찾아봐야 할거 같아요!

➕ [Removed] 로 보이는 아예 지워진 기사가 간혹가다가 보이던데, 이 기사를 클릭하면 https://removed.com/ 이라는 작동하지도 않는 이상한 사이트로 연결되더라고요. API 측에서 이러한 응답을 했음은 알지만 지워진 기사라면 아예 뉴스 목록에 표시하지 않거나, 클릭해도 아무 일도 안 일어나도록 별도의 처리가 있으면 좋을 것 같아요. 현재로써는 당황하기 쉬운 UI가 될 수 있을 것 같아요.

해당 부분은 [Removed] 가 title로 나오는 것들은 따로 필터를 둬서 없애봤습니다!

➕ 테마의 경우 새로고침을 하더라도 설정이 유지되었으면 좋겠어요. 그러면 사용자 입장에서 더 편하게 사용할 수 있지 않을까라는 생각이 들어요.

해당 부분은 수정을 못했지만 로컬 스토리지를 활용해서 해결 가능한것 같은데 맞을까요??

➕ Technology 카테고리의 경우 해당 카테고리를 골랐을 때 Loading... 문구만이 보여요. 실제로는 카테고리 이름에 오타가 있어 검색 결과가 없었던 경우인데 상황에 맞는 문구를 보여주는 것이 필요해 보여요.

오타를 수정해서 정상적으로 나오는 것을 확인했어요!!

1️⃣ Client-Side 라우팅 적용하기

라우팅은 적용했으나 docs의 맨 처음 부분의 Routes를 사용하게 될 경우 컴포넌트가 더 생기고 코드 변화가 많아질거 같아서 useNavigate와 useLocation을 사용해봤습니다!

2️⃣ 용도에 맞는 태그, 그리고 시멘틱 태그

코멘트에 적어주신 부분은 로 반영하여 수정을 진행했습니다! 앞으로 있을 프로젝트를 할 때 시멘틱 태그를 많이 참고하겠습니다! 감사합니다👍

3️⃣ 미션: 새로고침을 하더라도 다크 테마 관련 설정이 유지되도록 해 보기

해당 부분은 이용 소감에도 적었는데 아직 해결은 못했어요..! 고민해보겠습니다..!!

gogo1414 · 2025-01-20T10:35:13Z

package.json

@@ -10,8 +10,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "axios": "^1.7.9",


어떠한 이유로 axios를 사용해야 했는지에 대한 고민은 많이 안했던거 같아요🥲
우선 README.md에 적혀있는 참고 자료의 axios 공식문서를 보고 해당 라이브러리를 사용해야겠다고 생각한거 같아요!

지금 간단하게 생각을 해보자면 저희가 이전까지 했던 부분에서는 params를 사용하지 않고 데이터 저장 요청을 보낼 때도 RequestBody를 사용했는데 이번 외부 API를 사용하면서 params를 이용해야 한다는 점과 axios가 해당 부분을 손쉽게 이용할 수 있게 해준다는 점에서 좋은 라이브러리라는 생각이 드네요!

gogo1414 · 2025-01-20T10:38:34Z

src/App.jsx

+            setArticles(data.articles);
+        };
+        getArticles();
+    }, [category, API_KEY]);


감사합니다😊

gogo1414 · 2025-01-20T11:51:02Z

src/App.jsx

+                {articles && articles.length > 0 ? (
+                    articles.map((article, index) => (
+                        <NewsCard key={index} article={article} />
+                    ))
+                ) : (
+                    <p>Loading...</p>
+                )}
+            </main>
+        </>
+    )


해당 부분에 대해 고민해봐야 겠네요...

실제로 현재 로딩만 뜨고 안나오는 페이지도 존재해서 수정해야겠어요!!

gogo1414 · 2025-01-20T11:56:05Z

src/components/Header.jsx

+                    <Tab
+                        key={category.id}
+                        $active={currentCategory === category.name}
+                        onClick={() => onSelectedCategory(category.name)}


선택된 카테고리와 앞에 onClick이라는 조건이 붙어있어서 선택된 카테고리가 클릭되었을 때 라는 의미를 담고있다고 생각했는데 다른 설명이 붙으면 더 좋을까요??

gogo1414 · 2025-01-20T11:57:25Z

src/components/NewsCard.jsx

+const CardContainer = styled.div`
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;


감사합니다😊
알려주신 부분은 다른 부분에서 사용해볼 수 있으면 해볼게요!

gogo1414 · 2025-01-20T12:07:36Z

src/components/NewsCard.jsx

+            <Info>
+                <SourceName>{article.source.name}</SourceName>
+                <NewsTitle>{article.title}</NewsTitle>
+                {<Author>{article.author ? `by ${article.author}` : 'No author'}</Author>}


저번에도 알려주셨던 라이브러리네요! 아직도 제가 사용해보질 않아서... 적용해보도록 해야겠네용!

gogo1414 · 2025-01-20T12:08:54Z

src/data/category.js

+    { id : 'c5', name: 'Health' },
+    { id : 'c6', name: 'Science' },
+    { id : 'c7', name: 'Sports' },
+    { id : 'c8', name: 'Technoloy' },


헛 감사합니다!!!

gogo1414 · 2025-01-20T12:12:55Z

src/style/GlobalStyle.js

+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;


저도 해당 스타일이 왜있는지 확인하다가 잘못 넣은걸 깨달았네요..😅

gogo1414 · 2025-01-20T12:37:27Z

src/style/GlobalStyle.js

+    }
+    
+    body[data-theme='light'] {
+        background-color: #ffffff;


해당 미션 참고해서 수정 진행해봤습니다!

gogo1414 · 2025-01-20T12:37:52Z

src/App.jsx

+                {articles && articles.length > 0 ? (
+                    articles.map((article, index) => (
+                        <NewsCard key={index} article={article} />
+                    ))
+                ) : (
+                    <p>Loading...</p>
+                )}
+            </main>
+        </>
+    )


해당 부분이 오타때문에 로딩만 뜨고 있던거였네요!

gogo1414 added 11 commits January 16, 2025 13:22

feature: 뉴스 카테고리 표현을 위한 Header 컴포넌트 구현

3ddc3fd

refactor: 카테고리 데이터 분리

4503d5c

feature: .env 파일이 업로드 되지 않도록 설정

611fddb

feature: 다크모드를 위한 GlobalStyle 구현

f90b904

feature: 다크모드 기능 구현

7851b14

feature: News API를 위한 fetchNews util 구현

5dcf90d

feature: 카테고리 상태 관리 구현

05d6a48

feature: 현재 선택된 카테고리 표시되도록 설정

69c98ba

fix: HTML DOM 요소의 boolean 속성 미지원으로 인한 경고 해결

c0e5da0

feature: 뉴스카드 컴포넌트 구현 및 API 연동

960efd6

refactor: 아티클 key 값 지정 및 $를 활용한 문제 해결로 변경

cf9bd58

wzrabbit suggested changes Jan 17, 2025

View reviewed changes

gogo1414 added 9 commits January 20, 2025 21:06

refactor: CardContainer의 HTML 요소를 div -> a 로 변경

cf0251c

refactor: 의미없는 중괄호 제거

c54b9c9

refactor: 카테고리의 Technology 오타 수정

0b8841e

refactor: EOL 수정

8b9450e

refactor: ThemeProvider를 통한 스타일 색상 관리 적용

4a0bfc7

refactor: 삭제된 뉴스기사 제거 필터 추가

f5a2f91

feature: react-router-dom 라이브러리 추가

798ae14

feature: useNavigate를 사용한 경로 변경

026f8a2

feature: useLocation을 활용하여 경로 추적 및 뒤로가기와 새로고침 시 변경 상태 유지

c54283e

gogo1414 commented Jan 20, 2025

View reviewed changes

gogo1414 requested a review from wzrabbit January 20, 2025 13:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[react-spa-routing 미션] 김준수 미션 제출합니다. #2

[react-spa-routing 미션] 김준수 미션 제출합니다. #2

gogo1414 commented Jan 16, 2025

wzrabbit left a comment •

edited

Loading

wzrabbit Jan 16, 2025

gogo1414 Jan 20, 2025

wzrabbit Jan 16, 2025

wzrabbit Jan 16, 2025 •

edited

Loading

gogo1414 Jan 20, 2025

wzrabbit Jan 17, 2025

gogo1414 Jan 20, 2025

wzrabbit Jan 17, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

wzrabbit Jan 17, 2025

gogo1414 Jan 20, 2025

wzrabbit Jan 17, 2025

wzrabbit Jan 17, 2025

wzrabbit Jan 17, 2025

gogo1414 Jan 20, 2025

wzrabbit Jan 17, 2025

gogo1414 Jan 20, 2025

gogo1414 left a comment

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

gogo1414 Jan 20, 2025

	{<Author>{article.author ? `by ${article.author}` : 'No author'}</Author>}
	<Author>{article.author ? `by ${article.author}` : 'No author'}</Author>

[react-spa-routing 미션] 김준수 미션 제출합니다. #2

Are you sure you want to change the base?

[react-spa-routing 미션] 김준수 미션 제출합니다. #2

Conversation

gogo1414 commented Jan 16, 2025

주요 기능 & 기능 요구 사항

SPA

MPA와의 차이

참고자료

화면 캡쳐

wzrabbit left a comment • edited Loading

Choose a reason for hiding this comment

1️⃣ 준수님의 "뉴스 애플리케이션" 이용 소감

2️⃣ 다음 단계에서 구현해 볼 사항들

1️⃣ Client-Side 라우팅 적용하기

2️⃣ 용도에 맞는 태그, 그리고 시멘틱 태그

3️⃣ 미션: 새로고침을 하더라도 다크 테마 관련 설정이 유지되도록 해 보기

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wzrabbit Jan 16, 2025 • 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

gogo1414 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

wzrabbit left a comment •

edited

Loading

wzrabbit Jan 16, 2025 •

edited

Loading