172만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님! 강의 잘 듣고 있습니다. 화면이 mount 되었을 때는 최상단에 존재하는 page.tsx에 의해 localhost:3000 URL가 나오고 있는 상황입니다. 그런데 처음 mount 되었을 때 localhost:3000/login 형태의 URL을 가지려고 한다면 어떤 방법으로 해야할지 궁금합니다! 제가 생각한 방법은 아래와 같은데 좀 더 좋은 방법이 있을까요? 1. 최상단에 존재하는 page.tsx에서 useEffect 내부에 router.push('/login') 을 한다. next 에서 제공하는 redirect 기능을 사용한다.
해결됨
만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링
이 에뮬레이터 사용하지 않고 터미널 이용해도 수업 진행에 지장 없을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. Route 부분에 오류가 생겼는데 어떤 부분이 잘못되었는지 모르겠어서 질문 남깁니다. Route 함수에 path 경로를 설정할 때, 동적경로를 설정하고 싶으면 ":"과 함께 파라미터의 값을 적어주는 것으로 압니다. 강사님께서 적은 코드와 제 코드가 다른 점이 없는데, 저는 해당 url에 접근했을 때 url경로에 ':'이 포함되어서 나옵니다. 구글링+gpt를 사용해서 해당 오류를 고치려고 해보았지만 찾을 수 없는 상태입니다. 어떤 부분이 문제일까요? import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; import Home from "./Pages/Home"; import New from "./Pages/New"; import Diary from "./Pages/Diary"; import Edit from "./Pages/Edit"; import Notfound from "./Pages/Notfound"; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.data.id)); default: return state; } } const mockData = [ { id: 1, createdData: new Date("2024-06-12").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdData: new Date("2024-06-11").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createdData: new Date("2024-05-11").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); // 새로운 일기 추가 const Create = (createdData, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdData, emotionId, content, }, }); }; // 기존 일기 수정 const Update = (id, createdData, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdData, emotionId, content, }, }); }; // 기존 일기 삭제 const Delete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.Provider value={{ Create, Update, Delete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App;
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 멋진 강의 잘 듣고 있습니다. Todo에서 ReadComponent.js 안에서 read 할때 const makeDiv = () => () 와 같이 Arrow Function을 사용해서 간단하게 표현해주셨는데요, 수정할때도 간단하게 사용해보고 싶어서 Product의 ModifyComponent.js 에서 아래와 같이 만들어 사용해봤습니다. {makeDiv("name", product.pname, "text", handleChangeProduct)} {makeDiv("description", product.pdesc, "text", handleChangeProduct)} {makeDiv("price", product.price, "number", handleChangeProduct)} const makeDiv = (title, value, type, handleChangeProduct) => ( <div className="flex justify-center"> <div className="relative mb-4 flex w-full flex-wrap items-stretch"> <div className="w-1/5 p-6 text-right font-bold">{title}</div> <input className="w-4/5 p-6 rounded-r border border-solid border-neutral-300 shadow-md" name={title} type={type} value={value} onChange={handleChangeProduct} ></input> </div> </div> ); 만들어보니까, price(넘버)는 수정이 되는데, pname과 pdesc는 수정이 안되더라구요, readOnly가 먹혀있었습니다. text와 number가 다른걸까요... 수정이 안되는 이유가 뭔지 궁금합니다ㅠ 추가로, const makeDiv 는 return 아래에 추가를 해주셨는데, return 위에가 아니라 return 아래에 추가한 이유도 궁금합니다. 확인 부탁드립니다. 감사합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다른 부분에서 화살표함수 만들면 제대로 만들어지는데 이부분에서만 화살표함수 모양이 다릅니다.
미해결
웹 게임을 만들며 배우는 React
const Try = require('./Try'); 이렇게 불러오면 게임 실행은 되는데 빨간줄이 그어져있어요. 이미 포함된 파일 이름이라는 오류라네요.. './' 지우면 빨간줄은 사라지는데 코드가 실행되지 않네요. 빨간줄 무시하는 게 나을까요?
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요. 강의와는 무관한 질문이지만 본 강의 수강 완료 후 혼자서 프로젝트를 하고 있습니다. 현재 구글 리뷰 크롤링 & 스크랩중인데요. 해당 에러가 발생하는 이유를 도무지 찾을 수 가 없어서 질문 드립니다... 여러 사이트를 크롤링 해보고 엑셀을 생성 해 보았지만 왜 이런 에러가 발생하는지 로그를 봐도 제대로 표시가 안되니깐 찾기가 힘드네요. 구글 리뷰 사이트만 20여개 스크랩 했었고 엑셀도 제대로 생성 되었으니 스크랩 코드 자체에는 문제가 없는거 같습니다. 다만 이 부분에서만 문제가 생깁니다. ### 에러 발생 로그 [2024-06-12 09:42:59,954] [ERROR utils.py:179] >> Traceback (most recent call last): File "scraper\scrap_crawlers.py", line 1365, in get_review_details File "scraper\utils.py", line 202, in create_xlsx_file File "scraper\utils.py", line 181, in create_xlsx_file File "pandas\util\_decorators.py", line 333, in wrapper File "pandas\core\generic.py", line 2417, in to_excel File "pandas\io\formats\excel.py", line 952, in write File "pandas\io\excel\_openpyxl.py", line 490, in write cells File "openpyxl\cell\cell.py", line 218, in value File "openpyxl\cell\cell.py", line 197, in bind value File "openpyxl\cell\cell.py", line 165, in check_string openpyxl.utils.exceptions.IllegalCharacterError: 동생한테추천받았는데이렇게편한어플이있다니너무좋아요.현금비율은좋지않지만 신경많이안써도되서괜찮네요~ cannot be used in worksheets. During handling of the above exception, another exception occurred: ### cannot be used in worksheets. 이놈이 말썽이네요... 아래와 같이 테스트 케이스 만들어서 적용했을 때는 제대로 작동했었습니다. import asyncio from scraper.utils import create_xlsx_file, save_to_xlsx DEFAULT_NAME = "test" async def main(): data = { "message": "동생한테추천받았는데이렇게편한어플이있다니너무좋아요.현금비율은좋지않지만 신경많이안써도되서괜찮네요~" } xlsx_file = await create_xlsx_file( data, file_name=DEFAULT_NAME, sheet_name=DEFAULT_NAME ) await save_to_xlsx(xlsx_file, DEFAULT_NAME) asyncio.run(main()) # utils.py # 엑셀 가로 폭 조정하는 함수 async def calculate_dimension(worksheet: Worksheet) -> None: try: for column_cells in worksheet.iter_cols(): length = max(len(str(cell.value)) for cell in column_cells) adjusted_width = (length + 2) * 1.2 # 조정된 폭 계산 column_letter = get_column_letter(column_cells[0].column) worksheet.column_dimensions[column_letter].width = adjusted_width except Exception as e: message = f"엑셀 폭 조정 중에 예외 발생: '\n{e}" logger = await get_logger() logger.error(message) print(message) raise e # 엑셀에 서식 스타일 지정하는 함수 async def cell_pattern_fill( df: pd.DataFrame, worksheet: Worksheet, head_fill_color: str = "4472C4", head_font_color: str = "FFFFFF", body_fill_color: str = "D9E1F2", body_font_color: str = "000000", head_border_color: str = "2E5C99", body_border_color: str = "B4C6E7", fill_type: fills = "solid", ) -> None: try: # Define border styles thin_border_head = Border( left=Side(border_style="thin", color=head_border_color), right=Side(border_style="thin", color=head_border_color), top=Side(border_style="thin", color=head_border_color), bottom=Side(border_style="thin", color=head_border_color), ) thin_border_body = Border( left=Side(border_style="thin", color=body_border_color), right=Side(border_style="thin", color=body_border_color), top=Side(border_style="thin", color=body_border_color), bottom=Side(border_style="thin", color=body_border_color), ) # Set header row style for row in worksheet.iter_rows( min_row=1, max_row=1, min_col=1, max_col=df.shape[1] ): for cell in row: cell.fill = PatternFill( start_color=head_fill_color, end_color=head_fill_color, fill_type=fill_type, ) cell.font = Font(color=head_font_color, bold=True) cell.border = thin_border_head # Set body row style for i, row in enumerate( worksheet.iter_rows( min_row=2, max_row=worksheet.max_row, min_col=1, max_col=df.shape[1] ) ): for cell in row: if i % 2 == 0: cell.fill = PatternFill( start_color=body_fill_color, end_color=body_fill_color, fill_type=fill_type, ) cell.font = Font(color=body_font_color) cell.border = thin_border_body except Exception as e: message = f"엑셀 서식 지정 중에 예외 발생: '\n{e}" logger = await get_logger() logger.error(message) print(message) raise e # 본 강의 drf 엑셀 생성 파트를 참고해서 만든 엑셀 생성 함수 async def create_xlsx_file( data: Union[Dict, List], file_name: str = DEFAULT_DIR_NAME, sheet_name: str = DEFAULT_DIR_NAME, ) -> BytesIO: df = pd.json_normalize(data) io = BytesIO() io.name = file_name try: writer = pd.ExcelWriter(io, engine="openpyxl") # noqa df.to_excel( writer, index=False, engine="openpyxl", sheet_name=sheet_name, ) workbook = writer.book worksheet = workbook.active tasks = [ calculate_dimension(worksheet), cell_pattern_fill(df, worksheet), ] await tqdm.gather(*tasks, desc=f" 엑셀 파일 생성중") writer._save() # noqa except Exception as e: message = f"엑셀 생성 중에 예외 발생: '\n{e}" logger = await get_logger() logger.error(message) print(message) raise e io.seek(0) return io # 엑셀 저장 함수 async def save_to_xlsx( xlsx_file: BytesIO, dirname: str = DEFAULT_DIR_NAME, ): output_path = BASE_DIR / "스크랩_결과" / "엑셀" / dirname output_path.mkdir(parents=True, exist_ok=True) now = datetime.datetime.now() timestamp = now.strftime("%Y-%m-%d_%H_%M") filename = f"{xlsx_file.name}_{timestamp}" extension = ".xlsx" file_path = output_path / (filename + extension) try: async with aiofiles.open(file_path, "wb") as f: await f.write(xlsx_file.getvalue()) except Exception as e: message = f"엑셀 파일 저장 중에 예외 발생: '{filename}'\n{e}" logger = await get_logger() logger.error(message) print(message) raise e 전체적인 함수는 위와 같으며 엑셀 생성 중에 에러가 발생하였으니 create_xlsx_file 함수 부분에서 해결을 해보아야 할것 같습니다. 아니면 혹시 엑셀의 행을 생성 중에 에러가 발생하였을 때 해당 행은 스킵하고 이어서 진행하게 하는 방법이 있을까요?? "raise e"을 발생 시키지 않아도 엑셀 생성 작업 스킵이 되지않고 작업 자체에 문제가 생기네요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
onChangeContents 함수 부분에 넣었을때 처음엔 버튼이 노란색으로 변했습니다만 이후 onChangeWriter 와 onChangeTItle 부분까지 넣은 후 버튼의 색이 변하지 않습니다. if문을 다 지우고 setIsActive(true)만 넣었을때는 작동이 됩니다..
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
8.4) Create - 투두 추가하기 강의를 들으며 4분대 경 코드를 작성 중입니다. import "./Editor.css"; import { useState } from "react"; const Editor = ({ onCreate }) => { const [content, setContent] = useState(""); const onChangeContent = (e) => { setContent(e.target.value); }; const onSubmit = () => { onCreate(); }; return ( <div className="Editor"> <input value={content} onChange={onChangeContent} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor; 이 부분에서, input에 들어가는 content는 추가 버튼을 클릭할 때만 value를 setContent로 해줘도 될 것 같은데요, 왜 onChangeContent로 값이 바뀔 때마다 밸류를 저장해주는지 궁금합니다. 타이핑할때마다(값이 바뀔 때마다) 저장할 필요없이 마지막에 추가할 때만 저장되어도 되지 않나 싶어서 궁금해졌습니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
button onClick () => moveToList() 호출 시 파라미터가 없기 때문에 if 절 타지 않고(undefined) else로 빠지는데, 동작이 잘 되는 이유는 moveToList() 함수 밖에서 선언한 const queryDefault = createSearchParams({ page, size }).toString(); 덕분에 동작이 잘 되는것입니다.
미해결
Next + React Query로 SNS 서비스 만들기
지난 이틀전 토요일에서는 문제없이 작동했었는데, 갑자기 게시글 작성 api가 제대로 요청을 받지 않는 것 같습니다. 스웨거로도 요청 보내보았는데, 되지 않아 질문 올렸습니다!
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 우선 강의 열심히 잘 보고 있습니다. 다른게 아니라 리액트와 next.js 수업이 조금 헷갈리는데 섹션5부분만 리액트이고 그 뒤에는 next.js라고 보면 되나요? 강의를 보다가 어느순간 제가 알고있는 리액트의 폴더구조들이 조금 다르더라구요. 리액트에서는 폴더중에 App.js인데 _app.js 이런식으로 되어있고 또 마지막 포트폴리오 리뷰에서는 화면에 리액트 로고부분도 나와있어서 어디서부터 어디까지가 리액트이고 next.js 강의인지 알려주시면 너무 감사드리겠습니다 ^^ 마지막으로 포트폴리오 리뷰는 제가 어떠한걸 보고 만든 후 보는 영상인지 아니면 그냥 영상을 보고 같이 하는건지도 알고싶습니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
수업을 듣다가 궁금한 점이 생겨 문의 드립니다. 현재 React를 사용하여 API 서버와 작업할 때는 JWT 토큰을 자주 사용하는데, 타임리프(Thymeleaf)와 같은 서버 사이드 렌더링을 사용할 때도 JWT 토큰을 사용해도 되는지, 혹은 사용하면 안 되는지 궁금합니다!
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
포트폴리오를 만드는중에 refreshToken을 이용해서 로그인 데이터를 저장한 후에 생긴 문제입니다. 게시글 조회 페이지에서 새로고침을 하면 fetchBoards와 fetchBoardCount 요청이 2번씩 나가고 뒤에오는 요청은 canceled 되는데 이런 경우는 어떤거 때문에 생기는건지 궁금합니다. localStorage로 되돌리면 다시 오류없이 잘 동작합니다 refreshToken을 사용하고 저 오류가 생기면 게시글 등록후에 간헐적으로 새로고침을 해야 refetch되는거 같습니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
지난 강의에서 LIST, ADD 클릭 할때와 const handleClickList = useCallback(() => { navigate({ pathname: 'list' }); }, []); const handleClickAdd = useCallback(() => { navigate({ pathname: 'add' }); }, []); 지금 강의에서 moveToModify 클릭할 때 const moveToModify = () => { navigate({ pathname: `/todo/modify/${tno}`, search: queryStr }); }; useCallback() 사용 여부 차이가 동적으로 변할 여지가 있는 함수를 새로 호출하는게 맞아서 그런걸까요?(=${tno}의 변경 가능성?) props로 써야할 것과 router로 써야할 것을 구분하라고 하셨습니다. 혹시 이것과 관련된 말씀이셨나요? 검색해도 명쾌히 이해가 가지 않습니다!!
미해결
코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
MongoDB compass에서 new connection에서 말씀하신 대로 mern, merntest, admin 이렇게 설정해주고, connect 버튼을 눌렀는데 Authentication failed라는 오류가 뜹니다. 어느 부분에서 오류가 난 건가요..?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 vercel에 정상 배포한 후 확인해보았는데 src/pages/Diary.jsx 에 존재하는 if (!curDiaryItem) { return <div>데이터 로딩중...</div>; } 이렇게 설정한 부분만 보이고 기존에 보여져야 할 것들이 모두 안보이는데 이유를 모르겠습니다 ㅠ 그리고 <meta property="op:image" content="/thumbnail.png" /> 로 지정해주었는데 왜 이것만 잘 안되는지 모르겠습니다.. 현재 vercel 주소입니다. https://emotion-diary-sable-theta.vercel.app/ github repo주소입니다. https://github.com/jjacksang/one-bite-react-v2
미해결
Next + React Query로 SNS 서비스 만들기
지금 제로초님은 벡엔드와 프론트서버를 구분해두셨고 백엔드서버는 ec2에 올리지않아서 백엔드와 관련된 것들은 작동하지 않는 상태인데, 만약에 fetch할때 백엔드서버주소가 아닌 프론트쪽 경로로 해서 하면 본 강좌에서 한것과 같이 ec2로 배포를 해도 작동을 할까요? 아니면 이경우 배포방법이 달라지나요?
미해결
Next + React Query로 SNS 서비스 만들기
게시물 추천 탭에서는 게시하기 버튼 클릭하면 게시물 업로드가 잘 작동됩니다. 그러나 팔로우 중 탭에서 게시하기 버튼을 클릭하면 에러가 발생합니다. 게시물 게시하기 코드는 아래와 같습니다. const mutation = useMutation({ mutationFn: async (e: React.FormEvent) =>{ e.preventDefault(); const formData = new FormData(); formData.append("content", content); imgPreview.forEach((img) => { img && formData.append("images", img.file); }); return fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/posts`, { method: "post", credentials: "include", body: formData, }); }, onSuccess: async (response) => { const newPost = await response.json(); setContent(""); setImgPreview([]); if (queryClient.getQueryData(["posts", "recommends"])) { queryClient.setQueryData( ["posts", "recommends"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } if(queryClient.getQueryData(["posts", "followings"])) { console.log("get", queryClient.getQueryData(["posts", "followings"])); queryClient.setQueryData( ["posts", "followings"], (prev: { pages: Post[][] }) => { const shallow = { ...prev, pages: [...prev.pages] }; shallow.pages[0] = [...shallow.pages[0]]; shallow.pages[0].unshift(newPost); return shallow; } ); } }, onError: (error) => { console.error(error); alert("업로드 중 에러가 발생했습니다"); }, }); 최근 새소식을 보고 useSuspenseQuery 가 문제가 있다는 것을 보고 Suspense 없애고 기존에 사용한 TabDecider 컴포넌트로 변경했습니다. // src\app\(afterLogin)\home\page.tsx export default async function Home() { const session = await auth(); return ( <main className={styles.main}> <TabContextProvider> <Tab /> <PostForm me={session} /> <TabDecider /> </TabContextProvider> </main> ); } 네트워크 탭에서 posts 요청은 성공했다고 나와있습니다. 새로고침하면 업로드가 제대로 되지만 게시하기 버튼 클릭하면 onError 에서 발생하는 '업로드 중 에러 발생' 알림창이 나옵니다. react-query devtools에서 mutation 에러를 확인하니 인피니트 스크롤링하는 pages에 관한 오류가 나왔습니다. FollowingPosts 컴포넌트와 PostForm에서 queryClient.getQueryData(["posts","followings"] 에서 받는 데이터를 출력해보니 아래와 같은 데이터 구조를 가지고 있습니다. FollowingPosts 컴포넌트 코드는 다음과 같습니다. export default function FollowingPosts() { const { isPending, data } = useQuery<PostType[]>({ queryKey: ["posts", "followings"], queryFn: getFollowingPosts, staleTime: 60 * 1000, gcTime: 300 * 1000, }); if (isPending) return <Loading />; console.log("data2", data); return data?.map((post) => <Post key={post.postId} post={post} />); } FollowingPosts 컴포넌트에서는 useInifiniteQuery 가 아닌 useQuery 를 통해 데이터를 받아와서 데이터 안에 있는 pages가 없어서 이런 오류가 나오는걸까요?? 우선 useInfiniteQuery 로 변경해 게시물을 등록하면 잘 작동되는 것은 확인했습니다.
미해결
Next.js 시작하기(feat. 지도 서비스 개발)
안녕하세요! 강의와 직접적으로 관련된 질문은 아니지만 도저히 해결책을 도저히 찾기가 어려워서 질문 글 올립니다.. 하나의 Next.js 프로젝트에서 백엔드 api를 구성할 때, node.js와 파이썬 서버리스 함수를 함께 사용할 수 있나요? 백엔드로 파이썬 서버리스 함수를 단독으로 사용하는 것은 가능한 것 같은데, 동일한 프로젝트에서 node.js 서버리스 함수와 함께 사용할 수 있는지가 궁금합니다..
