inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

flush() 와 clear()

해결됨

실전! 스프링 데이터 JPA

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 1. 스프링 데이터 JPA 가 지원하는 save를 호출하면 flush()가 나가는건가요 아니면 save를 하고 bulkAgePlus()를 호출하면서 bulkAgePlus() 에 있는 JQPL이 실행되서 flush() 가 나가는건가요 ? bulkAgePlus()를 실행하면 JPQL 실행이되고, JPQL 이 실행이 되면 flush() 가 호출이 되는데 이때 SQL쿼리문이 DB에 전송이대서 DB에는 업데이트가 되어있지만 영속성 컨텍스트는 업데이트가 안되기 때문에 clear()를 해주는게 맞는건가요 ?

  • java
  • spring
  • spring-boot
  • jpa
최재영 댓글 1 좋아요 0 조회수 483

그냥 질문입니다.

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

데이터 관리를 SQLite와 Firebase와 무슨 차이점 인가요? 제가 다른 강의를 보다가 넘어와서요. firebase가 익숙해서 드리는 질문입니다. 또 어느 문제가 발생합니까?

  • flutter
  • 클론코딩
vadain2000 댓글 1 좋아요 0 조회수 280

사용자 정보, 게시글 정보를 Model 클래스로 관리 강의 관련 질문

해결됨

Flutter로 SNS 앱 만들기

안녕하세요. 강의 잘 듣고 있습니다. 사용자 정보, 게시글 정보를 Model 클래스로 관리 강의 관련 질문 있습니다. 그 전 강의인 firestore에 게시글 정보 저장 강의 까지는 firestore database에 정상적으로 data가 올라갔습니다. 하지만, 사용자 정보, 게시글정보를 Model 클래스로 관리 강의에 따라 코드 작성 후 firestore database에 data가 올라가지 않습니다. (storage는 잘 작동합니다.) //feed_model.dart // ignore_for_file: public_member_api_docs, sort_constructors_first import 'dart:convert'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:collection/collection.dart'; import 'package:sns_clonecode/models/urser_model.dart'; class FeedModel { final String uid; final String feedId; final String desc; final List<String> imageUrls; final List<String> likes; final int commentCount; final int likeCount; final Timestamp creatAt; final UserModel writer; const FeedModel({ required this.uid, required this.feedId, required this.desc, required this.imageUrls, required this.likes, required this.commentCount, required this.likeCount, required this.creatAt, required this.writer, }); Map<String, dynamic> toMap({ required DocumentReference<Map<String, dynamic>> userDocRef, }) { return { 'uid': this.uid, 'feedId': this.feedId, 'desc': this.desc, 'imageUrls': this.imageUrls, 'likes': this.likes, 'commentCount': this.commentCount, 'likeCount': this.likeCount, 'creatAt': this.creatAt, 'writer': userDocRef, }; } factory FeedModel.fromMap(Map<String, dynamic> map) { return FeedModel( uid: map['uid'], feedId: map['feedId'], desc: map['desc'], imageUrls: List<String>.from((map['imageUrls'])), likes: List<String>.from((map['likes'])), commentCount: map['commentCount'], likeCount: map['likeCount'], creatAt: map['creatAt'], writer: map['writer'], ); } } //user_model.dart // ignore_for_file: public_member_api_docs, sort_constructors_first import 'dart:convert'; class UserModel { final String uid; final String name; final String email; final String? profileImage; final int feedCount; final List<String> followers; final List<String> following; final List<String> likes; const UserModel({ required this.uid, required this.name, required this.email, required this.profileImage, required this.feedCount, required this.followers, required this.following, required this.likes, }); factory UserModel.init() { return UserModel( uid: '', name: '', email: '', profileImage: null, feedCount: 0, followers: [], following: [], likes: [], ); } //usermodle 이 가지고 있는 filed 변수로 가지고 있는 데이터들을 가지고 map 형태 데이터를 만들어 준다. Map<String, dynamic> toMap() { return { 'uid': this.uid, 'name': this.name, 'email': this.email, 'profileImage': this.profileImage, 'feedCount': this.feedCount, 'followers': this.followers, 'following': this.following, 'likes': this.likes, }; } //map 형태 데이터를 인자값을 전달 받아 usermolde 객체를 만들어 준다. factory UserModel.fromMap(Map<String, dynamic> map) { return UserModel( uid: map['uid'], name: map['name'], email: map['email'], profileImage: map['profileImage'], feedCount: map['feedCount'], followers: List<String>.from(map['followers']), following: List<String>.from(map['following']), likes: List<String>.from(map['likes']), ); } } //feed_repository.dart import 'dart:io'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_storage/firebase_storage.dart'; import 'package:sns_clonecode/models/feed_model.dart'; import 'package:sns_clonecode/models/urser_model.dart'; import 'package:sns_clonecode/utils/logger.dart'; import 'package:uuid/uuid.dart'; class FeedRepository { final FirebaseStorage firebaseStorage; final FirebaseFirestore firebaseFirestore; const FeedRepository({ required this.firebaseFirestore, required this.firebaseStorage, }); Future<void> uploadFeed({ required List<String> files, required String desc, required String uid, //feeds 컬렉션에 저장 //피드 각각이 문서 //이미지는 storage에 직접 저장하고 firestore에 접근할 수 있는 url 문자열로 받을 것이다. //좋아요 수 //이 게시글에 달린 댓글의 수 //게시글을 작성한 날짜 //feeds에서 user의 정보를 바로 가져올 수 있게 reference 타입의 데이터를 저장한다. }) async { //파이어스토어에 데이터 저장하기위해서 //문서 아이디는 겹치지 않는 고유한 값으로 만들어야 한다. //a-z 알파벳 //0~9 숫자 //이 두가지를 조합해서 32글자의 고유한 값을 만들어 준다. //32글자에 - 4개씩 들어가서 36글자가 된다. //고유한 값을 만드는 방법 여러가지 version1 .... //우리는 version1을 사용 (현재 시간을 기준으로 random값을 만들어 준다.) String feedId = Uuid().v1(); //firestore 문서 참조 DocumentReference<Map<String, dynamic>> feedDocRef = firebaseFirestore.collection('feeds').doc(feedId); DocumentReference<Map<String, dynamic>> userDocRef = firebaseFirestore.collection('users').doc(uid); //storage 참조 Reference ref = firebaseStorage.ref().child('feeds').child(feedId); List<String> imageUrls = await Future.wait(files.map((e) async { //문자열 e는 이미지 파일에 접근할 수 있는 경로 String imageId = Uuid().v1(); TaskSnapshot taskSnapshot = await ref.child(imageId).putFile(File(e)); return await taskSnapshot.ref.getDownloadURL(); }).toList()); DocumentSnapshot<Map<String, dynamic>> userSnapshot = await userDocRef.get(); UserModel userModel = UserModel.fromMap(userSnapshot.data()!); FeedModel feedModel = FeedModel.fromMap({ 'uid': uid, 'feedId': feedId, 'desc': desc, 'imageUrls': imageUrls, 'likes': [], 'likeCount': 0, 'commentCount': 0, 'createAt': Timestamp.now(), 'writer': userModel, }); await feedDocRef.set(feedModel.toMap(userDocRef: userDocRef)); // await feedDocRef.set({ // 'uid': uid, // 'feedId': feedId, // 'desc': desc, // 'imageUrls': imageUrls, // 'likes': [], // 'commentCount': 0, // 'likeCount': 0, // 'creatAt': Timestamp.now(), // 'writer': userDocRef, // }); await userDocRef.update({ 'feedCount': FieldValue.increment(1), }); } } 바쁘실 텐데 질문 읽어주셔서 감사합니다.

  • flutter
  • android
  • firebase
  • dart
강민석 댓글 2 좋아요 0 조회수 379

위젯과 클래스

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

Boxdecoration()은 위젯이라고 볼 수 없는건가요? 볼 수 있는거 아닌가요?제가 이해하기로는 위젯과 위젯이 아닌 클래스의 차이로는위젯은 컨스트럭터 자체로 역할을 할 수 있고 위젯이 아닌 클래스는 컨스트럭터 자로 역할을 할 수는 없고, 그 컨스트럭터로 인스턴스를 만들고 그 인스턴스로 메서드나 멤버변수 이용라는걸로 이해하고 있습니다. 위 내용에 따르면 Boxdecoration()도 위젯 아닌가요?위젯과 위젯이 아닌 클래스를 나누는 명확한 기준이 있나오?

  • flutter
  • 클론코딩
강원빈 댓글 1 좋아요 0 조회수 223

서버 컴포넌트 관련 질문입니다!

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

SSR 방식에 서버 컴포넌트와 클라이언트 컴포넌트를 둘 다 적절히 사용하는 것인가요?? 서버 컴포넌트는 데이터 페칭, 보안, 캐싱, JS 번들크기 감소와 같은 장점이 있고 event와 hook을 사용하지 못한다는 특징도 이야기해주셨는데, 그렇다면 데이터를 받아서(페칭해서) 클라이언트 컴포넌트에 데이터를 뿌려주는 느낌으로 조합해서 사용하는 건가요?? 서버컴포넌트는 event를 사용하지 않으므로, TTI를 개선하기 위해 나온 개념은 아닌거죠???

  • react
  • typescript
  • next.js
  • next.js13
이종민 댓글 5 좋아요 3 조회수 1750

riverpod 상태관리시에 궁금한점 질문드립니다.

미해결

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

안녕하세요 코팩님. 상품검색 페이지를 작업했습니다. riverpod으로 상태관리를 하며 필터(검색조건)을 provider로 구현하였습니다. 필터들은 stateProvider로 하였고 검색데이터 list는 StateNotifierProvider(필터값들 watch중)로 선언하였습니다. 기본적으로 필터가 변경될때 자동으로 재검색이 되고 있는데요. 검색결과 페이지에서 새로운 검색어를 넣고 다시 검색할 때 이슈가 있습니다. (pushReplacementNamed로 현재페이지를 다시 호출) 사정상 검색어는 provider로 하지 않고 파라미터로 받고 있습니다. 필터프로바이더들을 초기화 하지 않으면 새로운검색결과에 조건이 또 타게되서 필터들을 초기화 해주고 싶은데요. 필터를 초기화해주면 기존 리스트가 자동으로 watch중이라 재검색이 먼저 실행되어버립니다. invalidate도 마찬가지구요. 어쩔수없이 changeNotifierProvider를 써서 notifyListeners를 호출하지 않고 값을 변경하는 함수를 따로 만들어서 그걸 호출 해서 값을 초기화하고 pushReplacementNamed로 현재페이지를 검색어만 바꿔서 재호출 하는걸로 처리하고 넘어갔습니다. 이럴땐 어떻게 처리해야 할까요? 기본적인 설계를 잘못한 건지 모르겠습니다 ㅠㅠ 조언 부탁드립니다. ps. autoDispose를 걸어놔도 다음 페이지에서 해당 프로바이더를 사용하면 dispose가 되지 않고 상태값도 초기화없이 유지되는게 맞나요? 테스트해 보았는데 그렇게 처리되는 것처럼 보여서요. 긴글 읽어주셔사 감사합니다.

  • flutter
  • 하이브리드-앱
etax 댓글 1 좋아요 0 조회수 432

CRUD에 따른 ResponseDto를 보내는 유형 및 ResponseDto 구성 방식에 대한 질문

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

안녕하십니까 영한님. 영한님 덕분에 JAVA Spring 기반 백엔드 개발의 시작을 할 수 있었고, 이제는 5개월 차 스타트업 백엔드 개발자로써 커리어를 시작하게 되었습니다. 현업에 와서는 오히려 취준생 때 보다 더 많은 고민을 하게 되느데요, 질문 1. 그중 최근에 CRUD의 각 상황별 API 응답을 어떻게 보내는게 적절할지, 질문 2. 그리고 ResponseDto를 어떻게 구성하는것이 적절할지에 대한 고민을 팀장님과 함께 하고있어서, 영한님의 생각을 여쭙고자 질문글을 올리게 되었습니다. 답변 해주시면 정말 감사할 거 같습니다! Q1. 생성, 조회 , 수정, 삭제 API의 응답을 각각 어떻게 보내시는지 여쭤보고 싶습니다. 가장 먼저 조회의 경우는 말 그대로 path의 Entity 및 관련된 Entity 정보를 조합하여 응답 DTO로 변환하여 보내고 있습니다. 그런데 나머지 Write Operation에 대한 응답을 어디까지 보내야 하냐가 이슈 입니다. 예를들면 엔티티의 생성의 경우 엔티티의 응답 DTO를 보내면 - 프론트에서 별도의 조회 API 호출 없이 바로 프론트가 화면에 뿌려줄 수 있으니깐 저는 생성의 경우에도 조회와 마찬가지로 Entity의 정보를 조합하여 응답 DTO로 변환하여 보내고 있었습니다. 그런데 이러한 부분이 Command Query Sperate 원칙에 어긋나는것 같아, 영한님께서는 혹시 생성한 Entity의 Key만 보내시는지, 아니면 Entity의 정보를 DTO로 변환하여 보내시는지 궁금합니다. 만약 Entity의 Id만 보내신다면 이후에 별도로 조회API를 호출해야 하고 그 또한 비용일텐데 이러한 부분은 어떻게 하시는지 여쭤보고 싶습니다. 이제 수정 API인데요, 제가 다룬 비즈니스 로직의 경우 수정 비즈니스 로직이 다양하고 , 각 비즈니스 로직의 경우 다뤄지는 Entity의 종류가 다른 경우였습니다. (중심 Entity는 동일하지만, 연관된 Entity를 누구까지 건드리냐의 차이) 그래서 하나의 통일된 응답으로 보내기 모호한 점이 첫 번째 이유이고, 애초에 수정 후에 프론트 화면에서 그 엔티티의 정보를 보여줄 필요가 없어서 라는 두번째 이유에 의해서 에초에 엔티티의 Id값도 보내지 않고 있었는데요, 이 수정 API의 응답을 영한님은 어떻게 진행하지는지 그 이유가 궁금합니다. 마지막으로 삭제의 경우는 정말, 프론트에게 보낼 응답이 없어도 되는 경우 라고 생각했는데요, 팀장님의 의견은 만약에 나중에 삭제한 Entity를 복구하는 요구사항이 추가되는것을 고려하여 Id 정도는 넘기자는 의견을 내어주셨습니다. 마찬가지로 삭제의 경우도 어떤식으로 수행하시는지 그 이유가 궁금합니다. Q3. 마지막으로 Entity의 ResponseDto의 필드를 어떤식으로 구성하시는지 궁금합니다 예를들면 저의 경우는 API는 프론트와 서버 간의 스펙이라고 생각하고, Entity의 단건조회의 경우는 단건 조회용 ResponseDto를, 전체조회의 경우는 전체 조회용 SummaryResponseDto를 별도로 만들어서 사용하고 있었습니다. 저희 팀장님 께서는 프론트쪽도 일을 해오시다가 , 백엔드쪽 분야로 전향하신 케이스 인데요, 그렇다 보니 어떻게 해야 프론트의 생산성이 올라가는지를 고려하시는 분이셨고, 팀장님의 생각은 서버에서 넘겨주는 응답에 일관성이 있어야 그 응답을 사용하는 프론트 측도 학습이 되고 놓치는 부분 없이 생산성이 올라간다 는 의견이셨습니다. 그래서 Entity별로 당장 사용하지 않더라도 가능한 모든 필드를 담은 ResponseDto를 하나만 만들고, 해당 ResponseEntity의 조합으로 각 API별 응답 Dto를 만들어서 사용하면 , 프론트 측 에서는 일관성 있는 응답값을 사용할 수 있다는 의견이셨습니다. 물론 이 방법이 네트워크 패킷의 양을 쓸데없이 증가시킨다는 것을 알고 계시면서도, 생산성에 큰 영향을 미치는 부분이라고 생각하셨습니다. 예를들어 다음과 같이 각 Entity의 응답 Dto의 조합별로 API의 ResponseDto를 만들 수 있습니다. ResponseDto{ UserDto{ id : 1, name : “aaa” … // User엔티티의 거의 모든 필드 } ItemDto{ id : 2, name : “bbb”, … // Item엔티티의 거의 모든 필드 } } 저는 이러한 부분에 대해 생각해 본 적이 없이, 그냥 제가 “해당 API를 호출하는 화면에서 필요한 정보들만을 담아 (혹은 여러 화면에서 쓰인다면 여러개를 고려) ResponseDto를 각각 만들어서” 넘겼는데요 영한님께서는 이러한 ResponseDto를 구성하는 부분에 있어서 상황별로 필드를 재구성 하여 ResponseDto를 정의하여 사용하시는 편 인지 (SummaryResponseDto 등의 별도 Dto에 사용될 Entity의 필드들을 풀어서 정의하시는지) 아니면 생산성을 고려하여 각 Entity별 Dto를 만들고, 이들을 조합하여 ReponseDto를 정의하시는 편 이신지 , 혹은 다른 규칙이 있으신지 궁금합니다. 물론 그렇다고 , 팀장님의 의견에서 전체조회시 사용하는 DTO와 단건조회시 사용하는 DTO가 동일하더라도, 전체조회 후 단건조회를 할때 단건조회 API를 호출하지 말고 기존 Front가 가지고 있는 값을 쓰지는 말자는 의견 이십니다 (단건조회API는 별도로 호출해야 한다) 그저 핵심은 프론트가 다루는 ResponseDto의 일관성을 위해서 입니다 (결론은 생산성을 위해) 긴글 읽어주셔서 감사합니다. 항상 건강하셨으면 좋겠고, 다음 강의들도 손꼽아 기다리고 있습니다!

  • java
  • spring
  • spring-boot
  • jpa
요니 댓글 3 좋아요 0 조회수 1443

안스에 location custom

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

지도 강의에 features-custom location 가서 경도 위도 바꾸는 게 있는데 안스에서는 이런걸 찾을 수 가 없네요. 아래와 같이 이유를 얘기하는데 저는 해당되는게 하나도 없고 File > Settings 에서 Appearance & Behavior > System Settings 가봐도 location 이 없네요ㅜ 안드로이드 스튜디오의 버전이 너무 낮습니다. 안드로이드 스튜디오를 설치할 때 Location 옵션이 비활성화되어 있습니다. 안드로이드 스튜디오의 위치 서비스가 비활성화되어 있습니다. 안드로이드 스튜디오의 설정에서 Location 옵션이 숨겨져 있습니다.

  • flutter
  • 클론코딩
박정인 댓글 1 좋아요 0 조회수 256

탭 간 상태 유지 관련 하여 문의 드립니다.

미해결

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

홈 리스트 화면 중간 정도 보다가 음식 탭으로 이동 해서 리스트 스크롤 후에 다시 홈 화면으로 탭 하면 홈 리스트가 처음 부터 보여 집니다. 음식 탭으로 이동 해도 처음부터 보여지는데 상태 유지 할 수 있는 방법에는 어떤게 있는지 궁금 해서 문의 드립니다. 현재 Go router 강의 중간 정도 진행했습니다. 감사합니다.

  • flutter
  • 하이브리드-앱
tech 댓글 1 좋아요 0 조회수 445

NavigatorObserver

미해결

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

[에러코드] Error (Xcode): ../../../.pub-cache/hosted/pub.dev/go_router-4.5.1/lib/src/router.dart:38:44: Error: The class 'NavigatorObserver' can't be used as a mixin because it isn't a mixin class nor a mixin. Could not build the application for the simulator. Error launching application on iPhone 15 Pro. [강의] 섹션 15 GoRouter 프로젝트에 적용하기 Authentication 마무리하기 수강 완료 후 위와 같은 에러가 발생하는데... 어떻게 하면 해결 가능할지... 문의드립니다.

  • flutter
  • 하이브리드-앱
Bullets 댓글 1 좋아요 0 조회수 407

파이어베이스 설정중 안드로이드스튜디오 프로젝트 에러

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

정말 죄송하지만 파이어베이스 관련에러인데요 코팩 책을 보면서 파이어베이스 설정을 하다가 Flutterfire configure 부터 오피셜 파어베이스가 필요하다는 에러만 뜨더라고요 구글링 해보니 적용하려는 안스 프로젝트의 폴더에 파베 파일을 넣어보라길래(기존 작업중이던 프로젝트) 그대로 했더니 파베도 설정 안되고 멀쩡하던 안스 프로젝트까지 아래와 같이 에러가 났습니다. * What went wrong: A problem occurred configuring project ':cloud_firestore'. > defaultConfig contains custom BuildConfig fields, but the feature is disabled. To enable the feature, add the following to your module-level build.gradle: `android.buildFeatures.buildConfig true` 일단 해당 파베를 지웠다가 아예 다른 d드라이브에 다시 깔아봤지만 동일하고.. 그래들 프로퍼티 파일에 아래를 추가도 했고요 android.buildFeatures.buildConfig=true 어떻게도 위 에러가 없어지질 않네요ㅜ 위 에러메시지는 어떤 부분을 봐야하는지 방향성만이라도 알려주시면 감사하겠습니다.

  • flutter
  • 클론코딩
박정인 댓글 1 좋아요 0 조회수 389

강의 내용으로 블로그를 작성해도 될까요?

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

강의를 보고 배운내용을 오래 기억하기 위해 인용하여 블로그를 작성해도 될까요? 핵심이라고 생각되는 소스코드를 복사하거나 가끔 이론설명 하실때 사용하시는 ppt 페이지(그림) 일부분 이런걸 복사한 뒤, 저의 생각과 함께 글을 작성해보려고 하는데 가능할까요? medium 블로그를 통해 출처와 같이 작성할 것 같습니다.

  • flutter
  • 클론코딩
댓글 1 좋아요 0 조회수 426

onScroll 스크롤 위치 유지가 안됩니다 ㅠ

미해결

Slack 클론 코딩[실시간 채팅 with React]

import Chat from '@components/Chat'; import { ChatZone, Section, StickyHeader } from '@components/ChatList/style'; import { IChat, IDM } from '@typings/db'; import React, { FC, RefObject, VFC, forwardRef, useCallback, useRef } from 'react'; import { Scrollbars } from 'react-custom-scrollbars'; interface Props { scrollRef: RefObject<Scrollbars>; chatSections: { [key: string]: IDM[] }; setSize: (f: (index: number) => number) => Promise<IDM[][] | undefined>; isEmpty: boolean; isReachingEnd: boolean; } const ChatList: VFC<Props> = (({ chatSections, setSize, isEmpty, scrollRef, isReachingEnd}) => { const onScroll = useCallback((values) => { // 끝에 도달하면 불러오지 않기 if(values.scrollTop === 0 && !isReachingEnd){ console.log('가장 위'); setSize((prevSize) => prevSize + 1).then(()=>{ // 스크롤 위치 유지 if(scrollRef?.current){ scrollRef.current?.scrollTop(scrollRef.current?.getScrollHeight() - values.scrollHeight); } }); } }, []); return ( <ChatZone> <Scrollbars autoHide ref={scrollRef} onScrollFrame={onScroll}> {Object.entries(chatSections).map(([date, chats]) => { return ( <Section className={`section-${date}`} key={date}> <StickyHeader> <button>{date}</button> </StickyHeader> {chats.map((chat) => ( <Chat key={chat.id} data={chat} /> ))} </Section> ); })} </Scrollbars> </ChatZone> ); }); export default ChatList; 이쪽 코드는 문제가 없는것같은데 희한하게 위치가 유지가 되지않고 원래처럼 쭉 올라가버립니다.. ref쪽이 문제인가요..? 혹시몰라 DirectMessage 컴포넌트도 아래에 첨부하겠습니다. import React, { useCallback, useEffect, useRef } from 'react'; import gravator from 'gravatar'; import useSWR, { mutate } from 'swr'; // swr 인피니티스크롤링 전용 메서드 import useSWRInfinite from 'swr/infinite'; import { IDM, IUser } from '@typings/db'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import ChatBox from '@components/ChatBox'; import { Container, Header } from '@pages/DirectMessage/style'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import axios from 'axios'; import makeSection from '@utils/makeSection'; import Scrollbars from 'react-custom-scrollbars'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`http://localhost:3095/api/workspaces/${workspace}/users/${id}`, fetcher); // 내정보 const { data: myData } = useSWR(`http://localhost:3095/api/users`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); // 과거 채팅리스트에서 채팅을 치면 최신목록으로 바로 스크롤을 내려줄려면 ref를 // 이 컴포넌트에서 props로 내려줘야하기 때문에 forwardRef를 사용해서 props로 넘겨준다 // 💡 HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 합니다 const scrollbarRef = useRef<Scrollbars>(null); // 채팅 받아오는곳 (setSize : 페이지수를 바꿔줌) // useSWRInfinite를 쓰면 [{id:1},{id:2},{id:3},{id:4}] 1차원배열이 [[{id:1},{id:2}],[{id:3},{id:4}]] 2차원배열이 된다. const { data: chatData, mutate: mutateChat, setSize, } = useSWRInfinite<IDM[]>( (index) => `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); // 데이터 40 개중에 20개씩 사져오면 첫번째페이지부터 20 + 20 + 0 세번째 페이지 0 이되면 isEmpty, isReachingEnd는 true가 됨 // 반대의 상황에서 데이터가 45개면 20 + 20 + 5 isEmpty는 0이 아니라서 false isReachingEnd는 여전히 데이터 가져옴 const isEmpty = chatData?.[0]?.length === 0; const isReachingEnd = isEmpty || (chatData && chatData[chatData.length - 1]?.length < 20) || false; const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim() && chatData) { const savedChat = chat; // 💡 옵티미스틱 UI // 서버쪽에 다녀오지 않아도 성공해서 데이터가 있는거처럼 보이게 미리 만듦 mutateChat((prevChatData) => { // infinite 스크롤링은 2차원 배열이다. prevChatData?.[0].unshift({ // unshift : 앞쪽에 추가 id: (chatData[0][0]?.id || 0) + 1, content: savedChat, SenderId: myData.id, Sender: myData, ReceiverId: userData.id, Receiver: userData, createdAt : new Date(), }); return prevChatData; },false) // 옵티미스틱 UI 할땐 이부분이 항상 false .then(()=>{ setChat(''); // 버튼클릭 시 기존 채팅지우기 scrollbarRef.current?.scrollToBottom(); // 채팅 첬을때 맨 아래로 }) axios .post( `http://localhost:3095/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }, { withCredentials: true, }, ) .then(() => { mutateChat(); // SWR에서 데이터를 다시 불러와서 캐시를 갱신하는 역할을 합니다. }) .catch(() => { console.error; }); } }, [chat, chatData, myData, userData, workspace, id], ); // (채팅이 최신것을 아래에 두기 위함) = 기존것 데이터를두고 새 데이터를 뒤집어서 출력 / flat() 배열을 1차원 배열로 만들어줌 const chatSections = makeSection(chatData ? [...chatData].flat().reverse() : []); // 로딩 시 스크롤바 제일 아래로 useEffect(()=>{ if(chatData?.length === 1){ // 채팅 데이터가 있어서 불러온 경우 scrollbarRef.current?.scrollToBottom(); // 가장 아래쪽으로 내려줌 } },[chatData]) // 로딩 if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravator.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname}></img> <span>{userData.nickname}</span> </Header> {/* 컴포넌트 위치를 미리 지정해도 좋다. */} {/* 전역 상태관리 라이브러리를 사용해도 컴포넌트상황에따라 props 로 넘겨줌*/} <ChatList scrollRef={scrollbarRef} chatSections={chatSections} setSize={setSize} isEmpty={isEmpty} isReachingEnd={isReachingEnd} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage;

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
복실묘 댓글 2 좋아요 0 조회수 530

flutter doctor cocoapods 설치 오류

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

intel mac 유저입니다. 강의에서 말씀하신대로 homebrew 통해서 cocoapods 설치 한 후 flutter doctor 실행 하는데 계속 저런 화면이 뜨네요... 해결해 보려고 sudo gem install cocoapods 실행하면 이런 화면이 뜨구요... 해결 방법 알려 주시면 감사하겠습니다....ㅠㅠㅠ

  • flutter
  • 클론코딩
  • cocoapods
JONGMIN CHA (Howoo's papa) 댓글 1 좋아요 0 조회수 614

자동 재생에 대해 궁금한 점이 있습니다.

해결됨

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

좋은 강의 감사합니다. 강의 내용을 듣다보니, 동영상을 실행하면 자동 재생 기능이 따로 없는걸로 보여서 공식 문서를 참조 한 뒤 아래와 같은 기능 한 줄을 추가 했습니다. initializeController() async { currentPosition = Duration(); videoPlayerController = VideoPlayerController.file( File(widget.video.path), ); await videoPlayerController!.initialize(); await videoPlayerController!.play(); // 자동 재생 시작 videoPlayerController!.addListener(() async { final currentPosition = videoPlayerController!.value.position; setState(() { this.currentPosition = currentPosition; }); }); setState(() {}); } 이런식으로 await videoPlayerController!.initialize(); 밑에 추가를 했는데, 테스트는 해보니 이상이 없어서 혹시 코드 내부 로직상으로도 문제가 없는지 궁금합니다.

  • flutter
  • 클론코딩
MinwooNa 댓글 1 좋아요 0 조회수 1251

리스너 dispose 질문입니다

미해결

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

5분 15초 쯤에 ScrollController 의 리스너 dispose하고 ScrollController 도 dispose 하시는데 질문이 3가지 있습니다. 둘 중 하나라도 dispose를 안 하면 어떻게 되는 건가요? RestaurantScreen, DetailScreen 에서는 dispose를 안 했는데 여기에서 한 이유가 있을까요? 모든 리스너들은 다 dispose를 해줘야 하는지입니다.

  • flutter
  • 하이브리드-앱
김상호 댓글 1 좋아요 0 조회수 384

아래 댓글에 답변 드립니다.

해결됨

[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!

계속 질문드려 죄송합니다. 그리고 매번 답변 주셔서 진심으로 감사드립니다. 제가 위탁하여 가지고있는 2년 전 flutter와 firebase로 제작한 앱이 있습니다. 그런데 지금 제가 공부중이라 안드로이드 스튜디오로 열려고 하니 다양한 이유로 에뮬레이터에 구현이 안되더라고요, 일부 코드들은 지금은 안쓰는 것 같고, 코드 수정은 어찌어찌 제가 할 수 있을 것 같은데, 새플러터 프로젝트로 코드 복사하고, 야믈파일, 안드로이드, ios 일부 수정해야하는 파일을 복사해와도 실행이 안되는건 마찬가지였습니다. 이런때는 어떻게 해야할까요?; 해당 개발자에게 문의를 해봐도 안드로이드 환경설정은 어떻게 해줄 수가 없다고 하더라고요, 원본 파일에서 최대한 아무것도 바꾸지 않는게 좋다고 하는데, 열 수가 없습니다.

  • flutter
  • 하이브리드-앱
김지현 댓글 1 좋아요 0 조회수 256

지도위에 이동 경로 스리기

미해결

Flutter 초입문 왕초보편

지도위에 이동경로 그리는 부분에서 새로운 경로가 그려지고 조금 있으면 경로가 지워 집니다. 이렇게 동작하는 것이 정상인가요? 설명 중에는 그런 내용에 없어 문의 드립니다.

  • flutter
  • ios
  • android
  • dart
빛나는 댓글 1 좋아요 0 조회수 657

섹션10. 상태를 트리의 위로! 강의 관련질문

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

Onheartpressed()함수를 만들었는데 onpressed: 파라미터 뒤에 onheartpressed()라고 ()를 붙여야하는거 아닌가요? 함수니까 말이에요. 근데 왜 onheartpressed라고 () 없이 쓸 수가 있는거죠?

  • flutter
  • 클론코딩
강원빈 댓글 2 좋아요 0 조회수 365

인기 태그

인프런 TOP Writers

주간 인기글