#erd

micro repo 세팅하면서 격은 문제(같은 문제 격는 분들 댁글)

이번 프로젝트에서 하나의 레포지토리에서 client, server, admin, common 4가지 패키지를 만들었습니다. client, server, admin은 common을 의존하도록 모노레포로 만들었고, client는 admin을 의존할 수 있게 micro로 만들었습니다. 간단한 패키지 설명: - client: 메뉴 헤더 등 구현, 페이지는 admin을 remote 해서 사용, React로 구현 - admin: 페이지에 나오는 콘텐츠의 전반적인 부분이 컴포넌트로 되어있음, React로 구현 - server: Node.js로 되어있고 실제 Spring 서버에서 준 데이터를 포맷하는 형태 - common: 공통 컴포넌트, 라벨 등 문제1: 다른 프로젝트에서 expose 되어있는 Next.js 프로젝트(scss로 스타일 구현)를 client에서 사용할 때 의존성 관련 오류가 생깁니다. client의 package.json에서 peerDependencies로 next를 설정해줘야 하는지, 양쪽 패키지(다른 프로젝트와 client)에서 Next.js와 React를 share 설정을 해야 되는지 잘 모르겠습니다. 여러 방법으로 시도는 해봤지만 의존성 오류나 Next.js에서 훅을 사용 못하는 오류 때문에 해결하지 못하고 있습니다. 문제2: 빌드 최적화를 위해 트리쉐이킹이나 코드 스플리팅을 해야 합니다. 웹팩에서 아래와 같이 코드 스플리팅을 하면 청크 파일 이름이 겹치기 때문에 filename을 해시값으로 설정해야 합니다. 여기서 문제가 생기는데, micro의 client처럼 remote 하는 부분에서 remote.js, app.js 청크가 필요하기 때문에 이름이 해시값으로 바뀌면 해당 청크를 찾을 수 없습니다. 또한 ModuleFederationPlugin이 빌드 시 자동으로 코드 스플리팅을 해준다는 이야기도 있는데, 이 부분은 정확하지 않습니다. 저와 같은 문제를 격고 있거나 해결하신 분들 같이 나눴으면 합니다.

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

리액트 종속성 에러

버전 호환성 때문에 라이브러리가 안깔리는데 리액트랑 해당 라이브러리와의 호환성은 어디서 확인할 수 있을까요? 일단 깃허브 package.json에 있는 peerdependency확인해봤을 때는17.0.1 이상이라고 나오는데 그 이상이거든요... 근데도 계속 에러 메세지보면 리액트 18.3.1 버전이 필요하다고 하는데 지금 리액트 버전에 호환이되는 라이브러리 버전을 설치하고 싶어서요. 헤당 정보는 어디서 찾을 수 있을지 알려주시면 감사하겠습니다.

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

erd를 잘 작성하려면 어떻게 해야할까요?

안녕하세요 최근 팀 프로젝트의 백엔드 파트를 맡은 한 학생입니다. erd작성부터 차근차근 하고 있는데요 뭔가 작성하면 할수록 중복 데이터가 많아지고 이 데이터가 어떻게 참조하고 흘러가는지 계속 헷갈려 완벽하게 작성을 못하고 있습니다… 나중에 혼자 프로젝트를 진행할때는 지금처럼 팀원의 도움을 받아 서로 검토하지 못하니 저 스스로 erd를 잘 작성하고 이게 맞는지 틀린지 판단하는 방법을 공부하고 싶습니다 여러분들의 조언 부탁드립니다!

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

spring autowired 사용에 관해 질문드립니다.

@Configuration public class ControllerConfig { AnnotationConfigApplicationContext ac = new AnnotationConfigApplicationContext(MemberConfig.class); @Bean public SearchController serachController() { return new SearchController(ac.getBean("memberDao", MemberDao.class)); } } ------------------------------------------------------------------------------------ @Configuration public class ControllerConfig { @Autowired private MemberDao memberDao; @Bean public SearchController serachController() { return new SearchController(memberDao)); } } autowired 사용을 지양하고, 생성자 주입을 사용하는게 좋다고 들었는데 설정 클래스에서는 생성자 주입이 안되는데 위 코드 중 어느 방식으로 코딩하는게 맞는 방식일까요? 혹시 위 방식 말고 다른 방식이 있다면 알려주시면 감사하겠습니다.

서버 시스템 엔지니어가 되려면?

서버 시스템 엔지니어가 되려면? 안녕하세요 24년 8월 졸업이고 전공은 정보통신공학인 학생입니다. 클라이언트 요구사항을 분석해서 시퀀스 다이어그램, ERD 등을 제작하여 아키텍쳐 설계 후 TDD방식으로 코딩 후 아키텍쳐 고도화 하는 서버 앱 개발자가 너무 적성에 안맞습니다. 원래 개발보다 네트워크 운영체제 데베 등의 CS 이론 과목들을 좋아하기도 했었어서 AWS 클라우드 기반의 서버 시스템 엔지니어가 되고 싶습니다. 현재 스펙은 학부연구생 6개월 연구(메모리 퍼포먼스 실험 측정) Java/Spring으로 sns 웹 앱 서버 사이드 개발 경험 컴활 1급 학점 4점대 토익 900 후반(5일 준비), 오픽 AL(3일 준비) 1종 대형 면허 이 있으며 일단 지금 당장은 4-5월까지 4-Track으로 DSA = 현재 수준은 개발자로 지원한 코테는 다 통과하고 있습니다. 근데 통과한 직무가 다 서버 앱 개발자라 면접을 안가고 싶습니다 포폴(실력) = Udemy에 있는 DevOps Engineer 실무 위주의 강의 정리하기 자격증 = 정보처리기사 + AWS SAP만을 취득 후 신입으로 지원해볼까 합니다 면접(전공&인성) = 달달달 외워서 준비 예정 으로 준비하여 5-6월부터 지원할 예정입니다. 질문 드리겠습니다. 취준생기간에 준비할 위의 4-Track 을 비롯하여 추가로 어떤걸 준비해야할까요? 취직 후에는 자기계발로 어떠한걸 추가하고 보충하여야 서버 시스템 엔지니어로서의 역량과 커리어를 발전시켜시킬 수 있을까요? 취직 후 미국 대학원 석사과정에 진학하여 ML을 전공하여 훗날 AI 서비스를 제공하고 있는 서버 시스템의 엔지니어가 되고자 합니다. 대학원을 제외하고 어떤 방식/느낌/스탠스로 계속 자기계발을 해야할까요?

스타트업 개발.. 원래 다 이런가요?

안녕하세요 부트캠프에서 공부하고 바로 스타트업으로 취직해서 프론트엔드 직무를 맡고있는 2년차 개발자입니다.. 제가속한 회사는 업력4년차 saas 서비스를 운영하는 스타트업입니다. 입사 초반에는 자금을 위해 다른 스타트업이 그렇듯 외주업무를 받아 개발자들이 진행을 했었습니다. 나름대로 2년동안 일하면서 1인 앱개발, si 프로젝트 1인 8개 이상 개발해왔고 회사내에서 인정받아 승진에 연봉인상도 받았습니다. 문제는 자사서비스를 시작하면서 부터였습니다ㅠ 지금 현제 기획-개발 프로세스는 대표 머릿속 아이디어-> 기획자 전달-> 기획-> 대표 피드백-> 승인후 개발자 피드백-> 개발 -> qa 이렇게 이뤄지고있습니다. 과정자체만 보면 그렇게 문제가 되지 않겠지만 문제는 이모든과정이 5일안에 이뤄진다는 점입니다. 심지어 기획은 주당 2~3개정도입니다. 실질적으로 개발쪽에서 완성된 기획을 받는 시점은 수요일 퇴근전이고 백엔드 erd수립하고 api다 나오면 빠르면 목요일 퇴근전입니다. 그럼 프론트는 화면을 짜다가 해당 api를 받고 목요일야근-금요일 야근 - 야근 중 qa 그럼또 야근 이런식입니다. 이런 문제점을 말했더니 원래 스타트업들이 다이렇다며 제가 잘 모르는거라고하는데 보통 다 이렇게 진행하는건가요..? 이렇게 쫒기듯이 개발을 진행하다 보니까 컴포넌트 재활용이고 뭐고 복붙 혹시 사용할지 모르니까 주석처리 의 연속인 똥덩어리 코드만 계속 쌓이고 있는기분입니다.. 회사자체의 연봉이나 대우는 좋지만 계속 이런식의 경력을 쌓는게 개발자로서의 커리어에 도움이 될지 그리고 대표가말한대로 스타트업이 원래 다 그런건지 의견을 여쭤보고자 답답한 마음에 글올려봅니다 ㅠㅠ

유튜브 알고리즘 영상이 떠서봤는데요!

신입 백엔드 개발자 최소 기준이라고 하시면서 -필수- CRUD REST API JWT Swagger ERD -옵션- Docker Frontend 현업에 계신 시니어 개발자분들이 보셨을때 주니어 개발자들이 필수는 다 가지고있었을까요?? 저는 스프링만 진득하게 공부하려고했는데 늦은걸까요? ㅠㅠ 저기서 crud rest api빼고는 아직 잘 모르겠네요

첫 데이터베이스 개발하려합니다

처음 DB 구성해보는 초보 개발자입니다. 학원 그룹웨어 플랫폼을 만들어보고자하는데 DB쪽은 직접 구성해본적이 없어서 어느 방향으로 연결해야하는지 질문 구해봅니다! ERD 링크 첨부합니다!! 많은 도움 부탁드립니다..!! 예시 초안 이미지도 첨부합니다! https://www.erdcloud.com/d/ZTovKgpKwvhiZ9wL4

for문을 이용한 중복체크 방법

public MemberDTO doRegist() { sc.nextLine(); System.out.println("*****************************************************"); System.out.print("아이디를 입력하세요 : "); String id = sc.nextLine(); System.out.print("비밀번호를 입력하세요 : "); String pwd = sc.nextLine(); System.out.print("이름을 입력하세요 : "); String name = sc.nextLine(); System.out.print("나이를 입력하세요 : "); int age = sc.nextInt(); System.out.print("성별을 입력하세요 : "); char gender = sc.next().charAt(0); sc.nextLine(); System.out.print("핸드폰 번호를 입력하세요 : "); String phone = sc.nextLine(); System.out.print("이메일을 입력하세요 : "); String email = sc.nextLine(); System.out.println("*****************************************************"); MemberDTO user = null; if(answer == 'Y') { user = new MemberDTO(id, pwd, name, age, gender, phone, email); }else { System.out.println("로그인 페이지로 돌아갑니다."); mainLogin(); } return user; } 여기에 for 문으로 아이디 중복체크를 넣고 싶은데 어떻게 넣어야 할까요...ㅠㅠ...

사이드 프로젝트 리뷰 부탁드립니다.

안녕하세요. 개발자, 디자이너를 비롯한 혼자 작업하는 사람들이 함께 모여 작업할 수 있는 온라인 작업 공간을 만들었습니다. 개발자 3명, 디자이너 2명, 기획자 1명이 함께 진행한 프로젝트입니다. 픽셀 느낌을 살리려고 노력했습니다. ㅋㅋㅋ 일정 작업 시간이 지나면, 공용 낙서장에 낙서할 수 있는 토큰이 발급되니 작업 시간을 채워보시는 것도 좋으실 것 같습니다. 보시고, 부족한 점이나 개선할 점 알려주시면 감사하겠습니다! https://nerd-work-space.vercel.app

쿠버네티스가 도커 지원 중단 선언 하고 크게 바뀐 점이 있을까요?

데브옵스 관련 공부중인데 현직 데브옵스 분들의 의견이 궁금하여 질문합니다. 컨테이너 런타임으로 도커를 지원중단 했는데, 사실상 도커로 만든 이미지와 컨테이너는 여전히 사용 가능하고 빌드 또한 가능한거로 알고 있습니다. 컨테이너 런타임으로 containerd를 사용하면 사실상 도커의 런타임과 큰 차이가 없는거 같은데 어떤점이 많이 달라졌을 지 현직에 계신 분들 의견이 궁금합니다

백엔드 협업 프로젝트 초반 진행

안녕하세요 지금 부트캠프에서 협업 프로젝트 진행 예정 중에 있습니다 첫 프로젝트라 규모가 작지만 시작을 어떻게 해야할지 고민이 되어서 질문합니다 회원 1. 이메일 비밀번호 입력하여 회원가입 API 2. 이메일 비밀번호 입력하여 접속하는 API 3. 접속된 유저 로그아웃 조회 1. 게시물 전체 조회하는 API 2. 작성자 이메일을 통해 특정 게시물들을 검색하는 API 3. 댓글을 조회하는 API 생성 1. 댓글을 새롭게 만들 수 있는 API 2. 게시물을 새롭게 만들 수 있는 API 수정 1. 기존 댓글의 글을 수정하는 API 2. 게시물을 새롭게 수정할 수 있는 API 삭제 1. 게시물을 삭제하는 API 2. 댓글을 삭제하는 API 심화 1. 이메일과 같이 댓글 좋아요를 할 수 있는 기능 해당 기능을 구현하는 것이고 팀원들과 분담도 마쳤습니다. 우선 DTO, Controller, Repository, ERD 등을 설계하려고 하는데 그 중에서 DTO가 우선이라고 생각하고 진행했습니다. 과정 중에 DTO와 ERD은 서로 같을 필요가 없다고 판단했고 처음부터 데이터베이스랑 연결하면 혼란이 올 것 같다고 생각했습니다. 그래서 DTO로 설계하고 테스트 코드로 확인 후 잘 동작한 다음 데이터 베이스와 연결을 하는게 좋을지 아니면 처음부터 데이터 베이스랑 연결하는 것이 좋을지 궁금합니다. 또한, 해당 설계를 먼저 하는 것보다 더 좋은 방법이 있는지도 궁금합니다. 대체로 어떤 순서로 진행되는지 조언을 받고 싶습니다!

백엔드 설계부터 배포까지

투두메이트 클론코딩한 간단한 안드로이드 서비스 서버를 혼자 설계부터 배포까지 하게되었는데 기술 스택을 어떻게 정해야할까요? Spring boot , Gcp, mysql 사용할 예정인데 Erd 는 대략적으로 설계했습니다 처음부터 끝까지 저 혼자하는건 처음이라 괜찮은 책이 있을까요? 백엔드 설계부터 배포까지 간단한 설명이 필요합니다..!!

영화 예매 프로젝트의 예매 기능과 관련하여

안녕하세요. 토이 프로젝트로 영화 예매 서비스를 만들어보고 있습니다. 어느 정도 기능 구현이 완료되었다고 생각했었는데, 오늘 생각지도 못한 고려 사항을 발견해버렸네요 ㅠㅠ.. 좌석 모델과 예매 모델 사이의 관계의 모호함이 있었습니다.. 저는 MovieSchedule 모델을 두어 참조하는 영화의 id, 상영 시작 시간, 상영 종료 시간, 참조하는 screen(상영관)의 id를 column으로 두었습니다. 그리고 Reservation 모델이 이 MovieSchedule 모델을 참조하도록 하고, 예매 인원, 예매하는 유저의 아이디 등의 column을 갖도록 하였습니다. 아래 코드를 참조부탁드립니다(Prisma ORM을 사용하였습니다). 하지만 이렇게 구성을 하다보니, 같은 영화, 같은 상영관이지만 시간대만 다른 좌석(같은 screen, 다른 MovieSchedule을 참조)의 경우에, seat와 reservation이 one-to-many로 설정되어 있기 때문에 이미 다른 시간대(다른 MovieSchedule)에서 해당 좌석을 예매 해두었다면, 좌석은 더 이상 예매를 할 수 없는 상태가 되더군요.. schema를 변경할 필요가 있을 것 같은데 ERD를 설계해본 경험이 별로 없다보니 어떤식으로 변경해야 할지 감이 잘 안 잡힙니다.. 제가 생각해본 대안들은 다음과 같습니다. 1. movieSchedule에 대응하는 screen과 seat를 생성하고, 상영 후 해당 screen 및 seat를 모두 삭제. 이러면 여러 시간대에 같은 screenNum이 여러개 생길 수 있으니 screenNum의 unique 조건을 삭제해야할듯. 2. seat와 reservation의 관계를 many to many로 변경하고 reservation-seat과 같은 table을 하나 더 생성. 해당 테이블은 seatId와 reservationId를 갖고 있을 것이므로, 좌석 조회 시 reservation의 movieSchedule과 조회하는 movieSchedule이 일치하면 예약되었음을 확인할 수 있음. 위 대안들이 적절한지, 그렇지 않다면 어떤 대안이 있을지 조언 부탁드립니다 ㅠㅠ

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

기존서비스의 erd 어떻게 그리면 좋을까요

안녕하세요 초초초 신입개발자입니다. 현재 서비스중인 일부를 개편하기 위해서 먼저 분석을 해오라는 상사분의 지시가 있었습니다. erd를 그렸으면 좋겠다는 말씀도 있었는데, erd라는 게... 여러 테이블 구조를 다이어그램으로 나타내고 각 테이블의 pk,fk를 연결하라는 뜻일까요? 꼭 pk, fk 관계가 아니어도 연결고리를 찾으라는 걸까요? 현재 돌아가는 프로시저 정리도 어떤 식으로 분석해서 정리하면 좋을지 조언 부탁드립니다. 해본 적이 없어 질문이 참 크고 정확하지 않지만, 무엇이든 도움이 될 거 같습니다. 답변 부탁드립니다. 감사합니다!

spring security 권한 처리

데이터베이스에 user테이블과 role테이블 그리고 user_role테이블을 만들어 user_id와 role_id를 만들어 다대다 매핑을 하였습니다. 기존에는 configureGlobal방식으로 .authoritiesByUsernameQuery(“select u.email, r.name from user_role ur inner join user u on ur.user_id = u.id inner join role r on ur.role_id = r.id where u.email = ?") 이런 방식으로 했는데 userDetailsService 인터페이스를 이용하여 로그인 처리를 하는 방식에서 유저의 권한을 어떻게 처리해야할지 모르겠습니다ㅠㅠㅠ 아직 시큐리티에 대해 잘 몰라 자세히 알려주시면 정말 감사하겠습니다 ㅠㅠ

react에서 axios, map 함수를 통한 api 호출

api를 axios를 통해 불러와서 map 함수로 뿌려주려고 합니다. 다음과 같은 api 형태이구요(이미지 url은 익명글이기 때문에 가짜로 넣었습니다) { isSuccess: true, code: 1000, message: "요청에 성공하였습니다.", result: [ { bannerIdx: 1, bannerImgUrl: "https://abcde.png", bannerTitle: "프리온보딩", bannerContent: "실무에서 사용할 수 있나요?" }, ] } 이 api를 다음과 같은 함수형 컴포넌트로 호출하는데 불러와지지가 않습니다. 아래 url은 제가 제 정보보호를 위해 가짜로 넣어놓았구요. console에는 정상적으로 api 내용이 출력되고는 있습니다. 그런데 화면에 표시가 안됩니다. 왜 안될까요? function TopBanner() { const [bannerData, setBannerData] = useState([]); useEffect(() => { getBannerData(); }); const getBannerData = async () => { const result = await axios({ method: "GET", url: "https://abcde/abc/abc", }).then((response) => { console.log(response.data); setBannerData(response.data.result); }); setBannerData(result); }; return ( <Base> <Container> <StyledSlider {...settings}> {bannerData && bannerData.map((banner) => ( <div className="slick-slide"> <div key={banner.data.result.bannerIdx} imgUrls={banner.data.result.bannerImgUrl} alt={banner.data.result.bannerTitle} className="banner-image" /> </div> ))} </StyledSlider> </Container> </Base> ); } export default TopBanner;

ERD 를 DDL로 변환하는 툴 추천해주세요

RDB 기준으로 업계에서 많이 사용하거나 무료면 더 좋구요 😬

react query에서 placeholderData와 initial data 차이

안녕하십니까~ 프로젝트 코드를 보는 중에 react-query의 useQuery 옵션 중에 "placeholderData"라는 값에 더미 데이터를 넣어주고 있습니다. 근데 이걸 initialData라는 옵션에 넣어도 동일하게 작동하길래 둘의 차이가 뭔지 궁금하더라구요 ㅎㅎ 혹시 아시는 분 계신가요?