# modal

25개의 포스트

React Modal 만들기

현재 투두앱으로 포트폴리오를 만들고 있는 중이었다. 단순히 리스트를 추가하고, 삭제, 수정만이 하는게 아니라, 노드로 백엔드까지 만들어서 진행하려고 했으나... 생각보다 컴포넌츠는 나누는 작업이 많았고, 회원가입 및 로그인까지 작업을 해야되서 첫 포폴치고는 작업량이

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

[TIL] 함수형 - Modal

부모 컴포넌트에서 초기 state 값을 boolean 으로 선언한다.해당 버튼 태그에서 handleModal 이라는 이벤트를 사용해서,state 상태값을 setState 으로 상태를 변화시킨다!(발생될 시 이벤트는 false => true 값 즉, !modal)

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

TIL 58일차

솔로데이 동안 진행할 로그인 페이지 구현을 위해 React에서 modal 만드는 방법을 알면 도움이 될 것 같아서 만들어 보았다. https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-objec

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

react-create-portal 에 대하여...

리액트 v16 에서 도입된 기능인 Portals! 한번 알아보도록 하자!!

2021년 3월 30일
·
0개의 댓글

TIL_20210316_#1 (TUE)

모달 창 띄우기 (prompt / confirm)

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

iOS & Swift 공부 - Modal

사용자의 이목을 끌기 위해 사용하는 화면 전환 기법엄밀히 말하면 화면 "전환"은 아니고, 다른 화면을 현재 화면 위로 present 하여 표현하는 방식 (present modally)Modal 로 보이는 화면을 사라지게 하려면 특정 "선택"이 동반되어야 한다. → 메

2021년 1월 28일
·
0개의 댓글

body scroll lock/unlock

모달 창 띄웠을 때 바닥 페이지 스크롤 안되게 해주세요.프로젝트를 하다 보면 위와 같은 요청을 받게 된다.레이어로 모달 창을 띄운 상태에서 스크롤을 하면 바닥 페이지가 위 아래로 움직이게 되는데이걸 막아 달라는거다.CSS 프레임워크나 모달 플러그인 등을 사용하면자체적인

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

React | 세상 간단하게 모달창 만들기 (라이브러리 X)

위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa

2020년 11월 29일
·
2개의 댓글
post-thumbnail

TIL 31일차 - modal 만들기

평화로운 수요일나와 지상이는 solo week 계획대로 첫 날에는 modal을 만들어 보았다.모달은 터럭 모(毛) + 달달하다와 합쳐진 말로 풍성한 털이 있어서 달달하다. 라는 말이다. 친구로는 팝업이 있다.팝업은 기존 브라우저 페이지에서 새로운 브라우저 페이지를 여는

2020년 11월 25일
·
3개의 댓글
post-thumbnail

[JavaScript]Closing modal on outside click | 모달창 외부 클릭해서 닫게 하는 방법

포트폴리오 사이트나 기업 웹사이트를 만들 때, 모달(modal)창의 닫기 버튼 말고도 모달창을 제외한 화면을 클릭해서 닫을 수 있도록 해야 사용자가 불편함 없이 사이트를 이용할 수 있다. 간단한 HTML 태그 구성과 자바스크립트 단 몇 줄이면 해결 가능하다.

2020년 11월 10일
·
2개의 댓글
post-thumbnail

Modal vs Navigation

iOS의 화면 전환 방법인 Modal과 Navigation에 대해 알아보고 비교해봤다.

2020년 11월 9일
·
1개의 댓글
post-thumbnail

[React] Modal을 Redux로 구현해보자!

웹페이지를 구현할 때, Modal이라는 개념은 정말 많이 쓰인다. 하지만 단방향으로만 데이터를 바인딩해주는 React 특성상 Modal 만들 때에는 구조적이나 z-index과 같은 뷰쪽에서 깔끔하지않는 문제가 발생한다..🤔 그래서, 혹시 Redux를 이용하여 Mod

2020년 9월 4일
·
8개의 댓글

[SpaceX Clone] Modal 기능 구현, unMount Animation (React)

Space X Clone 중 Modal 기능 구현 과정 개념 React에서 모달을 구현하는 방법은 크게 2가지로 나뉜다. React Portal 이용 조건부 렌더링 이 중 저는 조건부렌더링을 이용해서 모달창을 부모의 state값에 따라서 render여부를 결정하는 식

2020년 8월 23일
·
1개의 댓글
post-thumbnail

[React] Modal 구현하기

리액트에서 기본적인 Modal 을 구현해봤다. 전체적인 코드는 아래와 같다. 함수형 컴포넌트와 스타일드 컴포넌트를 사용해서 구현했다.SignatureHeadCover 라는 부모 컴포넌트에 Modal 컴포넌트를 사용해주었다. 모달 기능 로직 \- modalState 초

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

[React] modal 로그인창 만들기 ⚑

import React, { Component } from "react";import { Link } from "react-router-dom";import "./SignIn.scss";class SignIn extends Component { state = {

2020년 8월 6일
·
1개의 댓글
post-thumbnail

1주차 프로젝트 - 이중 모달창 띄우기

1주차 프로젝트가 시작되었다.나는 29CM 사이트 클론 팀에서 29TV 페이지를 맡게 되었다.29CM는 국내 온라인 편집숍 사이트이며 29TV는 자체 소셜 네트워킹 서비스 페이지로, 입점 브랜드들이 브랜드 제품을 홍보하거나 사진, 비디오를 공유하는 페이지이다.페이지 구

2020년 7월 24일
·
0개의 댓글
post-thumbnail

youtube api로 리액트에 영상 가져오기

youtube api 받아서 리액트에 영상 띄워보자!

2020년 6월 13일
·
0개의 댓글
post-thumbnail

Portal 이용해서 react에서 Redux없이 Modal창 만들기 도전

- react 공식문서에 있는 Portals를 이용해 modal창을 만들어 본 도전기이다.

2020년 5월 3일
·
7개의 댓글
post-thumbnail

Modality

Modality는 사용자의 이전 컨텍스트와는 별개로 컨텐츠를 임시적인 모드로 표시하는 디자인 테크닉이다. 종료하려면 명시적인 조치가 필요하다. 사람들이 독립적인 작업 또는 밀접하게 관련된 옵션에 집중하도록 돕는다.사람들이 중요한 정보를 수신하고 필요한 경우 조치를 취하

2020년 4월 5일
·
2개의 댓글
post-thumbnail

Modal 만들기 : Event propagation

프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기 https://github.com/woohyeonjo/ilovecat

2020년 3월 27일
·
0개의 댓글