import React from "react"; const Viewer = ({ count }) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer; 이걸 했을떄 ..import React from "react"; const Viewer = ( count ) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer;두개 차이가 멀까요 계속 해깔리는데 이거.. 구조 분해형태인거 까진 알겠는데부모에서 import logo from "./logo.svg"; import "./App.css"; import Viewer from "./component/Viewer"; import Controller from "./component/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App; GPT 물어보니({ count }):이 방식은 구조 분해 할당을 사용한 것입니다.함수의 인자로 객체를 받고, 그 객체의 count라는 속성을 변수로 바로 할당합니다.예를 들어, Viewer 컴포넌트가 { count: 5 }라는 객체를 인자로 받으면, count 변수는 바로 5가 됩니다.(count):이 방식은 구조 분해 할당을 사용하지 않은 것입니다.함수의 인자로 객체를 받고, 그 객체를 count라는 이름의 변수로 할당합니다.따라서 count는 객체가 되며, count 객체의 속성에 접근하려면 count.count처럼 접근해야 합니다.이렇게 하면 const [count, setCount] = useState(0); 에서 count는 객체가 아니라 그냥 변수 아닌가요 ???<button onClick={() => { onClickButton(-1); }} > <button onClick={ onClickButton(-1);} >이거 2개의 차이가 멀까요 저는 onClick이 함수니까 함수를 전달해줘야 한다고 생각해서 { } 안에 바로 함수를 넣었거던요 ..후자 .근데 보니까 ()=>{ } 여기다가 함수를 넣는건onclick의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.

강의 12.13 마지막에서 메인컨테이너가 화면 끝까지 안내려 오는 문제를 해결하기 위해서 index.css의 body 태그 스타일에 flex 를 주셔서 해결하셨는데요. 그 원리를 조금 더 설명해 주실 수 있나요?flex는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.

FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?

23-03-login-check / login-check-success 강의 플레이가 안됩니다. 23-02, 23-04 는 잘나오는데 왜 그럴까요

import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요?노드는 최신버전을 쓰고있습니다.

코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다.하지만 위 이미지 처럼 에러가 발생합니다.package.json 은 아래와 같습니다.node_modules 는 아래와 같습니다.설치됨을 다 확인하였으나 인식을 못하네요.tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다.이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?

새 pc에서 강의를 듣는 중에 yarn dev 후 웹페이지에서 이런 에러가 뜹니다 ㅜㅜ node_modules 삭제 후 재설치 해도 이렇게 뜨는데 어떻게 해결해야 할까요?

ec2 터미널에서 node를 14버전으로 설치 후에 강의대로 따라가는 중인데요git clone해와서 yarn install시에 node의 버전이 맞지 않아서 설치가 안되고 있습니다ec2의 node 버전을 업그레이드하면 /lib64/libm.so.6: version GLIBC_2.27 not found(required by node) 가 뜨면서 ec2의 버전이 맞지 않는거같고 14버전으로 진행하면 설치한 프로젝트의 버전이 달라서 안되는데 class_build의 버전은 이런데 react의 버전을 바꿔야 해결되는걸까요? "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.5" }

안녕하세요 선생님.useNavigate 질문이 있습니다.새 일기쓰기 페이지에서 '취소하기'를 누르면 뒤로 돌아갈때 nav(-1)을 쓰셨는데 사실 nav(-1)도 할 수 있지만 nav('/')를 할 수도 있는데 성능상의 차이가 있을까요?? 반응 이라던지 좀 더 큰 프로젝트라면 어떤걸 쓰는게 안전하다던지 하는 차이가 있는지 궁금합니다. 감사합니다

안녕하세요.CORS 에러를 해결하고 있는데, 잘 이해가 가지 않는게 있어서 질문 드립니다.CORS 문제를 해결하기 위해서 이런식으로 Nginx에서 헤더를 달아 줄 수 있도록 설정해뒀습니다.그런데 PATCH, DELETE 요청에서 CORS 에러가 발생합니다. GET, POST 요청은 정상적으로 잘 가는데 말이죠Access to XMLHttpRequest at '[요청 URL]' from origin '[도메인 원본]' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.이렇게 콘솔에 찍히는데, Access-Control-Allow-Credentials 헤더가 안달려서 발생한다는 내용이길래, PATCH, DELETE 메소드일 경우에는 필요한 헤더를 달아 줄 수 있도록 수정해서 설정을 바꿔보면 이번엔 Access-Control-Allow-Origin 헤더가 누락되는 등 문제가 발생하고 있습니다.-- 일반 -- Request URL: [요청 URL] Request Method: PATCH Status Code: 403 Forbidden Referrer Policy: strict-origin-when-cross-origin --응답헤더-- Access-Control-Allow-Origin: [도메인 원본] Cf-Cache-Status: DYNAMIC Cf-Ray: Content-Encoding: br Content-Type: text/html Date: Server: 분명 잘 되던게 갑자기 이렇게 문제가 발생하는것도 이상한데, 같은 서버 설정, 같은 코드로 배포하고 있는 다른 서버에서는 정상적으로 모든 요청이 잘 이루어지고 있습니다.대체 어디를 확인해야 할지 모르겠습니다...

안녕하세요. 백엔드 서버와 클라이언트가 사용하는 도메인이 달라서, 쿠키의 samesite 옵션을 none으로 주고, secure 옵션을 true로 설정해서 사용하고 있습니다. 클라이언트와 서버가 쿠키를 잘 주고받고 있는 것으로 보이는데, 문득 현업에서는 어떻게 옵션을 설정해서 사용하는지 궁금해져서 게시글 남기게 되었습니다. 현업에서는 혹시 도메인이 다른 경우 쿠키 옵션을 어떻게 설정해서 사용하나요?

graphql의 장점이 딱 원하는 데이터만 가져온다는 것은 이해가 되는데, REST API도 딱 원하는 DB 컬럼만 요청해서 가져오거나 할 수도 있지 않나요? 이게 어떠한 차이가 있나 궁금합니다. ㅎㅎ

강의 교안의 논 블로킹의 정의와 책의 예제(setTimeout 함수를 이용해 작업 시간이 긴 함수를 백그라운드로 보냄)를 읽어 보면오래 걸리는 함수를 백그라운드로 보내는 것 같은데, 그 다음 설명을 보면일부 코드들이 백그라운드에서 병렬로 실행된다고 되어있어서 헷갈립니다. 위 내용을 바탕으로 제가 이해한 것은 작업 시간이 긴 함수, 일부 코드 모두 백그라운드로 전달작업 시간이 긴 함수는 태스크 큐로 전달되고 동시 작업이 가능한 일부 코드들은 백그라운드에서 병렬로 처리일부 코드들의 병렬 처리가 끝나고 나면 태스크 큐에 있는 (블로킹 방식의)작업 시간이 긴 함수 처리 인데 맞을까요?

궁금합미다

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.아래 오류가 자꾸 뜨는데 이유를 모르겠습니다...input 태그에 텍스트도 써지지 않습니다.onchange2 도 이어서 작성하면 오류가 발생하여 지워버렸습니다ㅠㅠWarning: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

마지막 주차에서 감정일기장을 주차별로 된 것으로 만들어보라고 하셔서 만들기를 시도했습니다.그러나 도저히 어떻게 해야할지 막막해서 감정일기장 코드들을 챗지피티에 복붙하고 주차별로 만들어달라고 했고 완성했습니다(챗지피티가 알려준 코드들은 모두 이해됩니다)이렇게 학습하는 것이 과연적절할까요?? 또한 감정일기장을 주차별로 만드는것외에 감정일기장을 어떤식으로 변형하면 좋을지 궁금합니다!!

강의대로 구현하니 제목과 설명의 full text를 입력했을 때만 검색이 되는데요Like 검색으로 구현하려면 어떻게 하면 될까요?

 절입일 데이터를 혹시 어디서 얻으셨을까요? 한국천문연구원에서는 2004년 이후 데이터만 제공하더라고요. 만세력개발때문에 수업수강했는데 전반적 흐름을 잘 설명되어 있습니다. 도움많이 되고 있습니다.

데이터베이스 저장 시점현재 이미지 업로드 관련해서 프로젝트를 진행하고있는데, 이미지를 불러오기 위해 별도의 데이터베이스 저장이 필요해서 클라이언트에서 presigned URL을 사용하여 이미지 업로드가 완료된 후, 서버에 이미지 이름과 부가적인 정보를 보내주면 서버가 이를 데이터베이스에 저장하는 방식으로 구현하는게 맞을까요??

위의 내용은 강의 캡쳐본입니다. 이렇게 코드짜면 기존 값에서 변경된 부분은 수정이 반영이 되겠지만 기존값 삭제에 대해서는 반영이 안됩니다. if(writer) ~ 이런식으로 코드를 작성하셨는데 writer의 값이 존재해야만 myvariables의 writer에 값이 들어가고 해당 배열이 updateBoard로 들어가서 업데이트 뮤테이션이 실행되는 구조입니다. 수정 기능이라면 빈값 수정도 가능해야하는데 이런식으로 코드를 짜지는 않겠죠.인프런에서도 가격대가 있는 강의 인데 내용이 너무나 부실합니다.차라리 디폴트값을 undefined로 셋팅하고이런식으로 조건문 작성하는게 맞지 않나 싶습니다. 빈값에 대해서도 반영이 되는 더 좋은 방식이 있다면 알려주셨으면 좋겠습니다.(추가로 onChange는 드래그 삭제에 대해서는 아예 감지가 안되는 부분이라 onInput을 이용하였습니다.)위의 내용 관련해서 노원두 강사님의 입장이 궁금합니다. 강의가 부실한건지 뭔지 모르겠네요.추가로 https://www.inflearn.com/questions/1324853/section11-%ED%8F%AC%ED%8F%B4%EB%A6%AC%EB%B7%B0-%EB%82%B4%EC%9A%A9-%EB%B6%80%EC%8B%A4%ED%95%9C%EB%93%AF-%ED%95%A9%EB%8B%88%EB%8B%A4-github%EC%97%90-%EC%82%AD%EC%A0%9C%EC%BF%BC%EB%A6%AC-%EC%A1%B0%EC%B0%A8-%EC%97%86%EC%9D%8C해당 글의 답변은 회피하시고 다른 질문에 대해서만 답변하시던데 어디로 연락드려야 소통이 가능할까요?