#sort

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

파이썬 오류 좀 고쳐주세요 ㅠㅠ

import time import requests import streamlit as st API_BASE_URL = "http://localhost:8000/qna" # Fastapi로 api 생성 def request_chat_api(user_message: str) -> str: url = API_BASE_URL resp = requests.post( url, json={ "user_message": user_message, }, ) resp = resp.json() print(resp) return resp["answer"] def init_streamlit(): st.set_page_config(page_title='Dr. KHU', page_icon='🩺') if "messages" not in st.session_state: st.session_state.messages = [{"role": "assistant", "content": "안녕하세요! Dr.seo입니다🩺"}] # Initialize chat history if "messages" not in st.session_state: st.session_state.messages = [] # Display chat messages from history on app rerun for message in st.session_state.messages: with st.chat_message(message["role"]): st.markdown(message["content"]) def chat_main(): if message := st.chat_input(""): # Add user message to chat history st.session_state.messages.append({"role": "user", "content": message}) # Display user message in chat message container with st.chat_message("user"): st.markdown(message) # Display assistant response in chat message container assistant_response = request_chat_api(message) with st.chat_message("assistant"): message_placeholder = st.empty() full_response = "" for lines in assistant_response.split("\n"): for chunk in lines.split(): full_response += chunk + " " time.sleep(0.05) # Add a blinking cursor to simulate typing message_placeholder.markdown(full_response) full_response += "\n" message_placeholder.markdown(full_response) # Add assistant response to chat history st.session_state.messages.append( {"role": "assistant", "content": full_response} ) if __name__ == "__main__": init_streamlit() chat_main() 이 코드를 실행시키면 자꾸 AttributeError: st.session_state has no attribute "messages". Did you forget to initialize it? More info: https://docs.streamlit.io/library/advanced-features/session-state#initialization 라고 뜨네요..

nextjs 초보 fetch & DELETE 동작이 안되요.

app/api/list/[id]/route.js export async function DELETE(request, {params}) { const id = params.id; const {searchParams} = request.nextUrl; const sort = searchParams.get('sort'); return NextResponse.json({message: 'test', id, sort}); } 위처럼 되어있고, app/list/ListItem.js <button className="blue"> <span onClick={() => { fetch('/api/list/' + post._id, { method: 'DELETE' }).then(() => { console.log('call delete'); }); }}>삭제</span> </button> 위 처럼 코드를 작성했는데, DELETE route가 실행이 되지 않습니다. 어떻게 해야 하나요?... POST의 경우에는 아래와 같은데 동작이 잘 되서요.. app/write/route.js export async function POST(request) { const data = await request.formData(); let body = Object.fromEntries(data); const db = (await connectDB).db('exam'); await db.collection('post').insertOne(body); return new Response('POST'); } app/write/page.js <form action="/api/write" method="POST"> <input type="text" name="title" placeholder="제목"/> <br/> <input type="text" name="content" placeholder="내용"/> <button type="submit">NEW</button> </form>

리액트쿼리 고수분들 도와주세요

사이드프로젝트 리팩토링을 진행하는 중에 이해가 안되는 부분이 있어 글 써봅니다. const { data, isLoading, fetchNextPage } = useInfiniteQuery( ["getProducts", sortOption, sortOrder, filterValue, categoryName], async ({ pageParam = page - 1 }) => { const response = await api.post(`/cal/v1/product/${categoryName}`, { filter: filterValue, page: pageParam, query: "", size: size, => size: size - 8 /* 변경한 부분 */ sort: [{ field: sortOption, option: sortOrder }], }); setTotalProduct(response.data.body.product.totalCount); return response.data.body.product.items; }, { refetchOnWindowFocus: false, getNextPageParam: () => page, } ); 위 코드는 인피니티 스크롤을 구현한건데요, size는 한번에 받아 올 상품의 개수 입니다. 상품을 한번에 4개 받아올때는 500ms~, 8개 = 2500ms~, 12개 = 10000ms~ 정도로 요청시간이 비정상적으로 커집니다. 사용자경험과 api요청횟수를 고려했을 때, 12개를 받아오는것이 가장 적당하다고 생각되는데 렌더링 속도가 많이 느리다고 생각되서 개선하고자 합니다. **초기렌더링 에서만 문제가 발생되고, 캐싱되어 fresh한 상태일 때는 바로 불러옵니다** 코드의 다른요소들은, 필터링. 정렬들을 위한 요소들이라 렌더링 시간에 영향을 줄 것 같지는 않은데 왜 이런 문제가 발생하는지 궁금합니다. 이 외에도 잘못작성된 부분이 있거나, 개선해야할 사항이 보이신다면 알려주시면 감사하겠습니다!!

React에서 정렬 또는 필터에 따라서 Query Parameter를 변경하는 방식과 useState를 변경하는 방식의 장단점이 궁금합니다

정렬 또는 필터링을 구현할 때 React를 예로들어 웹사이트의 Query Parameters를 변경하고 받아와서 만드는 방식과 useState로 url을 변경하지 않고 만드는 방식 둘중에 선택해야한다면 어떤 방식이 더 좋고 그 이유를 알 수 있을까요?.. API 요청은 동일하고 URL을 변경하지 않느냐 변경하느냐 어떤게 더 옳은것인가?... 그런 부분이 궁금합니다 예를들어 정렬화면을 보여줄때 /?sort=ASC 또는 /?sort=DSC로 하고 url의 sort 값을 불러오고 url을 변경하는 방식과 const [sort, setSort] = useState('ASC')로 useState의 값을 변경하는 방식 이 두가지 중 어떤 방법이 더 선호되야하고 그 이유가 궁금했습니다

react dataTable 추천해주세요!

[ 주요 기능 ] 1. Header : sticky, multi sorting, pin 2. Body : cellEdit, drag&drop 3. Footer : paging 4. Option : export(excel, pdf), chart [ 확인 ] 1. react 2. typescript 위 조건에 만족하는 추천 react dataTable 있을까요~? 유료도 환영입니다!!

go 역정렬- sort.Sort(sort.Reverse(sort.IntSlice(a))) 빠른이유???

문득 알고리즘 풀다가 아래의 게시글을 보았습니다 https://jusths.tistory.com/217 역정렬 할때 게시글처럼 진행하면 속도가 빠르다고 하는데 왜 그럴까요? 리터럴 함수로 호출하는게 빠르다고 생각했었습니다만....

프론트엔드 신입 개발자 이력서 피드백 부탁드려요

제가 현재 작성한 이력서는 https://assorted-raft-812.notion.site/4a3ae074a2e1449e92334b84daf28f83?pvs=74 입니다! 따끔한 피드백 부탁드려요. 어떤 부분이 고쳐져야 하고, 가독성이 좋지 않은지 등 많은 피드백을 주시면 감사하겠습니다!

랭킹 시스템 자료구조 짜기

안녕하세요, redis의 캐싱 관련해서 친구가 이것저것 얘기해주다가 저한테 미션을 하나 주더라고요. 1. 유저가 N명이 있고, 총 5명의 랭킹이 보여야한다. 2. 실시간으로 유저들의 score가 바뀐다. 친구는 redis의 Sorted set에 대해 이미 공부를 하고 저한테 물은 상태였습니다. Sorted set은 insert가 O(log N)이더라고요. 저는 고민하다가 1. hash map을 통해 userID와 score를 저장 2. 랭킹 5명은 따로 배열을 만든다. [ID, score] 3. 값이 바뀔 때 5명 중 최약체의 score보다 바뀐 값이 크다면 갈아치우는 형태를 얘기했습니다. 제 방식에 의하면 insert는 O(1)이고, 5명에 대한 값 변동 처리는 어차피 5명이니까 O(5^2)를 줘도 사실 O(1)이라 봐도 무방합니다. 저는 제 방식이 더 효율적인 것 같은데 어떻게 생각하시나요?

게시글 필터링 백엔드가 낫나요 프론트가 낫나요

안녕하세요 개발중에 게시글 페이지를 만들고 있는데, 필터가 총 3개입니다. 1. 카테고리 (전체, IT, 교육, 문화) 2. 완료여부(전체, 진행중, 완료) 3. 정렬 (최신순, 포인트 순) 이 3개를 구현해야하는데, 방법이 1. 프론트 처리 프론트에서 모든 데이터를 받아온 뒤에, js에서 필터링해서 데이터 넣어주기 2. 백엔드 처리 백엔드에서 데이터 처리한거를 버튼 누를 때마다 axios를 통해서 받아오기 1번은 통신비용은 줄이지만 초기랜더링이 많이 느린 것 같습니다. 2번은 통신비용은 늘지만 초기랜더링은 빠른것 같습니다. 그 외에 장단점도 알려주시면 좋을 것 같습니다 그리고 추가로.. 2번 방법을 했을 때, 클릭시 param을 백엔드에 넘겨서 필터링 처리하고 싶은데 그러면 /board/filter?category='IT' & status='complete' & sort('point') 이런식으로 넘기려는데 뭔가 너무 비효율적인 것 같아서 효율적인 방법이나 일반적으로 많이 사용하는 방법 알려주시면 감사할 것 같습니다

Accelerated heapsort

안녕하세요 선배님들 기술 관련 질문은 아니지만 너무도 답답하여 질문드립니다. 벡터로 maxheap이 주어졌을 때Accelerated heap를 이용해서 정렬하고 maxheap의 루트를 제거하는 과정을 반복하여 힙의 노드가 1이 남을 때까지 반복하려고 합니다. 이때 최종목적은 이 과정에서의 cost를 구하는 것인데 cost는 accelerated 과정에서vacant가 내려갈 때 즉 노드가 swap될 때 +1이 되고 bubbleupheap과정에서 leaf가 아닐 때 +1이 됩니다. 만약 vacant가 leaf노드 바로 위에 있다면 그리고 leaf노드보다 크다면 내려가지 않고 cost도 변함이 없습니다. 제가 궁금한 점은 샘플 input중에 17 16 7 6 14 8 11 1 2 13 17 12 10 3 15 5 9 4 란 맥스힙이 주어졌는데 이에 대한 결과값이 cost=47 이 나옵니다. 정답에는 49라고 되어있는데 아무리 계산해봐도 47밖에 나오지 않습니다ㅠㅠㅠㅠ 왜 이런 걸까 정말 답답해서 올려봅니다

캡스톤디자인에 쓰일 젯슨 나노 보드에 질문 있습니다

yolo와 deepsort를 이용해서 캡스톤디자인을 구상 중입니다. 근데 젯슨 나노 보드를 이용할까하는데 가격대가 70만원이 있는가 하면 30만원도 있고 20만원도 있습니다. 캡스톤디자인에 쓸 보드 구매에는 70만원은 너무 비싼거 같고 그렇다고 너무 싼거 사면 스펙에 안 맞을까 걱정이 되어서 질문을 드립니다. 어떤 것을 사야 좋을까요?

혹시 몽고디비 SQL 의 Group By 와 같은 기능이 있나요 ?

MySQL (SQL) 만 사용하다 이번에 몽고디비 (NoSQL) 를 처음 사용 해봅니다. 아직 사용법을 잘 모르겠는데 혹시 SQL 에서의 Group By 와 같은 기능을 사용할 수 있나요 ? Filter 랑 Sort 는 잘 쓰겠는데 Group By 는 원래 안되는것 같기도 하고 잘 모르겠네요. 도와주세요 ㅠㅠ

Next.js router에서 쿼리 값만 변경하는 방법

안녕하세요. 리스트에서 sort기능을 구현하려고 합니다. 새로고침 하거나 리스트 상세페이지로 접근 한 뒤 뒤로 갔을 때 소팅을 유지하고 싶습니다. url query값에 ?filter="베스트순" 이런식으로 추가하고 싶은데 next.js에서 url의 쿼리 값만 변경할 수 있는 방법이 있을까요?

스프링 tablesorter 관련해서 궁금한 점이 있습니다

스프링에서 tablesorter 쓸 때 다른 페이지에 있는 것도 같이 정렬하게 할 수 있나요? 웹입니다!!

mongo db 에서 정렬을 하는데 null을 가장 뒤로 놓고싶어요

[{a:2}, {a:3}, {a:1}, {a: null}] 의 형태로 데이터가 있는데 db.collectioin.sort({ a: 1 })로 정렬하면 null이 가장위에 나와요. 결과: [ {a:null}, {a:1}, {a:2}, {a: 3}] 이걸 [{a:1}, {a:2}, {a: 3}, {a:null}] 로 나오게 할 수 있나요?

백준풀때 궁금한 점이 있습니다

안녕하세요 컴공 3학년인 재학생입니다. 백준을 풀다 궁금한 점이 있어서 질문드립니다. 정렬 문제의 경우 sort 함수로 쉽게 풀이가 가능한데, 이런건 직접 정렬 알고리즘을 구현해서 풀어봐야 할까요 아니면 언어에서 제공하는 sort 함수를 이용해서 풀이해도 괜찮을까요? 2학년때 알고리즘과 자료구조 과목을 수강하였지만 지금 생각해보니 떠오르지가 않더라고요. 그래서 다시 복습은 해보았는데 나중에 이걸 다시 기억할 수 있을지, CS 면접시에만 다시 복습하면 되는게 아닌지도 궁금합니다!!

lodash 체이닝(_.chain)은 왜 사용하나요?

안녕하세요 로대쉬를 사용하다가 궁금한점이 있어서 질문 남깁니다. sortBy.map.filter 이런식으로 chain메서드 없이도 체이닝을 할 수 있는데 chain 메서드는 왜 사용하는지 어떤 장점이 있는지 문득 궁금해졌습니다. 혹시 이유를 아시는 분 있으시면 답변해주시면 큰 도움이 될 것 같습니다!

JavaScript 배열 탐색 알고리즘 질문드립니다.

배열에서 데이터를 찾을때 하나씩 검색하는 방법과 반씩 쪼개서 찾는 선형탐색, 이진탐색 두가지 방법으로 나뉘는걸로 알고있습니다. 이진탐색 장점이 시간복잡도가 빠르다는건데 만약 배열이 정렬되어있지 않다면 sort같은 내장함수를 쓰거나 나름 빠르다는 ? 기수정렬을 구현한다해도 느려질텐데 실무에서 실용성이 얼마나 있을지 궁금합니다.

javascript 정렬 메서드는 어떤 방식으로 작동하나요?

코드 첨부했습니다. 숫자를 정렬하려면 sort 메서드 뒤에 해당 함수를 넣으라고 하는데 이게 어떻게 동작하는 건가요? 각각 두 개씩 매번 a-b를 계산하고 결과값으로 정렬하는 건가요? 이렇게 한다면 너무 비효율 적인거 아닌가요? 동작방식에 대해서 설명해 주실 수 있으신가요?

React에서 데이터 정렬 (ordering)하기

예시코드 첨부했습니다. 데이터를 원하는 key에 따라 정렬 하려고 합니다. 버튼을 누르면 원하는 값으로 데이터를 보려고 하는데 문제는 정렬을 잘 했는데 데이터가 변하지를 않습니다. sort 메서드를 잘못 사용했나 싶어. console.log(data) 로 디버깅 해보면 data는 변화하는데 화면은 변하질 않아요. 오류를 찾아주세요.