# modal

55개의 포스트

[React] 모달창 만들기

리액트 버전 모달창 만들기 > 우선, modal창을 관리할 useState를 만들고, dim처리 할 부분을 useRef를 사용하여 접근한다. 그리고 버튼을 눌렀을 때 모달을 보여주는 openModal 함수, 모달을 펼쳐져 있을 때만 닫아주는 closeModal 함수

3일 전
·
0개의 댓글
post-thumbnail

모달을 이용하여 경고창 만들기

https://ant.design/components/modal/ 을 이용한다.실습 코드아래의 사진을 보면 잘 적용되는 것을 볼 수 있다!

2021년 11월 16일
·
0개의 댓글
post-thumbnail

React에서 모달창 만들기

모달창 그냥 부트스트랩 갖다쓸까하다가 만드는거 어렵지 않아서 직접 만들어봄!직접해보니 별거아니었다~<모달창 만드는 법>

2021년 11월 10일
·
0개의 댓글
post-thumbnail

[react] chakra-ui + typescript + Next.js 로 모달 만들기

만들어 볼 결과물은 gif와 같은 모달이다.아직 디자인이 완전히 나온 상태가 아니어서 모달의 타입을 정확히 구분지을 수 없었다.따라서 헤더(타이틀)와 푸터(버튼)의 디자인에 따라 타입을 나누고, 바디는 children 을 이용해 받을 것이다.chakra-ui로 모달을

2021년 10월 28일
·
1개의 댓글
post-thumbnail

🙆🏻‍♀️ 각 li에 대응하는 모달창 🙆🏻‍♀️

여러 개의 리스트! 하나의 모달!

2021년 10월 25일
·
0개의 댓글
post-thumbnail

react-modal 라이브러리

https://velog.io/@seungsang00/React-React-Modal

2021년 10월 13일
·
0개의 댓글
post-thumbnail

Modal 활용해보기

react-daum-postcode 라이브러리와 모달을 활용해서 주소창 띄어보기, Modal속성에 대해 설명, prev를 활용한 리팩토링 , 에러던지기

2021년 9월 18일
·
1개의 댓글

[TIL] 9월 14일 Modal 2

오늘도 어제에 이어서 2번째 Modal 라이브러리 사용법에 대해서 배웠다.오늘은 국내에서 정말 많이 사용하는 Adress 라이브러리 적용에 대해서 배웠다.국내에서 가장 많이 사용하는 주소 라이브러리는 daum-postcode 이다.daum-postcode란?인터넷을 이

2021년 9월 15일
·
1개의 댓글
post-thumbnail

[React] 전역으로 관리하는 모달 만들기

이번에 만들어 볼 것은 모달인데, ios에서 기본적으로 제공하는 것처럼 생긴 모달을 만들 것입니다!먼저 완성본부터 보겠습니다디자인에 관련된 정확한 측정이 스스로의 힘으로는 불가능하였지만, 같이 협업하고 계신 디자이너님께서 만들어서 제공해주셨습니다👍프론트 작업 시에,

2021년 9월 14일
·
0개의 댓글

[TIL] 9월 13일 Modal!!

오늘은 각종 아이콘, 캘린더, 유튜브 url등등 쉽게 가져와 적용할수 있는 라이브러리에 대해 배웠다.라이브러리란?자주사용하는 기능을 미리 만들어 놓는것을 말한다.미리사용하는 아이콘,캘린더, 알림창 등등을 가져와서 나의 상황에 맞게 적용 및 커스터마이징 하면 된다.Mod

2021년 9월 13일
·
0개의 댓글

4. Deep Dive : Modal Window

모달, 팝업만드는 법

2021년 9월 5일
·
0개의 댓글
post-thumbnail

[Project] 모달을 통한 생성/삭제 기능 구현

예... 현재 12시간 프로젝트 중인데, 같은 부분에서 3시간 삽질했네요...! 인내심이 끝까지 달리던 순간, 뭔가 제가 오해가 있을 거란 부분을 생각해서 수정한 결과, 정상 동작을 하게 됐읍니다!!! 👏👏👏이래서 정말... 언러닝이 중요하다는 것을 다시금 느낍니

2021년 9월 2일
·
0개의 댓글
post-thumbnail

React에서 Modal 구현하기(feat. createPortal, 스크롤 막기)

Modal(이하 모달)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법 중에 하나다. 이번 프로젝트에서는 사용자가 어떤 행동을 하였을 때 이 행동을 정말로 진행할 것인지 확인 하는 용도로 사용을 하기도 하였고, 로그인이 필요한 기능을 수행하려 할 때...

2021년 8월 29일
·
0개의 댓글

Confirmation Modal (with. vue 3)

브라우저의 confirm을 대신할 confirmation modal을 직접 만들어보자!

2021년 8월 10일
·
0개의 댓글
post-thumbnail

[iOS] 뷰 컨트롤러를 화면상에 나타내는 법

뷰 컨트롤러를 화면상에 나타내기 뷰 컨트롤러를 화면에 나타내는 방법에는 두가지가 있다 ContainerViewController타입(NavigationViewController나 TapBarViewController처럼 여러 개의 뷰컨트롤러를 제어하는 뷰컨트롤러)

2021년 8월 9일
·
0개의 댓글
post-thumbnail

TIL 36 | 모달창과 팝업창의 차이

위코드 5주차! children에 대한 수업을 하면서 모달창에 대해서 배우게 되었다.엇...? 그게 모달?우선 팝업창이란 현재 열려있는 브라우저 페이지에 또다른 브라우저 페이지를 띄우는 것을 말한다. 창 + 창n 인 것이다. 브라우저에서 이 창을 열기 닫기를 제어할 수

2021년 8월 8일
·
0개의 댓글
post-thumbnail

W2 - 기술정리 | Portals (feat. Modal)

부모 컴포넌트와 자식 컴포넌트라는 관계는 유지되지만 자식 컴포넌트의 렌더링은 부모 컴포넌트 밖에 있는 DOM 노드에서 일어나도록 하는 기능이다. 즉 렌더링이 DOM 트리 계층 구조로부터 자유로워진다.

2021년 8월 8일
·
0개의 댓글

[React-native] nested navigation, bottom tab modal 적용하기 (navigation v6)

안녕하세요,, 하단 네비게이션을 react navigation v4에서 v6 버전으로 싹 다 고치면서 이것 저것 시도해봤어요.

2021년 8월 6일
·
0개의 댓글
post-thumbnail

모달 다이얼로그 만들기 | JS Snippets

모달 다이얼로그(Modal Dialogs)는 메인 컨텐츠 위에 나타나는 사용자 인터랙션 중 하나다. 일반 시스템 다이얼로그는 팝업으로 나타나지만 모달 다이얼로그는 화면 위의 레이어로 나타나는 차이가 있다.모던 브라우저 환경에서 자주 사용되는 기술 중 하나이며 사용자의

2021년 8월 6일
·
1개의 댓글