Skip to content
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

[5주차] diaMEtes 미션 제출합니다. #7

Closed
wants to merge 29 commits into from

Conversation

heeeesoo
Copy link

@heeeesoo heeeesoo commented Nov 11, 2022

안녕하세요 diaMEtes 프론트팀입니다!!
막판에 배포 문제가 생겨 과제 제출이 좀 늦어졌습니다ㅠㅠ

배포링크 : https://next-netflix-16th-2.vercel.app/

CSR
웹 페이지의 렌더링이 클라이언트 측에서 일어난다.
장점 : 서버와 클라이언트 간 데이터 트래픽이 감소하고, 렌더링이 한번만 있어 페이지 간 이동이 빠르다.
단점 : 사용자가 첫 화면을 보기까지 시간이 오래 걸릴 수 있다. SEO가 좋지 않다.

SSR
서버 측에서 렌더링한다.
서버 측에서 필요한 데이터를 받아와 미리 HTML 파일을 만들어 두고, 그 파일을 클라이언트에 전송한다.
장점 : 첫번째 페이지 로딩이 빨라진다. 모든 컨텐츠가 HTML에 담겨져 있기 때문에 더 효율적인 SEO가 가능하다.
단점 : 각 페이지 별로 매번 로딩 시간 및 새로 고침 현상이 발생한다. 서버 과부하가 걸리기 쉽다.

SEO
SEO는 검색 엔진 최적화로 웹사이트가 유기적인 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화하는 과정을 말한다. CSR보다 SSR방식에서 SEO를 사용하는 데 더 효율적이다.

전반적인 협업 과정
organization을 하나 새로 파고, 포크 떠온 레포에서 이름으로 브랜치를 판 다음 각자 맡은 기능을 구현해 master에 머지했습니다.

seondal and others added 29 commits November 8, 2022 18:19
chore : 폴더 구조 변경
@seondal seondal deleted the hotfix branch November 11, 2022 17:55
Copy link
Member

@YooSeonHo YooSeonHo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요 팀플 팀의 유선호 입니다~!
전체적으로 저희랑 코드가 많이 달라서 유심히 봤어요
따라하고 싶을 정도로 깔끔한데 너무 멀리 와버려서 다음번엔 꼭 참고해보겠습니다 흐흐
json으로 아이콘들을 몰아넣은 거나 이걸로 클릭시 색깔 바꾸는 부분에서 많이 배우고 익혀갈게용
중간에 styled jsx로 바꾸셨던데 이유가 궁금합니당!!!
두분 모두 고생 많으셨어요 ㅎㅎㅎ 스터디 때 봬요!!!

{
"id":4,
"name":"More",
"alt":"more"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오.. JSON으로 저장해서 불러오는거 진짜 좋은 거 같아요 다음번에 참고해야겠습니다.
저희는 react-icon으로 일일이 불러와서 사용했어요!

<Container>
{
footerInfo.map((f)=>{
const select = router.pathname === '/'+f.alt;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 이부분 어떻게 해야할지 고민이 많았는데 간단히 해결하셨군요!! 능력자

return (
<>
{children}
{router.pathname !== "/" && <Footer />}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오...되게 신박한 방법이네요

)
)}
</div>
<style jsx>{`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헉 저희는 styled 썼는데 style jsx로 바꾸신 이유가 궁금해요!!

Copy link
Member

@kongnayeon kongnayeon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

안녕하세요! 이번 주 코드 리뷰 파트너 Pre:folio 팀입니다 😸

코드 작성하신 방식이 저희랑 다른 점이 많아서 많이 배웠습니다!
특히 json 파일에 푸터 정보를 저장해 두고 불러오는 방식 엄청 깔끔하네요... 🤩

과제하시느라 수고하셨고 이따 스터디 시간에 봬요!! 🤩

{
"id":4,
"name":"More",
"alt":"more"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

헉 이렇게 json 파일로 만들어 두는 방식 진짜 깔끔하네요!!...

@@ -0,0 +1 @@
export const API_KEY = '0c75b9faeb39691a7d8e7af98ee5f303';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

API_KEY와 같이 남들에게 공개되면 안 되는 정보는 .env 파일에 적어 두고 gitignore에 .env 파일 추가하면 push 할 때 안 올라가요!
참고 링크

src = "/img/Footer/" + name + ".png";
} else {
src = "/img/Footer/" + name + "-2.png";
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오옹 흰색 아이콘 회색 아이콘을 각각 하나씩 만들어 주셨군용...!!

{children}
{router.pathname !== "/" && <Footer />}
</div>
<style jsx>{`
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

우와 styled-jsx 신기하네용...

@jhj2713 jhj2713 closed this Nov 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants