-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
news-viewer project finished. code review start #42
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
news-api를 배우면서 최적화 작업을 어떻게 진행하는지 배울 수 있었다.
todo-app / news api만 잘 활용해도 프로젝트 완성도를 높일 수 있다.
|
||
import React from 'react' | ||
import {Route} from 'react-router-dom' | ||
import NewsPage from './components/NewsPage' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
컴포넌트 파일에서 만들어진 News page 값을 React-Router로 연결해 값을 받는다.
import styled from 'styled-components' | ||
import {NavLink} from 'react-router-dom' | ||
|
||
const categories = [ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
NavLink (React Router) 에서 상단 네브바를 구성할 리터럴 객체 작업
import Categories from '../components/Categories' | ||
import NewsList from '../components/NewsList' | ||
|
||
const NewsPage = ({match}) =>{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
{match} 속성은 React-Router를 활용하면 가져오는 속성으로 url의 param을 가져온다.
@@ -3,11 +3,12 @@ import ReactDOM from 'react-dom'; | |||
import './index.css'; | |||
import App from './App'; | |||
import reportWebVitals from './reportWebVitals'; | |||
import {BrowserRouter} from 'react-router-dom' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
react-router-dom 설정하기
@@ -0,0 +1,24 @@ | |||
import {useState, useEffect} from 'react' | |||
|
|||
export default function usePromise(promiseCreator, deps){ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
news api 정보의 대기, 로딩 완료, 실패를 가져오게끔 별도의 컴포넌트를 구성해 작업하는 파일
작업하면서 발생했던 에러 정리 문제점
별도로 설정 값에서 수동 작업했던 코드는 없었는데, 구글링을 통해 해당 에러 이유를 찾아보니 버전의 충돌이 발생한 것 같았다. 위와 같이 yarn 설정을 제거하고 다시 설치했더니 정상 작동했다. 끝 |
벨로퍼트 News-API 뷰어 프로젝트 마무리
주안점
상태 관리를 위해 UseEffect를 굉장히 잘 활용하는 점
파일을 나눠서 코드 관리를 좀 더 용이하게 진행하는 점
Todo App 보다 더 다양한 모듈을 활용하는 점