SSR, CSR 관련 질문입니다.

안녕하세요 🙂 질문주셔서 감사합니다.하나씩 답변을 드려보자면,CSR은 다른 방식에 비해 SEO에 불리하긴 하나, 여러가지 해결 방법은 존재합니다.예를 들면, prerender-spa-plugin과 같은 도구를 사용하는 방법이 있습니다. 또는 dynamic 렌더링을 사용해서 봇이 접근하면 SSR 방식을, 그리고 유저는 CSR 방식으로 선택하는 방법이 있을 수 있겠네요!말씀해 주신 것에 공감합니다. 그렇기 때문에 여러가지 상태 관리 도구들을 활용하고, 컴포넌트간의 책임을 분리하며, 디자인 시스템을 잘 활용해 복잡도를 줄여야합니다.맞습니다. SSR은 서버에서 렌더링된 HTML을 브라우저로 보내주는 방식이기 때문에, 깜빡임이 있을 수 있지만, 비동기 통신 방식이나 화면 구조 변경을 통해 깜빡임을 해결할 수 있습니다. 강의에서는 [동물 앨범] 프로젝트를 2가지 방식으로 제작을 하는데요, 두 제작 방식의 차이점을 조금 더 명확하게 보여주기 위해 해결 방식을 제안하기 보다는 SPA로 제작을 해보았습니다.실제로도 CSR이 좋은가? SSR이 좋은가? 에 대해 많은 분들이 고민을 하고 있는데요,대형 포털에서는 초반 자바스크립트 번들 크기가 클 수 있기 때문에 SSR을 선호하는 경우가 있고,말씀주신 것처럼, 모바일에서는 CSR이 조금 더 부드럽게 동작하며 심플하기 때문에 CSR을 선호하는 경우가 있는 것 같습니다. 어떤 점이 조금 더 우선적으로 필요한지를 정해, CSR과 SSR을 선택해 개발을 하시면 좋을 것 같습니다 🙂다시 한 번 좋은 질문 주셔서 감사드리고, 강의도 잘 들어주셔서 감사합니다 🙇🏻‍♀️🙇🏻‍♀️

섹션 7 - 7 프로젝트 적용하기

안녕하세요 🙂 질문주셔서 감사합니다.제가 직접 등록해보니 정상적으로 작동하는 것 같은데요,혹시 파일을 압축한 상태로 올리지 않았는지, 아니라면 제가 manifest.json의 코드를 복사 붙여넣기 해서 다시 한 번 설정해보시기 바랍니다! 감사합니다.

섹션7-4 api사용해서 명언 설정하기

안녕하세요 정우님 🙂 질문주셔서 감사드립니다.새로고침시에 undefined가 출력된다면 api 호출 오류가 아닌,아마 로컬 스토리지에서 명언을 꺼내올 때 오류가 발생하는 것 같습니다.현재 날짜와 로컬 스토리지에 저장된 날짜가 동일한 경우, 로컬 스토리지에 저장된 명언을 불러오는 방식으로 동작 되기 때문에, 해당 코드에서 오류가 없는지 확인 해주세요!여전히 문제가 발생한다면 전체적인 코드를 다시 올려주시면,제가 확인해보도록 하겠습니다. 감사합니다.

Header에서 정렬기준

안녕하세요 질문주셔서 감사합니다 🙂 total, cost, fun, internet 등 정렬 기준을 변경하면, 해당 정렬 기준값이 가장 높은 아이템부터 차례대로 나타나게 되는데요, 만약 설정된 정렬 기준값이 동일하다면 total 점수가 높은 아이템부터 반환되도록 api를 설정해두었습니다.감사합니다.

2-3 동물 사진 request 오류

안녕하세요 🙂 질문주셔서 감사합니다.제가 확인해본 결과, api 상의 문제는 없는 것 같은데요,먼재님이 request로 이미지를 어떻게 불러왔는지 알아야 문제를 해결할 수 있을 것 같습니다!!혹시 api 를 어떻게 작성하고 어떻게 호출하셨는지 확인할 수 있을까요?

병령처리 하지만 동기화와 같은 출력값

안녕하세요 Daniel Yang님 🙂 질문주셔서 감사합니다.Promise.all() 은, 비동기 처리의 장점을 가지고 있으면서도 작업의 실행 순서를 보장한다는 특징이 있습니다. 그렇기 때문에 A, B, C가 순차적으로 실행되며, 가장 오래 걸리는 작업인 C 작업이 완료되면, 즉 10초 후에 실행 순서대로 작업들이 출력 됩니다.감사합니다.

변수 네이밍관련 질문있습니다🙋‍♀️

안녕하세요 🙂 질문주셔서 감사드립니다.작성해주신대로 해당 강의의 예제 코드는, 변수명의 앞에 $기호를 붙이는 방법과, 변수명의 뒤에 Element를 작성하는 방법 이렇게 2가지의 방법을 보여주기 위함입니다 :)

API 관련 질문

안녕하세요 🙂 질문주셔서 감사합니다.휴가로 인해 답변이 늦어졌습니다. 죄송합니다.API 제작에 대한 내용은 강의에서 따로 다루고 있지 않아서,"api 제작하기" 라는 키워드로 검색해보시는 것을 추천드립니다! express.js로 제작을 희망하신다면, 아래의 블로그를 참고해보셔도 좋을 것 같습니다.https://velog.io/@archivvonjang/Node.js-%EA%B0%84%EB%8B%A8%ED%95%9C-API-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0감사합니다.

6분 53초 질문입니당

안녕하세요 🙂 질문주셔서 감사합니다.휴가로 인해 답변이 늦었습니다. 죄송합니다.우선, 파일명 앞의 아이콘은 제가 'material icon' 이라는 extension을 설치해서 보이는 것으로,아이콘이 보이지 않아도 괜찮습니다!!그리고 이미지를 확인해보니, index.html 을 파일이 아닌 폴더로 생성하신 것 같네요!파일로 생성해보시면 정상 작동할 것 같습니다.또다른 질문이 있으시다면, 언제든지 다시 질문 남겨주세요! 감사합니다.

citiList 의 더보기 버튼 함수

안녕하세요 🙂 질문주셔서 감사합니다. 강의에 나와있는대로 App 컴포넌트는 애플리케이션의 전체 상태를 관리하는 컴포넌트입니다.그렇기 때문에 startIdx, cities, region 등의 상태가 App 컴포넌트에 정의되어 있고,이 상태들을 기반으로 모든 컴포넌트가 일관된 데이터를 공유하고 있습니다. handleLoadMore 함수도 마찬가지로, startIdx와 cities 를 업데이트하고새로운 데이터를 기존 데이터에 추가한 다음 isEnd의 상태를 업데이트 해야하기 때문에App 컴포넌트 내부에 정의하는 것이 좋습니다!