강의를 클론 받은 후, /sleact/setting/ts 경로에서 npm i 후 npx webpack을 입력하면 아래와 같이 에러가 나옵니다. 다른 컴퓨터로 했을때는 작동 되지만, 제가 사용중인 컴퓨터에서는 작동되지 않습니다. npm i 입력 후 터미널 메세지 ㅡ up to date, audited 643 packages in 4s 74 packages are looking for funding run npm fund for details 26 vulnerabilities (3 low, 8 moderate, 12 high, 3 critical) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run npm audit for details. npx webpack 명령후 입력후 터미널 메세지 [webpack-cli] Failed to load '/Users/kanghyun/Desktop/study/React/zerocho/sleact/setting/ts/webpack.config.ts' config [webpack-cli] SyntaxError: The requested module 'webpack' does not provide an export named 'Configuration' at ModuleJobSync.runSync (node:internal/modules/esm/module_job:387:37) at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:427:47) at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24) at Module._compile (node:internal/modules/cjs/loader:1716:5) at Object.loadTS [as .ts] (node:internal/modules/cjs/loader:1826:10) at Module.load (node:internal/modules/cjs/loader:1469:32) at Function._load (node:internal/modules/cjs/loader:1286:12) at TracingChannel.traceSync (node:diagnostics_channel:322:14) at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) at Module.require (node:internal/modules/cjs/loader:1491:12)
강사님의 강의를 들으면서 test 페이지가 프로그래메틱하게 이동하기 때문에 따로 useEffect를 사용해 프리페칭되도록 만드는 것과, Link 컴포넌트에 prefetch 속성을 false로 하여 프리페칭되지 않게 만들 수 있다고 이해했습니다! 그런데 직접 코드를 작성하고 npm run start로 재실행한 뒤 새로고침을 했는데도 search 페이지에 필요한 js번들이 남아있고 test 페이지의 번들은 프리페칭되지 않았는데 어디가 문제인지 알 수 있을까요?
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요. 강의 정말 잘 보고 있습니다. Stream관련하여 질문이 있는데요. Stream 같은 경우에는 파이프라인을 작성하면서 연산마다 body부가 추가될 수도 있고 중간 연산이 계속 체이닝 되는 형태로 구성이 될 수도 있습니다. 이럴 때 어느 연산에서 문제가 생기는지 디버깅을 하는게 참 번거롭다는 생각이 들곤했습니다. 저 같은 경우에는 이럴 때 peek 와 sout을 활용해서 어떻게든 값을 확인하는 식으로 디버깅을 해왔는데 더 좋은 방법이 없을까요? 브레이크 포인트를 잡기도 명령형 프로그래밍 방식보다 어려운 점이 있는 거 같아서요 ㅠㅠ
공부하던 중에 이 부분은 이렇게 수정해야 되는 것 아닌가..? 싶어서 글 남겨봅니다. [수정 제안 정보] 대상 강의록: 10. Optional.pdf 대상 위치: 강의록 p.24의 최상단 부분 , 영상의 10분 50초~ 수정 제안 수정 전: 사용 용도 orElse(T other) - 값이 이미 존재할 가능성이 높거나, ... 수정 후: 사용 용도 orElse(T other) - 값이 존재하지 않을 가능성이 높거나, ... 수정 제안에 대한 근거 orElse(T other) 는 other의 생성 비용이 높은 경우 에 "값이 이미 존재함에도 불구하고 생성 연산을 수행해야됨" 으로 인해서 비효율이 발생합니다. 이는 바꿔 말하면 "값이 존재하지 않는 경우에는 생성 연산이 필수적임" 이기 때문에 "값이 존재하지 않는 경우에는 비효율이 발생하지 않음" 이라고 해석할 수 있을 것 같습니다. 이때 강의에서 말하고자 하는 바는 "orElse()는 비효율이 발생할 수도 있다. 하지만 발생하지 않는 경우에는 사용해도 좋다." 라고 이해했는데, 이때 "비효율이 발생하지 않는 경우" 를 "값이 존재하지 않는 경우(생성 연산이 꼭 필요한 경우)" 라는 표현으로 대체 할 수 있기 때문에 "값이 존재하지 않을 가능성이 높은 경우(= 비효율이 발생하지 않는 경우)에는 orElse()를 사용해도 괜찮다." 라고 수정해야 하는 것이 아닌가 싶어서 제안합니다.
[오타 정보] 대상 강의록: 10. Optional.pdf 대상 위치: 강의록 p.11의 2. ifPresentOrElse() 코드 부분 , 영상의 5분 ~ 오타 내용 수정 전 public class OptionalProcessingMain { ... System.out.println("=== 2. ifPresentOfElse() ==="); // Of라고 오타 ... 수정 후 public class OptionalProcessingMain { ... System.out.println("=== 2. ifPresentOrElse() ==="); // 'Of' -> 'Or' 수정 ...
안녕하세요. 강의 잘 듣고 있습니다. Next.js는 오직 초기 접속시에만 HTML 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR(Client Side Rendering) 방식으로 처리하게 됩니다. 따라서 새롭게 HTML이 요청되지 않고 오직 브라우저측에서 JS Bundle을 실행해 컴포넌트를 교체하는 방식으로만 페이지 이동이 처리됩니다. 라고 설명주셨는데요. 하지만 ssg 파트에서는 페이지 요청시 이미 빌드된 html 을 반환한다고 하셨는데 이 부분이 잘 이해가 되지 않습니다. 빌드를 하면 SSR를 설정하지 않은 페이지는 기본적으로 SSG로 작동하고, 그렇다면 굳이 프리페칭을 하지 않더라도 이미 완성된 페이지를 반환해주는게 아닌가 싶어서 질문드립니다. 라우터를 이용하여 페이지를 이동할때는 CSR로 작동하고 url에 직접 경로로 접속 요청을 할때 SSG로 작동하는건가요?? 두 가지 개념이 헷갈립니다
prefetch 를 명시적으로 false 로 설정하면, 예상대로 해당 링크에 대한 프리패칭이 발생하지 않는 것이 확인되었습니다. <Link href={"/search"} prefetch={false}>Search</Link> 그런데 신기한 점은, 해당 링크에 마우스를 호버했을 때 네트워크 탭에서 /search 관련 리소스들이 프리패칭되는 현상이 보였다는 것입니다. 혹시 이러한 동작은 Next.js에서 어떻게 정의되거나 불리고 있는지 궁금합니다!
SSG의 fallback 옵션에 따른 렌더링 방식에 대해 좀 더 구체적으로 알고 싶습니다. fallback: "blocking" 일 때, 빌드 타임에 사전 생성하지 않았던 경로에 대해서, 이후 접속 요청이 들어와 사전 렌더링되고, .next 서버에 저장되는 걸 확인했는데요. 1) 저장되는 걸 캐싱이라고 이해해도 될까요? 2) 그러면 그 이후의 요청에서는 더이상 재생성되지 않고, 이 페이지를 클라이언트에게 전달 하나요? fallback: true 일 때, 빌드 타임에 사전 생성하지 않았던 경로의 접속이 들어왔습니다. 그 때, getStaticProps로 불러오는 데이터를 제외하고, 먼저 레이아웃을 내려준다고 이해했습니다. 그리고 추후에 Props만 따로 반환받아 페이지를 렌더링한다고 했는데, 그럼 받은 데이터를 가지고, CSR이 되는 건가요? 위 상황에서 CSR이 맞다면, 해당 내용은 검색 크롤러가 알아내지 못해 SEO에 불리할 것 같은데요. 아니면 검색 크롤러가 getStaticProps 데이터가 올때까지 기다리고 해당 내용도 반영해서 문제가 없나요? 감사합니다.
Vscode 터미널에서 npx eas build --platform android --profile development 명령어를 입력하면 Resolved "development" environment for the build. Learn more No environment variables with visibility "Plain text" and "Sensitive" found for the "development" environment on EAS. ✔ Using remote Android credentials (Expo server) ✔ Using Keystore from configuration: Build Credentials B93ecKpj4X (default) Compressing project files and uploading to EAS Build. Learn more ✖ Compressing project files Failed to upload the project tarball to EAS Build Reason: EPERM: operation not permitted, scandir '/Users/development/.Trash' Error: build command failed. GPT는 Trash를 우회해서 하라는데 우회해도 안되고.. .easignore 파일에 .Trash .DS_Store node_modules .git **/.Trash !./.Trash # 만약 현재 디렉토리에 있다면 포함시킴 를 작성해도 계속 같은 에러가 발생합니다ㅠ.ㅠ 어떻게 해결하면 될까요 ?
강의 이외에, 추가적으로 서버 컴포넌트에 대해 궁금증이 생겨 여러 블로그를 참고 하는 와중, 하나 헷갈리는 개념이 있어 여쭤 보려고 합니다. <알고 싶은 내용> 서버 컴포넌트의 등장 배경 중 "waterfall 문제" 라는 내용이 알맞는 내용인 지 궁금합니다. <과정> 제가 참고했던 여러 블로그에서 공통적으로 언급한 내용 중 하나가 "서버 컴포넌트의 등장 배경 중 하나로 클라이언트 컴포넌트의 waterfall 문제 " 라는 내용이 있었습니다. 그리고, 위의 문제는 서버 컴포넌트 도입 이후, 데이터 요청을 서버에서 사전에 처리하여 해결 되었다고 간단히 설명하고 마치는 내용이었습니다. <제가 헷갈리는 부분> 그렇다면 waterfall 문제는 결국, 서버 컴포넌트 이전의 SSR 방식으로도 해결 수 있는 문제가 아닐까? " 라는 의문이 들었습니다. 이유는 SSR 방식 역시 서버에서 데이터를 미리 가져와 HTML을 생성한 후 클라이언트에 전달하기 때문에, 서버 컴포넌트가 waterfall 문제를 해결했다면 기존 SSR 방식으로도 해결할 수 있지 않을까 하는 생각이 들었습니다. <결과> 위의 내용을 알아보기 위해 아래의 내용을 바탕으로 검색을 해봤지만, 확실한 대답을 찾지 못해 질문을 남겨봅니다. SSR 렌더링 방식에서 waterfall 문제가 발생하는 지의 여부 SSR과 RSC의 차이
기본 템플릿 생성 rafce 적용할 때 파일명 기준으로 객체 변수(NavBar) 생성 되는데 오타 때문에 삭제하고 재생성(Navbar)하면 처음 만들었던 이름 그대로 유지되는 습성이 있는데 삭제 하고 다시 만들때 바로 적용 되도록 환경 설정 따로 하는게 있는지 궁금합니다. Components 및 Page 폴더 파일 대소문자 구분 생성 이유가 따로 있는지 아니면 개인적인 개발 습관인지 답변 부탁드립니다.
수업 9분 50초 부근에서 " 함수를 인자로 받아서 로직을 결정 하는 형태가 전형적인 고차 함수이다." 라는 부분이 있습니다. 하지만 getOperaion 함수를 보면 Myfunction을 반환하지만 인자로 코드 조각을 받지 않고 getOperation 내부에서 로직을 작성하게 되는 형태인데, 그럼 getOperation 함수는 고차함수라고 부르기 어려운걸까요?? 고차함수의 특징은 함수형인터페이스를 파라미터로 받아서 클라이언트 코드쪽에서 로직(코드 조각)을 람다식으로 받아서 처리하는 형태를 고차함수라고 이해하고 있습니다. 하지만 getOperation은 파라미터로 String 타입 하나만 받고 람다식을 getOperation 내부에서 정의하고 있기에 코드 조각을 파라미터로 받지 않았으니 고차함수라고 보기 어려운걸까? 라는 의문점이 있습니다
