안녕하세요. 좋은 강의 잘 듣고 있습니다. "2.16) SSG 4. 폴백옵션 설정하기" 강의를 듣다가 궁금한 점이 생겨서 질문남깁니다! 홈 경로는 getStaticProps 함수를 사용해 빌드 타임에 사전 렌더링이 이루어지고 있습니다. Next App을 빌드 후에 홈 / 경로에서 네트워크 탭을 살펴보다가 현재 화면 내에서 인덱스에 해당하는 Json 응답을 받은 것을 보았습니다. 하나를 열어보니 아래와 같습니다. // 6.json?id=6 { "pageProps": { "book": { "id": 6, "title": "프론트엔드 성능 최적화 가이드", "subTitle": "웹 개발 스킬을 한 단계 높여 주는", "description": "...", "author": "유동균", "publisher": "인사이트", "coverImgUrl": "https://shopping-phinf.pstatic.net/main_3562758/35627588630.20230704084326.jpg" } }, "__N_SSG": true } 제가 이해한 바로는 / 경로에 진입해서 초기 요청이 이루어지면 서버는 사전에 렌더링 된 HTML 페이지를 응답한 이후 현재 페이지에 필요한 모든 자바스크립트 파일을 JS Bundle로 전달합니다. 네트워크 탭에서 localhost HTML 문서를 확인하고 이후에 http://localhost:3000/_next/static/chunks/pages/book/%5Bid%5D-4bfc2418ccf58b5f.js JS Bundle을 응답받은 것을 확인했습니다. 그리고 현재 페이지에서 이동 가능성이 있는 페이지들에 한해 사전에 요청이 이루어집니다. js 파일이 전달되어야 하지만 북( /book/[id] )페이지가 SSG 방식으로 사전 렌더링이 이루어지므로 데이터를 뿌려주기만 하면 되니까 json 형식으로 응답이 온 것이 아닐까 생각했습니다. (북페이지를 SSR 방식으로 바꾸니 북페이지의 js 파일이 전달되었습니다.) 이후 Link 컴포넌트인 도서 목록 중 하나를 클릭하면 자바스크립트 코드를 실행시켜 컴포넌트를 교체하는 CSR 방식으로 페이지를 이동합니다. Q. SSG 방식에서는 사전 렌더링의 응답으로 Json 형식으로 전달받아 새로운 페이지를 보여주는 제가 이해하고 있는 방식이 맞는지 궁금합니다. 다른 하나는, 현재 화면에서 네트워크 요청(예: 6.json?id=6)이 무수히 많이 이루어진 것을 보았습니다. 그래서 Link 컴포넌트의 prefetch 값을 false로 설정하여 각 컴포넌트에 마우스를 호버했을 때 프리페칭이 이루어지도록 했습니다. 그러자 마우스를 호버하면 프리페칭이 이루어졌지만 마우스를 호버할 때마다 요청이 이루어져 의문이 생겼습니다. Q. 잦은 요청이 서버에 부하를 주는 것은 아닌지, 이를 개선할 수 있는 방법이 있는지 궁금합니다. 긴 글 읽어주셔서 감사합니다. 아래 코드 첨부하였습니다! 📄 /pages/index.tsx import SearchableLayout from "@/components/Searchable-layout"; import BookItem from "@/components/Book-item"; import { InferGetStaticPropsType } from "next"; import fetchBooks from "@/lib/fetch-books"; import style from "./index.module.css"; import fetchRandomBooks from "@/lib/fetch-random-books"; export const getStaticProps = async () => { const [allBooks, recoBooks] = await Promise.all([ fetchBooks(), fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks, }: InferGetStaticPropsType<typeof getStaticProps>) { return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> {recoBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> ); } Home.getLayout = (page: NextPageWithLayout) => { return <SearchableLayout>{page}</SearchableLayout>; }; 📄 /pages/book/[id].tsx /* eslint-disable jsx-a11y/alt-text */ /* eslint-disable @next/next/no-img-element */ import fetchBook from "@/lib/fetch-one-book"; import style from "./[id].module.css"; import { GetStaticPropsContext, InferGetStaticPropsType } from "next"; export const getStaticPaths = () => { return { paths: [ { params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }, ], fallback: "blocking", }; }; export const getStaticProps = async (context: GetStaticPropsContext) => { const { id } = context.params!; const book = await fetchBook(Number(id)); return { props: { book, }, }; }; export default function Page({ book, }: InferGetStaticPropsType<typeof getStaticProps>) { if (!book) return "문제가 발생했습니다. 다시 시도해주세요."; const { title, subTitle, description, author, publisher, coverImgUrl } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); }
프로그래밍 시작하기 : 도전! 45가지 파이썬 기초 문법 실습 (Inflearn Original)
In[ ]으로 뜨지 않고 In 없이 [ ]만 뜸 ESC와 Enter를 눌러도 파란색으로만 뜸 초록색으로 뜨지 않음 Help에 Show Keyboard Shortcuts를 들어갔을 때 강사님한테 뜨는 것과 기본적으로 양과 구체성이 다름 상단에 Insert 메뉴가 없음 이것들은 버전의 차이일까요?
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.) - 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~ - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. 이전에 수업에 관한 코드는 pdf파일로 공유 받았는데 실전 프로젝트 코드는 어디서 받을수있나요????
Next 강의에서 App Router 실습을 위해서 강사님께서 올려주신 자료를 다운받으면 위 사진과 같이 강의와는 다르게 Promise 타입이 존재하여 searchParams.q에 오류가 발생하게 됩니다. 그래서 Promise 타입을 없애면 오류는 사라지지만 빌드타입에 오류가 아래와 같이 발생합니다. 어떻게 해결하면 될까요?
안녕하세요 실습 진행 중 wsl을 이용해서 가상공간에서 작업을 진행하시는 것 같은데 도커데스크탑을 깔고 그 안에서 이미지들을 다운받는 식으로 작업을 하는 것과 차이가 있을까요? 제가 알기로는 터미널에서 코드 쳐서 다운 받는 것과 도커데스크탑에서 이미지 찾아서 다운 받는 것과의 차이는 없는 걸로 알고 있어서요 혹시 wsl로 작업을 하지않고 컴퓨터 두 대로 진행하려면 어떻게 해야될까요? 같은 네트워크에 있는 상태 입니다.
eslint를 설치하면 이전과 달리 esling.config.mjs로 파일이 설정되며 extend나 rules의 활용이 기존과 다른 방식으로 진행되며 충돌이 일어납니다. stackoverflow나 chatGPT의 도움을 받아 동작은 되지만, 이 부분 다시 설명해주셔야 하는게 아닌지요. (기존에 설명된 부분들도 코드나 적용방식이 달라져서, 플러그인을 활용하도록 합니다) 이 부분을 스스로 혼자 찾아서 수정할 수 있는 역량이 있다면 이 강의를 듣지 않겠지요. 하루 종일 한단원도 나가지 못하고 .. 해결하려다 포기하게 되네요. 2년전에 산 강의를 시간이 없어 이제 듣는 제 문제도 있겠지만.. 이 부분 상세한 설명을 넣어주셔야 할것 같아요.
# Quiz) 사이트별로 비밀번호를 만들어주는 프로그램을 작성하시오 # 예) http://naver.com # 규칙1 : http:// 부분은 제외 => naver.com # 규칙2 : 처음 만나는 점(.) 이후 부분은 제외 => naver # 규칙3 : 남은 글자 중 처음 세자리 + 글자 갯수 + 글자 내 'e' 갯수 + "!"로 구성 # 예) 생성된 비밀번호 : nav51! domain = "http://naver.com" sitename = domain[7:(domain.find("."))] first3 = sitename[:3] length = len(sitename) count_e = sitename.count("e") print(f"생성된 비밀번호 : {first3}{length}{count_e}!")
안녕하세요 스타트코딩님! 수업 잘 듣고 있는 학생입니다. 질문이 있어 글 남깁니다. 수업 듣기 전에 혼자 해볼 때 저는 soup를 사용하지 않고 find_element를 사용해서 이렇게 코드를 작성했는데 뭐가 다른 걸까요? from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys import time import pandas as pd driver = webdriver.Chrome() driver.get('https://search.shopping.naver.com/search/all?query=%EB%8B%AD%EA%B0%80%EC%8A%B4%EC%82%B4') # 스크롤 전 높이 last_height = driver.execute_script('return document.body.scrollHeight') while True: # 스크롤 끝까지 내리기 driver.execute_script('window.scrollTo(0, document.body.scrollHeight)') # 대기 시간 줘야됨 !!! time.sleep(1) # 스크롤 후 높이 after_height = driver.execute_script('return document.body.scrollHeight') # 비교 (if, break) if last_height == after_height: break # 스크롤 전 높이 업데이트 last_height = after_height products = driver.find_elements(By.CSS_SELECTOR, '.product_item__MDtDF') data = [] for product in products: name = product.find_element(By.CSS_SELECTOR, '.product_title__Mmw2K').text link = product.find_element(By.CSS_SELECTOR, '.product_title__Mmw2K > a').get_attribute('href') price = product.find_element(By.CSS_SELECTOR, '.price_num__S2p_v').text.split('원')[0].replace(',', '') data.append([name, link, int(price)]) df = pd.DataFrame(data, columns = ['상품명', '상세페이지링크', '가격']) df.to_excel('네이버쇼핑.xlsx')
안녕하세요. 강의를 듣고 pyside로 데스크톱 어플리케이션을 만들고 있는 중에 있습니다. QGridLayout 안에 위젯들을 2열로 배치하였는데요, 이 위젯들이 위젯 아이템들 중 가장 너비가 넓은 것에 맞춰 같은 너비를 차지하면서도 위젯들이 윈도우 전체를 차지하지 않는(=커지거나 작아지지 않는) 방법이 있나요..? 생각보다 어려워서 며칠 째 끙끙대다 결국 질문남겨봅니다.
