2024-10-28 TIL

오늘 배운 것

1. 웹서버 개발 1일차

첫 날이니 만큼 그렇게 어려울 건 없었다. 배운 것들은 다음과 같다.

1. 팝업 열기

부모 html에는

const test = document.getElementById("id값").addEventListener('click', async function (){
        window.open(`html값?data=${"foods"}`, 'popup', 'width=400,height=300');
    })

이런 식으로 html을 열 수 있다.

자식 html에는

const urlParams = new URLSearchParams(window.location.search);
    const data = urlParams.get('data');

이런 식으로 값을 받을 수 있다.

물음표를 붙이는 것으로 값을 다른 사이트에 전송할 수 있다는 걸 한참 뒤에야 알게 되었다.
이걸로 팝업을 띄우면 별도의 백지 html을 이용해 다양한 팝업을 띄우는 것이 가능할 것으로 보인다.

다만 팝업으로 하면 깔끔하게 모양이 안 나온다는 의견이 나와 modal을 띄우는 방법으로 전환할 것으로 보인다.

1. import의 중요성

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { doc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

import를 해서 함수를 받아온다는 발상을 하지 못해서 몇 시간을 날려 먹었다. 다른 곳에서 함수를 받아올 때는 이런 식으로 받아온단 것을 잊지 말자.

1. modal의 존재
   • 작업을 하면서 화면에 띄우는 모든 것을 팝업이라고 알고 있었는데 이제 보니 가볍게 사용하게 좋은 게 모달이라고 따로 있었다.

.modal{
            position:fixed;
            display:none;

            top:50%; 
            left: 50%;

            width:400px;  
            height:600px; 

            padding:40px;  
            border-radius: 10px;
            
            text-align: center;

            box-shadow: 0px 2px 0px 2px black;
            transform: translate(-50%, -50%);

            

            background-color: gray;
        }

위의 것은 한경 설정이고 이렇게 해놓으면 처음에는 작동하지 않다가 display값을 변경하는 것으로 나타나게 된다. 끝나기 직전에 배우게 된 거라 이건 내일 더 자세히 공부하도록 하겠다.

다음에 할 것

오늘 못 했던 modal에 대해서 좀 더 파보도록 하자.