inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

useRef inputRef.current값이 무조건 bio로만 나오는 현상이 있습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

const inputRef = useRef() const onSubmit = () => { if(input.name === "" ){ console.log(inputRef.current) inputRef.current.focus() } } return ( <div> <div> <input ref={inputRef} name="name" value={input.name} onChange={onChange} type="text"/> </div> <div> <input ref={inputRef} name="birth" value={input.birth} onChange={onChange} type="date" /> </div> <div> </div> <div> <textarea ref={inputRef} name="bio" value={input.bio} onChange={onChange} > </textarea> </div> <button onClick={onSubmit}>제출</button> </div> ) 위와같은 코드에서 onSubmit함수내 console.log(inputRef.current)를 해보면 무조건 bio만 출력됩니다. 또한 포커스도 어떤 경우에서든 bio가 있는 textarea쪽으로만 포커싱이 됩니다. 어떤 이유에서 이러한 현상이 발생되는지 궁금합니다.

  • javascript
  • react
  • node.js
양진영 댓글 2 좋아요 0 조회수 137

export 선언 위치

미해결

Amazing JavaScript - 입문

일반적으로 어떤 프로그래밍 언어이든 사용하고자 하는 변수나 함수가 먼저 선언되고 그 이후에 사용이 가능한데 export 예시를 보여주신 것처럼 export는 해당 파일에서 가장 아래 쪽에서 선언을 해야 하는 게 맞나요?

  • javascript
  • es6
  • export
Jooyeong Kang 댓글 1 좋아요 0 조회수 106

cache 질문

미해결

Next + React Query로 SNS 서비스 만들기

이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
심현석 댓글 2 좋아요 0 조회수 137

서버 액션과 api route의 차이가 어떤게 있을까요?

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다! 다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다! 찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
amh6281 댓글 2 좋아요 0 조회수 221

세션 만료로 인해 미들웨어에서 로그인 페이지로 redirect 되는 경우 발생하는 오류.(인터셉팅 라우트)

미해결

Next + React Query로 SNS 서비스 만들기

로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우, 미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다. / / middleware.ts import { NextResponse } from "next/server"; import { auth } from "./auth"; export { auth } from "./auth"; export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect(`http://localhost:3000/i/flow/login`); } } export const config = { matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"], }; 로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
hkjo 댓글 2 좋아요 0 조회수 205

강의 사용 도구관련해서 질문드립니다

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

정말 친절하고 세세한 강의~ 감동 받으면서 잘 듣고 있습니다. 한가지 궁금한 점은.. 강사님은 Vite로 강의하시는데.. Create React App도구를 사용하는 것과 차이가 많이 있을까요? Create React App으로 강의를 들어도 무방한지도 알고 싶습니다. 감사합니다^^

  • javascript
  • react
  • node.js
J.영 댓글 2 좋아요 0 조회수 158

TodoItem 리렌더링 질문..

미해결

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

import "./TodoItem.css"; import { memo } from "react"; const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => { const onChangeCheckbox = () => { onUpdate(id); }; const onClickDeleteButton = () => { onDelete(id); }; return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} //button이 아닌 input태그이기 때문에 onChange를 사용 readOnly checked={isDone} type="checkbox" /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}>삭제</button> </div> ); }; export default memo(TodoItem, (prevProps, nextProps) => { // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단 // T -> Props 바뀌지 않음 -> 리렌더링 X // F -> Props 바뀜 -> 리렌더링 O if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; return true; // 네 개의 값이 바뀌지 않으면 }); 코드를 따라 치면서 실습을 했는데 위처럼 바꿔도 모든 list가 리렌더링된다고 하이라이트가 뜹니다. 뭐가 문제인지 모르겠습니다ㅜㅜ

  • javascript
  • react
  • node.js
jih361 댓글 3 좋아요 0 조회수 173

맥북 여러줄 단축키

해결됨

[자바스크립트부터 리액트까지] 포기없는 React로 가는 길 [Full vers.]

안녕하세요 /* */ 맥북에서의 여러줄 주석 처리 단축키 알려주세요.

  • javascript
  • react
  • jquery
  • typescript
  • es6
  • vanilla-javascript
Coding Basic 댓글 2 좋아요 0 조회수 257

next.js input 태그관련 질문드립니다.

해결됨

한 입 크기로 잘라먹는 Next.js

선생님 보통의 리액트경우 새로고침이 일어나지 않기 때문에 서브밋 됬을시 보통 상태값을 초기화 하지 않는 이상 input값의 value가 원래 남아 있지 않나요? button 태그때문에 새로고침이 일어난건지 제가 이해한 랜더링 방식과 좀 다른건가요?

  • react
  • typescript
  • next.js
uphoon 댓글 2 좋아요 0 조회수 215

10-1 API 타입 codegen 에러

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

yarn codegen을 입력하면 이런 에러가 뜹니다 Not all operations have an unique name: fetchBoard: success Saved 1 new dependency. info Direct dependencies └─ @graphql-codegen/cli@5.0.4 info All dependencies └─ @graphql-codegen/cli@5.0.4 코드젠은 이렇게 잘 설치가 되었고 package.json 에도 이렇게 추가해 놓았습니다 "codegen": "graphql-codegen --config codegen.ts" PS C:\Users\young\Desktop\frontend\class-example\my-app> yarn codegen yarn run v1.22.22 warning ..\..\..\..\package.json: No license field $ graphql-codegen --config codegen.ts ✔ Parse Configuration ❯ Generate outputs ❯ Generate to ./src/commons/graphql/ ✔ Load GraphQL schemas ✔ Load GraphQL documents ⠏ Generate [client-preset] the following anonymous operation is skipped: mutation { createBoard(writer: "윰", title: "작성중", contents: "내용작성중") { _id number message } } [client-preset] the following anonymous operation is skipped: query { fetchBoard(number: 1) { number writer title contents } } [client-preset] the following anonymous operation is skipped: query { fetchBoard(number: 2) { number writer title contents } } [client-preset] the following anonymous operation is skipped: query { fetchBoards { number writer title contents } } [client-preset] the following anonymous operation is skipped: query { fetchBoards { number ✔ Parse Configuration ⚠ Generate outputs ❯ Generate to ./src/commons/graphql/ ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Not all operations have an unique name: fetchBoard: * fetchBoard found in: - C:/Users/young/Desktop/frontend/class-examp… error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
윰이 댓글 1 좋아요 0 조회수 107

공통 컴포넌트 구현하기 강의 부분에 질문있습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

안녕하세요 공통 컴포넌트 구현하기 강의 부분에서 Header 컴포넌트에 대해 여쭤볼게 있어 질문을 드립니다. Header컴포넌트가 App컴포넌트에 import 되어 있고 props로 title, leftChild, rightChild가 전달이 되는데 leftChild, rightChild는 버튼이니 만들어 놓은 버튼 컴포넌트를 전달해서 들어갈 내용을 동적으로 바꿔주는건 이해가 되지만 title 부분은 그냥 props로 전달하지 않고 Header 컴포넌트 내부에 그냥 작성을 해도 될것같은데 이렇게 title props로 전달하는 이유가 궁금합니다.

  • javascript
  • react
  • node.js
부드러운 족제비 댓글 2 좋아요 0 조회수 160

mongoose 설치 오류

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

안녕하세요. 수업을 진행하던 도중 오류가 발생하여 문의드립니다. 'npm add mongoose' 를 실행 했는데 Error: EPERM에러가 자꾸 뜨네요. 인터넷에서 찾아가면서 .bin파일을 지워도 보고 npm캐시도 삭제해 보고 oneDrive도 중지 시켜보고 해봤지만 오류가 해결이 안되어서 글 남깁니다. 아래 이미지는 오류 내용 캡쳐했습니다.

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
140015 댓글 1 좋아요 0 조회수 167

클라이언트 컴포넌트의 서버 컴포넌트 children 질문

해결됨

한 입 크기로 잘라먹는 Next.js

<ClientComponent> <ServerComponent /> </ClientComponent> export default function ClientComponent({children}: {children: ReactNode}) { Return <div>{children}</div> } 위는 강의에서 나왔던 클라이언트 컴포넌트에 서버 컴포넌트를 children으로 주는 코드입니다. 여기서 클라이언트 컴포넌트에 여러개의 서버 컴포넌트를 children으로 보내고 싶으면 어떻게 해야하나요?

  • react
  • typescript
  • next.js
민지영 댓글 2 좋아요 0 조회수 232

이 정도면 이것만 사용하겠는데요?

해결됨

한 입 크기로 잘라먹는 Next.js

ISR 을 보면서 SSR과 SSG의 각각의 단점을 모두 커버할 수 있는 기술이라 생각이 되었습니다. 진짜, 이 외에는 쓸 필요가 있나 싶을 정도인데요.. 한가지 여쭤보고 싶은 것은, ISR 을 API 로 호출해서 한다고 했을 때 예를 들면, 어떤 게시물이 등록이 되면 그 시점에 이 API를 호출하고 그 후 해당 페이지가 재생성 될 것입니다. 그렇다면, 게시물을 동시에 여러개 작성하게 된다면 (서비스의 비즈니스 로직에 따라..) 어쩔 수 없이 이 API 엔드포인트에 트래픽이 몰리게 될 텐데 그로 인한 서버부하 는 생각 안해도 되는것이지 여쭤보고 싶습니다.

  • react
  • typescript
  • next.js
YoungMan 댓글 2 좋아요 0 조회수 316

2.14 SSG 관련 질문

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요, 강의 2.14에서 이전에 SSR로 만들었던 페이지를 SSG로 변경하는 것 관련하여 질문이 있습니다. SSG에서는 빌드타임에 페이지를 생성하기 때문에 쿼리스트링을 불러올 수 없어서 SSG로 만들고 싶다면 쿼리스트링 가져오는 부분은 클라이언트 사이드쪽에 코드를 추가해주면 가능하다고 하셨는데, 그럼 이 프로젝트의 검색페이지 같은 경우는 SSR를 사용하는게 나은지 SSG를 사용하는게 나은지 궁금합니다. 둘다 장단점이 있기 때문에 개발자의 판단에 달려있는걸까요? 쿼리스트링을 사용하는 페이지에서 어떤 경우에는 SSR로 만드는게 낫고 어떤경우에는 SSG로 만드는게 나을지 그 기준에 대해서도 궁금합니다. 강의 너무 잘 듣고 있습니다. 감사합니다. ++ 다른 비슷한 질문에 답변 다신 것 읽어봤는데 SSG는 식당에서 반찬을 먼저 주는 것과 같다고 말씀하셔서 이해가 잘되었습니다. 근데 SSG의 단점이 최신 데이터의 반영은 어려운것이기 때문에 데이터가 잘 변경되지 않는 페이지에서 사용하는 것이 좋다고 하셨는데, 그럼 검색페이지의 검색결과가 계속 바뀐다고 가정하면 (책 데이터가 계속 추가됨) SSR을 사용하는게 나은가요? 아니면 그 부분은 어차피 클라이언트 사이드에서 쿼리스트링 추가해서 다시 새로 불러오기 때문에 SSG로 사용해도 무방한가요? 거의 다 이해한 것 같은데 조금 헷갈리네요 ㅎㅎ

  • react
  • typescript
  • next.js
자현 Kaylla 댓글 2 좋아요 0 조회수 302

강의에 대해 질문있습니다.

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

안녕하세요 프론트엔드 개발자로 취업을 준비중입니다. 코딩테스트가 어렵고 또 이 부분에서 자주 떨어져서 강의를 찾다가 결제를 하게 되었는데요 우선 2021년도 Best라고 되어있는데 지금 봐도 무방할까요?

  • javascript
  • 코딩-테스트
부드러운 족제비 댓글 2 좋아요 0 조회수 170

composers 기능 질문있습니다

해결됨

3시간 만에 끝내는 Cursor 완벽 가이드

composers 기능이 현재는 다른 이름으로 대체되거나 없어졌나요? 찾을 수가 없네요

  • react
  • next.js
  • cursor
  • 인공지능(ai)
코틀린자바 댓글 2 좋아요 0 조회수 535

error.tsx 핸들링에서 막국수를 검색할때

해결됨

한 입 크기로 잘라먹는 Next.js

error.tsx 핸들링에서 막국수를 검색할때 error.tsx component가 보이지 않습니다. 혹시 변경된부분이 있나요..? 현재 api주소로 직접 던져보니 빈배열을 받아와서 error처리가 안됬네요, 혹시 강사님께서는 이런에러처리를 어떻게하셨나요? 보통 어떻게하는게 좋을지를 몰라서요.. 아 죄송합니다. 백엔드 server를 중단안했네요.하하하 참 정신이없네요. 그나저나 위의 저 빈배열은 보통 에러처리가 어떻게하는지는 궁금합니다.

  • react
  • typescript
  • next.js
codingforfun 댓글 2 좋아요 1 조회수 293

강의자료 PDF가 있는지 궁굼합니다!

해결됨

한 입 크기로 잘라먹는 Next.js

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

  • react
  • typescript
  • next.js
방토 댓글 2 좋아요 0 조회수 461

인기 태그

인프런 TOP Writers

주간 인기글