#클라이언트

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

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

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

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는 글을 다 쓰기도 전에 서버로 쏘기 때문에, 어떤 게시글에서 쓰였는지 확인하기 위해서 사용했습니다. 성능이나 용량 면에서 안 좋다고 하지만, 이는 데이터를 넣어 놓고 조회를 하여 성능을 확인하였고 현재 프로젝트 크기를 생각했을 때 접목해도 상관없을 것 같아 넣었습니다. 하지만 이런 식으로 진행하니, 만약 사용자가 중간에 이미지 링크를 삭제한다면? 이라는 시나리오를 생각했을 때 이를 대처할 방도가 떠오르지 않습니다. 다른 분들은 어떤 식으로 처리했는지, 제가 너무 어렵게 생각하고 짜는지 궁금합니다.

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

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

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

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

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에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

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

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

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인데) 저장되어있는 답변이 끌어와지질 않네요...

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

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

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

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

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

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

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

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

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 서버컴포넌트 질문있습니다 !

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

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

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

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 query 캐시 질문

next.js와 react query를 사용해 프로젝트를 진행하다가 이해가 안되는 현상이 있어서 질문드립니다. 어떤 A 라는 페이지에 들어오면 포스트와 포스트의 댓글들이 보이는 상황입니다. 첨부한 코드는 A 페이지를 담당하는 page.tsx 코드와 page 에서 사용중인 컴포넌트중 댓글 컴포넌트인 Comments 컴포넌트, 그리고 Comments 에서 useQuery의 queryFn으로 지정한 getComments 함수의 코드입니다. Comments 컴포넌트의 useQuery의 staleTime은 10초로 해두었고, queryFn인 getComments 함수의 fetch는 revalidate를 60초로 해둔 상황입니다. useQuery의 staleTime보다 fetch의 revalidate 시간을 길게 한건 react query로 인한 클라이언트측의 캐시와, next.js의 fetch에 의한 서버 측의 캐시의 차이점을 확인해보려고 그런것입니다. A 페이지에 처음 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리로 인해 받아온 댓글(comments) 데이터가 화면에 보입니다. 이 댓글에는 랜덤으로 생성된 이미지가 있습니다. 우선 10초가 지나기 전에는 새로고침에도 기존의 데이터 그대로 보이고, fetch 요청을 받는 백엔드 api에도 요청이 들어오지 않습니다. react query로 인해 쿼리가 실행되지 않아서 그런 것이겠죠? 그러고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale 상태가 된 후에 A 페이지를 새로고침하면 ['posts', id, 'comments'] 쿼리는 다시 fresh 해지는데 백엔드 api에는 요청이 들어오지 않았더라구요. 화면상의 댓글의 이미지들도 이전과 동일하게 나옵니다. 저는 이게 "A 페이지에 들어와 page 컴포넌트가 실행되면 ['posts', id, 'comments'] 쿼리가 실행되어 fetch 요청이 실행되는데 이 ['posts', id, 'comments'] 쿼리는 서버 컴포넌트에서 프리패치 되는 거니까, 즉 fetch가 서버쪽에서 실행되는 거니까 react query의 캐시가 아닌 fetch의 캐시 설정을 따른다. 그렇기 때문에 ['posts', id, 'comments'] 쿼리가 실행되어 fetch가 실행되지만 fetch의 캐시는 남아있으니까 캐싱된 값을 사용해서 백엔드 api에는 요청이 안들어온것이다." 라고 생각했고 이걸 확인하기위해 새로고침을 해본것이었기 때문에 이 결과에 대해 납득하긴 했는데요.. 이 생각이 맞는건지가 일단 궁금합니다. 그리고 진짜 이해가 안되는건 이겁니다. A 페이지에 들어오고 10초가 지나 ['posts', id, 'comments'] 쿼리가 stale해지면 이번에는 다른 페이지로 이동했다가 A 페이지로 다시 돌아옵니다. A 페이지에서 새로고침을 하지 않고 사이트 내에서 페이지 이동으로 A 페이지에 다시 들어오는거죠. 이러면 백엔드 api에 요청이 들어오더라구요. 이게 왜 그런건지 모르겠습니다. 10초가 지나 ['posts', id, 'comments'] 쿼리는 stale 해졌지만 60초는 안지나서 fetch의 캐시는 유효한... 위의 새로고침 경우와 동일한 상황인데 새로고침 시에는 api로 요청이 안들어오고, 다른 페이지로 이동했다가 다시 돌아온 경우는 api로 요청이 들어오네요. A 페이지에서 새로고침을 하나, 다른 페이지에서 A 페이지로 페이지 이동을 하나, 둘 다 page 컴포넌트가 실행되고 ['posts', id, 'comments'] 쿼리가 서버에서 프리패치되니까 fetch가 서버에서 실행되는거 아닌가요? 근데 왜 새로고침하면 fetch의 캐싱이 적용되는것처럼 백엔드 api로 요청이 안들어오고 페이지 이동 시에는 들어올까요... 이걸 아무리 생각해도 모르겠습니다. 60초가 지난 후에는 새로고침 시에도 백엔드 api로 요청이 들어오더라구요. 이것으로보아 60초 전에는 새로고침 시 요청이 안들어오는게 fetch의 캐시 때문인것도 맞는 거 같은데, 왜 페이지 이동 시에는 60초 전에도 캐싱값을 안쓰고 api로 요청을 보내는지 모르겠습니다. 어떤 메커니즘으로 이렇게 되는것일까요? 아직 Next.js의 캐싱과 react query에 대해 잘 알지 못해서 이해가 안됩니다.. ㅠ 도와주십쇼..!

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

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

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

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

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. 더 좋은 방법이 있는 건가요?

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에서 가져온 서버 데이터를 전역 상태 라이브러리에 담게 되면 서버와 클라이언트 상태를 구분하는 의미가 없어지는 것 같다는 생각이 듭니다. 제가 잘못 사용하고 있는것인지 궁금합니다.

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

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

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

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

실시간 데이터 동기화 질문

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

Firebase sdk에 관한 질문입니다.

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

Jwt 리프레시 토큰 관련 궁금증

안녕하세요! Jwt 인증로직을 구현하고있는데, 리프레시토큰 쪽을 구현하다가 문득 의문이 들어서 질문 남겨봅니다! 보통 엑세스토큰이 만료되었을때 1. 리프레시 토큰으로 검증에 성공하면 이후, 기존 요청은 캔슬하시고 새로운 토큰을 클라이언트에게 반환 2. 리프레시 토큰으로 검증에 성공하면 새로운 토큰정보를 기존 요청에 대한 반환과 함께 반환 1번 방법으로 한다면, 클라이언트쪽에서는 2번의 요청을 수행해야하고, 2번 방법으로 한다변 1번의 요청만으로 기존 요청에 대한 수행과 토큰 갱신을 둘다 할 수 있을것같은데 보통 실무에서는 어떻게 진행하나요??

서버에서 이미지 반환시 s3 url과 base64중 어느것이 나을까요?

서버에서 이미지 반환시 s3에 저장된 이미지의 url을 반환하는 방법을 주로 사용했습니다. 그런데 이미지가 10개라면 클라이언트에서 총 11번 리퀘스트를 보내야 하니 성능이나 비용에 문제가 생길 수 있다, 그래서 파일 크기가 작은 이미지를 여러개 반환하는 경우, base64로 인코딩해서 api응답에 한번에 보내는게 낫다는 이야기를 들었는데 현직자 분들은 어떤 방법이 더 좋다고 생각하시는지 궁금합니다.

산업기능요원 보충역 게임 개발자

안녕하세요. 게임 개발자가 되는 것을 목표로 공부 중인 인서울 컴공 3학년 학생입니다. 공익 대신 게임 회사에 산업기능요원으로 취업해서 경험을 쌓고 싶습니다. 내년 초에 일을 시작하고 싶습니다. 그런데 진로를 늦게 결정한 탓에 스펙이 정말 하나도 없습니다(학점은 약 3.9로, 무난한 것 같네요). 1. 제가 알기로는 포트폴리오, 코딩테스트, 면접이 필요한데요, 외에도 준비해야 할 것이 있을까요? 코딩테스트나 면접은 대충 준비할 수 있다 쳐도, 포트폴리오에 대한 것은 감이 잡히지 않습니다. 우선 방학 때 들으려고 유데미에서 언리얼 엔진 강의 2개(클라이언트 하나, 서버 하나) 구매했습니다. 2. 포트폴리오 준비를 위해서 3학년 2학기를 휴학하고, 밀도있게 학원, 부트캠프 등을 다녀야 하나요? 아니면 학기 중에 혼자 온라인 강의 들으면서 포트폴리오를 준비해도 되나요? 긴 글 읽어주셔서 감사합니다. 많은 조언 부탁드립니다.

API 서비스 Xss 필터 적용 질문

웹 브라우저 클라이언트에서 api를 호출하는게 아니라 각 서버 클라이언트에서 호출할 경우에도 xss필터를 적용해야 하나요??

C# 소켓프로그래밍을 이용한 축구 게임을 구현하고 싶습니다

저는 지금 c#을 이용하여 일대일 축구 게임을 picturebox를 이용하여 게임 구현을 완성한 상태입니다. 이제 남은건 소켓프로그램을 이용하여 서버와 클라이언트를 구현해내는 것인데 이 과정이 너무 어렵습니다. 키보드를 이용하여 picturebox들이 움직이고 닿을때마다 또 다른 picturebox들의 움직임을 이끌어내는 프로그램입니다. 소켓 프로그램을 이용하여 메세지를 주고 받는것은 이해를 하였지만 키보드로 인한 picturebox들의 움직임 처리를 주고받는 것에 대한 구현에 어려움을 느끼고있습니다. 도와주세요 ㅠㅠ

API 서버에 데이터 요청 처리 질문입니다!

안녕하세요. API 서버를 별도로 구축하고, 인증은 토큰방식으로 체택했습니다! 이제 웹페이지를 제작하고있는데요, 문득 드는 의문이 API서버에 대한 데이터 요청은 클라이언트 사이드단에서 처리를 해야 맞는건가요? 아니면, 서버 사이드단에서 처리를 해야 맞는건가요? 인가에 대한 토큰은 쿠키에 있다고 한다면, 1. 클라이언트 사이드단 처리 클라이언트에서 브라우저의 쿠키 접근 -> 인가 토큰 획득 -> 헤더에 포함하여, API서버에 요청. -> 데이터 요청 완료. 2. 서버사이드 처리 클라이언트에서 브라우저의 쿠키를 헤더에 포함하여 서버사이드로 데이터 요청 -> 서버사이드에서 인가토큰을 획득하여, API서버에 요청 -> 클라이언트에게 해당 데이터를 응답 -> 데이터 요청 완료. 1번 방법은 API서버가 외부에 노출되어있어서 보안에 취약하지만, 트래픽이 많아질경우, API서버에 대한 처리만 잘 하면 될것같고, 2번 방법은 API서버는 웹서버와만 통신을 하니, 보안에 강하지만, 트래픽이 많아질경우, 웹서버에 대한 처리, API 서버에 대한 처리 둘다 고민해야할것같은데.. 보통 어느방법을 선택하나요??