import React, { useState } from 'react'; import { Button } from "../../ui/button"; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "../../ui/dialog"; import { Input } from "../../ui/input"; import SelectBox from "./SelectBox"; function UserRegistrationButton() { const [id, setId] = useState(''); const [name, setName] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [ip, setIp] = useState(''); const [selectedAuthority, setSelectedAuthority] = useState(""); const items = [ { value: '1', label: '일반' }, { value: '2', label: '마스터' }, ]; const handleDataChange = (newData) => { setSelectedAuthority(newData); }; const handleSubmit = () => { console.log({ id, name, password, confirmPassword, ip, selectedAuthority }); }; return ( <Dialog> <DialogTrigger asChild> <Button className="w-full">사용자 등록</Button> </DialogTrigger> <DialogContent className="w-full max-w-2xl"> <DialogHeader> <DialogTitle className="text-variant-h4-bold">사용자 등록</DialogTitle> </DialogHeader> <div className="grid gap-5 py-3"> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 아이디 </div> <Input id="userId" className="col-span-8" value={id} onChange={e => setId(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 이름 </div> <Input id="name" className="col-span-8" value={name} onChange={e => setName(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 </div> <Input id="password" className="col-span-8" type="password" value={password} onChange={e => setPassword(e.target.value)} /> </div> <div className="grid grid-cols-10 w-full"> <div className="text-sm grid col-span-2 content-center"> 비밀번호 확인 </div> <Input id="confirmPassword" className="col-span-8" type="password" value={confirmPassword} onChange={e => setConfirmPassword(e.target.value)} /> </div> </div> <div className="flex gap-3"> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 권한 </div> <SelectBox className="col-span-8" items={items} onDataChange={handleDataChange} /> </div> <div className="grid grid-cols-10 w-full"> <div className="grid col-span-2 content-center"> 접속 IP </div> <Input id="IP" className="col-span-8" value={ip} onChange={e => setIp(e.target.value)} /> </div> </div> </div> <DialogFooter> <div className='flex justify-center gap-5'> <DialogClose asChild> <Button onClick={handleSubmit} size="xxl">등록</Button> </DialogClose> <DialogClose asChild> <Button variant="secondary" size="xxl">취소</Button> </DialogClose> </div> </DialogFooter> </DialogContent> </Dialog> ); } export default UserRegistrationButton; import React, { useState, useEffect } from 'react'; import { Select, SelectValue, SelectTrigger, SelectContent, SelectItem, } from '../../ui/select'; interface SelectBoxProps { className?: string; items: { value: string; label: string }[]; onDataChange: any; } const SelectBox: React.FC<SelectBoxProps> = ({ className, items, onDataChange }) => { const [selectedValue, setSelectedValue] = useState(""); const sendDataToParent = (payload) => { onDataChange(payload); console.log(payload, selectedValue) }; return ( <Select> <SelectTrigger className={className}> <SelectValue placeholder="권한을 선택하세요." /> </SelectTrigger> <SelectContent> {items.map(item => ( <SelectItem key={item.value} value={item.value} onClick={() => sendDataToParent(item.label)}> {item.label} </SelectItem> ))} </SelectContent> </Select> ); }; export default SelectBox;제 코드인데요 현재 shadcn/ui를 쓰면서 진행중인데요셀렉트 박스가 하위컴포넌트이고 상위 컴포넌트로 셀렉트 박스가 선택한 값을 보내고 싶은데 할 수 있는 방법 다 해도 안되더라고요 현재 코드는 콜백함수를 이용하여 데이터를 호출하려고 했는데 실패했습니다. 이럴 때는 무조건 리덕스나 리코일 같은 전역으로 상태관리를 해서 값을 주는 방법 밖에는 없나요 ? 아니면 다른 방법이 있으면 알려주세요

안녕하세요 제로초님. 덕분에 많은 것을 배우고 있습니다. 정말 감사합니다.그런데 최근 혼자 해결하기 어려운 문제가 있어 질문하게되었습니다.redux를 useSWR로 대체하였는데 그 후 다른 탭에서 다른 아이디로 로그인하면 로그인한 계정의 데이터가 아닌 다른 탭 계정의 데이터가 불러와지는 문제가 발생합니다. 캐시 문제 때문인 것 같은데 어떻게 설정해야 문제를 해결할 수 있을지 잘 모르겠습니다. 힌트가 될만한 내용을 알려주시면 정말 정말 감사하겠습니다. 부탁드립니다ㅜㅜㅜ

codecamp 폴더 안에 각각 class폴더와 퀴즈, 프리보드 폴더를 사용중입니다. 그리고 수업내용에 따라 useRecoilState를 만들어놓고 각각 사용중인데, 수업을 따라하다보니 리코일스테이트의 네이밍이 isEditState, accessTokenState 이런식으로 다 같아서 혹시나 그것때문에 오류가 발생하나 싶어서 이름을 각각 다 변경해 보았지만 터미널에의 오류메세지는 계속 발생하네요. 이 부분은 무엇이 잘못되어서 이런 메세지가 뜨는 것인가요? 그리고 이 메세지를 안뜨게 하는 방법이 있을까요?

강사님 SPA, MPA, SSR , CSR과 리액트 Hooks 등의 개념에 대해 찾다보면 참고 문서와 링크 없고, 내용에 틀린부분도 있어보이는 블로그가 종종 있더라구요. 이러한 경우 강사님은 어디서 주로 찾으시는지 궁금합니다.

저기서 자꾸 저런 에러가 뜨는데 어떻게 해결해야 할까요 ㅠㅠ타입을 바꿔봐도 똑같습니다 정확한 오류 메시지는{ page: number; } 형식의 인수는 'Partial<IQueryFetchBoardArgs>' 형식의 매개 변수에 할당될 수 없습니다. 개체 리터럴은 알려진 속성만 지정할 수 있으며 'Partial<IQueryFetchBoardArgs>' 형식에 'page'가 없습니다.입니다 !

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요.다음 코드에서 useEffect(() => { if (!origUserList) setUserList([]); else setUserList(origUserList.map(user => ({ ...user, is_follow: false }))); }, [origUserList]);else가 있어야 하는 이유가 return 하지 않을 것이기 때문이라고 05:55 에서 말씀하셨는데, 이 부분에 대해 이해가 가지 않습니다.그냥 보기에는 else가 없어도 동일하게 작동할 것 같아서 else를 빼봤는데 아니나 다를까 다음과 같은 에러가 납니다.SuggestionList.js:24 Uncaught TypeError: Cannot read properties of undefined (reading 'map')chatGPT에게 물어보니 else가 없어도 동일한 로직이라고 하는데 이유를 모르겠습니다.

@media (prefers-color-scheme: dark) { html { color-scheme: dark; } }다크모드 관련 css 수정하지 않았는데, 다크모드일 경우 색이 적용안되는 경우 이유를 알 수 있을까요?

안녕하세요 2.1 class 단위 테스트를 작성하고 `npm run test`로 테스트를 구동 했을 때, 다음과 같이 테스트를 실패하고 있습니다. `nvm use`, 'npm ci'를 모두 마친 상황인데, 어떤 문제를 해결해야 할까요? 혹시나 싶어 스토리북을 구동했을 때는, 문제 없이 scripts 명령어를 입력했을 때 실행이 되는 것을 확인할 수 있었습니다.!github branch의 unit-test-example을 pull 받아서 진행했습니다!운영체제: Windows 11 import { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; it('className Prop으로 설정한 css class가 적용된다.', async () => { // Arrange - 테스트를 위한 환경 만들기 // -> className을 지닌 컴포넌트 렌더링 await render(<TextField className="my-class" />); // Act - 테스트할 동작 발생 // -> 렌더링에 대한 검증이기 때문에 이 단계는 생략 // -> 클릭이나 메서드 호출, prop 변경 등등에 대한 작업이 여기에 해당 합니다. // Assert - 올바른 동작이 실행되었는지 검증 // -> 렌덩링 이후 DOM에 해당 class가 존재하는지 검증 // TextField는 placeholder 요소가 있습니다. // vitest의 expect 함수를 사용하여 기대 결과를 검증 expect( screen .getByPlaceholderText('텍스트를 입력해 주세요.') .toHaveClass('my-class'), ); });   FAIL src/components/tests/TextField.spec.jsx [ src/components/tests/TextField.spec.jsx ] Error: C:\Users\js953\Desktop\Github\fe-test\test-example-shopping-mall\src\components\tests\TextField.spec.jsx 21:3 error Expect must have a corresponding matcher call vitest/valid-expect ✖ 1 problem (1 error, 0 warnings) ❯ formatError node_modules/vite/dist/node/chunks/dep-abb4f102.js:43916:46 ❯ TransformContext.error node_modules/vite/dist/node/chunks/dep-abb4f102.js:43912:19 ❯ TransformContext.transform node_modules/vite-plugin-eslint/dist/index.mjs:1:1989 ❯ Object.transform node_modules/vite/dist/node/chunks/dep-abb4f102.js:44206:30 ❯ loadAndTransform node_modules/vite/dist/node/chunks/dep-abb4f102.js:54851:29 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯ Test Files 1 failed (1) Tests no tests Start at 12:45:37 Duration 1.63s (transform 743ms, setup 883ms, collect 0ms, tests 0ms, environment 408ms, prepare 109ms) FAIL Tests failed. Watching for file changes... press h to show help, press q to quit ```Test result not found. If you set `vitest.commandLine` please check: Did you set `vitest.commandLine` to `run` mode? (This extension requires `watch` mode to get the results from Vitest api) Does it have the ability to append extra arguments? (For example it should be `yarn test --` rather than `yarn test`) Are there tests with the same name? Can you run vitest successfully on this file? Does it need custom option to run? Vitest output: DEV v0.33.0 C:/Users/js953/Desktop/Github/fe-test/test-example-shopping-mall API started at http://127.0.0.1:60930 ❯ src/components/tests/TextField.spec.jsx (0 test)

강의 영상 3분에 나온 SSR이 프론트 서버에 부담이 된다 라는 얘기가 잘 이해가 안가서 질문드립니다! 오히려 SSR은 프론트에서 모두 다운받아야 할 JS를 사전에 렌더링하고, query 코드를 읽지도 않기 때문에 더 부담이 안되지 않을까요...?? 또한 말씀하신 SEO 뿐만 아니라 suspense를 사용하거나 서버 액션을 통해 DB와 api 없이도 직접 통신할 수 있는 등의 장점이 있기에 자주 fetch를 해야 하는 작업이 아니라면 SSR의 장점이 더 많은게 아닌지 궁금합니다! CSR을 사용했을때의 장점은 fetch를 자주해야 하는 상황이 아니라면 어떤게 있는지 모르겠습니다.

수업에서 CSS 선택자의 id 같은 경우 한 html에서 하나만 사용가능하다고 하셨는데 boxmodel 실습에서는 다음과 같이 id를 두 번 사용했더라고요. 상관없는걸까요? <!DOCTYPE html> <html lang="ko"> <head> <title>Document</title> <style> div { width: 80px; height: 80px; border: 1px solid red; } #contentBox { box-sizing: content-box; } #borderBox { box-sizing: border-box; } </style> </head> <body> <!-- 컨텐트박스 --> <div id="contentBox">박스1</div> <!-- 기본박스 --> <div>박스2</div> <!-- 보더박스 --> <div id="borderBox">박스3</div> </body> </html>

현재 next ^13.5.6 버전 사용중입니다.next.config.js 설정에서 devtool hidden-source-map 설정이 ^13.5.6 버전에서도 필요할까요? 아래 공식문서 보면 productionBrowserSourceMaps 설정이 동일한 역할을 하는것같은데 맞을까요?development 에서는 true 라서 source map이 보여지고 build시 자동으로 false가 되어서 hidden-source-map이 적용되는것같은데 그럼 ^13.5.6 버전에서는 따로 hidden-source-map 설정 안해도 되는걸까요?https://github.com/vercel/next.js/blob/v13.5.6/docs/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx 

수업을 진행하다가 그 당시에도 궁금즘이 생겨 개인적으로 알아봤던 부분인데, 확신이 안가서 강사님께 여쭈어봅니다. 수업 내용에서는 정확한 위치가 기억이 나지 않아서 다른 예시로 대체하겠습니다. 흰색 배경의 button group이 있고 각각의 button은 클릭할 시 url을 변경시킵니다.또한 현재 선택된 button은 색상이 칠해집니다. 이러한 상황에서 useState를 통해서 button의 state를 관리하고 있었고, button을 클릭했을때setState를 통해 선택하는 button을 변경함router을 통해 url 경로를 변경함이렇게 두가지 액션을 취했었습니다. 그 때 생겼던 궁금중은 어차피 url과 button은 mapping 할 수 있으니까, 버튼을 클릭하면 url만 변경시키고, url을 읽어서 button에 다시 값을 주면 기능적으로 똑같지 않나? 그러면 하나의 액션으로 기존의 두가지 액션을 대체할 수 있지 않나? 라고 생각했습니다. 그래서 조금 찾아보니까 url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고, 영상에서 봤던 것 처럼 url과 button state를 각각 바꾸는게 더 인터랙티브하다 라는 글을 읽었습니다. (신빙성이 있는 글은 아닙니다.) 실제로 이러한 이유 때문에 url만 바꾸고, 그 값을 받아와 button 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.  

{segment === 'home' ? <> <svg width={26} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"> <g> <path d="M12 1.696L.622 8.807l1.06 1.696L3 9.679V19.5C3 20.881 4.119 22 5.5 22h13c1.381 0 2.5-1.119 2.5-2.5V9.679l1.318.824 1.06-1.696L12 1.696zM12 16.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5 3.5 1.567 3.5 3.5-1.567 3.5-3.5 3.5z"></path> </g> </svg> <div style={{fontWeight: 'bold'}}>홈</div> </> : <> <svg width={26} viewBox="0 0 24 24" aria-hidden="true" className="r-18jsvk2 r-4qtqp9 r-yyyyoo r-lwhw9o r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-cnnz9e"> <g> <path d="M12 9c-2.209 0-4 1.791-4 4s1.791 4 4 4 4-1.791 4-4-1.791-4-4-4zm0 6c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2zm0-13.304L.622 8.807l1.06 1.696L3 9.679V19.5C3 20.881 4.119 22 5.5 22h13c1.381 0 2.5-1.119 2.5-2.5V9.679l1.318.824 1.06-1.696L12 1.696zM19 19.5c0 .276-.224.5-.5.5h-13c-.276 0-.5-.224-.5-.5V8.429l7-4.375 7 4.375V19.5z"></path> </g> </svg> <div>홈</div> </> }강사님께서는 위 코드처럼 세그먼트에 따라 삼항연산자를 이용하여 아이콘이 들어있는 전체를 렌더링하셨는데요,style={{fontWeight: segment === 'home' ? 'bold' : 'initial'}}위 처럼 똑같이 삼항 연산자를 이용하되, style, svg path 등 필요한 부분만 유동적으로 변하도록 하지 않으신 특별한 이유가 있으신지 궁금합니다.

이슈 삭제 API를 생성했는데 axios로 delete 요청을 하면 405 에러가 반환이 됩니다. 일단 post 요청으로 api를 만들고 요청을 보내면 정상적으로 삭제가 되는데 추가적인 설정이 필요할까여

npm install --save styled-componentsup to date, audited 1782 packages in 5s117 packages are looking for funding run npm fund for details131 vulnerabilities (1 low, 104 moderate, 22 high, 4 critical)To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes), run: npm audit fix --forceRun npm audit for details.라고 뜨면서 안되는데 어떻게 해결하나요..?ㅜ

제가 실습파일을 다시 만들었었는데 리액트 버전 낮추는 명령어를 치지 않고 하다가 section 13에서 antd design 관련 실습 하면서 강사님이랑 조금씩 다른 부분이 보이고, yarn dev 해도 실행이 안되어서 버전 문제라고 생각하고 중간에 버전을 낮췄거든요 ..!근데 아래처럼 '--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다. 라는 에러 메시지가 계속 뜨고 구글링해서 방법을 찾아보는데 하라는 거 해봐도 없어지지 않아요 ㅠㅠ타입스크립트를 재설치 해봐도 package.json에 dev-defendencies 항목이 생기지도 않고, tsconfig.js 파일을 삭제했다가 다시 타입스크립트 재설치 후 yarn dev 해도 변화가 없더라구요 !그래서 강사님 tsconfig와 같은 내용을 직접 작성해서 새로고침 해봤는데도 자꾸 에러가 그대로라서 ㅠㅠ 혹시 어떤 부분이 문제일까요 ㅠㅠㅠㅠ  

뒤에서 수정이 되는지는 잘 모르겠지만 현재까지 강의에서는 양쪽 다 사용하시는 것 같습니다. 혹시 따로 구분하신다면 기준을 갖고 쓰시는지 궁금합니다.

next.js를 잘 설치하고 실행도 잘 되는데 바꾼 내용을 매번 다시 run시키지 않으면 반영이 안됩니다. next.js버전도 분명 fast refresh를 지원하는 버전인데 왜 그런지 너무 불편하네요.

frontend에서 socket.io-client를 이용하여 websocket을 구현하면, backend에서도 socket.io를 사용해야 하나요??frontend는 react로, backend는 spring+kotlin으로 구현하려는데, frontend에서만 socket.io를 사용해도 될까요?