안녕하세요 따라하며 배우는 리액트 A-Z 섹션2 6번째 강의를 수강하던 중 button 태그에 스타일을 줄 때 float가 undefined 된다는 오류가 잘 해결 되지 않아 방법을 여쭙니다.

PostHashtag(Post와 Hashtag 중간 테이블)에서 findAll을 해서 hashtag이름 까지 가지고 오는 방법이 있을 까요? 지금은 해쉬태그 Id까지밖에 가지고 오지 못해서요

Hyper -V 설정 아래처럼 하기그리고 추가로 Hyper-V 관련 프로그램을 설치 해야 되나여? 

안녕하세요 2023년에 강의를 듣는중입니다. Next와 React의 버전은 강의와 같고 Node Js 버전은 v18.13.0 인상태로 npm run dev를 실행하면> react-nodebird-front@1.0.0 dev> nextBrowserslist: caniuse-lite is outdated. Please run:npx browserslist@latest --update-dbready - started server on http://localhost:3000node:internal/crypto/hash:71 this[kHandle] = new _Hash(algorithm, xofLen); ^Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.exports (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/Users/user/Desktop/Folders/Programming 2/zerocho/nodebird/prepare/front/node_modules/loader-runner/lib/LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED'}에러가 나오네요 chatGPT에게 물어보면 npx browserslist@latest --update-db 로 라이브러리를 업데이트 해라고 나와서 따라 했지만 여전히 같은 에러가 나왔습니다. 그러나 왠지 Node 의 버전이 문제일거같아서 12.17.0으로 낮춰서 npm run dev를 해보니 작동이 되었습니다. Node의 버전이 문제라면 에러메시지에 Node의 버전이 문제라고 나와야한다고 생각하는데 저런 에러가 나온 이유는 뭘까요???Node의 버전 문제인데 이 메세지라면 에러 메세지대로 해결 할 수 없는것 아닌가요?

해당강의 찾아봐도 셋팅하는 부분은 안나오고그냥 설치시 버전 오류가 발생합니다.

unittest 기반의 Unit Test시 Celery 혹은 ProcessPoolExecutor을 이용하면 해당 Context에서 DB 접근 시, Test DB를 참조 하는 것이 아니라 settings의 Default로 설정해놓은 Exist DB에 접근하는 이슈가 있더군요. 해당하는 경우 어떻게 해야 Test DB로 붙어서 작업할 수 있을까요?with concurrent.futures.ProcessPoolExecutor() as executor:

 위의 사진은 section2 quiz입니다.section별 quiz 정답을 못찾겟네요!!고난도는 답이 따로 없다고는 기억 하고있는데 고난도를 제외한 문제들의 정답들은 어디있나요? ㅎㅎ

변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요?prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.

 boardCommentWrite.container 댓글 작성 컨테이너 안에서 작동된 업데이트 함수의 refetchQueries가 어떻게 다른 폴더의 boardCommentList.presenter 댓글 리스트 프리젠터 부분을 정확히 리페치 시켜주는지 원리를 잘 모르겠습니다.isEdit = true, false 같은 경우에는 댓글 수정화면 또는 리스트 화면으로 변경되는건 setIsEdit 함수를 자식 컴포넌트에 props drilling 했기에 바꿔줄 수 있다는 부분은 이해가 됐습니다. 그런데 아무리 부모 자식 관계라도 아예 다른 경로에 존재하고 뭔가 setIsEdit 같은 직접적인 매개체도 없는데 어떻게 부모 컴포넌트의 댓글 리스트의 존재와 위치를 알고 그 부분을 정확히 refetchQueries를 시켜준건지 원리가 궁금합니다.

client 쪽에서는 에러가 안나지만server 쪽에서 데이터는 잘 받지만Error: DataSource is not set for this entity.나네요.백엔드쪽은 익숙하지가 않아 구글링을 해봐도 어디서 에러가 나는지 잘 모르겠습니다. 게시판에 유사한 글이 있긴 하지만 해결책을 안되어 문의 드려요.AppDataSource는 이렇게 되어있습니다. 제 깃 주소는 https://github.com/ssinking91/Reddit입니다. 이 버그 너무 해결하고 싶습니다.감사합니다.  임시방편으로 모든 entity를 불러와 AppDataSource의 entities경로로 넣어 줬습니다.혹시 에러나시는 분들 임시방편으로 이렇게 해주시면 잘 됩니다.import "reflect-metadata"; import { DataSource } from "typeorm"; import User from "./entities/User"; import Post from "./entities/Post"; import Sub from "./entities/Sub"; import Comment from "./entities/Comment"; import Vote from "./entities/Vote"; export const AppDataSource = new DataSource({ type: "postgres", host: "localhost", port: 5432, username: "postgres", password: "password", database: "postgres", synchronize: true, logging: false, // entities: ["src/entities/**/*.ts"], entities: [User, Post, Sub, Comment, Vote], migrations: [], subscribers: [], });

Redux Toolkit을 써보고 싶은데 고민이 생겼습니다.제로초 님이 실무에서 리덕스 할 떄 Saga를 더 잘 쓰셨다고 말씀하셨던 거 같습니다. 근데 Redux Toolkit을 쓰려면 Thunk를 쓰는 게 더 편할 거 같은데 어떻게 생각하시나요?? 그리고 이미 Saga를 열심히 배워놨고 익숙해 졌는데 Toolkit를 쓰려고 Thunk로 다시 돌아가야 된다는 게 조금 배웠던 시간이 아깝기도 하고 고민중입니다. 물론 둘 다 동일한 비동기 요청을 하는 기능을 하는 것이지만 배우고 있는 입장에서는 고민이네요.제로초 님은 Redux Toolkit 쓸 때에도 Saga를 같이 쓰시는 편인가요?+인피니트 스크롤링을 구현할때의 경우도 생각을 해봐야 될 거 같은데, 이부분은 강의를 끝까지 안 들어봐서 어떤 결정이 나을지 모르겠네요

import React, { useEffect, useState } from "react"; const ImageView = ({ image }) => { useEffect(() => { console.log("이미지이펙트"); }); console.log("image"); return <div>{image}</div>; }; const TextView = React.memo(({ text }) => { useEffect(() => { console.log("텍스트 이펙트"); }, []); console.log("text"); return <div>{text}</div>; }); const CountView = React.memo(({ count }) => { useEffect(() => { console.log("카운트이펙트"); }); return <div>{count}</div>; }); const OptimizeTest = () => { const [count, setCount] = useState(1); const [text, setText] = useState(""); const [image, setImage] = useState(5); return ( <div style={{ padding: 50 }}> <ImageView image={image} /> <h2>count</h2> <CountView count={count} /> <button onClick={() => setCount(count + 1)}>+</button> <div> <h2>text</h2> <TextView text={text} /> <input value={text} onChange={(e) => setText(e.target.value)} /> </div> </div> ); }; export default OptimizeTest;OptimizeTest가 App.js 자식으로 있는데 콘솔 창 보면 희한한 결과가 나옵니다. image랑 이미지이펙트가 2번 찍히는데 이유를 모르겠습니다. index.js strict 모드도 아닙니다.또한 실행 순서가 궁금한데 이미지이펙트가 콘솔창보면 image보다 늦게 찍히고 텍스트 이펙트가 text보다도 늦게 찍히는데 이 이유도 궁금합니다.

리듀서에서 draft사용은 기본 state 이고 action은 dispatch에 받아온 값인거죠?

안녕하세요. 강의 열심히 듣고 있습니다.최적화2 - React.memo 듣고 있는데저기 빨간색 줄친 곳을 확인하면 굳이 useEffect로 console을 감싼 이유가 있으신가요?useEffect(() => { }) : Componet가 Update(리렌더) 되는 순간마다 실행되는데 저기에선 prop 값이 바뀐다면 어차피 console 이 실행되지 않나요? useEffect를 사용하신 이유가 궁금합니다.

선생님 화면 제 화면 선생님 화면처럼 위에 에러 뜨게 하려면 어떻게 해야하나요?

단락 회로 평가에서 isVisible이 true이면 반드시 뒤에 컴포넌트가 렌더가 되는데 왜 그럼 컴포넌트는 항상 true인가요?근데 원래가 && 연산자는 앞 뒤 모두 true여야 true인데 이지비지블이 true면 왜 뒤에 컴포넌트는 항상 true인지 궁금합니다?

선생님처럼 백틱 내부 문자 색상이 원래 색처럼 나오게 하려 어떻게 해야하나요? 같은색이라 구분이 잘되게 보고 싶은데

채널에서 워크스페이스 정보가 뜨지 않아 검사 창을 열어보니, 제 UserData 객체에 Workspace객체가 없고, prototype 객체가 하나 있는 것을 발견했습니다.이후 네트워크에서 값을 확인해보니, 서버는 user의 data에 정상적으로 워크스페이스를 보내고 있는 것도 확인했습니다.혹시나 싶어, 새 워크스페이스를 만들어서 보내도 서버에서는 정상적으로 처리해주었지만, 클라이언트에선 전혀 받지 못하고있습니다. 이럴 경우 어떻게 처리해주어야 하는지 여쭤보고싶습니다.워크스페이스 부분의 코드를 첨부하며 리액트(+dom)의 버전은 17, axios의 버전은 0.26.1, swr의 버전은 2.0.3 입니다. import Menu from '../../components/Menu'; import loadable from '@loadable/component'; import axios from 'axios'; import React, { useCallback, useState, VFC } from 'react'; import { Route, Switch } from 'react-router'; import useSWR from 'swr'; import fetcher from '../../utills/fetcher'; import { AddButton, Channels, Chats, Header, LogOutButton, MenuScroll, ProfileImg, ProfileModal, RightMenu, WorkspaceButton, WorkspaceModal, WorkspaceName, Workspaces, WorkspaceWrapper, } from '../Workspace/styles'; import { IUser } from '../../typings/db'; import { Link } from 'react-router-dom'; import Modal from '@components/Modal'; import { Button, Input, Label } from '@pages/Login/styles'; import useInput from '@hooks/useInput'; import { toast } from 'react-toastify'; const Channel = loadable(() => import('../../pages/Channel')); const DirectMessage = loadable(() => import('../../pages/DirectMessage')); const Workspace: VFC = () => { const { data: UserData, error, mutate, } = useSWR<IUser | false>('/api/users', fetcher, { dedupingInterval: 2000, }); const [showUserMenu, setShowUserMenu] = useState(false); const [showCreateWorkspaceModal, setShowCreateWorkspaceModal] = useState(false); const [newWorkspace, onChangeNewWorkspace, setNewWorkpsace] = useInput(''); const [newUrl, onChangeNewUrl, setNewUrl] = useInput(''); const onClickUserProfile = useCallback((e) => { e.stopPropagation(); setShowUserMenu((prev) => !prev); }, []); const onClickCreateWorkspace = useCallback(() => { setShowCreateWorkspaceModal(true); }, []); console.log('showUserMenu3 :', showUserMenu); console.log('UserData LastCheck: ', UserData); const onLogout = useCallback(() => { axios .post('http://localhost:3095/api/users/logout', null, { withCredentials: true, }) .then((response) => { mutate(response.data, false); console.log('onLogOut :', response.data); }) .catch((error) => { alert(error.response.data ? error.response.data : '애러 캐치 실패'); }); }, []); const onCloseModal = useCallback(() => { setShowCreateWorkspaceModal(false); }, []); const onCreateWorkspace = useCallback( (e) => { e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; axios .post( '/api/workspaces', { workspace: newWorkspace, url: newUrl, }, { withCredentials: true, }, ) .then((response) => { console.log('modalData :', response); mutate(); setShowCreateWorkspaceModal(false); setNewWorkpsace(''); setNewUrl(''); console.log('data check CreateWS: ', UserData); }) .catch((error) => { console.dir(error); toast.error(error.response?.data, { position: 'bottom-center' }); }); }, [newWorkspace, newUrl], ); // if (!data) { // console.log('data check back to login: ', data); // return <Redirect to="/login" />; // } console.log(' :', UserData); return ( <div> <Header> <span onClick={onClickUserProfile}> <ProfileImg src="../../img/leaf_toy.png" alt="fail to load profile" /> {showUserMenu && ( <Menu style={{ right: 0, top: 38 }} show={showUserMenu} onCloseModal={onClickUserProfile}> <ProfileModal> <img src="../../img/leaf_toy.png" /> <div> <span id="profile-name">{UserData ? UserData.nickname : 'false'}</span> <span id="profile-active">Active</span> </div> </ProfileModal> <LogOutButton onClick={onLogout}>로그아웃</LogOutButton> </Menu> )} </span> </Header> <WorkspaceWrapper> <Workspaces> {UserData !== false && UserData?.Workspaces?.map((ws) => { return ( <Link key={ws.id} to={`/workspace/${ws.id}/channel/일반`}> <WorkspaceButton>{ws.name.slice(0, 1).toUpperCase()}</WorkspaceButton> </Link> ); })} <AddButton onClick={onClickCreateWorkspace}>+</AddButton> </Workspaces> <Channels> <WorkspaceName>Select</WorkspaceName> <MenuScroll>menuScroll</MenuScroll> </Channels> <Chats> <Switch> <Route path="/workspace/channel" component={Channel} /> <Route path="/workspace/dm" component={DirectMessage} /> </Switch> </Chats> </WorkspaceWrapper> <Modal show={showCreateWorkspaceModal} onCloseModal={onCloseModal}> <form onSubmit={onCreateWorkspace}> <Label id="workspace-label"> <span>workspace 이름</span> <Input id="workspace" value={newWorkspace} onChange={onChangeNewWorkspace}></Input> </Label> <Label id="workspace-url-label"> <span>workspace url</span> <Input id="workspace" value={newUrl} onChange={onChangeNewUrl}></Input> </Label> <Button type="submit">생성하기</Button> </form> </Modal> </div> ); }; export default Workspace; 또, fetcher의 문제일 수 있을 것 같아, fetcher의 코드 또한 올려봅니다. import axios from 'axios'; import React from 'react'; const fetcher = <Data,>(url: string): any => { axios.get<Data>(url, { withCredentials: true }).then((response) => response.data); }; export default fetcher;

안녕하세요 선생님 강의 잘 듣고 많이 배워가고 있는 초보자입니다.저는 searchResultView의 element의 innerHTML을 초기화 해버리는 식으로 풀이를 했었는데요, 혹시 이러면 나중에 문제가 발생할 수 있는 부분이 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 위는 JSX고 아래는 자바스크립트라서 묶어주는 괄호가 다른건가요??똑같이 소괄호 또는 중괄호 하면 오류가나는데 이유가 있나요??