172만명의 커뮤니티!! 함께 토론해봐요.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요. 강의 16분 즈음부터 @Table(name = "MBR") 같은 것들은 런타임에 영향을 주지만 @Column(unique = true) 같은 제약조건들은 런타임에 영향을 주지 않는다는 말이 왜 그런 건지 이해가 잘 안 가는데 조금 더 설명해주실 수 있을까요?? 둘 다 데이터베이스에 어떤 쿼리를 날려야 하는데 하나는 런타임에 영향을 주고 하나는 그렇지 않다는 게 이해가 잘 가지 않습니다.
966kmj
2023-12-22T03:20:36.187Z
댓글 2
좋아요 0
조회수 598
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
import에 문제가 발생했다고 하는 것 같은데 아무리 찾아봐도 해결이 안됩니다.ㅠ 어찌해야할까요
react node.js seo graphql next.js
thekrjm
2023-12-22T00:37:55.458Z
댓글 2
좋아요 0
조회수 531
미해결
실전! 스프링 부트와 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) } 이렇게 작성했는데 혹시 틀린 부분이 있을까요?
spacebar
2023-12-21T13:04:07.024Z
댓글 2
좋아요 0
조회수 1502
해결됨
자바 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시 위에 제가 생각한 과정대로 이해한게 맞을까요?
덴푸라
2023-12-21T08:11:03.211Z
댓글 2
좋아요 0
조회수 280
미해결
Java/Spring 주니어 개발자를 위한 오답노트
외래키 사용을 지양하라는 내용이 있어서 링크된 글을 읽어봤는데 궁금증이 있습니다. 외래키를 지양한다면 PK 값을 다른 테이블에 넣으면서 그 값으로 조인을 사용하는건가요? 외래키를 지양했을 때 성능상의 이점은 알겠는데 결국 데이터 정합성 부분에서 문제가 발생합니다. RDB에서 데이터 정합성이 깨지면 사용하는 의미가 없다고 하는데 이부분에선 어떻게 생각하시나요? 외래키를 안쓸경우 JPA에서 ManyToOne같은 메소드도 사용하지 않는건가요? 그리고 해당 주장에 대해 반박하는 아래의 링크도 있는데 이 의견은 어떠신가요? https://gdsc-university-of-seoul.github.io/foreign-key/
seiyoung an
2023-12-21T07:50:09.846Z
댓글 2
좋아요 0
조회수 3050
해결됨
Next + React Query로 SNS 서비스 만들기
x.com 을 보면 로그인도 그렇고 게시글 올릴때도 그렇고 모달창이 뜰때마다 그냥 화면에 띄우는 방식이 아니라 저렇게 모달창을 띄울수 있는 url 따로 만든 이유가 뭘까요? 관리가 더 편해서일까요?
react next.js react-query next-auth msw
쵸잉
2023-12-21T06:20:59.439Z
댓글 1
좋아요 0
조회수 598
해결됨
[리뉴얼] 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;
react redux node.js express next.js
박해진
2023-12-20T16:14:33.843Z
댓글 1
좋아요 0
조회수 434
해결됨
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 파일들도 올려야할까요...
java spring rest-api spring-boot msa
김병철
2023-12-20T11:01:56.132Z
댓글 5
좋아요 0
조회수 1705
해결됨
Next + React Query로 SNS 서비스 만들기
섹션4 2번째 강의 내용입니다. 회원가입 진행시에 home으로 redirect 되지 않아 문제를 파악중에 네트워크탭에서 대기중인 상태가 지속되는 것을 확인했습니다. db에는 user data가 정상적으로 들어온 것을 확인했습니다. 어디 잘못된 부분이 있나 싶어 강사님 코드를 그대로 복사해서 다시 실행 해 보았지만 안되고 있는데 혹시 짐작 가시는 부분 잇으실까요. 회원가입 버튼을 누른후에 x 버튼도 되지 않고 있습니다.
react next.js react-query next-auth msw
Gyeongdeok PARK
2023-12-20T09:57:32.074Z
댓글 1
좋아요 0
조회수 283
미해결
김영한의 실전 자바 - 기본편
안녕하세요 강의를 듣던 와중에 궁금한 점이 생겨 질문 남깁니다. 실제로 그렇다면 추상 클래스와 인터페이스 중에 인터페이스를 사용하는게 이점일 것 같은데. 대부분의 경우 인터페이스로 구현되고, 추상 클래스는 사용하지 않는 것인가요 ? 백엔드 개발 시에도 인터페이스 구현을 통해서만 작성하는 것 같아 여쭤봅니다.
백엔드공부화이팅
2023-12-20T08:34:37.281Z
댓글 1
좋아요 0
조회수 455
미해결
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는 사용될 일이 거의 없어지는 건가요..?
react next.js react-query next-auth msw
화해방
2023-12-20T07:58:02.412Z
댓글 2
좋아요 1
조회수 656
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 맥 터미널에서 권한 부여까지 한후 실행을 했는데 ./bin/ h2.sh : line 3: 3667 Trace/BPT trap: 5 java -cp "$dir/h2-2.2.224.jar:$H2DRIVERS:$CLASSPATH" org.h2.tools .Console "$@" 이와 같은 메세지가 뜨면서 아예 화면도 안뜨네요ㅜㅜ
2023-12-20T07:34:10.160Z
댓글 3
좋아요 0
조회수 1064
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, 페러렐 라우트 모달파트에서 모듈 에러가 발생하여 질문드립니다. tailwind css와 관련된 모듈을 설치한 적도 없고 tailwind css코드를 작성한 적도 없는데 계속 이러한 에러가 발생합니다... node_modules를 지웠다가 설치해도 안되고 tailwind css와 관련된 패키지가 설치되어있는지 찾아봤지만 발견할 수 없었습니다 ㅠ 아래 코드가 page.modules.css 코드입니다. .container { width: 100dvw; height: 100dvh; display: flex; flex-direction: row; background-color: #fff; } .left { display: flex; justify-content: center; align-items: center; flex: 1; } .right { display: flex; flex-direction: column; justify-content: center; flex: 1; } .right h1 { font-weight: bold; font-size: 64px; margin: 48px 0; } .right h2 { font-weight: bold; font-size: 31px; margin-bottom: 32px; } .right h3 { font-weight: bold; font-size: 17px; margin-bottom: 20px; margin-top: 40px; } .signup { width: 300px; height: 40px; border-radius: 20px; padding: 0 16px; font-size: 15px; background-color: rgb(29, 155, 240); color: white; border: none; display: flex; align-items: center; justify-content: center; } .signup:hover { background-color: rgb(26, 140, 216); } .login { width: 300px; height: 40px; border-radius: 20px; padding: 0 16px; font-size: 15px; color: rgb(29, 155, 240); border: 1px solid rgb(207, 217, 222); display: flex; align-items: center; justify-content: center; } .login:hover { background-color: rgba(29, 155, 240, 0.1); }
성동윤동
2023-12-20T07:05:15.092Z
댓글 1
좋아요 0
조회수 457
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 듣기전부터 프리티어는 사용하고 있었는데 yarn add --dev eslint-config-prettier 이걸 입력한이후 저장시 프리티어 간격조정이 자동으로 안됩니다 format on save 다 체크 되있는 상태이고 다른폴더에선 프리티어가 되지만 yarn add --dev eslint-config-prettier 이걸 입력한 폴더만 간격 조정이 안먹는 데 이유가 뭘까요
react node.js seo graphql next.js
주재
2023-12-20T04:56:49.603Z
댓글 2
좋아요 0
조회수 473
해결됨
Next + React Query로 SNS 서비스 만들기
Nextjs에서는 <Image /> 컴포넌트로 서버에서 이미지를 최적화 해주는 기능이 있는데,LogoutButton 컴포넌트에서는 기존의 <img> 태그를 사용하신 이유가 있는지 궁금합니다!사이즈가 작기 때문에 서버에 최적화를 맡기는 부담을 줄이기 위함일까요??
react next.js react-query next-auth msw
mihyun Lee
2023-12-20T04:07:37.100Z
댓글 1
좋아요 0
조회수 385
해결됨
Next + React Query로 SNS 서비스 만들기
브라우저 콘솔에 Image with src "/_next/static/media/zlogo.f72788b6.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.Read more: https://nextjs.org/docs/api-reference/next/image#priority 와 같은 warning이 뜨길래 공식문서와 블로그 글을 참고해 봤는데 이미지 로딩의 우선권을 주는 기능인 것 같던데요 그냥 유저가 이미지가 들어가 있는 페이지에 접속했을때, 빠른 로딩 우선권을 주는 거라고 생각하면 되는 걸까요?
react next.js react-query next-auth msw
Jun
2023-12-20T02:54:57.094Z
댓글 1
좋아요 0
조회수 770
미해결
Next + React Query로 SNS 서비스 만들기
해당 강의에서 postgresql 설치와 노드버전 18.17.0 환경에서 nest-prisma의 폴더를 다운 받은 후 npm i -> npx prisma migrate dev 까지는 순조롭게 진행되었으나 npm run start:dev에서 Error: connect ECONNREFUSED ::1:6379 at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1495:16) { errno: -61, code: 'ECONNREFUSED', syscall: 'connect', address: '::1', port: 6379 } 에러가 발생했습니다 구글링을 해보니 레디스 서버가 구동이 안된 것 같다고 나오기도하고 서버쪽을 잘 몰라 질문 드립니다 .env 파일 입니다 DATABASE_URL="postgresql://postgres:비번@localhost:5432/zcom?schema=public" REDIS_URL=redis://localhost:6379 COOKIE_SECRET=cookienyamnyam
react next.js react-query next-auth msw
mun9927
2023-12-19T15:25:24.248Z
댓글 4
좋아요 2
조회수 1425
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요! 제로초님! 보너스 강의까지 잘 챙겨보고 있습니다. 매번 감사합니다! 제 질문은..! server action 함수쪽에서 fetch config 객체에 credentials 을 include로 해줘야 쿠키(세션)를 API 요청 시 같이 태워서 보낼 수 있다고 설명해주셨는데, 혹시 이것이 next-auth 로부터 도움을 받는 것일까요? 강의 수강 후, next 14로 프로젝트를 구현하고 있는데, fetch 할 때, credentials 를 include 해주었음에도 불구하고, 브라우저 application 탭에서 확인 할 수 있는 쿠키가 태워지지 않아서요. 해당 쿠키는 서버에서 로그인 시에 set-cookie 해준 쿠키이고, 프론트엔드는 localhost , 서버는 ec2에 배포된 서버입니다. 그래서 현재는 server action 함수내에서 next.js에서 지원해주는 cookie() 를 이용해서 fetch config 객체 내 headers 에 직접 쿠키를 넣어주고 있는데, 강의에서는 credentials 만으로 API 요청시 쿠키(세션)을 잘 태워서 보내주고 있는 것 같아 질문을 남기게 되었습니다.
react next.js react-query next-auth msw
withkey
2023-12-19T14:12:21.313Z
댓글 2
좋아요 0
조회수 1082
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 선생님 상황) 리덕스 실제 구현하기 부분을 따라하던 도중 configureStore.js에서 createStore 단어 가운데에 취소선이 생기면서 @reduxjs/toolkit의 configureStore로 대체를 권장한다고 뜨는 상황입니다. import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; 사용 중인 OS, 버전) 저는 맥 OS사용자이며, 사용하고 있는 버전은 아래와 같습니다. { "name": "react-nodebird-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build" }, "author": "luckyhaejin", "license": "ISC", "dependencies": { "@ant-design/icons": "^4.2.1", "antd": "^4.2.1", "next": "^9.5.5", "next-redux-wrapper": "^6.0.2", "prop-types": "^15.8.1", "react": "^16.14.0", "react-dom": "^16.14.0", "react-redux": "^7.2.9", "redux": "^4.2.1", "styled-components": "^6.1.1" }, "devDependencies": { "eslint": "^8.56.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0" } } 상황) 그래서 @reduxjs/toolkit과 관련한 문제 같아 react, react-dom 버전을 최신버전인 18로 바꾸고 next도 최신 버전인 14버전으로 바꾼 뒤 @reduxjs/toolkit을 설치하고 @reduxjs/toolkit 방식으로 대체하라는 메세지 안의 redux 링크를 참고하여 코드를 수정해보았습니다. https://redux.js.org/introduction/why-rtk-is-redux-today 하지만 제가 맞게 작성한건지 잘 모르겠고, 이렇게 제가 짠 코드로 변경을 하게되면 강의를 보며 따라하기가 어려워질 것 같아서 다시 원래 에러가 난 상태로 되돌린 상태입니다. 질문) reduxjs/toolkit을 적용하여 작성한 아래 코드가 맞게 작성된건지 궁금합니다. 질문) 깃에서 reduxjs/toolkit을 사용한 코드를 강의 순서대로 적용하고 싶어서 찾아보았으나, 섹션2 코드가 순서대로 적용된게 아니라 한번에 올라온 것 같아서, 혹시 강의 순서대로 @reduxjs/toolkit을 적용한 코드가 있다면 어떻게 해야 그 코드를 순서대로 볼 수 있는지 궁금합니다. 만약 강의 순서대로 적용한 코드가 없고 섹션별로 나눠져 있다면 섹션 순서대로 코드를 보는 방법이 궁금합니다. 수정 전) reducers/index.js const initialState = { user: { isLoggedIn:false, user:null, signUpData:{}, loginData:{} }, post: { mainPosts:[] } }; export const loginAction = (data) => { return { type: 'LOG_IN', data } } export const logoutAction = () => { return { type: 'LOG_OUT' } } // 이전 상태, 액션 => 다음상태 const rootReducer = (state = initialState, action) => { switch(action.type) { case 'LOG_IN': return { ...state, user: { ...state.user, isLoggedIn: true, user:action.data } }; case 'LOG_OUT': return { ...state, user: { ...state.user, isLoggedIn: false, user:null } }; default: return state; } }; export default rootReducer; 수정 후) reducers/userSlice import {createSlice} from '@reduxjs/toolkit' const userSlice = createSlice({ name: 'user', initialState: { isLoggedIn: false, user:null }, reducers: { login(state, action) { isLoggedIn: true, user:action.payload; }, logout(state) { isLoggedIn: false, user:null } } }) export const {login, logout} = userSlice.actions; export default userSlice.reducer; reducers/postSlice import {createSlice} from '@reduxjs/toolkit' const postSlice = createSlice({ name: 'post', initialState: { mainPosts:[] }, reducers: { } }); export default postSlice.reducer; 수정 전) store/configureStore.js import {createWrapper} from 'next-redux-wrapper'; import {createStore} from 'redux'; import reducer from '../reducers'; const configureStore = () => { const store = createStore(reducer); store.dispatch({ type:'CHANGE_NICKNAME', data:'luckyhaejin' }); return store; }; const wrapper = createWrapper(configureStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper; 수정 후) store/configureStore.js import { createWrapper } from 'next-redux-wrapper'; import { configureStore } from '@reduxjs/toolkit'; import userReducer from '../reducers/userSlice'; import postReducer from '../reducers/postSlice' const makeStore = () => { const store = configureStore({ reducer: { user: userReducer, post: postReducer } }); return store; }; const wrapper = createWrapper(makeStore, { debug: process.env.NODE_ENV === 'development', }); export default wrapper;
react redux node.js express next.js
박해진
2023-12-19T13:46:46.160Z
댓글 2
좋아요 0
조회수 293
해결됨
실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 안녕하세요. 강의 잘 듣고 있습니다.강의 도중 궁금한 점이 생겨 질문드립니다. 강의에서는 POST나 PUT요청에서도 Response DTO 객체를 생성해서 전달하셨는데, 실제 실무에서도 이렇게 하는지 궁금합니다. 질문드린 이유는 HTTP Response code상 201이나 204 등의 응답코드가 있는 것으로 알고있는데, Response를 매번 생성하는게 실질적으로 좋은 설계이기 때문인지, 아니면 변경이 완료된 것을 실제로 조회하면서 이해를 돕기 위함인지 궁금했습니다. 감사합니다.
엽엽
2023-12-19T11:58:45.720Z
댓글 1
좋아요 0
조회수 424
