#모달

리액트 프로젝트에 FSD 아키텍처 적용. 이 구성이 맞을까요?

안녕하세요. 현재 진행 중인 리액트 프로젝트에서 유지보수성과 확장성에 어려움을 느껴 폴더 구조를 Feature-Sliced Design(FSD) 아키텍처 기반으로 전면 리팩토링했습니다. 기존에는 `components/`, `pages/`, `apis/` 등 기능과 역할이 섞인 구조로 되어 있어, 코드의 위치가 불분명하고 협업에 어려움이 있었습니다. 이를 해결하고자 다양한 아키텍처를 조사한 끝에, FSD의 레이어 개념(Layers)에 맞춰 다음과 같은 방식으로 구조를 정리했습니다. - `app/`: `App.js`, `index.js` 등 프로젝트 진입점과 글로벌 설정 파일을 포함 - ` entities/`: `User`, `Article`, `CodingZone` 등 주요 도메인의 데이터 모델과 API 연동 담당 - `features/`: 로그인, 게시글 작성, 코딩존 출석 등 각 기능별로 모듈화하고, 필요한 경우 `hooks/` 등의 내부 디렉토리로 세분화 - `pages/`: 라우팅과 연결된 실제 페이지 컴포넌트 관리 (예: `CreatePage`, `EditPage` 등) - `widgets/`: 재사용 가능한 독립 UI 요소들 (예: `Footer`, `Navbar`, `Pagination` 등) - `shared/`: 공통 API, 유틸, 모달 컴포넌트 등 여러 기능에서 공유되는 요소들을 배치 기능 중심의 구조로 바꾸면서, 각 요소의 역할이 명확해지고 코드 탐색 및 유지보수가 훨씬 쉬워졌습니다. 현재는 복잡한 비즈니스 로직이 없어 `processes/` 레이어는 생략했지만, 추후 워크플로우가 필요한 기능이 생긴다면 도입할 계획입니다. 제가 구성한 이 폴더 구조와 레이어 분리가 실제 FSD 아키텍처 가이드에 부합하는 방향인지, 혹시 보완하거나 개선할 부분이 있다면 조언을 구하고 싶습니다. 자세한 내용은 블로그에 정리해 두었습니다. 👉 [https://juncci.tistory.com/4](https://juncci.tistory.com/4) 읽어주셔서 감사합니다!

시스템 폰트 사이즈에 의한 RN 어플 레이아웃 변경

안녕하세요 선배님들 처음으로 어플리케이션 프로젝트를 진행중입니다... 웹으로 할 때는 극적으로 작게 줄인 브라우저 창 및 극적인 스케일링을 반응형으로 적절히 조절했었는데 스마트폰이라는 환경상 너무 작은 디스플레이에 많은 정보가 존재하고 시력이 약한 노년층의 경우 스마트폰 자체의 폰트사이즈가 커서 레이아웃 조절에 어려움을 겪고 있습니다... 폰트 사이즈를 계산해서 레이아웃을 변경한다는 엄청나게 복잡한 생각을 하다가 스마트폰의 폰트 사이즈를 따르지 않게 고정하고 앱을 처음으로 실행할 때 사용자가 원하는 폰트 사이즈 선택에 맞춰 레이아웃을 설정시키는 초기 세팅 모달을 띄우는 것이 훨씬 간단하다는 생각이 들어서 이 방향으로 굳어지는 중입니다. 혹시 선배님들은 작은 디스플레이에서의 사용자의 폰트 사이즈 설정에 따른 레이아웃 조절을 어떻게 구현하시는 지 궁금합니다... 두서없는 질문을 읽어주셔서 감사합니다.

검색 모달 창에서 검색할 때 리액트 쿼리 사용 여부

안녕하세요, 현재 제가 검색 모달 창에서 텍스트를 입력하면 검색하는 작업을 하고 있습니다. 보통 useQuery 훅은 페이지 마다 데이터를 불러오는 경우 많이 사용하는 걸로 알고 있습니다. 제가 작업하는 검색 모달은 사용자가 검색 창을 누르면 검색 모달이 나와서 검색하는 기능이라 여기서도 React-Query에서 제공하는 useQuery를 쓰는지 궁금합니다!

프론트엔드 취업에 대해 질문있습니다.

프론트엔드 취업을 준비중이고 리액트를 공부하고 있습니다. 리액트로 axios를 가지고 데이터를 가져오고 클릭시 모달창에 상세내용이 나오는 간단한 사이트를 만들었는데 이것가지고 이력서 내기에는 무리가 있을 것같아서 타입스크립트를 공부할려고 합니다. 타입스크립까지 공부한 후 이력서를 내도 괜찮을까요?

프론트엔드 공부방법에 대해 질문있습니다.

신입으로 프론트엔드 개발자 취업을 준비중입니다. 뭔가 계속 부족하다는 생각이 들어 불안한 마음에 인강만 보면서 공부만 하다가 생각을 바꿔 일단 못하더라도 한번 혼자 만들어 보자는 생각에 한국관광공사API를 이용해서 제가 살고있는 지역코드를 활용하여 지역에 있는 명소를 보여주고 클릭시 모달창으로 상세내용과 카카오지도api로 위치를 보여주는 간단한 사이트를 만들었는데 물론 필요한 기능은 챗GPT나 구글링을 통해 찾아보면서 만들었습니다. 이 정도면 리액트를 더 공부를 해야좋을까요? 아니면 넘어가고 타입스크립트와 next.js를 공부하는게 좋을까요?

프론트엔드 취업에 대해 질문있어요

현재 프론트엔드로 취업을 준비중인 프론트엔드 개발자 취준생입니다. 국비학원 포함해서 공부한지는 1년 조금 넘었는데 그 동안 이력서를 낼려고 해도 제 실력이 아직 많이 부족하다는 생각에 선뜻 이력서를 내지 못하고 계속 공부만 했는데 우선 지금도 실력이 아직 부족하지만 리액트로 axios사용, api 불러와서 화면에 출력, 라우터사용, 지도api 정도는 할 줄 아는 정도이고 무한스크롤, 그 외 기능은 챗GPT와 구글링을 통해 코드를 찾는 정도입니다. 지금은(아래이미지) 한국관광공사API를 가지고 연습겸 정말 간단하게 현재 제가 살고있는 지역의 관광명소를 이미지로 보여주고 이걸 클릭하면 모달창으로 상세정보와 카카오지도 연동으로 위치를 보여지게 만들었는데 혹시 이 정도도 신입으로 이력서를 내면 안되는 실력일까요?

한국관광공사API 에 대해 질문있습니다.

안녕하세요 현재 리액트를 공부중이고 한국관광공사API를 사용해서 제가 살고있는 지역의 관광명소를 이미지로 보여주고 클릭시에 모달창이 나오면서 해당 관광명소의 이름과 전화번호 설명이 나오는 간단한 사이트를 연습중에 있습니다. 이미지와 전화번호 이름은 데이터로 잘 가지고 왔는데 해당명소의 설명이 나와있는 데이터가 안보이더라구요. 이미지처럼 저 데이터들중에 어떤걸 사용해야 해당명소의 설명이 적힌 데이터가 나오나요?

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

진짜 물경력이 되어버렸습니다.최근 1년간 성과를 내세울 게 없습니다

저는 회사에 입사한지 5년차인 학사학위 비전ai 응용개발자입니다. 회사가 늘 과제 위주로 업무가 진행되며 보고서를 채우기 위한 결과 작성만 하거나 과제 지원서에 쓸 내용만 채우다 경력이 지지부진한 상태에 빠졌고, 저는 건강이 요 몇년간 좋지 않아 회사에서 주어진 일만 하고 아무것도 하지 못했습니다. 최근에서야 좀 건강이 정상 궤도에 가까워지고 있는데, 그 사이 세상은 여러가지로 많은 변화가 있었습니다. CNN에서 LLM으로, 한 태스크를 수행하는 모델에서 멀티모달로.. 저는 그 사이 어떤 지식도 채우지 못하고 오히려 증발하기만 했죠. 채용시장은 어려워지고.. 회사는 살아남기 위해 로봇 산업에 끼기를 추구하려 해서 개발자에서 점점 멀어지는 것 같아 두렵습니다. 베이스를 채우려고 이제 정신차리고 선형대수학과 확률론을 살펴봐도 어렵기만 합니다. 웹 관련으로는 한 번도 개발이나 배포를 해 본적도 없고, 기술스택도 사실상 순수 파이썬에 가깝습니다.. 누구를 탓할수도 없고 탓해봤자 아무 일도 일어나지 않는다는 걸 알기에 신세한탄을 하며 뭘 어떻게 해야할 지 모르겠습니다. 이직은 하고 싶고 여태 해온 일들이 다른 회사에서 보기엔 성과로 비춰지지 않을 것 같고.. 앞으로 회사에서 진행될 일들도 이력서에 적을만한 내용이 없는 일들 투성이입니다. 위축만 되어 있습니다. 이젠 제가 하고 싶은게 뭔지도 모르게 되어버렸습니다. 지금이라도 웹을 따로 공부해서 연봉이 800이 적어지더라도 신입 웹개발자로 들어가는 게 나을까요?

리덕스에 대해 궁금한점이 있습니다.

안녕하세요 리덕스에 대해 여쭤볼게 있습니다. 리덕스를 사용하면 state를 부모에서 자식으로 계속 내려주는 방법으로 하지 않고 필요한 컴포넌트에 바로 state를 전달 할 수 있다...라고 이해를 했습니다. 여기서 궁금한점이 예를 들어 데이터를 저장하는 state도 있고 모달창을 할때 사용하는 state도 있을텐데 모든 state를 리덕스로 만드는건가요? 아니면 어떤 state만 리덕스로 저장해서 사용하면 되는지 쉽게 알려주시면 너무 감사드리겠습니다.

useState와 useEffect에 대해 너무 헷갈립니다.

안녕하세요 useState와 useEffect를 공부중인데 아직 초보자라 너무 헷갈리더라구요. 제가 이해한 것은 우선 useState는 클릭했을 때 모달창이 나온다거나, 사용자가 input에 입력한 값처럼 무언가를 동적으로 변경이 되게 할 때 사용하고 또 API를 사용할 때 이 데이터를 저장할 때 사용한다...로 알고 있고 useEffect는 컴포넌트가 처음 렌더링 될 때 html 부분이 먼저 화면에 그려진 후 데이터가 실행되게 할 때 useEffect를 사용한다...까지만 이해하고 있습니다. 여기서 궁금한점이 첫번째로, useState는 제가 설명한대로만 사용하면 되는지 궁금합니다. 두번째로, useEffect는 이 안에 작성한 코드는 한번만 실행이 된다라고 하는데 이 한번만 실행이 된다라는게 무슨 말인지 그리고 useEffect안에 console.log()와 useEffect 밖에 console.log() 이렇게 했을 땐 뭐가 다른것인지 너무 헷갈립니다. 제가 아직 초보자라 정말 정말 쉽게 설명해주시면 너무 감사드리겠습니다. ㅜㅜ

react에서 에러 status에 따라 에러 모달을 가져오는 법

안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다. ``` catch (error: unknown) { if (error instanceof AxiosError) { handleErrorModal(error.response?.status); } return null; } ``` 이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다. ``` const [errorType, setErrorType] = useRecoilState(errorDataState); const handleErrorModal = (errorStatus: string | number | null) => { setErrorType(errorStatus); }; ``` 그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 ``` Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. ``` 이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?

멀티모달 분야 어디서부터 공부하면 좋을까요?

안녕하세요. 컴퓨터 비전 분야 쪽으로 공부하고 있는 학부생입니다. LLM의 발전으로 향후 멀티모달 분야 (text2image, text2video) 등이 핫해질 것 같아 대학원에서 멀티모달 관련 연구를 해보고 싶습니다. 이를 위해 멀티모달 공부를 미리 해보고자 하는데요. 현재 CLIP이라는 논문까지는 읽어본 상황입니다. 더 나아가 어떤 논문을 읽어보는 것이 좋을지, 멀티모달 흐름을 잘 알 수 있게 하는 참고자료나, 연구주제가 있을까요? 읽어주셔서 감사합니다.

html 데이터셋 민감 정보 질문

안녕하세요. 현재 웹 백엔드 분야로 전직하고자 공부중에 있습니다. 현재는 포트폴리오를 만들고 있는데 궁금한게 있습니다. 언어는 자바(스프링)를 활용하고 포트폴리오는 태블릿으로 음식 주문하는 솔루션입니다.. 주문하는 부분은 진절머리가 나서 실제 사용자들이 편리하도록 cms를 구현중에 있습니다. 여기서 궁금한 점은 예를 들어 메뉴 상태를 변경(가격, 이름 등..)하기 위해 조회된 메뉴를 클릭했을 때 수정할 수 있는 상세 모달 창을 띄워주려고 합니다. 상세 모달을 띄워주기 위해서는 클릭한 메뉴의 고유 정보가 필요한데 해당 고유 정보를 html의 data- 속성을 활용해도 될지? 궁금합니다. 아무리 생각해도 제 생각에는 DB에 저장된 정보이기 때문에 data- 속성이나 함수 파라미터에 전달하는 것이 바람직하지 않다고 생각하는데 다른 방법이 있는지 궁금합니다. ※ 저는 애초에 개발자 도구를 켰을 때 해당 고유 정보들이 안나오고 서버측으로 전달하는 방법이 있는지 궁금합니다!

Intercepting Routes로 만든 modal에 데이터를 어떻게 전달하는게 좋을까요?

Nextjs 14 app router를 사용하고 있습니다. Intercepting Routes와 Parallel Routes를 이용해서 Modal을 불러오고 있습니다. Modal에 진입할때 <Link href={"modal주소"} />를 클릭해서 진입을 하고 있습니다. 이때, Modal에서 Server에 HTTP GET 요청을 보내야하는데, username이나 userpost같은 데이터를 필요로합니다. 저는 <Link href={{pathname:"모달주소",query:{key:value}}}>이렇게 query로 전달하는 방식을 사용하고 있습니다. 하지만, 찾다보니 왠만한 정보는 query로 전달하는 것을 지양하는 것이 좋다해서 무슨 방법으로 전달해야할까 고민입니다. 어떤 방법으로 전달하는것이 가장 좋을까요?

Next.js에서 React Portal을 잘못 적용한건지 궁금합니다.

안녕하세요! next.js에서 모달 구현을 위해 react portal을 사용하였습니다. 그런데 제가 의도한 것과 다른 결과가 나와 코드를 잘못 작성한건지, 제가 portal에 대해 이해를 잘못 하고 있는건지 궁금해 질문드립니다. 현재 next.js 14.0.4 + tailwind 환경에서 작업하고 있습니다. // src/app/layout.tsx (사진1 첨부) // src/components/modal/ Modal.tsx (사진2 첨부) // 실제 출력 화면 (사진3 첨부) portal을 사용하면 같은 body 태그안에 있는 형제 컴포넌트의 z-index의 영향을 받지 않는다고 알고 있는데, 첨부한 사진과 같이 <body> 안 형제 컴포넌트 하위에 위치한 컴포넌트의 z-index의 영향을 받고 있습니다. portal로 출력할 부분을 children으로도 받아보고, 포탈 컴포넌트 안에서도 작성해보고 했는데 모두 동일한 결과가 출력됩니다. 포탈 컴포넌트에도 z-index를 적용해줘야 하는건지, 제가 코드를 잘못 작성한건지 알고 싶습니다. 감사합니다!

리액트 전 자바스크립트

많은 분들이 자바스크립트 기본 지식이 많이 중요하다 하셔서 자바스크립트 공부를 하는 중입니다. 현재 기본 문법으론 es6강의 한번 다 듣고, 코테는 프로그래머스 레벨1 진행중이고, 코어 자바스크립트 2번째 읽고 있고 deepdive 정독 예정입니다. 그런데 문제는 아직 자바스크립트로 실질적으로 무언가를 해본게 캐러셀 스와이프 모달 정도 만들어놓고 스크롤이랑 마우스 이벤트리스너정도로 자기소개 페이지 만들어본게 전부입니다. 슬슬 졸업이 다가와 취업 준비 포폴로 사이드프로젝트를 해보려면 리액트도 시작해야할 것같은데, 자바스크립트로 어느정도까지 해보고 넘어가는게 좋을까요?

프론트엔드, 어떤 것을 테스트해야 할까요?

안녕하세요 프론트엔드 테스트와 관련해서 궁금한 것이 있어서 질문 드립니다! React로 개발된 프로그램입니다. 레거시 코드에 기능을 추가하려고 하다 보니 사이드 이펙트가 빈번하게 발생했고 크게 데이다 보니 테스트를 추가하고 리팩터링도 해서 좀 더 안전하게 기능을 추가하고 싶기도 하고, 가독성이 너무 떨어지는 코드들도 리팩터링하고 싶다고 생각했습니다. 그런데 막상 테스트를 추가하려고 하니까 어떤 부분을 테스트해야 할지 모르겠습니다. 함수에 있는 계산이 맞는지 테스트를 해야 하는 걸까요? 하나의 상품을 클릭하고 장바구니에 담고 주문하기로 넘어갈 때 장바구니 아이템을 확인해서 특정 아이템이 있다면 할인 모달을 띄워주고를 잘 진행하는지 이런 흐름을 테스트해야 하는 걸까요? 둘 다 진행해야 할까요? 그렇다면 어느 것을 먼저 진행해야 시간 대비 효율이 높을까요? 함수들에 대한 테스트 코드를 짠 후 리팩터링을 거쳐야 하는데 암묵적 입/출력이 너무 많기도 하고 코드도 많다 보니 테스트 코드 작성을 시작하기가 두렵습니다. 조언이 필요합니다!

타입스크립트 이벤트 타이핑 방식에 관하여

안녕하세요 타입스크립트 코드 작성 중 궁금한 부분이 생겨 이렇게 질문 글 올려봅니다. 만들어 놓은 custom hook 중 모달 or 레이어 창을 닫는 close라는 함수가 hook 안에 있습니다. 함수는 아래 코드와 같이 생겼습니다. 이 함수는 usehook의 의도에 맞게 코드 전역에서 사용 되는데 컴포넌트 내부에서 이 함수를 사용할 때 이벤트 객체의 타입이 사용하는 곳마다 다르기 때문에, close 함수의 파라미터인 이벤트 객체의 타입을 결정하는데 고민이 있었습니다. 어느 곳은 input 같은 태그에서 onClick 함수 내에서 사용하기에 React.MouseEvent, 어느 곳은 eventListener에서 사용하기 때문에 그냥 MouseEvent로 추론 되는 등 여러가지 이벤트 타입이 존재했습니다. 그래서 모든 이벤트에서 상속 받는 BaseSyntheticEvent를 close 함수를 정의하는 곳에서 이벤트 객체의 타입으로 지정을 해주었는데 이게 좋은 방법이 맞을까요? 혹은 이벤트 객체 타입이 아니더라도 비슷한 경우에는 어떻게 작성하는 것이 좋은 방법일까요?

useState 와 함수

프로젝트를 하다보면 state에 따라 모달을 열고 닫는 기능을 구현할 때가 많습니다. 이럴 때마다 부모에 state를 만들고 자식(모달)에게 useState를 내리거나 useState를 함수에 감싸서 내리는 두가지 방법에 대해 고민합니다. 복잡한 기능은 당연히 함수로 감싸서 내려야겠지만 단순한 useState만 있는 기능에서는 함수로 감싸지 않는 것이 맞나요? 실무에서는 어떻게 하는지 궁금합니다

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

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 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> ); })}

리액트 혹은 next.js 환경에서 모달을 관리하는 방법이 궁금합니다.

안녕하세요. 프론트엔드 개발자가 되기 위해 공부중인 취준생입니다. 사이드 프로젝트를 하면서 많은 모달들을 만들어 왔었는데요. 문득 몇가지의 궁금한 점이 생겨서 현업 분들은 어떤식으로 작업하시는지 궁금해서 여쭙습니다. 1. 여러개의 모달의 오픈 유무를 전역 상태에서 한번에 관리 하는 방법이 좋을까요? 아니면 열고 닫을때 필요한 state와 함수를 custom hooks로 만들어서 컴포넌트 내에서 state와 props로 관리 하는게 좋은가요? 2. 전역 관리를 선택했을시, 모달을 켜둔 채로 뒤로가기 혹은 앞으로가기 후에 다시 본래 페이지에 되돌아오면 모달이 켜진 상태로 유지가 됩니다. 이런 경우는 어떤 식으로 처리를 하시는 편인가요? 뒤로가기 버튼에 모달을 false로 바꾸는 이벤트를 추가하는 방법일까요? 답변 기다리고 있겠습니다~

nextjs에서 로그인 버튼 클릭하면 모달창이 보이면서 route가 같이 변경되게 하려면 어떻게 해야하나요?

nextjs에서 로그인 모달창을 만들려고 하는데 버튼을 클릭하면 모달창과 함께 route도 /log-in으로 하는 방법이 있을까요? 트위터에서 로그인 버튼 누르면 모달창이 뜨면서 route가 변경 되는 것처럼 구현하고 싶은데 방법을 몰라서 구글링하다가 커리어리에 질문을 올리게 되었습니다.

재사용을 자주하는 모달 컴포넌트 관리

혹시 모달컴포넌트 같은경우는 재사용할일이 많은데 최상위단에 모달컴포넌트 생성해놓고 쓰시나요? 최상위에 등록 해놓고 state로 온오프 관리하고 서비스기능은 따로 모듈로 빼서 const [setOpen, setClose] = useModalHandler({ title, description }) 이런식으로 사용하려고 생각했습니다. 다른 방법이나 위 내용에 대해 조언 부탁드립니다!

바닐라JS 로그인폼 질문 드립니다.

최근 토이프로젝트겸 친구가 운영하는자영업 웹페이지를 제작하고있습니다. 회원가입기능과 예약기능을 설계하면서 여러 웹사이트를 참고하고자 둘러보았는데 대부분의 기업 (N사 G사등등)로그인버튼 클릭시 모달팝업이 노출되거나 별도의 로그인폼페이지가 로드되었습니다. 하나의 페이지에서 사용자의 입력을받아 로그인이나 회원가입기능을 수행할 수 있다고 생각되는데 위와같은 방법으로 하는 특별한 이유나 디자인패턴이 있는지 질문드립다.

파이썬에서 백그라운드에 코드가 돌아가는 동안 모달 창을 띄워주는 방법?

안녕하세요, 이제 막 파이썬으로 개발을 시작한 코린이입니다. 백그라운드에서 코드가 돌아가는 동안 모달 창(message box??)을 띄우고 싶은데 스크린에 메시지 박스가 보이면 뒤에서 코드가 안돌아가네요 ㅠㅠ 혹시 돌아가도록 만들 수는 없을까요? (Tkinter을 사용하고 있습니다!)

부트스트랩 모달창 질문

한페이지에 모달 버튼을 여러개 만드려고 하는데 어느 부분을 수정해야 각각의 모달버튼을 클릭했을때 다른 모달창이 뜨도록 할 수 있을까요 ? ...

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데 어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요! 상황) 리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다. 사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데 부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.) 부모컴포넌트에는 모달의 표시 여부를 관리하는 const [showEmptyInputModal, setShowEmptyInputModal] = useState(false); 이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다. 여기서 문제) 그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다... 일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요 사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다. any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요? state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!

javascript를 이용해서 모달을 띄우고 싶습니다. 오픈소스 라이브러리 추천해주세요.

자바스크립트로 웹 페이지를 만드는 프로젝트를 하고 있습니다 단순한 alert말고 화면 전체가 어두워지고 모달이 뜨는것을 구현하고 싶은데요. 제가 만드는 것보다 모달을 사용할 수 있게 라이브러리를 쓰면 좋을것 같다고 생각이 들었습니다. 약간의 커스터마이징도 가능하면 좋겠습니다.

next.js 브라우저 뒤로가기 이벤트 막기

브라우저 백버튼을 눌렀을 때 뒤로가기 동작을 막고 모달을 띄우고 싶습니다. 모달에서 확인을 눌렀을 때 뒤로가게하고 취소를 하면 페이지에 머물게 만드려고 합니다. next.js에서 브라우저 백버튼 이벤트를 감지할 수 있는 방법이 있을까요???