inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

name을 넣지 않을 경우 input에 입력되지 않는 이유

해결됨

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

안녕하세요 강사님 수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다. 그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요. 혹시 왜 입력이 되지 않는 것인지 알 수 있을까요? 감사합니다~~! import { useState } from "react"; const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "" }) const onChange = (e) => { try { setInput({ ...input, [e.target.name]: e.target.value }) } catch (err) { console.log(err); } // setInput({ // ...input, // [e.target.name]: e.target.value // }) } //const onChangeName = (e) => { // setInput({ // ...input, // name: e.target.value // }) //}; //const onChangeBirth = (e) => { // setInput({ // ...input, // birth: e.target.value // }) //}; //const onChangeCountry = (e) => { // setInput({ // ...input, // country: e.target.value // }) //}; //const onChangeBio = (e) => { // setInput({ // ...input, // bio: e.target.value // }) //}; return ( <div> <div> <input // name="name" value={input.name} //onChange={onChangeName} onChange={onChange} placeholder={"이름"} /> {input.name} </div> <div> <input name="birth" value={input.birth} //onChange={onChangeBirth} onChange={onChange} type="date" /> {input.birth} </div> <div> {/* <select value={input.country} onChange={onChangeCountry}> */} <select value={input.country} name="country" onChange={onChange}> <option value=""></option> <option value="kr">한국</option> <option value="us">미국</option> <option value="uk">영국</option> </select> {input.country} </div> <div> {/* <textarea value={input.bio} onChange={onChangeBio} /> */} <textarea value={input.bio} name="bio" onChange={onChange} /> {input.bio} </div> </div> ); }; export default Register;

  • javascript
  • react
  • node.js
강프로그래머 댓글 2 좋아요 0 조회수 274

만약 구현해야 할 페이지가 많아지면 Router를 효율적으로 사용하는 방법이 있나요?

해결됨

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

안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다. 12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?

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

03-02 회원가입 질문

해결됨

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

왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
한혜원 댓글 2 좋아요 0 조회수 162

03-02 회원가입 피그마에 나온거 처럼 만드는문제

미해결

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

섹션 03-02 마지막 부분에 나오는 회원가입 피그마 화면처럼 만들기 문제에 대한 답은 업로드 되어있나요? 답을 확인할수 없을까요??

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
한혜원 댓글 2 좋아요 0 조회수 176

django-crispy-form에서 {% include 와 with %}

해결됨

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)

django-crispy-form에서 {% include 와 with %} 다음과 같이 에러가 나타나고, {% include "_crispy_form.html" %} with 절을 제외하니 정상 동작합니다. 정확한 이유는 모르겠으나, 문법이 그 사이에 바뀐 것일 수도 있고 해서 일단 공유하는 마음으로 질문드립니다. 감사합니다.

  • react
  • python
  • django
  • web-api
  • htmx
임찬 댓글 2 좋아요 0 조회수 66

PPR 적용 후 여전히 SSG로 배포되는 이슈

미해결

손에 익는 Next.js - 블로그 만들기

안녕하세요 조은님!! 😀 강의 너무 잘봤고 완강 후 질문 남깁니다! 마지막 기능인 PPR와 Suspense를 적용한 이후에 html에서 확인해봤을 때 동적인 요소로 채워지고 있는 것을 확인할 수 있었습니다. 그런데 Vercel에서 Build Logs 를 확인해보면 ◐ (Partial Prerender) 으로 뜨는 것이 아니라 여전히 ● (SSG) prerendered as static HTML 으로 뜨는데요, PPR 적용이 잘 된게 맞을까요? Suspense가 적용이 잘 되는데 PPR은 적용이 안된걸까요? 코드 작업 후 적용결과 첨부하겠습니다!

  • react
  • 블로그
  • next.js
dayeon Kim 댓글 3 좋아요 0 조회수 285

web APIs 랑 web API랑 혹시 다른 말일까요?

해결됨

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

뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.

  • javascript
  • react
  • node.js
bestoon 댓글 1 좋아요 0 조회수 159

강의노트

미해결

만들면서 배우는 리액트 : 기초

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안 보이는데 어디서 찾을 . 수있나요?

  • javascript
  • react
이연서 댓글 1 좋아요 0 조회수 163

로그인, 로그아웃, 토근 작동 안 함

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

강의가 오래되어 현재 버전과 맞지 않는 코드가 있습니다. 혹시 저처럼 25년에 수강 중인분들은 참고 해주세요. 강의 따라 코드가 작동안되어 챗GPT에 물어보면서 찾은 해결법입니다. 로그인/ 로그아웃/ 토큰 삭제 및 생성 관련 코드가 콜백 방식으로되어 있어 최선 버전과 맞지 않다고 합니다. then/catch 또는 amsyc/await 방식으로 기능과 미들웨어 부분을 수정하시면 코드 작동합니다. 긴 글 읽어주셔서 감사합니다. 필요하시면 깃 공유 하겠습니다

  • react
  • node.js
강동근 댓글 0 좋아요 0 조회수 275

npx create-react-app my-app

미해결

처음 만난 리액트(React)

npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다. .

  • HTML/CSS
  • javascript
  • react
a김메린 댓글 2 좋아요 1 조회수 500

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

미해결

처음 만난 리액트(React)

ERROR in ./src/chapter_03/Library.jsx 5:0-24 Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03' Did you mean './Book'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too. 어떻게 해야 할까요?

  • HTML/CSS
  • javascript
  • react
noel75 댓글 3 좋아요 1 조회수 415

ssr질문

해결됨

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

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 2.11 번 강의에서 ssr 듣다가 궁금한점이 있어서요 ssr은 두번 렌더링이 일어난다고 하셧느데 그러면 첫번째 서버에서 렌더링된 뒤에는 undefined이고 두번째 하이드레이션이 일어나고 그 뒤에는 window가 있으니 밑에처럼 했을때에는 콘솔이 나온느게 맞을까요 ?(하이드레이션 적용된 뒤에가 맞을까요 ?) if (typeof window !== "undefined") { console.log("window.location", window.location); }

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

layout할때 css적용 같은건 그냥 다 따라 쳐야 하나요?

미해결

코드로 배우는 React 19 with 스프링부트 API서버

따로 코드가 있나요? 깃허브에 그 코드는 있는데 완성된 코드라 그런지 제가 보는 부분의 코드는 없는거 같아요(이 동영상 말고 다른 동영상에서) 동영상이라 코드가 안보이는 부분이 있어서 따라 칠수 없을때도 있는데 어떤식으로 해야 하나요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
김재원 댓글 1 좋아요 0 조회수 137

4-3 아코디언 컴포넌트 만들기 링크 수정요청

미해결

실무 중심! FE 입문자를 위한 React

4-3 아코디언 실습코드 링크가 4-2 렌더링 과정 실습코드 링크랑 같습니다. pdf 파일 내 4-3 실습 링크변경 요청드리며, 변경된 링크 공유 부탁드립니다.

  • react
  • redux
  • node.js
  • sass
  • swr
dlwhdgus482 댓글 2 좋아요 4 조회수 379

하이라이트 변경이 없는데요?

해결됨

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

메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?

  • javascript
  • react
  • node.js
민경언 댓글 2 좋아요 0 조회수 401

SessionProvider을 사용해도 하위 컴포넌트가 서버 컴포넌트로 유지되는 것 같은데 이유가 궁금합니다.

미해결

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

SessoinProvider을 사용할 경우 SessionProvider로 감싼 하위 컴포넌트는 모두 클라이언트 컴포넌트가 되는 걸로 알고 있고 클라이너트 컴포넌트의 자식으로써는 서버 컴포넌트가 올 수 없다고 본 것 같은데 코드를 보니까 SessionProvider의 하위 컴포넌트도 서버 컴포넌트로 잘 작동 되는 컴포넌트가 있는 것 같아요. 혹시 제가 잘못알고 있는지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
쾌할한 전복 댓글 2 좋아요 0 조회수 109

Chapter_05 터미널, 리액트 에러

미해결

처음 만난 리액트(React)

안녕하세요, 챕터 05 강의를 듣고 실습 중에 있었는데요. local 3000에서는 이런 에러 메시지가 뜨고, 터미널에서는 이런 메시지가 뜹니다. CommentList.jsx index.js 헷갈리는 부분이 많은데 설명 부탁드립니다!

  • HTML/CSS
  • javascript
  • react
dlwlgur37 댓글 2 좋아요 0 조회수 221

Runtime Error

미해결

Next.js App router 기반 Chat GPT 만들기

// db/index.ts 코드 내용 import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import * as schema from './schema'; const sql = neon(process.env.DATABASE_URL!); const db = drizzle(sql, {schema}); export default db; // action/signup.ts 내용 "use client"; import bcrypt from "bcryptjs"; import { getUserByEmail } from "@/data/user"; import { SignUpSchema } from "@/schemas/auth"; import { user } from "@/db/schema"; import db from "@/db"; import { redirect } from "next/navigation"; export const signUp = async(_:any, formData:FormData) => { //1. 필드 중요성 const validatedFields = SignUpSchema.safeParse({ name: formData.get("name"), email: formData.get("email"), password: formData.get("password") }) if(!validatedFields.success){ return { errorMessages: "잘못된 입력값이 있습니다.", }; } //2. 존재하는 사용자인지 체크 const {email, name, password} = validatedFields.data; //4. 성공 여부 반환 try { const existingUser = await getUserByEmail(email); if(existingUser){ return { errorMessages: "이미 가입된 사용자입니다.", }; } const hasehdPassword = await bcrypt.hash(password, 10); //3. db에 insert await db.insert(user).values({name, email, password: hasehdPassword}); } catch(error) { console.error(error) return {errorMessage: "알 수 없는 오류가 발생했습니다."}; } redirect("/login"); }; 회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....

  • react
  • typescript
  • next.js
  • tailwindcss
  • zustand
  • chatgpt
이다민 댓글 2 좋아요 0 조회수 213

[10-2] react-router 강의에서 BrowserRouter 를 감싸지 않고 페이지가 나오는 게 맞나요?

미해결

실무 중심! FE 입문자를 위한 React

10-2 강의 내용에서 BrowserRouter 를 임포트 하고 나서 사용 안하고 Route를 구성하였습니다. 강의 내용대로 페이지 화면이 나와야 되는 데 에러가 발생합니다. BrowserRouter를 감싸지 않고서도 페이지 화면이 나오는 게 맞나요? <div className="App"> <Routes> <Route path="/" element={<PageA />} /> <Route path="/2" element={<PageB />} /> </Routes> </div>

  • react
  • redux
  • node.js
  • sass
  • swr
  • router
Codingbear 댓글 2 좋아요 1 조회수 221

Full route cache 질문있습니다.

해결됨

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

안녕하세요, 해당과같이 Dynamic page에서는 full route cache가 사용되지 않는다고 설명해주셨습니다. 이때, 첫번째 요청에서는 리퀘스트 메모이제이션과 데이터캐시가 당연히 아무것도 없기때문에 백엔드 서버에서 받아온 응답을 데이터캐시에 저장, 그리고 같은 내용을 중복방지를 위해 리퀘스트 메모이제이션에 캐싱하는거까진 알겠습니다. 그런데 두번쨰 요청에서는 같은 요청인데 리퀘스트 메모이제이션에서 MISS가 아닌 HIT을 해야하지 않나요? 왜 같은 요청인데 리퀘스트 메모이제이션은 MISS가 되고 데이터캐시에서 HIT을 하게되고 또다시 리퀘스트 메모이제이션에 SET을 하게 되는걸까요?

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

인기 태그

인프런 TOP Writers

주간 인기글