이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.
안녕하세요 제로초님 antd 라이브러리를 사용하니까 Server Error SyntaxError: Cannot use import statement outside a module This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack <unknown> file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/node_modules/rc-util/es/hooks/useMemo.js (1) Next.js rc-util/es/hooks/useMemo file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/pages/index.js (8862:18) Next.js eval /node_modules/antd/es/config-provider/index.js ./node_modules/antd/es/config-provider/index.js file:///C:/Users/%EC%A0%95%EC%9A%A9%EC%B1%84/Desktop/%EA%B3%B5%EB%B6%80/%EA%B0%95%EC%9D%98/react-nodebird/prepare/front/.next/server/vendor-chunks/antd.js (570:1) Next.js eval /node_modules/antd/es/grid/col.js 이러한 에러들이 나왔고 검색해보니 next.config.js 파일에 const nextConfig = { /* config options here */ // reactStrictMode: true, swcMinify: true, transpilePackages: [ "antd", "@ant-design", "rc-util", "rc-pagination", "rc-picker", "rc-notification", "rc-tooltip", ], compiler: { styledComponents: true, }, }; module.exports = nextConfig; 이런식으로 넣어주면 괜찮다는 것을 보고 실행해보니 정상적으로 나오는것을 확인했습니다. 그런데 이제는 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: 이런 에러가 나오고 있는데요.. 원래 antd최신버전을 쓰고 있다가 깃헙의 제로초님과 동일하게 ^5.8.3" 버전으로 수정해봤는데도 동일한 이슈가 발생하더라구요 혹시 다른 부분을 수정해야할지 알 수 있을까해서 차장보다 문의 드립니다. 참고로 현재 package.json은 { "name": "react-nodebird", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "author": "", "license": "MIT", "dependencies": { "@ant-design/icons": "^5.3.6", "@reduxjs/toolkit": "^2.2.3", "antd": "^5.8.3", "next": "^14.2.3", "next-redux-wrapper": "^8.1.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-hook-form": "^7.51.3", "react-redux": "^9.1.1", "react-slick": "^0.30.2", "redux": "^5.0.1", "styled-components": "^6.1.8" }, "devDependencies": { "eslint": "^8.57.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2" } } 이렇습니다. 감사합니다.
다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요. 왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )
안녕하세요 제로초님 어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다. 새로고침해도 수정한 로직이 적용되지 않은채여서, 처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가 다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ 노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ 어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;
해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다 제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다
안녕하세요, 제로초님. 사진 크게보기 modal을 보던 중 궁금한게 있어서 질문 드립니다. 사진을 크게 보기 위해 페러렐 라우터와 인터셉팅 라우터를 사용한다고 하셨는데 인터셉팅 라우터를 사용하기 위해선 @modal/[username]이 아니라 @modal/(.)[username] 이 되어야 하는게 아닌지 질문 드려요! 뿐만 아니라 위에 같이 (.)을 붙이지 않았을 경우에 http://localhost:3000/elonmusk/status/1/photo/1 위 URL에서 새로고침을 하게되면 인터셉팅 되지 않은 (afterLogin)/[username]/status/[id]/photo/[photoId]/page.tsx 가 나타나야 하고 이는 Home 화면을 보여주기로 하였는데 이 부분도 동작하고 있는 것 같지 않습니다. 혹시 원래 동작하는데 제가 놓친 부분이 있는걸까요?
안녕하세요. 외부 파이썬 함수 수행하기가 안되어서 문의드리게 되었습니다. 저는 Pycharm이 익숙해서 Pycharm으로 하고 있었는데, Pycharm의 경우 .env파일이 인식이 안되는 걸까요..? common 모듈을 발견하지 못하네요... .env파일을 아래와 같이 설정하였고 dags_python_import_ func.py 에서도 Enable EnvFile에 체크표시를 하였는데 여전히 해당 모듈을 읽지 못하네요...ㅠㅠ 혹시 Pycharm의 경우 .env파일을 다르게 설정해야하는 걸까요...?
안녕하세요! 차근차근 잘 보고 있습니다. 선생님이랑 똑같이 따라하고 있는데 저는 자꾸 에러가 나서요ㅠㅠ ".logo_naver"가 없어진거 같아서 다른걸 붙여서 했는데도 오류가 나는데 뭐가 잘못된 걸까요ㅠㅠㅠㅠ 답변이 선생님이랑은 다르게 이렇게 나와서요ㅠㅠ 똑같이 따라하는데 뭐가 잘못된 건지 모르겠어요ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 쌤 인프런, 유튜브 강의 보면서 잘 만들어 가고 있었는데 현재 코드에서 아무리 수정을 해도 css를 잘못 가져오는건지 오류가 생겨서 답답해서 질문 들고 왔습니다 현재 css 코드 찾기 좀 부탁드릴게요ㅠㅠ 안되는 항목 ✔ 연예뉴스 -> 내용을 못 가져옴 ✔ 스포츠뉴스 -> 제목, 날짜, 내용 다 못 가져옴 css를 여러개 바꿔서 넣어봐도 저는 자꾸 찾을 수 없다고 크롤링 됩니다 도와주세요,,,,,,, #네이버기사 크롤링 엑셀저장 import requests from bs4 import BeautifulSoup import time import pyautogui from openpyxl import Workbook #사용자입력 keyword = pyautogui.prompt("검색어를 입력하세요") lastpage = int(pyautogui.prompt("몇 페이지까지 크롤링 할까요?")) #엑셀 생성 wb = Workbook() #엑셀시트 생성 ws = wb.create_sheet(keyword) #열 너비 조절 ws.column_dimensions['A'].width = 60 ws.column_dimensions['B'].width = 30 ws.column_dimensions['C'].width = 60 ws.column_dimensions['D'].width = 150 #행 번호 row = 1 #페이지 번호 pageNum = 1 for i in range(1, lastpage*10, 10) : print(f"{pageNum}페이지 크롤링중입니다 =================") response = requests.get(f"https://search.naver.com/search.naver?where=news&query={keyword}&sm=tab_opt&sort=1&photo=0&field=0&pd=3&ds=2024.04.11&de=2024.15.20&news&query={keyword}&start={i}") html = response.text soup = BeautifulSoup(html, 'html.parser') articles = soup.select("div.info_group") #뉴스기사 div 10개 추출 for article in articles: links = article.select("a.info") #리스트 time.sleep(0.7) if len(links) >= 2: #링크가 2개 이상이면 url = links[1].attrs['href'] #두번째 링크의 href를 추출 response = requests.get(url, headers={'User-agent': 'Mozilla/5.0'}) html = response.text soup_sub = BeautifulSoup(html, 'html.parser') content = soup_sub.select_one("#newsct_article") if content: content_text = content.get_text(separator="\n") else: content_text = "내용을 찾을 수 없습니다." title = None date = None #만약 연예 뉴스라면 if "entertain" in response.url: title = soup_sub.select_one(".end_tit") date = soup_sub.select_one("div.article_info > span > em") content = soup.select_one("#articeBody") #만약 스포츠 뉴스라면 elif "sports" in response.url: title = soup_sub.select_one(".Main_article_title") content = soup.select_one("._article_content") else: title = soup_sub.select_one(".media_end_head_headline") date = soup_sub.select_one("span.media_end_head_info_datestamp_time._ARTICLE_DATE_TIME") #본문 내용안에 불필요한 div, p제거 divs = content.select("div") for div in divs: div.decompose() paragraphs = content.select("p") for p in paragraphs: p.decompose() print("=======제목======= \n", title.text.strip() if title else "제목을 찾을 수 없습니다.") print("=======날짜======= \n", date.text if date else "날짜를 찾을 수 없습니다.") print("=======URL======= \n", url) print("=======내용======= \n", content.text.strip() if content else "내용을 찾을 수 없습니다") # 'else' 블록에서 'date' 변수 정의는 여기서 끝나도록 수정 ws['A1'] = '제목' ws['B1'] = '날짜' ws['C1'] = 'URL' ws['D1'] = '내용' ws[f'A{row}'] = title.text.strip() if title else "제목을 찾을 수 없습니다." ws[f'B{row}'] = date.text.strip() if date else "날짜를 찾을 수 없습니다." ws[f'C{row}'] = url ws[f'D{row}'] = content_text.strip() if content else "내용을 찾을 수 없습니다." row=row+1 #마지막 페이지 여부 확인하기 next_button = soup.select_one("a.btn_next") if next_button: isLastPage = next_button.attrs.get('aria-disabled', None) if isLastPage == 'true': print("마지막 페이지 입니다.") break pageNum = pageNum+1 wb.save(f"{keyword}_4월_뉴스기사_크롤링(4)_내용까지_0411~0415(3).xlsx")
안녕하세요 ! Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요 ?! hooks 폴더를 페이지 단위로 두어 RCC 컴포넌트 내부 로직을 hooks으로 관리하는 Custom hook 패턴과 아토믹을 함께 사용하려고 하고 RSC 컴포넌트에서는 아토믹 패턴을 사용하려고 하는데 이렇게 hooks을 next에서 사용해도 괜찮은 건지 고민이 들어서 질문 드립니다 ! (정답이 없는 문제인 건 알지만 어떻게 생각하시는지 궁금하여 질문드립니다.)
Tab.tsx에서 "추천"과 "팔로우 중"을 클릭하면 상태가 "rec", "fol"로 변경되는 것을 확인했습니다. 이후 TabProvider.tsx 파일을 만들고 <TabProvider>로 상태를 공유할 하위 컴포넌트를 감싸는 것 까지 되었습니다. TabProvider.tsx에 있는 state를 하위 컴포넌트가 구독하여 상태 공유를 할 수 있는 것으로 알고있습니다. 여기서 질문입니다. TabProvider.tsx로 감싼 하위 컴포넌트인 Tab.tsx에서 상태가 변경되었을 때, TabProvider에 변경된 상태를 공유할 수 있는지 궁금합니다. (자식 컴포넌트에서 상태가 변경되면, Provider 상태도 변경할 수 있는지) Post.tsx에서 상태공유 확인하는데, Tab.tsx에서 상태가 변경되어도 Provider에서는 변경되지 않아 질문 올립니다.. import { TabContext } from "../home/_component/TabProvider"; const Post = () => { const { tab } = useContext(TabContext); return ( <> <div>TabContext Value = {tab}</div> </> ); };
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요 강사님은 코드 수정 후 브라우저에서 바로바로 확인이 되는 것 같은데 저는 코드를 수정할 때 마다 아래의 오류가 발생해서 매번 다시 yarn dev를 해줘야 수정한 내역이 확인이 되다 보니 강의를 따라 진행 하는대 집중이 되질 않네요. 혹시 아래의 에러가 발생 되지 않게 하는 방법이 있는 것인지 문의 드립니다. 감사합니다. 수고하세요. =================================================================== ⨯ [Error: UNKNOWN: unknown error, open 'D:\study\react\workspace\yt-music-clone-next\.next\static\chunks\app\layout.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'open', path: 'D:\\study\\react\\workspace\\yt-music-clone-next\\.next\\static\\chunks\\app\\layout.js' ===================================================================
강의를 듣던 중에 프라이빗 폴더에 관한 궁금증이 생겼습니다. 단순 중복 제거 컴포넌트를 모아두는 폴더로 사용한다. 클라이언트 컴포넌트만 넣어두는 폴더로 사용한다. 1번과 2번의 용도로만 사용하면 되는 것인가요?? 그리고 View마다 프라이빗 폴더를 생성해서 파일을 정리해도 괜찮을까요??
안녕하세요 선생님 대학교에서 캡스톤디자인을 수행하고 있는 학생입니다. 판결문에서 사건의 원인,판결 결과,가중·감소 처벌 요소,키워드를 추출하고 싶은데 어떤 기술을 사용해야할지 막막하여 질문올리게 되었습니다. 거대언어모델은 지양하라고 교수님께서 말씀하셨습니다..ㅜ 조언을 주신다면 감사하겠습니다.
