export default function FormComponent() { return ( <form onSubmit={handleSubmit}> <input name="first" type="text" value="첫번째" /> <input name="second" type="text" value="두번째" /> <button type="submit">Submit 버튼</button> </form> ); } 위와 같이 input 에 value props 를 설정하면 왜 타이핑이 안되는지 이해가 잘 안됩니다. 순수 HTML 에서는 input 요소의 value 속성은 초기값이고 변화된 현재값은 DOM 의 value 프로퍼티를 통해 가져올 수 있다고 알고있는데 React 에서는 뭐가 달라지길래 value props 를 설정만 하더라도 input 에 입력값이 변화되지 않는 것인지 알고 싶어요!
OneToMany 관계에서 페치조인을 하게되면 페이징이 불가하다고 하셨는데 OneToMany는 batchSize를 조절하여 해결한뒤 OneToMany안의 ManyToOne 관계는 어떻게 페치조인 할수있을까요? 예를 들어서 테이블 A, B, C가 있을경우 A와 B는 OneToMany관계 B와 C는 ManyToOne관계 class A { @OneToMany private List<B> b = new ArrayList<>(); } class B { @ManyToOne // Lazy private A a; @ManyToOne // Lazy private C c; } class C { } A를 조회하고 C까지 끌고와야하는경우 A와 B는 OneToMany 관계이기 때문에 페치조인이 불가능하지만 B와 C는 페치조인이 가능하다고 이해하였습니다 BatchSize를 설정하여 A에서 B를 가져올시 IN 쿼리로 가져온뒤 B에서 C를 페치 조인하는 방법은 없나요? 아니면 이런경우 특수하게 B에서 C를 Eager로 설정 해야할까요 애초에 B를 통해서 A와 C를 가져와야할까요
안녕하세요. 수강생 입니다. 좋은 강의 잘 수강하면서 열심히 공부하고 있습니다. 노션 페이지 내용 관련으로 문의드립니다. [입문] 시작은 프리캠프 - 섹션 3 CSS의 기본과 싸이월드 실습 1 CSS 사용방법 3가지 예시 이미지 중 해당 내용들에 대한 이미지가 이상해 문의 남깁니다. 감사합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 작은 따옴표와 백틱을 구분하여 사용해야 하나요? 백틱을 써야하는데 작은 따옴표를 쓰면 오류가 나거나 그 반대 상황에서도 오류가 나는 경우가 있을까요?큰 따옴표도 궁금합니다!
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. could not prepare statement [Sequence "MEMBER_SEQ" not found; SQL statement: select next value for member_seq [90036-232]] [select next value for member_seq]; SQL [select next value for member_seq] org.springframework.dao.InvalidDataAccessResourceUsageException: could not prepare statement [Sequence "MEMBER_SEQ" not found; SQL statement: select next value for member_seq [90036-232]] [select next value for member_seq]; SQL [select next value for member_seq] at org.springframework.orm.jpa.vendor.HibernateJpaDialect.convertHibernateAccessException(HibernateJpaDialect.java:277) at org.springframework.orm.jpa.vendor.HibernateJpaDialect.translateExceptionIfPossible(HibernateJpaDialect.java:241) at org.springframework.orm.jpa.AbstractEntityManagerFactoryBean.translateExceptionIfPossible(AbstractEntityManagerFactoryBean.java:560) at org.springframework.dao.support .ChainedPersistenceExceptionTranslator.translateExceptionIfPossible(ChainedPersistenceExceptionTranslator.java:61) at org.springframework.dao.support .DataAccessUtils.translateIfNecessary(DataAccessUtils.java:343 ) 이런 에러가 납니다ㅠㅠ
node 버전은 20.18.1 설치했습니다 알려주신 방법대로 터미널에서 명령어가 만들어졌습니다 npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p 실행하니 아래 에러가 발생합니다 Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: pomodoro@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: 인터넷을 통해 찾아본 바로는 리엑트 19 버전 호환성 문제로 에러가 나는거라는데 vite 를 사용해서 프로젝트를 생성하는걸 추천하네요 해결 방법이 없을까요?
연결이 안되네요. 오류 메세지를 올릴게요. MongooseError: The uri parameter to openUri() must be a string, got "undefined". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string. at NativeConnection.createClient (D:\inflearn\boiler-plate\node_modules\mongoose\lib\drivers\node-mongodb-native\connection.js:225:11) at NativeConnection.openUri (D:\inflearn\boiler-plate\node_modules\mongoose\lib\connection.js:835:34) at connect (D:\inflearn\boiler-plate\node_modules\mongoose\lib\mongoose.js:447:15) at file:///D:/inflearn/boiler-plate/index.js:19:1 at ModuleJob.run (node:internal/modules/esm/module_job:268:25) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26) at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5)Example app listening on port 5000 node:internal/modules/esm/resolve:257 throw new ERR_MODULE_NOT_FOUND( ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\inflearn\boiler-plate\config\dev' imported from D:\inflearn\boiler-plate\config\key.js at finalizeResolution (node:internal/modules/esm/resolve:257:11) at moduleResolve (node:internal/modules/esm/resolve:913:10) at defaultResolve (node:internal/modules/esm/resolve:1037:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38) at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:542:36) at TracingChannel.tracePromise (node:diagnostics_channel:337:14) at ModuleLoader.import (node:internal/modules/esm/loader:541:21) { code: 'ERR_MODULE_NOT_FOUND', url: ' file:///D:/inflearn/boiler-plate/config/dev ' } Node.js v22.11.0 at moduleResolve (node:internal/modules/esm/resolve:913:10) at defaultResolve (node:internal/modules/esm/resolve:1037:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38) at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:542:36) at TracingChannel.tracePromise (node:diagnostics_channel:337:14) at ModuleLoader.import (node:internal/modules/esm/loader:541:21) { code: 'ERR_MODULE_NOT_FOUND', url: ' file:///D:/inflearn/boiler-plate/config/dev ' } Node.js v22.11.0 code: 'ERR_MODULE_NOT_FOUND', url: ' file:///D:/inflearn/boiler-plate/config/dev ' }
섹션 5 4.2 첫 React App 생성하기 - 3분 3초 npm create vite@latest 입력 시 아래와 같은 에러가 납니다. 예전에 vue 프로젝트를 만들 때도 똑같은 에러가 났는데 구글에 검색하고 생성형 AI에 물어봐도 해결이 안 돼서 질문 드립니다,, 에러 코드: $ npm create vite@latest > npx > create-vite npm error code 3221225477 npm error path C:\Onebite_React npm error command failed npm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-vite npm error A complete log of this run can be found in: C:\Users\조현희\AppData\Local\npm-cache\_logs\2024-12-20T17_22_12_873Z-debug-0.log /c/Program Files/nodejs/npm: line 65: 1280 Segmentation fault "$NODE_EXE" "$NPM_CLI_JS" "$@"
안녕하세요? 강의 잘 듣고 있습니다. CAS 연산3에서 질문이 있는데요, 아래는 incrementAndGet을 학습용으로 만들어주신 메서드입니다. private static int incrementAndGet(AtomicInteger atomicInteger) { int getValue; boolean result; // 읽고 -> 읽은 값이 바뀌지 않았는지 확인하고 -> 업데이트 // [읽은 값이 바뀌지 않았는지 확인하고 -> 업데이트] 이 부분을 CAS 연산으로 보장 do{ getValue = atomicInteger.get(); log("getValue : " + getValue); sleep(100); // 스레드 동시 실행을 위해 잠시 대기 // 읽은 값이 그대로 있다면(벽경되지 않았다면) 내가 의도한 값을 넣어라! result = atomicInteger.compareAndSet(getValue, getValue+1); log("result: " + result); } while(!result); //compareAndSet이 실패했으면 계속 다시 해라 return getValue + 1; // atomicInteger.get() 하지 않는 이유 <- 그새 다른 스레드가 값을 변경할 수 있기 때문 } 이 코드에서 보면 값을 어플리케이션으로 가져와서 -> CAS연산을 시키고 충돌이 발생할 경우 재실행을 시키는데 애초부터 CPU한테 +1을 하는 것을 시키면 굳이 낙관적락을 적용할 필요가 없지 않나요? 굳이 어플리케이션으로 가져와서 검증을 하는 이유를 아무리 생각해봐도 잘 모르겠습니다. ㅠㅠ
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 프로젝트 생성 강의 듣고나서 떠오르는 2가지 질문이 있어 글을 올려봅니다! 1) 먼저, 제가 start.spring.io 에선 자바 17버전으로 프로젝트를 시작했는데, 막상 main 메서드를 실행시켜서 스프링부트 애플리케이션을 띄울 때 콘솔에는 2024-12-19T20:15:54.366+09:00 INFO 38362 --- [hello-spring] [ main] h.hello_spring.HelloSpringApplication : Starting HelloSpringApplication using Java 21.0.5 with PID 38362 (/Users/.../Desktop/study/hello-spring/build/classes/java/main started by ... in /Users/.../Desktop/study/hello-spring) 이렇게 왜 자바 21.0.5버전을 사용하고 있다고 나올까요? 이미 제 맥북에 21버전 자바가 설치되어서 그런걸까요?? build.gradle에는 java { toolchain { languageVersion = JavaLanguageVersion.of(17) } } 이렇게 17버전으로 올바르게 되어있긴 합니다! 2) 선생님께서 인텔리제이 Preferences > Gradle에서 Build and run using을 Gradle로 되어있는 걸 인텔리제이로 바꾸면 더 빠르게 실행할 수 있다고 하셨는데, 만약, Gradle (Default)로 설정된 경우 > 인텔리제이 화살표 버튼을 클릭했을 때 자바 소스 코드를 컴파일하고 빌드 과정을 포함해서 빌드를 진행하고 스프링부트 애플리케이션을 실행하고, IntelliJ IDEA로 설정된 경우 > 인텔리제이 화살표 버튼을 클릭했을 때 자바 소스 코드를 컴파일하고 빌드를 진행하지 않고 스프링부트 애플리케이션을 바로 실행하기 때문에 더 빠르게 실행된다고 하신걸까요??
안녕하세요 정환님. 우선 좋은 강의 감사드려요! 첫 프론트엔드 입문임에도 즐겁게 따라가고 있습니다. useEffect를 설명하는 과정에서 setCount가 비동기 방식이니 count 변수에 바로 반영이 되지 않는다는 말씀을 듣고 궁금증이 생겨서 질문드립니다. (구글링을 시도해 봤으나 키워드 자체가 익숙하지 않아 정보를 찾기 힘들었습니다 ㅎㅎ;;) const onClickButton = (incrementValue) => { const updatedCount = count + incrementValue; setCount(updatedCount); console.log(updatedCount); }; 위 코드와 같이 count를 더한 값을 미리 계산한 뒤, 그 값으로 setCount 및 console.log()를 찍어보면 업데이트시마다 값이 정확히 출력되는 것을 확인했습니다. 현재는 App 컴포넌트에서 count 변수의 값을 조작하는 곳이 버튼 한 곳 (해당 이벤트 리스너) 밖에 없기에 크게 문제될 여지는 없다고 느껴집니다. 즉, 해당 경우에서는 단순 로그만 찍고 있는데, 이 경우라면 useEffect보다 해당 이벤트 리스너에 코드 한 줄 추가하는 것 이 더 간단하다는 생각이 들었습니다! 결과적으로, 관리 포인트가 한 곳인 위 케이스에서 마저도 useEffect를 사용하는 것이 좋은 방법인지 여쭤보고 싶습니다! 배속으로 들어도 소리도 참 잘 들리는.. 너무 깔끔한 강의 감사합니다! 따뜻한 연말 보내세요 🙇
윈도우 해결법은 있는데, Mac 해결법은 없는 것 같아서 공유 합니다. 터미널에 아래 명령어 입력하시구, mkdir ~/.npm-global export NPM_CONFIG_PREFIX=~/.npm-global export PATH=$PATH:~/.npm-global/bin echo -e "export NPM_CONFIG_PREFIX=~/.npm-global\nexport PATH=$PATH:~/.npm-global/bin" >> ~/.bashrc npm install -g vercel 입력하시면 정상 설치됩니다~!
안녕하세요 토비님. 질문드리기 전 먼저 오랜만에 너무 즐겁게 공부하고 있어 감사하다는 말씀을 드리고 싶습니다! 질문은 다름이 아니라 '도메인 오브젝트 테스트' 편에서 마지막에 메소드로 ExProvider 를 주입하는 방식을 언급해 주셨는데, 이렇게 되면 Payment 가 ExProvider 에 의존하게 되는 것 같아서 고민이 되었습니다. Payment 는 도메인 오브젝트로서 순수하게 Payment 에 관련된 응집만 추구해야 할 것 같은데, 그걸 넘어서는 건 아닐까라는 생각도 들었고, Payment 테스트 시 ExPriovider 주입이 필요하게 되는 점도 걸렸습니다. 기존처럼 BigDecimal 을 받도록 의존성을 끊어주는 게 더 낫지는 않을지 고민이 됩니다. 비슷한 경험으로 이전에 SpringSecurity 의 PasswordEncoder 를 도메인 오브젝트에 메소드로 넘겨볼까 하다가 의존성을 생각해 포기하고 String으로 받았었는데, 이와 동일하지는 않겠지만 앞으로도 고민이 될 수 있는 부분인 것 같아 꼭 질문을 드리고 싶었습니다. 도메인 개념적으로 Payment 가 ExProvider 와 묶여있는 게 자연스럽다 생각하셔서 그렇게 설계하신 걸까 싶은데, 이에 대해 어떻게 생각하시는지 궁금합니다.
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
강의를 듣다가 궁금한 점이 생겨서 질문드립니다. 브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [ Creating a Supabase client for SSR ]( https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client ) @supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다. 클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근 서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요.. import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; } // todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }
안녕하세요! 이번 강의 4분 10초에 나오는 state 값 content를 사용자에게 값을 입력받는 input의 value로 아래 코드와 같이 작성해주시는 이유는 무엇일까요?? value는 어떤 용도로 사용되며 content를 넣어주면서 어떤 변화가 생기는건지 이해가 잘 안되어서 질문드립니다! <input value={content} placeholder="새로운 Todo..." />
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문 전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 궁금증이 생겨서 질문을 남깁니다. '문제 풀이2번 을 어떻게 하면 될까?' 라고 생각 하던 도중,조인 하나만 맨 밑에 넣어보자, 라고 해보니.. 답은 나오긴 하였습니다. (코드 내용) t1.start(); t2.start(); t3.start(); t3.join(); (코드 완료) 근데 여기서 궁금증이 생겼습니다. 여러 개의 작업을 시키고 나서, 끝이 나고, 기다려야 하는 경우에, 정답 풀이에서는 t1.join(); , t2.join(); , t3.join() 이렇게 전부다 join()을 해주었는데, 저 처럼 't3.join()' 하나만 써도 상관 없나요? 답변 부탁 드립니다.
현재 useMemo에 대한 강의를 보고 있습니다. 강의를 볼 땐 어느 부분의 코드가 계속 렌더링이 되기 때문에 불필요한 부분이라 최적화를 해주기 위해 useMemo를 사용한다라고 이해는 하지만 막상 혼자 어떤걸 만들어볼땐 어느 부분의 코드가 계속 렌더링이 되고 불필요한 코드인지 몰라 useMemo를 이용하기가 많이 어렵더라구요. 어떻게 하면 쉽게 이해해서 혼자 코드를 작성할 때 잘 이용할 수 있는지 궁금합니다 ^^
