web16 react에서 상태 저장소 사용하기 - 2 상태 관리가 필요한 목록서버와 클라이언트를 SSE로 연결할 것이기 때문에 그 부분도 고려해야 한다. -Zustand 사용-> UI 상태 (sidebar, backdrop, modal)-> Auth 정보 (user, token)- TanStack Query 사용 -> 서버데이터 -> 비동기 상태 (loading, error)-> 캐싱 / 재요청 SSE관련 질의 응답 method는 서버에서 수정할 계획 2025. 12. 13. react에서 상태 저장소 사용하기 - 1 질의추천 목록 질의2 추천2상세 사용설명질의3 응답 비교표 2025. 12. 13. 부모컴포넌트와 viewport 자식요소가 부모요소밖으로 나간상태부모요소는 grid이고 자식 요소도 grid이다. vw는 viewport를 기준으로 하기 때문이라고 한다. (viewport는 현재 사용자가 보는 화면을 의미) %혹은 fr을 사용하여 자식요소가 부모요소 영역의 안에만 머무르도록 수정 2025. 12. 13. chatbot - 4 (backdrop) login 및 register팝업을 띄우기 위한 backdrop index.html의 root기준이되는 요소로 설정 backdrop의 형제 요소의 z-index backdrop의 z-index온전하게 형제 요소위에 생성이 되지 않는다. 형제 요소위에 이런식으로 생성이된다. (정확히는 형제요소 뒤에 위치하는것이 맞다) 먼저 있는 형제의 stacking context가 높기 때문 backdrop을 가장 위로 위치 backdrop을 가장 상단에 위치 2025. 12. 12. chatbot - 3 (ui, header) header 영역에 HeaderArea 컴포넌트를 임포트하여서 사용 logo, 중간공백, 사용자 정보 영역으로 구성 버튼은 추후 component로 import해서 사용 전체 컴포넌트 grid 사용자 정보 grid 버튼은 기본 css 효과를 제거하고 사용 2025. 12. 12. chatbot - 2(동적 ui) 로그인이 되지 않았을때는 채팅방을 선택할수 없도록 하려고 한다. grid의 설정을 auto 1fr로 해주고 content div는 100vw 로 넓이를 설정해 주어서 menu 요소가 없을때는 전체 남은 화면 전체를 사용할수 있도록 설정 menu 요소가 있을때 menu 요소가 없을때 content 요소가 menu 요소의 공간을 차지했다. 2025. 12. 12. chatbot - 1 (ui) header, menu, content의 영역을 크게 위와 같이 나누고 class는 moduel로 임포트 해서 사용 module로 되어있는 클래스 파일 module파일 안의 css큰 틀은 grid를 사용 참고자료 https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in your browserwww.w3schools.com 2025. 12. 12. 이전 1 2 다음
