#클라이언트

질문 3
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

9일 전 · aigoia 님의 답변 업데이트

게임 개발에서 웹 프론트앤드로 이직

안녕하세요. 이직과 관련해 궁금한 점이 있어 글을 남깁니다. 그동안 게임 클라이언트 개발 분야에서 약 5년간 근무하다가 퇴사하게 되었습니다. 앞으로는 오래 근무하기에는 게임 업계보다는 다른 업계가 나을 것 같아, 웹 프론트앤드로의 전향을 준비 중입니다. 이와 관련하여 신입으로 지원하는 것과 1년차 정도로 낮춰서 경력으로 지원하는 것 중에 어떤 것이 맞는 것인지 몰라 조언을 구해보고자 합니다. 감사합니다.

개발자

#이직

#경력

답변 2

댓글 0

조회 56

11일 전 · 익명 님의 새로운 댓글

기획/디자인과 프론트엔드 개발

작은 스타트업에서 프론트엔드 개발자로 첫 커리어를 시작한지 1년 조금 넘은 주니어 개발자입니다. 기획자와 디자이너가 따로 없어서 프로덕트 개발할 때 제가 기획 및 디자인도 어느정도 하면서 프론트 개발을 하고있습니다.. 이러다보니 일은 많지만 기획/디자인에도 흥미가 좀씩 생깁니다. 어떤 서비스를 만들것인지 정의하고 사용자 입장에서 구조와 디자인을 구상하는것도 나름 재미있더라구요. 그리고 구상한걸 ui로 구현하는것도 나니까 의견 충돌할 일도 없구요. 다행히 디자인 감각도 좀 있어서 결과물에대한 반응도 좋습니다. 기획 디자인쪽도 제대로 공부해보고싶은 생각이 드는 요즘입니다. 하지만 지금은 보통 기획, 디자인, 프론트엔드 개발이 별개의 직무이고 이들을 다 하는 인력을 필요로하는 경우는 거의 없잖아요. 이런 상황에 프론트 공부하기도 바쁜데 기획/디자인까지 공부하고 실무에서도 여기에 계속 시간을 할애하는건.. 너무 영양가없는짓이 아닌가 싶어서 고민이 됩니다. 역시 그냥 프론트에 매진하고 여력이 된다면 차라리 백엔드를 하는게 나으려나요. 아무리 ai 시대라고 해도, 기획과 디자인, 프론트엔드 개발까지 프로덕트의 클라이언트단을 모두 담당하는 직군이라는게 과연 생길까요? 이들을 다 할줄 아는게 경쟁력이 있을까요? ai가 앞으로 코드 짜는건 상당부분 해주니 여력이 생긴다고 해도, 개발자면 역시 개발에나 전념하는게 맞는걸까요 선배 개발자분들의 생각이 궁금합니다..!

개발자

#프론트엔드

#기획

#디자인

답변 2

댓글 2

추천해요 1

조회 94

한 달 전 · 포크코딩 님의 새로운 답변

kakaotoken 과 JWTtoken

로그인 구동방식을 jwt token으로 사용하고 있는데(관리자페이지) 카카오 로그인을 추가하려니 동일하게 refresh Token으로 access token을 재발급받아 사용하는 방식이던데 이전에 react-kakao-login 라이브러리만 사용해서 직접적으로 하려니 이런 구동방식인지 이번에 알았네요 현재 refresh token을 http only 쿠키와 DB에 저장해서 클라이언트에서 refresh token을 가져와 전달해주면 백에서 DB와 대조하여 동일한지 검증을 한번 더 해주고 있습니다. 그렇다면 DB에 kakaoRefresh column을 하나 더 추가해서 이중으로 검증하는게 나은지 카카오에서 이미 검증을 한 후에 전달해주니 jwt토큰을 무시하고 1회 검증으로 하는게 나은지 의견을 듣고싶습니다

개발자

#kakaologin

#jwt

#login

답변 1

댓글 0

조회 54

2달 전 · aigoia 님의 답변 업데이트

컴공 1학년, 진로에 대한 고민

안녕하세요. 이번에 컴퓨터공학과에 입학한 새내기입니다. 현재 개발자를 꿈꾸고 있으며, 정확한 진로는 아직 정하지 못했지만 클라이언트나 서버 등 게임 개발 분야에 관심을 가지고 있습니다. 고등학교 때 유니티로 간단한 게임을 몇 개 만들어본 경험이 있는데, 생각보다 재미있어서 이번 방학 동안 유니티와 C#을 집중적으로 공부해볼 계획입니다. 시간이 남는다면 그래픽스 분야도 가볍게 탐색해볼 생각입니다. 다만, 이게 제가 드리고 싶은 이야기의 핵심은 아니고… 결론적으로 말씀드리자면, 제가 계속 게임 개발을 목표로 삼아도 괜찮을지 고민이 됩니다. 제가 알기로는 코로나 시기 동안 개발자 수요가 급증한 이후, 국내 게임 시장이 점차 하락세를 보이면서 게임 업계 취업률도 많이 낮아진 것으로 알고 있습니다. 안 그래도 요즘 컴퓨터공학과 취업이 쉽지 않은 상황이라, 더욱 막막하게 느껴지더라고요. 심지어 저희 과 교수님께서도 게임 개발 쪽은 추천하지 않는다고 하셨습니다. 며칠 동안 인터넷을 뒤져가며 정보를 찾아봤지만, 오히려 더 답답해져서 이렇게 전문가분들이 많은 곳에 조심스럽게 질문을 남깁니다. 결론적으로, 제가 게임 개발 쪽을 계속 파고들어야 할지, 아니면 차라리 수요가 더 많은 백엔드 분야를 공부하는 것이 나을지 고민하고 있습니다. 다른 개발자분들은 이런 상황에서 어떻게 생각하시는지 의견을 듣고 싶습니다. 긴 글 읽어주셔서 감사합니다.

개발자

#게임개발자

#진로고민

#컴공

#새내기

답변 1

댓글 0

조회 145

2달 전 · 익명 님의 새로운 댓글

채팅 애플리케이션에서 Redis 메시지 저장과 RabbitMQ 전송을 안전하게 처리하려면 어떻게 해야하나요?

안녕하세요. 현재 백엔드 개발자를 지망하는 대학생입니다.. 예전에 Springboot를 활용해서 개발한 채팅 애플리케이션 프로젝트를 리팩토링하는 과정에서 문제가 발생하여 질문 드립니다. 아래와 같은 아키텍처 애플리케이션을 구현했습니다. - MySQL: 채팅방 정보(채팅방 이름, 참여 인원수 등등), 사용방 정보 데이터 저장. - Redis: 채팅 메시지 데이터 저장 - RabbitMQ: 채팅 메시지를 전송하기 위한 메시지 브로커 STOMP over WebSocket을 활용해서 클라이언트에서 메시지를 pub해서 메시지 브로커인 RabbitMQ를 거쳐서 구독한 클라이언트에게 메시지(채팅)을 전송하도록 구현했습니다. 그런데 문제가 발생하는 로직이 있습니다. [채팅방 가입 로직] 1. @Transactional 내부에서 MySQL에 채팅방 데이터 저장. (해당 유저가 채팅방에 가입한 것을 저장) 2. Redis에 "User가 채팅방에 들어왔습니다."라는 메세지를 저장. 3. 해당 메시지를 RabbitMQ로 전송. (`rabbitTemplate.convertAndSend(...)`) 이런 상황에서 Redis나 RabbitMQ에서 문제가 발생해서 하나라도 정상적으로 완료되지 않으면 문제가 발생합니다. Redis 서버에 문제가 생겨서 채팅 메시지를 정상적으로 저장하지 않더라도 RabbitMQ를 통해 메시지가 전송되고, RabbitMQ 서버에 문제가 생겨서 정상적으로 전송되지 않더라도 Redis에 채팅 메시지가 저장이 됩니다. 이러한 문제를 해결하기 위해서 2PC, SAGA 패턴, Outbox 패턴 등등을 알아봤고, 그 중 가장 괜찮다고 생각했던 패턴이 Outbox 패턴이었습니다. 근데 또 어려움이 생겼는데, Outbox 패턴을 사용하기 위해 Pulling 기법을 사용 하자니 Redis에 무리가 생길 것 같고, 트랜잭션 로그 테일링 패턴을 사용 하기에는 Redis가 이를 제대로 지원하지 않아 구현이 굉장히 어려워진다는 문제가 생겼습니다. 그래서 MySQL을 Outbox 저장소로 사용할까 고민도 해보았는데, MySQL을 사용하면 속도 면에 불리해지지 않을까라는 생각이 또 들었습니다. 이러한 문제를 어떻게 해결하면 좋을까요...? 제가 궁금한점은 다음과 같습니다. 1. Redis를 활용하는 프로젝트에서 MySQL을 Outbox 저장소로 사용하는 것은 좋지 않은 방법일까요? 2. Outbox 패턴이 최선일까요? 현업에서는 이러한 문제를 어떤 식으로 해결하는지 궁금합니다.

개발자

#spring

#rabbitmq

#redis

#mysql

#transaction

답변 1

댓글 1

조회 129

2달 전 · nexter 님의 새로운 답변

프론트엔드 ENV Key 관리 방법

현재 Next.js로 프로젝트를 진행하고 있는 중 궁금한 점이 있어 질문 남깁니다 KEY 값을 ENV 파일에 등록 후 사용중인데 NEXT_PUBLIC으로 붙여 클라이언트측에서도 접근 가능하게 만들어 사용중인데 이렇게 되면 키가 공개되어 보안상 위험하다고 생각이 들었습니다 혹시 어떤 방식으로 클라이언트 측에서 접근이 가능한 KEY 값을 관리하는지 방법에 대해 공유해주시면 감사하겠습니다!

개발자

#front

답변 3

댓글 1

조회 141

3달 전 · aigoia 님의 답변 업데이트

이직 시 단독 작업한게 걸림돌이 될까요?

프론트엔드 3년차 입니다. 디자이너,백엔드 개발자와 작업은 같이 했지만 프론트엔드 파트는 혼자 전부 진행하였습니다. 회사에서 보낸 시간이 너무 많아서 1년반정도가 인생에서 사라진 느낌이 들 정도였습니다. 그동안 트러블 슈팅, 혼자서 해결한 문제들이 너무 많아서 그런것들 보단 ( 알고보면 단순한 내용들이거나 시니어가 있었다면 금방 해결될 문제들입니다. ) 어려운 전제조건 하에 개발한 기능, 수치적으로 표현 가능한 기능에 대해서 이력서에 기입했습니다 허나 기입한 기능들 자체가 글로 적으면 대단해 보이지가 않는다는게 문제입니다. 오히려 단독으로 했다고 하면 과장해서 적어놓은 사기꾼같아보일까봐 걱정입니다. 이력서에 적힌걸 보면 정렬,최적화,구조 변경 이런것들이거든요... 근대 그것들을 클라이언트 단에서 디자인 패턴까지 쓰지않으면 안될정도의 복잡한 로직을 구현한거긴합니다만 결과 자체는 단순히 필터링 정렬 표기 그런것들입니다.. , 그걸 이력서에 다 기입할 수가 없어서 고민입니다. (react , next를 사용하였습니다) 또한 혼자서 서비스와 백오피스를 다 작성했다보니 효율적으로 수정 가능하게 진행했다, 다른 프로젝트에서 사용하기 용이하게 코드구조를 변경했다. 정도만 적을 수 밖에없었습니다. 어렵기 보단 얼마나 효율적으로 구조를 잡고 진행하냐의 문제였거든요. 이력상으로 봤을때 화려한 기능이나 서비스를 만든건 아니라서 더 더욱 차반 취급받을까봐 고민입니다.. 혼자서 많은 고민과 문제를 해결했지만 3자입장에서 봤을때 전혀 볼게 없는 심각한 상황입니다.. (시간만주면 3d든 스트리밍 chart든 브라우저 api 활용이든 map api든 canvas든 다 금방 배워서 할 자신이 있지만 그런 종류의 작업들은 회사 일로선 전혀 하질 못했습니다.. ) 연봉을 대거 낮춰서 신입 자리라도 지원해야할까요..? 최근엔 회사에서 먹고 자지 않아도 될정도라 알고리즘도 공부하고있고 트러블 슈팅이나 개발하면서 문제해결에 도움되었던 것들을 적으려고 블로그도 만들고 있긴합니다만. 너무나도 부족하고 모자라 보입니다.. 개발 실력도 올랐고 배포,운영 경험도 쌓였지만 작업내용 특성상 죄다 공개를 하지 못하니 어떻게해야할지 고민입니다..

개발자

#프론트엔드

#이직

#이력서

#경력기술서

답변 1

댓글 0

조회 174

3달 전 · 조세영 님의 새로운 답변

React면 되는것을 굳이 Next.js로 구현하는것

SEO나 서버사이드 렌더링이 필요없는 서비스를 구현할 때, 이걸 그냥 React로 개발하는것과 Next.js로 개발하는것의 차이가 있나요? 저는 Next.js를 써야겠다 싶은 경우가 아니면 React로 개발하고 싶은데, Next.js에서 모든 컴포넌트를 그냥 다 클라이언트 컴포넌트로 하면 React랑 똑같은 거 아니야? 라는 질문을 들었을 때 할말이 없더라구요. React만으로 구현할 수 있는걸 굳이 Next.js를 쓰는게, 뭔가 그냥.. 닭잡는데 소잡는 칼 쓰는 느낌이라 굳이 그럴필요 없다 정도로만 생각했는데 정확한 근거를 들어보라니 대답을 못하겠더군요 둘의 차이가 정확히 무엇일까요? 기존의 SPA 앱같은걸 개발할 때 React만 쓰는게 좋은 이유가 있나요?

개발자

#react

#next.js

답변 4

댓글 0

추천해요 39

조회 5,112

4달 전 · @SoftyChoco 님의 새로운 답변

게시글 이미지 업로드를 구현하는데 궁금한 점이 있습니다.

velog를 참고하여 Spring + Vue를 이용하여 마크 다운 기반 게시글을 구현하고 있습니다.. 글을 쓰는 도중에 이미지를 올리면 s3에서 url를 반환하여, 이것을 통째로 Post 테이블 Content 필드에 저장하여 순서를 보장하는 식으로 진행하고 있습니다. 로직 흐름은 이렇습니다. 1. 사용자가 이미지를 올린다면, 클라이언트에서 글쓰기 버튼을 눌렀을 때 미리 만들어 놓은 UUID와 이미지를 서버로 보낸다. 2. 서버에서는 s3객체에 임시 저장 여부를 확인하는 isTemp를 태그를 넣어서 서버를 걸쳐서 S3에 쏜다. 3. S3에서 객체를 찾아서 key값과 클라이언트에서 보낸 uuid를 Image 테이블에 저장해서 Post와 간접적으로 연관 관계를 맺는다. 4. 글쓰기를 누른다면 내용과 UUID를 보내서 UUID를 Post의 primary key로 사용하고, UUID 기반으로 Image 테이블에서 key들을 갖고 와서 S3 객체의 isTemp 태그를 false로 바꾼다. 4-1 . 뒤로 가기나 임시 저장을 눌렀을 때는 isTemp를 true로 설정하고 저장한다. 5. 30일이 지날 때마다, Post에 있는 isTemp를 통해 임시 여부를 확인하여 임시 저장된 글을 삭제하고, S3에서는 수명 주기를 설정하여 태그를 기반으로 true인 이미지들을 삭제한다. 객체를 삭제하는 이유는 불필요한 데이터가 공간을 차지하는 것이 별로라고 판단했습니다. UUID는 글을 다 쓰기도 전에 서버로 쏘기 때문에, 어떤 게시글에서 쓰였는지 확인하기 위해서 사용했습니다. 성능이나 용량 면에서 안 좋다고 하지만, 이는 데이터를 넣어 놓고 조회를 하여 성능을 확인하였고 현재 프로젝트 크기를 생각했을 때 접목해도 상관없을 것 같아 넣었습니다. 하지만 이런 식으로 진행하니, 만약 사용자가 중간에 이미지 링크를 삭제한다면? 이라는 시나리오를 생각했을 때 이를 대처할 방도가 떠오르지 않습니다. 다른 분들은 어떤 식으로 처리했는지, 제가 너무 어렵게 생각하고 짜는지 궁금합니다.

개발자

#spring-boot

#s3

#게시글

답변 1

댓글 0

조회 64

5달 전 · 이준성 님의 질문

미디엄 운영 가이드라인, 네이버 블로그와 다른 무언가의 팁?

안녕하세요, 늦은 인사지만 새해 복 많이 받으세요 언론홍보대행사 겸 마케팅 대행도 하고 있는 종합광고대행사에서 근무중입니다. 신규 클라이언트 중 미디엄이라는 매체를 운영할 듯 합니다. 잘은 모르지만 검색끌에 커리어리에서 당근마켓에서 하는 사례를 보았고 이 매체 운영시 특정한 가이드라인이나 로직 같은 것이 있을까요?

PM/PO/기획자

#미디엄

#미디엄사용자

#medium

#블로그

답변 0

댓글 0

조회 30

5달 전 · 익명 님의 질문 업데이트

Next 서버 컴포넌트와 전역 상태관리

안녕하세요. Next15에서 서버 컴포넌트를 적극적으로 도입하여 프로덕트를 개발하고 있는데, 고민이 되는 부분이 있어 여러 분들의 도움을 얻고자 질문을 남깁니다. 서버 컴포넌트에서 받아온 데이터와 클라이언트 컴포넌트에서 사용하는 zustand가 적절히 사용되고 있는지 고민이 듭니다. 현재 GET 요청의 경우 각각의 서버 컴포넌트에서 fetch를 통해 진행하고, 해당 데이터를 자식 클라이언트 컴포넌트에서 사용할 경우 props로 내려 사용하고 있는데, 이때, 드릴링이 심해질 경우 zustand와 같은 전역 상태관리 라이브러리를 함께 사용하려고 합니다. 예를 들어, 서버 컴포넌트의 첫 번째 자식인 클라이언트 컴포넌트에서 zustand를 사용하고, 이후 자식 클라이언트 컴포넌트에서는 zustand를 통해 상태관리 할 때 자식인 클라이언트 컴포넌트의 업데이트가 진행되는 부분에서 try/catch를 통해 요청을 보내고, router.refresh()를 통해 서버 컴포넌트에서 데이터를 새로 받아옵니다. 이후 클라이언트 컴포넌트에서는 useEffect로 서버 컴포넌트에서 props로 받아온 데이터가 바뀌는 것을 감지하고, 해당 props를 zustand에서 사용하는 데이터로 업데이트하려고 하는데 문제가 될만한 점이 있을까요? 이와 관련된 링크나 답변이 있으시다면 감사히 받겠습니다!

개발자

#next.js

#상태관리

#rsc

#서버컴포넌트

답변 0

댓글 0

추천해요 2

조회 143

7달 전 · 허니 님의 새로운 답변

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

개발자

#nextjs

#nextjs13

#nextjs14

#reactquery

#서버컴포넌트

답변 1

댓글 0

보충이 필요해요 1

조회 89

7달 전 · 익명 님의 새로운 댓글

개발자 vs QA 어떤 선택을 해야할지 모르겠습니다ㅠ 도와주세요

안녕하세요! 콘텐츠 관련 학과를 졸업하고 게임 클라이언트 개발자를 준비하고 있는 26살 취업 준비생 입니다. 일자리가 주로 서울, 경기권에 있지만 저는 현재 지방에 거주하고 있고, 금전적인 여유가 없어 살고 있는 지역의 게임 QA 회사에 취업 해야하나 생각중 입니다. 금전적으로 힘들더라도 어떻게든 개발직군으로 취업하는게 좋을까요 아니면, 1년 QA회사 다니며 자금을 모아 다시 개발자로 취업 준비하는게 좋을까요? 조언 부탁드립니다ㅠㅠㅠ

개발자

#게임

#개발자

#qa

#취업

답변 2

댓글 2

조회 378

8달 전 · 문종호 님의 새로운 답변

RAG 를 짜는 중에 도무지 어떤 부분이 문제인지 모르겠습니다.

# JSON 파일에서 FAQ 데이터를 로드하는 함수 def load_faq_data_from_json(file_path): with open(file_path, 'r', encoding='utf-8') as f: faq_data = json.load(f) return faq_data # FAQ 데이터 로드 json_file_path = '' faq_data = load_faq_data_from_json(json_file_path) # ChromaDB 클라이언트 및 Embedding 설정 chroma_client = chromadb.Client() # ChromaDB 클라이언트 생성 # 고유한 컬렉션 이름 생성 collection_name = "faq_data_" + datetime.datetime.now().strftime("%Y%m%d_%H%M%S") collection = chroma_client.create_collection(collection_name) # LangChain의 Text Splitter 설정 text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # OpenAI 임베딩 설정 openai_api_key = '' embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # 텍스트 스플리팅 및 임베딩 생성 함수 def split_and_embed_text(text): splitted_texts = text_splitter.split_text(text) print(f"Splitted texts: {splitted_texts}") try: # OpenAIEmbeddings는 embed_documents를 사용합니다. embeddings = embedding_function.embed_documents(splitted_texts) except Exception as e: print(f"임베딩 생성 중 오류 발생: {e}") return None # 임베딩이 제대로 생성되었는지 확인합니다. if embeddings is None or len(embeddings) == 0: print("임베딩 생성 실패") return None # 임베딩을 numpy 배열로 변환 embeddings = np.array(embeddings) print(f"Embeddings shape: {embeddings.shape}") # 임베딩 벡터의 차원을 확인하고 처리합니다. if embeddings.ndim == 1 and embeddings.shape[0] == 1536: # 임베딩이 1차원 배열이고 길이가 1536인 경우 final_embedding = embeddings elif embeddings.ndim == 2 and embeddings.shape[1] == 1536: # 임베딩이 2차원 배열이고 두 번째 차원이 1536인 경우 final_embedding = np.mean(embeddings, axis=0) else: print("임베딩 벡터의 차원이 예상과 다릅니다.") return None print(f"Final embedding shape: {final_embedding.shape}") return final_embedding # FAQ 데이터를 Vector DB에 저장 def store_faq_data_in_vector_db(faq_data, collection): for faq in faq_data: # 'question'과 'answer'가 있는지 확인하고, 'answer'가 None이 아닌지 확인 if 'question' not in faq or 'answer' not in faq or faq['answer'] is None: print(f"누락된 'question' 또는 'answer'로 인해 항목을 건너뜁니다: {faq}") continue # 다음 항목으로 넘어감 # 텍스트 스플리팅 및 임베딩 생성 question_embedding = split_and_embed_text(faq['question']) if question_embedding is None: print(f"Embedding generation failed for question: {faq['question']}") continue # 임베딩이 없으면 다음 질문으로 넘어감 print(f"Generated embedding for question '{faq['question']}': {question_embedding}") # 각 질문에 고유한 ID 생성 faq_id = str(uuid.uuid4()) # 메타데이터에서 None 값을 제거 metadata = {k: v for k, v in {"answer": faq['answer']}.items() if v is not None} # Vector DB에 저장 collection.add( documents=[faq['question']], metadatas=[metadata], ids=[faq_id], embeddings=[question_embedding] ) # 추가 후 임베딩 확인 (저장된 후 곧바로 확인) stored_results = collection.get(ids=[faq_id], include=["embeddings"]) if stored_results['embeddings'] is not None and len(stored_results['embeddings']) > 0: print(f"Embedding for question '{faq['question']}' successfully stored.") else: print(f"Failed to store embedding for question '{faq['question']}'") # FAQ 데이터를 JSON에서 로드하고 저장 store_faq_data_in_vector_db(faq_data, collection) 이렇게 데이터를 저장하고 # 환경 변수에서 API 키 로드 openai_api_key = os.getenv("OPENAI_API_KEY") if not openai_api_key: raise ValueError("OpenAI API 키가 설정되지 않았습니다. 환경 변수 OPENAI_API_KEY를 설정하세요.") # OpenAI 임베딩 설정 embedding_function = OpenAIEmbeddings( model="text-embedding-ada-002", openai_api_key=openai_api_key ) # LangChain의 Text Splitter 설정 (일관성 유지) text_splitter = RecursiveCharacterTextSplitter( chunk_size=512, chunk_overlap=50 ) # ChromaDB 클라이언트 및 컬렉션 설정 chroma_client = chromadb.Client() collection_name = "faq_data_collection" try: # 이미 존재하는 컬렉션인지 확인하고, 있으면 가져옴 collection = chroma_client.get_collection(name=collection_name) except chromadb.errors.CollectionNotFoundError: # 컬렉션이 존재하지 않을 경우에만 생성 collection = chroma_client.create_collection(name=collection_name) # Vector DB에서 유사 질문 검색 (ChromaDB) def find_similar_question_in_vector_db(new_question_embedding, collection, k=5): results = collection.query(query_embeddings=[new_question_embedding], n_results=k, include=['documents', 'metadatas', 'embeddings']) best_similarity = 0 best_question = None best_answer = None # 검색 결과에서 각 질문의 유사도와 답변을 처리합니다. if 'documents' in results and 'metadatas' in results: documents = results['documents'][0] metadatas = results['metadatas'][0] embeddings = results['embeddings'][0] for i in range(len(documents)): stored_embedding = embeddings[i] metadata = metadatas[i] if stored_embedding is not None: # 코사인 유사도를 통해 유사도를 계산합니다. similarity = cosine_similarity([new_question_embedding], [stored_embedding])[0][0] print(f"유사도: {similarity} for {documents[i]}") # 유사도가 가장 높은 결과를 선택하며, 임계값 이상일 경우에만 선택 if similarity > best_similarity and similarity >= SIMILARITY_THRESHOLD: best_similarity = similarity best_question = documents[i] if isinstance(metadata, list): metadata = metadata[0] best_answer = metadata.get('answer') if isinstance(metadata, dict) else None return best_question, best_answer # Fine-tuned GPT를 사용해 새로운 답변 생성 def gpt_generate_response_from_finetuned_gpt(question, style="의사 A 말투"): prompt = f"다음은 환자의 질문입니다: \"{question}\". 아래 말투를 사용하여 질문에 대해 성실하고 정확한 답변을 작성해주세요.\n\ 말투: {style}" response = client.chat.completions.create( model="", # Fine-tuned된 GPT 모델 ID messages=[ {"role": "system", "content": "You are a helpful medical assistant."}, {"role": "user", "content": prompt}, ], max_tokens=300, temperature=0.7, # 답변의 다양성을 조절합니다. ) return response.choices[0].message.content.strip() # 새로운 질문 처리 및 최종 응답 생성 def generate_final_response(new_question, collection): # 텍스트 스플리팅 및 임베딩 생성 splitted_texts = text_splitter.split_text(new_question) new_question_embedding = np.mean(embedding_function.embed_documents(splitted_texts), axis=0) # ChromaDB에서 유사 질문 검색 similar_question, answer = find_similar_question_in_vector_db(new_question_embedding, collection) if similar_question and answer: final_response = f"질문: {new_question}\n유사 질문: {similar_question}\n기본 답변: {answer}" else: generated_answer = gpt_generate_response_from_finetuned_gpt(new_question) final_response = f"질문: {new_question}\nGPT로 생성된 답변: {generated_answer}\n(이 답변은 벡터데이터에서 유사한 답변을 찾을 수 없어 GPT에 의해 생성되었습니다.)" return final_response # 사용자로부터 새로운 질문 입력 받기 new_question = input("새로운 질문을 입력하세요: ") # 최종 응답 생성 response = generate_final_response(new_question, collection) print(response) 로 데이터베이스에서 유사한 질문-답변 쌍을 끌어오려는데 정확히 같은 질문을 넣어도 (이러면 유사도가 1인데) 저장되어있는 답변이 끌어와지질 않네요...

개발자

#llm#rag

답변 1

댓글 0

조회 103

8달 전 · 포크코딩 님의 새로운 답변

유니티 c# 클라이언트 프로젝트에서 환경변수 설정

일반적으로 어떻게 환경변수를 관리하나요? Api 도메인 명이나 클라이언트 api 키같은 부분들을 환경변수로 관리하고 싶은데 구글링을 해도 확실한 방법이 잘 나오지 않네요. 아시는 분 계신가요?

개발자

#unity

#c#

답변 1

댓글 0

조회 32

8달 전 · 허니 님의 새로운 답변

next.js url 파라미터 변경 시 데이터 호출

next.js 서버 컴포넌트에서 fetch후 클라이언트 컴포넌트로 넘겨주는 구조에서 브라우저 url 파라미터 값이 바뀔때마다 새로운 데이터를 호출하도록 구현하고 싶습니다,. useEffect를 활용하려했으나 fetch 함수가 async다보니 클라이언트 컴포넌트에서 사용할 수 없더라구요... 방법이 뭔지 모르겠습니다ㅠㅠ 알려주시면 감사하겠습니다!!

개발자

#next.js

#서버-컴포넌트

#fetch

답변 1

댓글 0

보충이 필요해요 1

조회 63

9달 전 · 익명 님의 질문 업데이트

프론트 next와 rust 사이에서의 kafka 통신

회사에서 프론트로 nextjs 쓰고있고 백으로 rust 사용하고 있습니다.(백 서버1, 프론트 1) 들어온지 얼마 안되었고 카프카가 좋다고 카프카 쓴다고 해서 그냥 그런게 있구나하고 UI나 기초적인거 짜고 이제 next에서 카프카 작업 하고있는데요 막상 시작하려니 nextjs에서 모든 데이터(유저 정보와 같은 정적인 데이터 포함)를 next 서버로부터 카프카 통신을 통해 들어오는 데이터들을 클라이언트에서 감지하려면 모든 페이지에서 웹소켓을 도입해야하는 상황입니다.. 제가 알고있는 게 맞나요? 백 서버 한개있는 프로젝트에서 카프카를 도입하는게 일반적인 일인가요..? 제가 해왔던 백-프론트 통신과 너무 달라서요 채팅같은 실시간 데이터가 필요하지 않은 곳에 웹소켓을 연결해야 하는 뿐더러 next app router에서 웹소켓을 연결하려면 별도의 node 서버를 두어야 하는 것 같은데 맞을까요? 아니면 웹소켓 말고도 카프카로 날아오는 데이터를 next 프론트쪽에서 받아올 수 있는 방법이 있나요? 정적인 데이터들은 api fetch 날려서 받아오면 된다고 생각했는데 모든 데이터를 카프카로 받아오고 있고 이를 실시간으로 확인해야하는 번거로움이 따라오는 것 같습니다.. 단지 유저정보를 받아오는데 웹소켓을 연결하는게 도저히 아닌 것 같아서 글 올려봅니다. 마감기한이 얼마 남지 않았는데 어려운걸 되게 해야하는 것도 아니고 안되는걸 되게 하라고하니 이게 맞나 싶어서요 .. 이러한 경우들이 있는지 현업자분들 도움 부탁드립니다. 공부해보니 카프카라는 기술 자체가 DB를 가진 백 서버들간의 통신에서 빛을 보기 위해 도입한다고 하는데 애초에 지금 진행하고 있는 프로젝트는 백 쪽 DB 1개입니다. 현재 프로젝트에서 카프카를 도입하는 것은 오버엔지니어링 같음은 물론 비용적인 면에서도 절대 도입할 이유가 없다고 생각하는데, 의견 부탁드리겠습니다.

개발자

#백엔드

#프론트엔드

#next

#rust

#kafka

답변 0

댓글 0

조회 146

9달 전 · 이상래 님의 새로운 답변

신입일 때의 부담을 어떻게 이겨내시는지 여쭙고 싶습니다.

안녕하세요. 이번에 서비스 회사에 백엔드 채용연계형 인턴으로 근무한 지 한달 조금 덜된 학생입니다. 그동안 취업 준비를 하면서는 자바와 스프링만을 공부했었고, 개발 공부도 중학교 1학년 때 부터 하고 싶다는 목표를 가진 뒤로 대학생때는 개발 동아리들을 여러 번 하며 개발에 대해 어느 정도 자신감이 있었습니다. 그러나 지금 회사에서는 타입스크립트와 네스트를 써서 그런지, 처음으로 맡은 비교적 간단한 CRUD 작업을 했을 때 2일이면 끝날 줄 알았던 게 5일 한 주를 전부 쓰게 되었던 적이 있었습니다. 물론 2일만에 구현은 끝냈고, 함께 근무하시는 분들이 남겨주신 리팩터링 요구사항을 반영하는 데 3일이 걸렸습니다. 지금에야 기술에 대해 익숙하지 않으니 시간이 더 걸린 것일수도 있겠지만, 리팩터링 요구사항이 100개 가까이 되는 것을 보면서 이전에 가지고 있었던 자신감이 많이 떨어지게 되었습니다. <객관적으로 되게 쉬운 CRUD일텐데 이렇게 오래 걸리고, 다른 언어로 했어도 이런 리팩터링 요소들은 발생할 수 있지 않았을 실수들일텐데...>와 같은 생각이 요즘 갑자기 생각되었습니다. (제가 제 스스로에게 워낙 완벽주의를 가지고 있기도 합니다.. 그리고 저 때문에 클라이언트 분들이 금요일에 바쁘게 마무리하신 걸 보니 책임감에 죄송한 마음이 깊게 들었습니다.) 이 외에도, 비슷하게 간단해보이는 업무들인데 제가 맡으면 시간이 더 걸리거나 빠르게 못 끝내는 것들이 있었습니다. 결론을 드리면, 회사에서 일로써 개발을 한다면 이렇게 일정 속에서 개발해야만 하는 일이 앞으로 비일비재할텐데 그런 점에서 어떻게 부담을 이겨내시는지 궁금합니다.

개발자

#신입

답변 3

댓글 0

추천해요 1

조회 275

10달 전 · 익명 님의 질문 업데이트

Nextjs14 서버 컴퍼넌트 JWT 갱신 방법 문의

안녕하세요 NextJS14 에서 JWT 로그인 방식으로 프로젝트 진행중에 있습니다. 현재 AccessToken 만료시 재 갱신하는 로직을 하면서 해결하지 못하는 내용이 있어서 문의 드리립니다. 서버 컴포넌트와 클라이언트 컴포넌트에서 갱신된 AccessToken 을 공유 하는 법에 대해서 어떻게 처리 하셨나요? - app router 사용 - accessToken, refreshToken 쿠키 사용 - fetch 를 이용하여 API 호출 아래 테스트 내용으로 서버 컴포넌트에서 AccessToken 만료되어 갱신되는 경우 클라이언트로 쿠키를 갱신해줄 방법을 모르겠습니다. 너무 CSR 구조로 생각하는거 같기도해서, 이런 경우 어떻게 토큰을 현행화 해서 사용하는지 문의 드립니다. 별도 가이드 문서를 더 찾아보면 서버 컴포넌트에서는 쿠키를 사용하지 말라는 글도 보여서, 방향성을 잘못잡고 있는 느낌도 들고 있습니다. 많은 조언 부탁드립니다!! 테스트 케이스) 1. 서버 <-> 클라이언트 (에러) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출 -> 쿠키 set -> 클라이언트에서 백엔드 API 호출(당연히 클라이언트에서는 쿠키가 갱신안되서 에러) 2. 서버 <-> 서버(성공) - 서버 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 서버 백엔드 API 호출 3. 클라이언트 <-> 클라이언트 (성공) - 클라이언트 컴포넌트에서 백엔드 API 호출 -> 토큰 만료 -> AccessToken 재 갱신 API 호출-> 쿠키 set -> 클라이언트 백엔드 API 호출

개발자

#nextjs

#jwt

#accesstoken

#refreshtoken

#nextjs14

답변 0

댓글 0

조회 100

10달 전 · 포크코딩 님의 새로운 답변

nextjs 서버컴포넌트 질문있습니다 !

안녕하세요 nextjs 14 app router 공부 중 질문이있어 이렇게 글 남깁니다.... 1. ”use client“ 클라이언트 컴포넌트가 자식으로 서버컴포넌트를 가져오면 그 아래의 모든 컴포넌트는 서버컴포넌트로 동작이 아닌 클라이언트 컴포넌트가 되는건지 궁금합니다.. 2. 그렇다면 layout단에서 use client를 사용한 provider가 있다면 children으로 받은 모든 페이지들은 클라이언트 컴포넌트가 되는건지 궁금합니다... 3. 서버컴포넌트랑 SSR이 다른 개념이라는데 너무 헷갈립니다.. 혹시 다른점이 뭔지 알 수 있을까요? 궁금한 점들을 나열하다보니 두서가 없어진거같아서 죄송합니다.. 좋은 히루 보내세요 :) !!!!

개발자

#react

#next.js

#component

답변 1

댓글 0

조회 38

10달 전 · aigoia 님의 답변 업데이트

유니티 라이브 코딩테스트 관련 질문

안녕하세요 유니티 클라이언트 개발 직군을 희망하고있는 취준생입니다. 서류 1차 통과를 하고 라이브 코딩테스트로 1차 면접을 진행한다는 연락이 왔습니다. 유니티 직군으로 코딩테스트를 하는 경험은 한번도 없어서 아무것도 모르겠고 대처를 할수없어서 마음이 뒤숭숭하네요 일단 저는 정말 부끄럽게도 알고리즘 코딩테스트 준비를 한번도 안해봤습니다.. 올해 2월에 졸업해서 개인 포트폴리오를 만드느라 지금까지 시간을 써버려서 많이들 말씀하시는 백준이나 프로그래머스 제일 초급난이도 정도는 풀수있을지도 모르겠군요.. 무튼 이러한 상황속에서 질문하고싶은건 아래와 같습니다. 1. 유니티 직군에서의 라이브코딩 테스트, 어떻게 진행되는가? - 유니티 프로젝트를 구성, 기능개발 및 트리거 구현 등등 이런방식? - 일반 코딩테스트 같이 알고리즘 문제를 주고 푸는 방식? 2. “일반 코딩테스트 같이” 라면 대체로 어느정도의 문제가 나올까요? (난이도 혹은 문제의 종류? (게임종류라던지 정렬종류라던지)) 3. 일주일 코딩테스트 벼락치기해도 소용이 있을까요..

개발자

#유니티

#unity

#라이브코딩테스트

#코딩테스트

답변 2

댓글 0

조회 321

10달 전 · 헤헤 님의 질문 업데이트

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

개발자

#프론트엔드

#next.js

#react

#ssr

#csr

답변 0

댓글 0

조회 81

10달 전 · 익명 님의 질문

토큰 관리, 로그인 유지를 현업에서는 어떻게 진행하는지 궁금합니다

안녕하세요 토이프로젝트로 인증/ 인가 파트를 맡게되었습니다 이전의 프로젝트에서는 로컬스토리지과 전역 상태 관리 라이브러리의 persist를 활용하여 토큰과 로그인상태를 로컬스토리지에 저장하여 진행하였습니다 하지만 이번에 새롭게 진행하는 프로젝트를 위해 다양한 웹사이트를 개발자도구로 참고하였지만 토큰이나 isLogined와 같이 로그인 여부 상태를 로컬, 세션 스토리지에서 관리하는 사이트를 확인할 수 없었고, 검색을 통해 보안을 위해 Http Only 쿠키를 통해 액세스 토큰과 리프레시 토큰을 관리하는 방법이 일반적이란것을 알 수 있었습니다 이러한 방법에서 몇 가지 궁금증이 생겨 질문을 드리고 싶습니다 1. 현업에서는 어떠한 방식으로 토큰을 관리하고 로그인 상태를 유지하나요? 2. 만약 http only 쿠키를 사용하게 된다면, 쿠키에 저장된 토큰을 클라이언트에서 조작할 수 없으니, 매번 페이지를 렌더링 할 때마다 토큰이 유효한지 api 호출을 통해서 로그인 상태를 유지해야하는걸까요? (api를 통해 토큰이 유효하다면 로그인 유지, 아니라면 로그인 페이지 리다이렉션) 3. http only 쿠키 외에 인증 / 인가를 위해서 클라이언트 단에서 보안적으로 신경써야하는 부분은 어떠한것이 있을까요? 가장 기본적이지만 가장 어려운 인증/인가 부분 현업 선배님들께서는 어떻게 진행하시는지 답변해주시면 감사하겠습니다

개발자

#front

#react

#login

#jwt

#프론트엔드

답변 0

댓글 0

추천해요 3

조회 146

10달 전 · 김영민 님의 새로운 답변

비밀번호검증 질문 (백엔드 프론트엔드 연동 )

저는 컴퓨터공학과 학생이지만 개발이 처음입니다. 프론트엔드를 맡아 리액트 네이티브 앱을 개발하는 중입니다. 기초 지식은 있지만 학교 수업만 들어봤기 때문에 실제로 서비스를 어떻게 만드는지는 몰라, 이번 프로젝트에서는 사실상 GPT가 다 짜줬다고 해도 무방한 정도였어요. 프로젝트가 거의 다 끝나가는데, 백에서 비밀번호에 암호화를 걸면서 수정사항이 생겼습니다. if (existingProfile.password !== profile.oldPassword) { Alert.alert('비밀번호 오류', '기존 비밀번호가 올바르지 않습니다.'); return; } 기존에는 위와 같이 단순하게 비교를 했었는데, 백에서 암호화가 되어버려서 저런 단순한 로직을 사용할 수 없게 되었습니다. 대신 백에서 currentPassword(클라이언트에서 입력받은 비밀번호), getPassword함수(암호화되지 않은 사용자 계정의 기존 비밀번호를 받아오는 함수)를 bcrypt를 이용해서 알아서 다 처리하도록 코드를 다 짜주셨다고 하더라고요. 백엔드 코드는 사진으로 올려두었는데, if (passwordEncoder.matches(currentPassword, user.getPassword()))를 통해서 두 비밀번호가 일치하는 경우에만 정보가 수정되도록 코드가 작성되어 있습니다. 로직은 충분히 이해가 가는데, 이를 프론트엔드 코드에 어떻게 적용해야하는지 전혀 모르겠습니다. 구글링을 어떻게 해야 이런 경우의 풀이가 나오는지도 모르겠고, 찾아봐도 백엔드에서 암호화를 하는 방법이나 해시를 하는 방법 같은 것만 나오네요. 이 문제를 해결하기 위해 일주일 내내 노트북만 붙잡고 있었는데 멘탈만 부서지고, 코드는 아무것도 나아지지 않았습니다. 부디 많은 조언과 도움 부탁드립니다.

개발자

#비밀번호

#프론트엔드

#react-native

#front-end

#javascript

답변 1

댓글 0

조회 187

10달 전 · 이상래 님의 새로운 답변

NextJs 확장 fetch로 서버 컴포넌트에서 동적으로 api를 받는 방법

안녕하세요. 선배 개발자 선생님들. 오늘도 한 단계 성장하기 위해 질문을 남겨봅니다. 저는 NextJs, App router 방식으로 코드를 구현중이며, 서버 상태는 React-Query로 상태값을 관리하고 있었습니다. 왜 리액트 쿼리를 사용했는가? why? 1. Optimistic update, 무한스크롤에 대해 공부하고 적용해보고 싶었습니다. 2. 클라이언트 상태, 서버 상태를 나눈다는 개념이 너무 좋아서 서버 상태는 React-Query로 다뤘습니다. 3. statleTime, gcTime을 조정하여 캐싱기능이 좋았습니다. 갑자기 문득 나는 NextJS를 잘 쓰고 있는건가? 리액트랑 폴더 구조 말고는 다른게 없는거 아닌가? 라는 생각이 들었고, NextJs의 기능을 최대한 활용하고 나머지 불편한 부분이 생긴다면 외부 라이브러리를 사용하자! 라는 생각이 들었습니다. 그래서 저는 React-Query로 상태를 관리하던걸 NextJs의 확장 fetch로 바꿀려고 합니다. Optimistic update, 무한스크롤 기능을 제외하고 나머지 모든 서버 상태는 확장 fetch로 바꿀려고 합니다. 페이지네이션 페이지네이션 처럼 사용자와 상호 작용하는 부분, 즉 동적으로 데이터를 받아오게 하기 위해 url을 변경한 뒤, [id]/page.tsx에서 param로 받던지 혹은 header()를 통해 params를 받아서 처리를 할 수 있다고 생각하고, 저는 header()로 params를 받아서 처리를 했습니다. 모달에서의 페이지네이션 그런데 문제는 모달을 띄우고, 모달 내부에서 페이지네이션이 있는 경우 어떻게 데이터를 동적으로 받아오는지 고민을 해봐도 방법이 없는 것 같습니다. 1. 모달에서 다음 페이지 클릭시 url을 변경한다. -> 안해봤지만 동작을 할 수 있더라도 뭔가 느낌적으로 아닌 것 같습니다. 2. 클라이언트 컴포넌트에서 상태값을 서버 컴포넌트로 전달한다 -> 불가능 궁금한 점 1. 모달 내부에서 페이지네이션을 처리할때 url을 변경해서 서버 컴포넌트에서 확장 fetch로 데이터를 관리하는 게 적절할까요? 2. 모달 내부에서는 페이지네이션을 처리할 때는 react-query로 데이터를 관리하는 걸 확장 fetch로 바꿀 수 없는 건가요?? 바꿀 필요가 없는 건가요? 3. 더 좋은 방법이 있는 건가요?

개발자

#next.js

#reactquery

답변 2

댓글 0

조회 207

10달 전 · 유길종 님의 답변 업데이트

data fetching은 어디서 하는 게 좋은 것일까요?

안녕하세요. 저는 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 피드백을 적극 환영하기에 많은 피드백 혹은 의견을 많이 남겨주시면 감사하겠습니다. 저는 데이터 페칭을 어디서 하는 게 좋을지 고민 중이라 글을 남깁니다. 아래와 같이 3개로 글을 구성해봤습니다. 1. 현재 개발상황 2. 현재 저의 데이터 페칭 위치 3. 궁금한 점 1. 현재 개발상황 저는 개인 프로젝트로 Next.js와 React Query를 사용하여 개발하고 있습니다. 현재 Next.js의 App Router를 사용 중이며, 프로젝트 구조는 아래와 같습니다. app: page.tsx, layout.tsx components: 최소 2번 반복 사용되는 재사용 가능한 컴포넌트 container: 일반적인 컴포넌트 (조합 등) hook, service 등 2. 현재 저의 데이터 페칭 위치 현재 데이터 페칭은 최상단의 app -> page.tsx에서 수행하고 있으며, 자식 컴포넌트에는 데이터를 props로 전달하고 있습니다. 이러한 이유는 prop drilling이 발생하더라도 데이터 페칭을 한 곳에서 처리하면 코드 이해가 쉬울 것 같아서입니다. 현재로서는 전역 상태 라이브러리를 사용하지 않아 최대 4단계까지 prop drilling이 발생하고 있지만, 전역 상태 라이브러리를 도입하면 prop drilling 문제는 해결될 것으로 생각하고 있습니다. 추가적으로 현재 이렇게 구현하면서 data fetch할때 필요한 query값들도 최상단에서 관리해야하는 불편함이 있었습니다. -> 최상단에서 관리해야 하는 상태값이 늘어남 3. 궁금한 점 3-1. 아래의 2가지 data fetching 방법 중 어느것이 적절한지? 합리적인지 의견이 궁금합니다. - 최상단에서 Fetching - 장점 : 한 곳에서 Fetching하기에 코드 일관성, 가독성, 코드를 이해하는데 좋다고 생각 - 단점 : prop drilling, 추가적인 전역 상태 관리 해야한다고 생각 - 필요한 컴포넌트에서 Fetching - 장점 : 필요한 컴포넌트에서 fetching 하기에 prop driling과 같은 불필요한 코드 작성 할 필요 x - 단점 : 어떤 컴포넌트에서 fetching 했는지 파악하기 힘들어짐 3-2. 현재 최상단에서 모든 데이터 페칭을 하고 props로 전달하는 방식 vs 필요한 컴포넌트에서 데이터 페칭을 하는 두 가지 방식 중 어느 것이 더 많이 사용되는 패턴인지 궁금합니다. 3-3. React Query는 서버 상태 관리, 캐싱, Optimistic Update와 같은 기능을 위해 도입했습니다. 그러나 prop drilling을 해결하기 위해 React Query에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

개발자

#next.js

#redux

#react-query

#frontend

#신입

답변 3

댓글 0

조회 177

10달 전 · aigoia 님의 답변 업데이트

프론트엔드분들은 개인 프로젝트할 때 백엔드를 어떻게 하시나요?

프론트엔드 분들은 취업이나 이직, 사이드프로젝트 등 개인 프로젝트를 진행할 때 백엔드는 어떻게 하시나요? 예시는 react 진영 기준으로 하였습니다 다른 선호하는 방식이 있다면 댓글로 알려주세요! 1. 클라이언트, 서버 각각 전부 개발 ex. reactjs(nextjs) + nestjs 2. 백엔드 서비스를 활용하여 개발 ex. nextjs + firebase, supbase 3. 풀스택 프레임워크 사용해 한 번에 개발 ex. nextjs + prisma(orm) + s3(storage)

투표

개발자

#react

#next

#프론트엔드

답변 6

댓글 0

조회 1,191

일 년 전 · 익명 님의 새로운 댓글

아임포트 결제 API 환불 요청 시 액세스 토큰 발급 문제

안녕하세요, 제가 현재 쇼핑몰 프로젝트를 개발 중입니다. 우선, 아임포트 API로 결제 서비스를 개발한 다음, 환불 기능도 추가하려고 찾아보던 도중, 환불 요청을 보내기 위해서는 액세스 토큰을 따로 발급해야 한다고 합니다. 액세스 토큰을 따로 발급을 받기 위해서는 API키와 비밀키를 통해 가져와야 하는데, 보안 상 문제로 서버 사이드에서 액세스 토큰을 발급 받아야한다는 것을 알았습니다. 그러나 react는 클라이언트 사이드 라이브러리인데 그러면 서버 사이드 환경을 만들기 위해 Express 서버를 설치해야만 이 문제를 해결할 수 있나요?

개발자

#react

#아임포트

답변 2

댓글 2

조회 459

일 년 전 · 익명 님의 새로운 댓글

실시간 데이터 동기화 질문

A 사용자가 올린 플레이리스트를 B 사용자가 플레이리스트를 팔로우 한다고 가정하고 A 사용자가 플레이리스트 수정시 B 사용자의 화면에 실시간으로 변경이 되어야 합니다. 이런 경우에 SSE 또는 웹소켓을 이용해 클라이언트에게 메시지를 보내면 프론트에서 받은 후 서버에 다시 플레이리스트를 요청하여 업데이트 시켜주는 흐름으로 가는건가요?

개발자

#spring

답변 1

댓글 1

조회 58

일 년 전 · 이호영 님의 질문

Firebase sdk에 관한 질문입니다.

Firebase db로 2개의 프로덕트가 있는데 하나는 클라이언트에서 하나는 서버단에서 사용하려고 Initialize() 를 사용하려하는데 2가지의 이슈가 있었는데 getAuth()에 app이라는 변수명에 config를 정의 해두고 getauth(app)까지는 무제없었는데auth의메서드를 사용하려하니 이미 duplicate 블라블라..에러가 뜨더라구요. Firebase 공식문서 확인을 하면서 작성하긴했는데 이제 3일차 되는데 너무어려워서 질문남겨봅니다..

개발자

#firebase

#next.js

답변 0

댓글 0

조회 28