[5주차] Pre:folio 미션 제출합니다 #6
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Feature/폰트 추가 및 아이콘 클릭 시 글씨 색상 변경
heeeesoo
reviewed
Nov 13, 2022
heeeesoo
reviewed
Nov 13, 2022
| @@ -0,0 +1,18 @@ | |||
| import { IWrapperProps } from './../../interfaces/interface'; | |||
There was a problem hiding this comment.
아 이렇게 중복될 수 있는 부분은 따로 파일 만들고 props 넣어서 스타일 지정해주는 거 좋네요!! 저도 다음 과제에 적용해봐야겠어요👍
hamo-o
reviewed
Nov 13, 2022
src/pages/home/index.tsx
Outdated
Comment on lines
26
to
44
| const HomePage = ({ | ||
| nowPlayingData, | ||
| topRatedData, | ||
| popularData, | ||
| upComingData, | ||
| backgroundData, | ||
| }: any) => { | ||
| const [nowPlayingMovies, setNowPlayingMovies] = | ||
| useRecoilState(nowPlyingMoviesState); | ||
| const [topRatedMovies, setTopRatedMovies] = | ||
| useRecoilState(topRatedMoviesState); | ||
| const [popularMovies, setPopularMovies] = useRecoilState(popularMoviesState); | ||
| const [upComingMovies, setUpComingMovies] = | ||
| useRecoilState(upComingMoviesState); | ||
|
|
||
| setNowPlayingMovies(nowPlayingData.results); | ||
| setTopRatedMovies(topRatedData.results); | ||
| setPopularMovies(popularData.results); | ||
| setUpComingMovies(upComingData.results); |
There was a problem hiding this comment.
아 이렇게 recoil로 관리하셨군요!!!! home에서 바로 api 불러오는 것과 어떤 차이가 있는지 궁금해요!!
Comment on lines
+13
to
+19
| const [selectedIcon, setSelectedIcon] = useRecoilState(selectedContentState); | ||
| const router = useRouter(); | ||
|
|
||
| const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => { | ||
| const selectedContent = e.currentTarget.name; | ||
| setSelectedIcon(selectedContent); | ||
| router.push(`/${selectedContent}`); |
There was a problem hiding this comment.
router.push()를 이용하는 경우 a태그를 만들지 않기 때문에 크롤링되지 않아서 SEO에 불리하다고 하네요!!
Link태그 사용도 고려해보심 좋을 것 같아요
| export default function App({ Component, pageProps }: AppProps) { | ||
| return ( | ||
| <RecoilRoot> | ||
| <GlobalStyle /> |
There was a problem hiding this comment.
전 이상하게 이거 할 때 오류가 떠서 jsx로 처리했는데 코드 고칠 때 참고하겠습니다 ㅜㅜ
| ); | ||
| }; | ||
|
|
||
| export default HomePage; |
There was a problem hiding this comment.
오 pages 폴더 안에 또다른 폴더를 만들어서 라우팅을 할수도 있군요!! 신기해요 배워갑니당~~~~~~
Fix/스크롤 오류 해결
heeeesoo
reviewed
Nov 13, 2022
| import SearchIcon from '../icons/SearchIcon'; | ||
|
|
||
| const Footer = () => { | ||
| const [selectedIcon, setSelectedIcon] = useRecoilState(selectedContentState); |
There was a problem hiding this comment.
오 저는 props로 select 전달했었는데 selected를 useState로 상태 관리를 하는 방식이 깔끔해보이고 좋네요!!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
안녕하세요 팀 Pre:folio의 나연, 영준입니다.
정말 고비의 고비의 고비인 협업이었습니다..
🔗 배포 링크
Key Questions
Server Side Rendering과 Client Side Rendering의 차이
SEO란
검색 엔진 최적화는(Search Engine Optimization) 검색 결과 페이지에서 자신의 웹 사이트의 순위와 노출도를 높이는 작업이다.
SEO 최적화 방식 중에는
<title>태그와<meta>태그를 사용하는 방식이 있는데,Next js는 SSR 방식을 사용을 사용하면 CSR 방식보다 편하게 SEO 최적화가 가능하다.CSR은 브라우저에서 html 파일을 받아 렌더링 하지만 SSR은 서버에서 렌더링 후 html 파일을 브라우저에 보낸다.
이후 넘어온 데이터를
<title>태그와<meta>태그에 담아 주면 SEO 처리를 쉽게 할 수 있다.전반적인 협업 과정
영준
우선 팀 organization을 생성하여 프론트 repository를 생성하여 작업했습니다. 막상 코드를 쓰는 데에는 시간을 많이 할애하지 않았지만, setting이랑 git 활용에 있어서 시간을 굉장히 많이 투자했습니다...
서로 담당 부분을 나누어 작업 후에, push 하고 pr을 날려 상대방이 merge하는 방식으로 진행했으며, 이후에는 pull을 받아 작업했습니다.
처음에는 힘들었지만, 이런 식으로 작업하다보니 익숙해져 편리했습니다.
맨 마지막에는 upstream branch와의 연결이 끊어져서 힘들었지만, 어찌어찌 rebase하다보니 잘 됐습니다 ^^
다시는 경험하고 싶지 않네요
아무튼 좋은 경험들이었고, 다음에는 넷플릭스 사이트를 완성시키고 싶습니다 ! ㅎ
나연
조직을 판 뒤 각자 브랜치에서 작업한 후 master 브랜치에 머지하는 식으로 작업했습니다
이번 과제는 페이지가 하나라서 pull을 할 때 conflict가 자주 났지만… 나중에 다른 페이지를 각자 작업하면 괜찮을 것 같고… 미리 고생했으니 12월에 진짜 프로젝트 시작할 때 덜 고생할 것 같네요 ^___^…
그리고 영준이가 정말정말정말 고생을 많이 해 줘서 크게 불편함 없이(git 꼬인 것 빼고…) 협업을 진행했던 것 같습니다 진짜 짱 흑흑
다음 주에는 제가 더 많은 도움이 되었으면 좋겠습니다 ^,,^