게시글
질문&답변
2024.03.10
이미지 CDN 만드는 방법
안녕하세요, 선대범님. 이 강의에서는 이미지 CDN을 만드는 벙벚에 대해서는 따로 다루지 않습니다 ㅠ 다른 강의를 찾아보시거나 블로그 글을 찾아보시면 도움이 되실 것 같습니다.
- 0
- 1
- 63
질문&답변
2023.10.23
코드 실행 시 에러 관련 질문드립니다!!
안녕하세요, 지원님. 다음과 동일한 이슈로 보입니다. https://www.inflearn.com/questions/735601/node-version%EC%9C%BC%EB%A1%9C-%EC%9D%B8%ED%95%9C-%EC%98%A4%EB%A5%98
- 1
- 1
- 213
질문&답변
2023.07.28
npm run serve가 동작하지 않아요
안녕하세요, Stella님 다음 에러 메시지릉 봤을 때, 이미 5000번 포트가 사용 중이라 문제가 되는거 같습니다. Error: listen EADDRINUSE: address already in use :::5000 해결 방법으로는, 5000번에서 돌고있는 서버를 종료하기 (검색을 해보시면 특정 포트로 돌고있는 서비스의 PID를 알아내서 강제로 종료하는 명령어가 있습니다.) 아니면, server.js 코드 중에 port라는 값을 5000이 아니라 5001 또는 그 외 중복되지 않는 숫자로 변경하기 위 방법으로 해결되지 않는다면 다시 알려주시기 바랍니다. 그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
- 0
- 1
- 331
질문&답변
2023.05.31
Performance FPS 탭이 안보여요.
안녕하세요 jhkim0280님, 이해하신대로 크롬 버전에 따라서 개발자 도구도 업데이트 됩니다. Performance 패널에서 강의를 찍었을 때와 현재 버전의 다른 점을 몇 가지 예를 들자면, 말씀하신 FPS 항목이 사라졌고 하단 Frames 섹션이 조금 더 구체적으로 바뀐 것으로 알고 있습니다. 그 외에 Web Vitals라는 옵션이 생겼고 Animations라는 섹션이 생겼습니다. Performance 패널 말고도 다른 패널에서도 다양한 변화들이 있었는데요. 업데이트 내용에 대해서는 크롬 개발자 도구 github 나 패널 중에 What's new 라는 패널을 통해 확인하실 수 있습니다. 하지만, 핵심적인 사용법이나 개념은 크게 변하지 않아서 학습하시거나 사용하시는데에는 크게 문제가 없을 겁니다. 그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
- 1
- 1
- 367
질문&답변
2023.04.10
CPU throttling이 뭔가요?
안녕하세요, Tae-Hui Kim님 정확한 질문 내용을 이해하지 못했습니다. 혹시 성능을 검사할 때, CPU Throttling을 어느정도로 설정해둬야 하는지를 질문하신 걸까요? 개발을 하실 때는 특별히 설정할 필요는 없지만, 간혹 디버깅을 위해 느리게할 필요가 있다면 원하는 값으로 설정해주시면 됩니다. 성능 검사를 위해 사용하신다면, 타겟으로 잡은 환경을 고려하여 설정해주시면 되는데요. Lighthouse의 경우, Desktop 환경으로 검사할 때와 Mobile 환경으로 검사할 때 다음과 같이 설정을 합니다. Desktop CPU/Memory Power: 2631 CPU throttling: 1x slowdown Mobile CPU/Memory Power: 2679 CPU throttling: 4x slowdown 그럼 답변이 도움되셨기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
- 0
- 1
- 718
질문&답변
2023.04.10
default export가 아닌 named export일 때 lazy사용법
안녕하세요, Tae-Hui Kim님 기본적인 원리를 이해하시면 쉽습니다. 코드에서 작성한 import 구문( import('./pages/ListPage/index') )은 최종적으로 { default: 해당 컴포넌트 } 를 리턴합니다. 즉, named export일 경우에는 위와 같은 형태를 맞춰주면 됩니다. const ListPage = lazy(() => import("./pages/ListPage/index").then(({ ListPage }) => ({ default: ListPage, })) ); const ViewPage = lazy(() => import("./pages/ViewPage/index").then(({ ViewPage }) => ({ default: ViewPage, })) ); 그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
- 1
- 1
- 489
질문&답변
2023.03.18
lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다
안녕하세요 정수님 혹시 지연 로딩을 적용 후, 페이지를 이동해보셨나요? 지연로딩은 필요할 때 로드하기 때문에 navigate를 콜하여 페이지가 이동되는 순간 로드가 됩니다. 답변이 도움되셨기를 바라며 강의에 관심을 가져주셔서 감사합니다. :)
- 1
- 1
- 346
질문&답변
2023.02.24
lighthouse 측정에 관해 질문드려요
안녕하세요 redgee49 님. 1. 라이트하우스는 기본적으로 이전 내역과 관계없이(캐시없이) 실행됩니다. 예전에는 다른 패널에서 설정한 옵션(throttle, disable cahce 등)이 반영된 상태로 실행됐는데, 최근 업데이트된 라이트하우스는 다른 패널들의 옵션과 관계없이 기본값으로 설정된 옵션으로 실행됩니다. 따라서, 따로 캐시를 비워주실 필요는 없습니다. 2. performance 패널에서는 각 패널에서 설정한 옵션들이 적용됩니다. 즉, 네트워크 패널에서 disable cache를 적용한 뒤 performance 검사를 하면 캐시가 없는 상태로 실행이 됩니다. 3. 성능 점수는 측정 환경과 방법에 따라 많이 차이가 생깁니다. 때문에 지속적인 서비스 성능 측정을 위해서는 그 기준을 동일하게 맞춰두는 것이 좋습니다. 제가 vercel의 Analytics 기능을 써보지 않아서 정확히 알긴 어렵지만, 찾아보니 RUM(Real User Monitoring) 방식으로 보입니다. 즉, 서비스가 제공되는 중에 실제 유저의 활동기록을 기반으로 성능 측정을 한 것입니다. 그에 반해 라이트하우스를 이용한 측정 방식은 Synthetic Monitoring 이라고 해서, 제한된(simulated) 환경에서 성능을 측정하는 방식입니다. 그렇기에 당연히 다를 수 밖에 없습니다. 특히 라이트하우스로 검사하는 경우 설정한 옵션(throttle 등)에 따라서도 달라질 수 있으므로 고정된 환경에서 측정 및 비교해야합니다. 이 설정은 RUM에서 측정된 통계를 기반으로 적정선을 찾아서 적용하는 것이 좋습니다. RUM 관련해서 P75, P90 개념을 찾아보시면 도움이 되실겁니다. (가장 이상적인 방법은 두가지를 모두 적용해서 실제 유저의 통계와 랩 환경의 점수를 함께 보는 것입니다.) 결론적으로 질문에 답을 다시 하면, 라이트하우스는 제한된 환경(네트워크 느리게하고 CPU 느리게하고, 캐시 날리고)에서 검사를 하기 때문에 점수가 낮을 수도 있습니다. 그에 반해 Vercel Analytics(RUM)의 경우 실제 유저를 기반으로 하기 때문에 빠른 환경의 유저에게는 높은 점수가 찍힐거고, 느린 환경의 유저에게는 낮은 점수가 찍힐 겁니다. 결국 이 데이터가 쌓이면 유저의 평균 LCP 등을 알 수 있는거죠. 그럼 답변이 되셨길 바라면서, 강의에 관심을 가져주셔서 감사합니다. :)
- 1
- 1
- 609
질문&답변
2023.02.20
network 캐싱에 대해서 질문 있습니다!
안녕하세요 bj2525님, 말씀하신 대로 캐시는 브라우저의 설정에 영향을 받습니다. 다만, disable cache 옵션은 개발자 도구에서 제공하는 기능으로 개발자 도구를 열지 않으면 적용되지 않습니다. 즉, 개발자 도구를 사용하지 않는 일반 사용자들에게는 영향이 없습니다. 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
- 1
- 1
- 225
질문&답변
2023.01.22
webp 확장자질문
안녕하세요, 형우리 님 이미비 포맷별 분기 처리에 대해서 질문을 주셨는데요, 강의에서 적용한 picture 태그를 통한 분기는 이미지를 모두 불러와서 분기를 하는 것이 아니라, source 태그에 명시된 type 속성을 보고 브라우저가 지원 가능한 타입인지를 판단합니다. 따라서 굳이 파일을 로드해보지 않고도 지원 가능 여부를 알 수 있습니다. 반대로 파일 자체는 지원이 가능하더라도 type 속성에 이상한 값을(예를들어, webt라거나) 넣게되면 파일의 확장자와 상관없이 지원할 수 없는 타입이라고 판단하여 로드하지 않습니다. 그럼 답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
- 1
- 1
- 247