서버 실행 시 에러 관련하여 답변받고 1차 조치했는데 여전하여서 질문 남깁니다
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
data-source hostname db로 변경하라는 말씀 듣고 변경해보았는데 여전히 해결이 안되어서 질문 남깁니다
- react
- node.js
- postgresql
- docker
- typescript
- 클론코딩
- next.js
173만명의 커뮤니티!! 함께 토론해봐요.
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
data-source hostname db로 변경하라는 말씀 듣고 변경해보았는데 여전히 해결이 안되어서 질문 남깁니다
미해결
따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
서버 실행 시 해당 에러가 발생해서 질문 남깁니다 문제 파악에 도움될까해서 data-source.ts, server.ts 파일도 첨부합니다
미해결
Next + React Query로 SNS 서비스 만들기
혹시 aws s3로는 배포가 불가능 할까요??
미해결
실전 프로젝트로 배우는 데이터 앱 만들기 with Python & Streamlit
안녕하세요~~ 루비네 코딩 입니다 ^^ 최근 앱을 런칭할 때 다음과 같은 오류가 발생하고 있습니다. ModuleNotFoundError: No module named 'altair.vegalite.v4' 이런경우, 다음과 같이 altair 패키지의 버전을 바꾸어 설치해 주세요 ^^ 감사합니다~ pip uninstall altair pip install altair==4.2.2
미해결
Next + React Query로 SNS 서비스 만들기
Warning: Cannot update a component (`Router`) while rendering a different component (`RedirectLoginPage`). To locate the bad setState() call inside `RedirectLoginPage`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at RedirectLoginPage (webpack-internal:///(app-pages-browser)/./src/app/(beforeLogin)/login/page.tsx:15:78) at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:240:11) 로그인 버튼 클릭시 '/login' 이동하면 이런 Warning 이 발생하는데 빌드시에도 Error occurred prerendering page "/login". Read more: https://nextjs.org/docs/messages/prerender-error ReferenceError: location is not defined 위 같은 에러가 발생합니다. location을 사용하는 부분도 없고, useRouter도 'next/navigation' 에 있는 것을 사용중입니다. 해결법으로는 useEffect로 감싸주는 법이 있어 useEffect((router.replace(path)) => []) 이런방식으로 해봤는데 오류는 해결되네요. 하지만 오류 내용대로 해석해보면 렌더링 도중 set을 통한 상태변화를 하지 않는데 오류가 나는 이유는 뭔가요? return 으로 Main 컴포넌트를 그려주어야하는데 replace시 LoginModal의 컴포넌트를 그려주어야해서 렌더링해야할 컴포넌트가 겹쳐서 발생하는 문제인가요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
강의에서 진행 된 요소 추가 전까진 정상 작동 되는 것 확인 했습니다. Menu 추가 후 아래와 같은 오류가 출력 됩니다. Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. TypeError: Cannot read properties of null (reading 'useRef') at useRef (C:\Users\sion\node_modules\react\cjs\react.development.js:1630:21) at Object.render (C:\Users\sion\node_modules\antd\lib\menu\index.js:19:37) at ReactDOMServerRenderer.render (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3535:44) at ReactDOMServerRenderer.read (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29) at renderToString (C:\Users\sion\Documents\prepare\front\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27) at Object.renderPage (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:851) at Document.getInitialProps (C:\Users\sion\Documents\prepare\front\.next\server\pages\_document.js:264:19) at loadGetInitialProps (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\lib\utils.js:5:101) at renderToHTML (C:\Users\sion\Documents\prepare\front\node_modules\next\dist\next-server\server\render.js:50:1142) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 터미널에 찍힌 로그입니다. react/react dom 버전은 동일함을 확인했고 16.14.0 버전 사용 중입니다. 구글링 중 react hook form을 인스톨 하라는 검색 결과가 있어 해당 패키지 설치 했습니다. 버전은 7.49.2 사용 중 입니다. 로컬에서 실행 된 화면입니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의 잘 듣고있습니다 제로초님! 질문 한 가지 있습니다! 섹션3 마지막 강의 suspense 관련 간단 질문입니다. 검색 엔진이 로딩화면을 긁어가서 SEO가 안 좋아지는 것을 막기위해서 preFetchInfiniteQuery를 통해 SSR를 구현해야한다고 하셨는데, 마지막에 알려주신 post 목록에 suspense로 따로 로딩을 구현한 부분은 검색 엔진에 감지 되나요? 만약에 감지가 되지 않는다면 가장 중요한 게시물의 내용이 안보이게되는 셈이 될텐데 괜찮나요?
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
안녕하세요! revalidateTag 함수 관련 코드를 보다가 궁금한 점이 생겨서 질문 드립니다! 우선 fetch 를 통해 데이터를 받아오는 비동기 호출은 서버 컴포넌트에서만 호출할 수 있다고 해서 날씨API나 시간API를 서버 컴포넌트에서 fetch 를 이용해 받아오는 것 까지는 이해가 갔습니다. 그런데 아래와 같이 캐시를 비우는 버튼을 만들 때는 클라이언트 컴포넌트에서 fetch 가 사용되었습니다. 'use client' type Props = { tag : string } export default function RevalidateButton({tag} : Props) { const handleClick = async () => { const res = await fetch(`/api/revalidate?tag=${tag}`, { method : 'POST' }) console.log(res) } return <button onClick={handleClick}>캐시 비우기</button> } 일단 이벤트 핸들러는 클라이언트 컴포넌트에서 사용 해야 되서 'use client' 를 작성하는 것도 이해가 갔습니다. 그리고 revalidateTag 함수는 서버 컴포넌트에서 호출되야 하니깐 'api요청을 보내야 되서 fetch 를 사용해야 한다' 라고 이해를 했는데요.. 그럼 혼란 스러운게.. ' fetch 비동기 호출은 서버 컴포넌트에서 하라고 되어 있는데 revalidateTag 같이 서버 컴포넌트에서 동작하는 함수를 호출하기 위해서는 어쩔 수 없이 fetch 를 클라이언트 컴포넌트에서 사용해야한다' 라고 이해 하는게 맞을까요?? 그리고 위의 코드에서 method : 'POST' 라고 세팅하여 주셨는데 보내는 방식은 POST 로 정해져 있는 것인지, 다른 메서드 (get, update, delete)로 사용하면 안되는 것인지 궁금합니다! 아래는 핸드북(3. Next.js 손에 익히기 / 7.날씨데이터 조회하기 / 데이터 재검증하기 )에 설명해주신 내용인데요! revalidateTag 는 서버 사이드에서 호출 가능합니다. 하지만 캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다. 때문에 API 형태로 revalidateTag 를 호출할 수 있도록 만들어야 합니다. Next.js에서의 API는 라우트 핸들러를 통해 만들 수 있습니다. "캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다." 라는 말이 RevalidateButton 버튼을 클릭했을 때 handleClick 함수가 호출되는 때를 말씀하신 것인지 궁금합니다. 아래는 revalidateTag 가 호출되는 서버 컴포넌트 코드입니다. import { revalidateTag } from "next/cache"; import { NextRequest, NextResponse } from "next/server"; export async function POST(req:NextRequest) { const tag = req.nextUrl.searchParams.get('tag'); if(!tag) throw new Error('태그는 필수!!') revalidateTag(tag) return NextResponse.json({message : '재검증에 성공했습니다', tag}) } revalidateTag 함수는 호출시 에러가 발생하는 경우는 없는건가요?? 제 생각에는 revalidateTag 도 제대로 작동을 안할 수도 있으니깐 try catch 문으로 감싸서 호출하는게 맞지 않을까? 생각이 들었는데 그렇게 안해도 되는 것인지 궁금합니다!
미해결
김영한의 실전 자바 - 기본편
[질문 내용] 제가 지금 이해한 내용으로는 Parent parent = new child(); 가 있을때 메모리에는 Child를 기준으로 상위 부모 클래스만 메모리에 적재되고 (편의상 Child 메모리라고 하겠습니다), parent의 참조 주소는 생성된 Child 메모리 안의 Parent 클래스를 참조하며, parent의 멤버변수는 Parent 클래스의 멤버변수만 가질 수 있고, 오버라이딩된 메소드가 존재한다면 무조건 오버라이딩된 메소드가 우선권을 가진다 라고이해했는데, 덧붙일 개념들이 혹시 있을까요? 아, 그리고 만약 오버라이딩된 메소드가 부모클래스에서 실행할 수 없는 메소드라면 어떻게되는지도 궁금합니다. (혹시, 오버라이딩된 메소드가 부모클래스에서 실행되지않을 가능성은 아예 없나요?)
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요. 강의 16분 즈음부터 @Table(name = "MBR") 같은 것들은 런타임에 영향을 주지만 @Column(unique = true) 같은 제약조건들은 런타임에 영향을 주지 않는다는 말이 왜 그런 건지 이해가 잘 안 가는데 조금 더 설명해주실 수 있을까요?? 둘 다 데이터베이스에 어떤 쿼리를 날려야 하는데 하나는 런타임에 영향을 주고 하나는 그렇지 않다는 게 이해가 잘 가지 않습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import에 문제가 발생했다고 하는 것 같은데 아무리 찾아봐도 해결이 안됩니다.ㅠ 어찌해야할까요
미해결
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
QueryDSL 소개 강의 영상에서 gradle 설정하는 부분을 3이상버전 관련해서 올려주신 자료를 보면서 따라했는데 build-clean을 하고 해봐도 tasks-others밑에 compileQuerydsl파일이 생성되 지않아서 comlile.java 를 눌렀더니 generated에 파일들은 잘 생성됐습니다. plugins { id 'java' id 'org.springframework.boot' version '3.1.5' id 'io.spring.dependency-management' version '1.1.3' } group = 'jpabook' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-validation' implementation 'org.springframework.boot:spring-boot-devtools' implementation 'com.github.gavlyukovskiy:p6spy-spring-boot-starter:1.9.0' //Hibernate5JakartaModule 등록 (하이버네이트 모듈) implementation 'com.fasterxml.jackson.datatype:jackson-datatype-hibernate5-jakarta' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' //QueryDsl 관련 추가 implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt:${dependencyManagement.importedProperties['querydsl.version']}:jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" } tasks.named('test') { useJUnitPlatform() } def querydslSrcDir = 'src/main/generated' clean { delete file(querydslSrcDir) } tasks.withType(JavaCompile) { options.generatedSourceOutputDirectory = file(querydslSrcDir) } 이렇게 작성했는데 혹시 틀린 부분이 있을까요?
해결됨
자바 ORM 표준 JPA 프로그래밍 - 기본편
예를들어 id값이 20~30인 member를 가져올때 영속성 컨테스트안의 1차캐시에는 값들이 어떻게 저장이 되나요? 일단 강의에서는 em.persist 와 em.find 인 경우 1차 캐시에 값을 저장한다고 해서 위와 같이 jpql을 사용했을때 일단 영속성 컨테스트에 값이 저장되는지 확인해보았습니다. 영속성 컨테스트에 값이 저장되었다면 commit시 1.flush 발생 2.스냅샷과 비교해서 변경감지. 3.변경이있었다면(setter) 쓰기 지연 SQL 저장소에 UPDATE쿼리 생성 및 저장 4.쓰기 지연 SQL 저장소에 있는 모든 쿼리를 실행. 5.커밋(실제DB반영) 위 과정이 일어나서 NAME 값이 changeMember로 변경되어야하는데 확인해보니 실제로 값이 변경되는걸 확인할 수 있었습니다. update 쿼리도 2번일어나는데 그럼 위의 예시에서 executeQuery로 jpql 실행 시 1차 캐시에 값이 @id Entity 20 member(20,memberA) 30 member(30,memberB) 이렇게 저장되는 거 같은데 맞나요??(리스트로 가져오면 , 하나씩 풀어서 저장) 그리고 commit시 위에 제가 생각한 과정대로 이해한게 맞을까요?
미해결
Java/Spring 주니어 개발자를 위한 오답노트
외래키 사용을 지양하라는 내용이 있어서 링크된 글을 읽어봤는데 궁금증이 있습니다. 외래키를 지양한다면 PK 값을 다른 테이블에 넣으면서 그 값으로 조인을 사용하는건가요? 외래키를 지양했을 때 성능상의 이점은 알겠는데 결국 데이터 정합성 부분에서 문제가 발생합니다. RDB에서 데이터 정합성이 깨지면 사용하는 의미가 없다고 하는데 이부분에선 어떻게 생각하시나요? 외래키를 안쓸경우 JPA에서 ManyToOne같은 메소드도 사용하지 않는건가요? 그리고 해당 주장에 대해 반박하는 아래의 링크도 있는데 이 의견은 어떠신가요? https://gdsc-university-of-seoul.github.io/foreign-key/
해결됨
Next + React Query로 SNS 서비스 만들기
x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
질문)짹짹을 눌렀을 때 게시물이 우측에 정렬되는데 어떻게 해야 아래로 정렬될까요? 현재 게시물 추가시 화면) 작성한 코드) PostForm.js import React,{useCallback, useState, useRef} from 'react'; import {Form, Input, Button} from 'antd'; import {useSelector, useDispatch} from 'react-redux'; import {addPost} from '../reducers/post'; const PostForm = () => { const {imagePaths} = useSelector((state) => state.post); const dispatch = useDispatch(); const imageInput = useRef(); const [text, setText] = useState(''); const onChangeText = useCallback((e) => { setText(e.target.value); }, []) const onSubmit = useCallback(()=> { dispatch(addPost); setText(''); }); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: '10px 0 20px'}} encType="multipart/form-data" onFinish={onSubmit}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <input type="file" multiple hidden ref={imageInput}/> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{display: 'inline-block'}}> <img src={v} style={{width:'200px'}} alt={v}/> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ) } export default PostForm; post.js export const initalState = { mainPosts:[{ id:1, User:{ id:1, nickname: '해지니1', }, content: '첫 번째 게시글 #해시태그 #행복한집사생활', Images:[{ src: 'https://loremflickr.com/640/360' },{ src: 'https://placekitten.com/640/360' },{ src: 'https://picsum.photos/640/360' }], Comments: [{ User: { nickname:'해지니2' }, content: '고양이는 다 기여벙', }, { User: { nickname:'해지니3' }, content: '냥냥냥' }] }], imagePaths: [], //게시물 저장 경로 postAdded: false //게시글 추가 완료시 true } const ADD_POST = 'ADD_POST'; export const addPost = { type: ADD_POST } const dummyPost = { id: 2, content: '더미데이터', User: { id:1, nickname:'해지니', }, Images: [], Comments: [], }; const reducer = (state = initalState, action) => { switch(action.type){ case ADD_POST: return { ...state, mainPosts: [dummyPost, ...state.mainPosts], postAdded: true, }; default: return state; } } export default reducer;
해결됨
Java 마이크로서비스(MSA) 프로젝트 실습
config-server / eureka-server / gateway-server / 그리고 item-service-server 대신에 제가 만드는 rms라는 애플리케이션 서버를 띄웠습니다. 게이트웨이 서버를 통해서 http 요청을 보내면 404가 뜨고 직접 애플리케이션 서버로 요청을 보내면 잘 동작하는 상태입니다. 그래서 config-server의 gateway-server-local.yml 파일에서 spring.cloud .gateway 부분에 문제가 있을거라 추측하고 계속 찾아봤는데... 어떻게 변경해야 할지.. 잘 모르겠어서 질문드립니다. 일단 파일 전체를 공유하겠습니다. config-server resources.application.yml spring: application: name: config-server profiles: active: native cloud: config: server: native: search-locations: classpath:/config encrypt: enabled: false server: port: 8080 resources.bootstrap.yml encrypt: key: IRON0000 resources.config.eureka-server-local.yml logging: file: name: logs/eureka.log max-size: 500MB max-history: 10 level: root: info org.com.iron.eureka-server: debug spring: application: name: eureka-server server: port: 8761 eureka: instance: hostname: eureka-server client: serviceUrl: defaultZone: http://${eureka.instance.hostname}:${server.port}/eureka/ register-with-eureka: false fetch-registry: false management: endpoints: web: exposure: include: "*" resources.config.gateway-server-local.yml logging: file: name: logs/gateway-local.log max-size: 500MB max-history: 10 level: root: info org.hibernate.SQL: debug # org.hibernate.type: trace spring: application: name: gateway-server cloud: gateway: routes: - id: rms uri: lb://rms eureka: instance: prefer-ip-address: true client: register-with-eureka: true fetch-registry: true service-url: defaultZone: http://localhost:8761/eureka resources.config.rms.yml logging: file: name: logs/api.log max-size: 500MB max-history: 10 level: root: info org.hibernate.SQL: debug # org.hibernate.type: trace spring: datasource: url: jdbc:h2:tcp://localhost/~/server-iron username: sa password: driver-class-name: org.h2.Driver jpa: hibernate: ddl-auto: none properties: hibernate: show_sql: true format_sql: true default_batch_fetch_size: 1000 #최적화 옵션 mybatis: mapper-locations: mybatis/mappers/*.xml springdoc: default-consumes-media-type: application/json default-produces-media-type: application/json swagger-ui: operations-sorter: alpha disable-swagger-default-url: true display-query-params-without-oauth2: true resources.config.rms-local.yml logging: file: name: logs/rms-local3.log max-size: 500MB max-history: 10 level: root: info org.hibernate.SQL: debug # org.hibernate.type: trace spring: datasource: url: jdbc:h2:tcp://localhost/~/server-iron username: sa password: '{cipher}' driver-class-name: org.h2.Driver jpa: hibernate: ddl-auto: none properties: hibernate: show_sql: true format_sql: true default_batch_fetch_size: 1000 #최적화 옵션 mybatis: mapper-locations: mybatis/mappers/*.xml springdoc: default-consumes-media-type: application/json default-produces-media-type: application/json swagger-ui: operations-sorter: alpha disable-swagger-default-url: true display-query-params-without-oauth2: true token: expiration_time: 86400000 secret: IRON0000 eureka: instance: instance-id: ${spring.cloud.client.hostname}:${spring.application.instance_id:${random.value}} prefer-ip-address: true client: register-with-eureka: true fetch-registry: true service-url: defaultZone: http://localhost:8761/eureka eureka-server.yml resources.bootstrap.yml spring: application: name: eureka-server profiles: active: local cloud: config: uri: http://localhost:8080 loadbalancer: ribbon: enabled: false gateway-server resources.bootstrap.yml server: port: 8070 spring: application: name: gateway-server profiles: active: local cloud: config: uri: http://localhost:8080 loadbalancer: ribbon: enabled: false management: endpoints: web: exposure: include: refresh, health, beans rms resources.bootstrap.yml server: port: 0 spring: application: name: rms profiles: active: local cloud: config: uri: http://localhost:8080 loadbalancer: ribbon: enabled: false refresh: extra-refreshable: com.zaxxer.hikari.HikariDataSource management: endpoints: web: exposure: include: refresh, health, beans build.gradle 파일들도 올려야할까요...
해결됨
Next + React Query로 SNS 서비스 만들기
섹션4 2번째 강의 내용입니다. 회원가입 진행시에 home으로 redirect 되지 않아 문제를 파악중에 네트워크탭에서 대기중인 상태가 지속되는 것을 확인했습니다. db에는 user data가 정상적으로 들어온 것을 확인했습니다. 어디 잘못된 부분이 있나 싶어 강사님 코드를 그대로 복사해서 다시 실행 해 보았지만 안되고 있는데 혹시 짐작 가시는 부분 잇으실까요. 회원가입 버튼을 누른후에 x 버튼도 되지 않고 있습니다.
미해결
김영한의 실전 자바 - 기본편
안녕하세요 강의를 듣던 와중에 궁금한 점이 생겨 질문 남깁니다. 실제로 그렇다면 추상 클래스와 인터페이스 중에 인터페이스를 사용하는게 이점일 것 같은데. 대부분의 경우 인터페이스로 구현되고, 추상 클래스는 사용하지 않는 것인가요 ? 백엔드 개발 시에도 인터페이스 구현을 통해서만 작성하는 것 같아 여쭤봅니다.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 제로초님 소중한 강의 감사히 보고있습니다. 다름이 아니라 강의를 잘 이해하다가 Server action 부터 잘 와닿지가 않아서 질문드립니다. SignupModal.tsx 를 server component로 변경하는 과정을 보고있는데요. 리액트에서는 input 태그의 입력값을 useState와 onChange로 관리하지 하지 않으면, "A component is changing an uncontrolled input to be controlled" 와 같은 에러를 띄웠기 때문에 모든 input 값은 useState를 통해 관리하는게 바람직하다고 생각해왔습니다. 리액트 기반으로 동작하는 next도 당연히 그럴 줄 알았습니다. 그런데 센세이셔널하게 server action에서 그게 통째로 사라져 버리니 매우 혼란스럽습니다. 단지 서버 컴포넌트로 바뀌었기 때문에 없어져도 상관없는건가요? input태그 입력은 데이터가 실시간으로 입력되는 과정이니까 클라이언트 컴포넌트에서 이루어지는게 맞다고 생각을 해와서그런지 쉽게 받아들여지지 않습니다. 또한 말씀하신 방법을 사용했을 때, 만약 입력값 유효성 검사에 있어서 단순히 입력 유무를 확인하는 required 속성 말고도, 입력값을 실시간으로 체크해 유효성 검사 결과를 로직(ex) '사용할 수 있는/없는 비밀번호입니다'를 실시간으로 보여주는 helperText )같은 경우는 구현이 불가능한게 되는 것인지 궁금합니다. 모든 컴포넌트를 다 sever action을 활용하는 방식으로 바꾼다면, useState는 사용될 일이 거의 없어지는 건가요..?