173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요. 추가 질문 달았는데 답변이 안 달려서 따로 올립니다. 섹션 7 학습 중 React dom 설치하고 로컬 서버 열었더니 이런 오류 메시지가 뜹니다. 대강 버전이 안 맞는다는 것 같은데 해결 방법을 모르겠습니다. 이거 답변 기다리느라 일주일 넘게 진도를 나가지 못하고 있습니다. 조속한 해결 부탁 드립니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 toolkit, saga를 사용하는데 saga에서 로그인정보 받을때 state가 이전 state가 아니라 proxy데이터가 나옵니다. saga에서 이런식으로 호출을 해주면 action 데이터도 잘 찍힙니다. function* login(action) { try { console.log("saga login"); console.log(action); // const result = yield call(loginAPI, action.data); yield delay(1000); yield put({ type: loginSuccessAction, payload: action.payload, }); } catch (err) { yield put({ type: loginFailureAction, // data: err.response.data, }); } } 그다음 리듀서에서 const userSlice = createSlice({ name: "user", initialState, reducers: { logIn: (state, action) => { state.isLoggedIn = true; state.me = action.payload; }, logOut: (state) => { state.isLoggedIn = false; state.me = null; }, loginRequestAction: (state) => { console.log("state", state); state.isLoggingIn = true; }, loginSuccessAction: (state, action) => { console.log("reducer login"); console.log("state", state); state.isLoggingIn = false; state.isLoggedIn = false; state.me = action.payload; state.me.nickname = "zzimzzim"; }, loginFailureAction: (state) => { state.isLoggingIn = false; state.isLoggedIn = false; }, logoutRequestAction: (state) => { state.isLoggingOut = true; }, logoutSuccessAction: (state) => { state.isLoggingOut = false; state.isLoggedIn = false; state.me = null; }, logoutFailureAction: (state) => { state.isLoggingOut = false; }, }, extraReducers: (builder) => builder .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.user, })) .addDefaultCase((state) => state), }); 위와같이 코드를 만들고 로그인을 해보면 action으로 로그인 정보를 잘 내려줍니다. 원래는 이전의 state (현 store데이터)를 받아오고 거기서 action데이터를 넣어서 업데이트해줘야하는데, state에서 proxy데이터가 내려와서 업데이트가 안되고 있습니다. ㅠ 리듀서에서 action 데이터 받고, state호출했을때, Proxy(Object) {type_: 0, scope_: {…}, modified_: false, finalized_: false, assigned_: {…}, …} [[Handler]]: null [[Target]]: null [[IsRevoked]]: true 이러한 경우에 reducer에서 state를 받아오는 방법이 있을까요? 혹시 코드가 이상하거나 틀렸다면 지적해주시면 감사하겠습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
https://choisuhyeok.tistory.com/57 요기에 잘 정리 되어있어서 제로초님 강의 보면서 툴킷으로만 작업하거나, thunk로 하지 않아도, toolkit + saga로 작업할 수 있습니다. 참고 부탁드립니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 깃헙에 saga가 아니라 createAsyncThunk로 작업이 되어있으신거같아서 궁금해서 여쭤봅니다. 깃헙에는 saga를 대체해서 toolkit에 내장되어있는 redux-thunk를 사용하신걸까요? 그렇다면 saga내용을 다 보고 thunk의 모양대로 수정해서 진행하게 되면 될지 궁금합니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
이번 강의에서 이미지 1장을 띄울때는 <img> 태그를 사용하셨습니다. 반면, 두 장 이상 이미지를 표시할 때에는 <Link> 컴포넌트 태그에 background-image 속성을 사용하여 이미지를 표시하셨는데, 혹시 제가 모르는 이점이 있는 것인지 궁금하여 질문 남기게 되었습니다.
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 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" } } 이렇습니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
현재 개발하는 환경이 13 버전인데 임포트가 되지 않네요
해결됨
Next + React Query로 SNS 서비스 만들기
다른 분 질문 내용과 강의에 따르면 (beforeLogin)으로 옮겨진 page.tsx가 잘 떠야 하는데 저는 not-found.tsx만 뜨네요. 왜 이러는지 제가 뭘 놓친건지 살펴보고 있는데 아직 못찾았습니다.. ( 혹시 저와 같은 경험이 있으신 분 / 해결하신 분 계신가요? )
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 어느 순간부터 vs코드에서 저장한 내용이 브라우저에서 적용이 안되고있습니다. 새로고침해도 수정한 로직이 적용되지 않은채여서, 처음에는 일시적인 에러인가 해서 그냥 ctr + c 로 껐다가 다시 npm run dev로 켜서 수정된것 브라우저에서 확인하고 했는데 이게 지속적으로 진행되다보니 어떤 문제가 있는건지도 모르겠고 답답해서 여쭤봅니다.ㅠ 노드모듈, .next파일 을 지웠다 다시 설치해보기도 해도 여전히 그대로라 문의 올려봅니다 ㅠ 어떤것 때문인지 짐작도 안가서 코드를 못 올리는점 참고부탁드립니다. 제로초님 코딩으 따라가면서 잘됐는데 이부분만 왜 갑자기 이러는지..;;
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요! 하나의 엔티티에 @ElementCollection 붙은 필드가 두 개 있는 경우를 시험해 보고 있습니다. @EntityGraph(attributePaths = {"a", "b"}) 이런 식으로 해서 테스트를 돌리면 org.hibernate.loader.MultipleBagFetchException: cannot simultaneously fetch multiple bags 과 같은 오류가 나는데 ElementCollection 두 개가 있는 경우는 하나의 쿼리로 모두 가져오는 방법은 없나요?
해결됨
Next + React Query로 SNS 서비스 만들기
해당 오류와 함께 유저 프로필 페이지 접속시 게시글을 불러오지 못합니다...!! 콘솔창에서는 해당 메시지와 함께 오류가 출력되는데 맨 밑에 d는 UserPosts.tsx 컴포넌트에서 찍어본 useQuery로 패칭한 데이터 찍어본것 입니다. getUserPosts.ts에서 받아온 res 값을 콘솔에 찍어봤습니다 제로초님 코드와 동일한데 어떤 이유에선지 유저 프로필 페이지 게시글을 못불러오는지 잘 모르겠어서 낑낑대다가 질문 드렸습니다...ㅠㅠ 감사합니다
미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Multer 이용하여 이미지 업로드 하면 다음 오류가 뜹니다 import React from 'react' import Dropzone from 'react-dropzone' import axiosInstance from '../utils/axios'; import PropTypes from 'prop-types'; const FileUpload = ({ onImageChange, images }) => { const handleDrop = async (files) => { let formData = new FormData(); const config = { header: { 'content-type': 'multipart/form-data' } } formData.append('file', files[0]); try { const response = await axiosInstance.post('/products/image', formData, config); onImageChange([...images, response.data.fileName]); } catch (error) { console.error(error); } } return ( <div className='flex gap-4'> <Dropzone onDrop={handleDrop}> {({ getRootProps, getInputProps }) => ( <section className='min-w-[300px] h-[300px] border flex items-center justify-center' > <div {...getRootProps()}> <input {...getInputProps()} /> <p className='text-3xl'>+</p> </div> </section> )} </Dropzone> {images.map((image, index) => ( <div key={image+index}> {/* image 이름과 index를 조합하여 고유한 키를 생성 */} <img className='min-w-[300px] h-[300px]' src={`${import.meta.env.VITE_SERVER_URL}/${image}`} alt={image} /> </div> ))} </div> ) } FileUpload.propTypes = { // onImagesChnage: PropTypes.bool.isRequired, onImageChange: PropTypes.any, images: PropTypes.any, }; export default FileUpload
해결됨
기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)
안녕하세요. 강의를 수강중인 수강생입니다. 혹시 컴포넌트들을 만들때엔 타입스크립트 tsx가 아닌 jsx를 사용하시는데, 이러한 이유가 있을까요? 추가적으로 React.FC에 대해 공부하다보니 지양한다는 글들이 많은데, 어떻게 생각하시는지 궁금합니다. 감사합니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, 제로초님. 사진 크게보기 modal을 보던 중 궁금한게 있어서 질문 드립니다. 사진을 크게 보기 위해 페러렐 라우터와 인터셉팅 라우터를 사용한다고 하셨는데 인터셉팅 라우터를 사용하기 위해선 @modal/[username]이 아니라 @modal/(.)[username] 이 되어야 하는게 아닌지 질문 드려요! 뿐만 아니라 위에 같이 (.)을 붙이지 않았을 경우에 http://localhost:3000/elonmusk/status/1/photo/1 위 URL에서 새로고침을 하게되면 인터셉팅 되지 않은 (afterLogin)/[username]/status/[id]/photo/[photoId]/page.tsx 가 나타나야 하고 이는 Home 화면을 보여주기로 하였는데 이 부분도 동작하고 있는 것 같지 않습니다. 혹시 원래 동작하는데 제가 놓친 부분이 있는걸까요?
해결됨
Airflow 마스터 클래스
안녕하세요. 외부 파이썬 함수 수행하기가 안되어서 문의드리게 되었습니다. 저는 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 + React Query로 SNS 서비스 만들기
안녕하세요 ! Next.js에 Custom hook 디자인 패턴을 사용하는 것에 대해 어떻게 생각하시나요 ?! hooks 폴더를 페이지 단위로 두어 RCC 컴포넌트 내부 로직을 hooks으로 관리하는 Custom hook 패턴과 아토믹을 함께 사용하려고 하고 RSC 컴포넌트에서는 아토믹 패턴을 사용하려고 하는데 이렇게 hooks을 next에서 사용해도 괜찮은 건지 고민이 들어서 질문 드립니다 ! (정답이 없는 문제인 건 알지만 어떻게 생각하시는지 궁금하여 질문드립니다.)
미해결
Next + React Query로 SNS 서비스 만들기
dependencies에 next-auth버전입니다 "next-auth": "^4.24.7", 오류를 보면 import NextAuth from "next-auth"; import CredentialsProvider from "next-auth/providers/credentials"; import { NextResponse } from "next/server"; export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ CredentialsProvider({ async authorize(credentials) { const authResponse = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}}/api/login`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: credentials.username, password: credentials.password, }), } ); if (!authResponse.ok) { return null; } const user = await authResponse.json(); console.log("user", user); return { email: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], }); 이게 제 코드인데 제 코드에서는 credentials 속성이 없다고 뜨는데 실행해보면 Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'GET') Source src/auth.ts (6:14) @ GET 4 | 5 | export const { > 6 | handlers: { GET, POST }, | ^ 회원가입시 이런 오류가 뜹니다 오류와 대조를 하여 공식문서를 보면 현재 여기 credentials의 코드가 바뀐것같은데 제 코드에서 어떻게 수정을 해줘야할지 모르겠습니다. vscode자체 오류로도 credentials' 속성이 '{ authorize(credentials: Record | undefined): Promise; }' 형식에 없지만 'Pick>, "credentials" | "authorize"> 형식에서 필수입니다. 라고 뜨는것으로 보아 제 생각에도 공식문서에있는 credentials 속성을 넣어줘야하는것같은데 어떤식으로 해야할지 잘 모르겠습니다. route.ts 역시 // api auth와 관련된 주소는 전부 nextauth가 관리 export { GET, POST } from "@/auth"; 이런식으로 잘 넣어주었구요. 어떤식으로 수정을해야 GET오류가 나지 않을까요 ?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 알려주신 대로 작성했는데 해당 부분에서 Cannot read properties of undefined (reading 'map') 이라는 오류가 발생합니다.ㅠㅠ 오타가 있는것 같지는 않은데..어디가 문제일까요..?
