'분류 전체보기' 카테고리의 글 목록 (3 Page)

Talk Programming

TIL - 19th 게시글 불러오기 from firebase to modal 2022.11.25
TIL - 18th 로그인 여부에 따라 페이지 출력방식 변경 2022.11.24
TIL - 17th Login page connected with Fiirebase Authorize Service 2022.11.23
TIL - 16th SPA 내에 자바스크립트 연동 2022.11.22 1
TIL - 15th 기초프로젝트 시작 2022.11.21
WIL 3rd - 기초프로젝트 'Vinabro' S.A. 2022.11.21
TIL 14th - 파이어 베이스 // SPA 2022.11.18
TIL 13th - SPA, DB 2022.11.16
TIL 12th - Split Landing Page 2022.11.16
TIL 11th - Expanding Cards 2022.11.15

TIL - 19th 게시글 불러오기 from firebase to modal

2022. 11. 25. 08:59

TIL - 18th 로그인 여부에 따라 페이지 출력방식 변경

2022. 11. 24. 09:26

로그인 되어 있는 상태 확인을 위해 window 전역 함수에 user 정보를 저장

router.js 에 메인페이지에서 if window user 과 else를 두어 효과 적용

TIL - 17th Login page connected with Fiirebase Authorize Service

2022. 11. 23. 09:36

어제 가장 골치 아프게 했던 구간

로그인 버튼과 회원가입 버튼 각각의 버튼을 if 문에서 버튼을 클릭한 경우 함수를 실행하라 같은것이었는데

onclick, addeventlistener 과 등등 온갖 시도를 해봤지만 문제가 해결되지 않아 Submitter 로 검사에서 추적한 후 보았다.

TIL - 16th SPA 내에 자바스크립트 연동

2022. 11. 22. 01:46

아 분명히 모든 코드가 완벽했었을텐데

위의 자바스크립트를 SPA 내부, Main.js 에 삽입하는 것이 제대로 동작하지 않았다.

위의 코드를 함수로 변환했고,

import 와 export 난리를 준비했었다.

하지만 main.js 에 import와 export를 삽입하는 것은 의도대로 동작하지 않았고 함수를 통채로 넣기로 했다.

TIL - 15th 기초프로젝트 시작

2022. 11. 21. 09:23

기초프로젝트 주간이 18일부터 28일까지 진행될 예정이다.

일전에 첫번째 TIL에서 작성했던 스파르타피디아에서 기능적으로 강화하고, 조금 더 폭넓게 영상 감상에 관한 다이어리를 작성하고 개인적인 코멘트, 리뷰 그리고 작성된 글을 사람들과 공유할 수 있도록 기능적인 추가를 진행하고자 했던 것을 이번 팀과 함께 작업을 진행하기로 하였다.

원했던 모든 기능을 넣을 순 없겠지만, 작은 걸음부터 시작해보고자 한다.

WIL 3rd - 기초프로젝트 'Vinabro' S.A.

2022. 11. 21. 09:16

기초프로젝트 주간이 시작되었다.

TIL 14th - 파이어 베이스 // SPA

2022. 11. 18. 00:05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Form Input Wave</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Please Login</h1>
        <form>
            <div class="form-control">
                <input type="email" required id = "signUpEmail">
                <label>Email</label>
            </div>

            <div class="form-control">
                <input type="password" required id="signUpPassword">
                <label>Password</label>
            </div>

            <button class = "loginbtn">Login</button>

            <p class="text">Don't have an account? <a href="#"><button class ="registerbtn">Register</button></a></p>
        </form>
    </div>
    <!--Firebase CDN -->
    <script type="module">
        // Import the functions you need from the SDKs you need
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
        import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-analytics.js";
        // TODO: Add SDKs for Firebase products that you want to use
        // https://firebase.google.com/docs/web/setup#available-libraries
        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyA72wRUKnY6N137xz58QyfCPRp1rolS3TE",
            authDomain: "loginproperty2211.firebaseapp.com",
            projectId: "loginproperty2211",
            storageBucket: "loginproperty2211.appspot.com",
            messagingSenderId: "221879887215",
            appId: "1:221879887215:web:259d02dce11102c9a3749a",
            measurementId: "G-SJCK1MF8Y1"
        };
        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const analytics = getAnalytics(app);

        import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";

        // 추가 코드 (버튼 이벤트_회원가입)
        document.getElementsByClassName("registerbtn").addEventListener("click", (event) =>{
            event.preventDefault()
            const email = document.getElementById("signUpEmail").value
            const password = document.getElementById("signUpPassword").value
            const auth = getAuth();
            createUserWithEmailAndPassword(auth, email, password)
            .then((userCredential) => {
                // Signed in 
                const user = userCredential.user;
                // ...
            })
            .catch((error) => {
                console.log('error');
                const errorCode = error.code;
                const errorMessage = error.message;
                // ..
            });
            console.log(email,password)
        });

        // Sign up with email and pass.
        // const auth = getAuth();
        // createUserWithEmailAndPassword(auth, email, password)
        // .then((userCredential) => {
        //     // Signed in 
        //     const user = userCredential.user;
        //     // ...
        // })
        // .catch((error) => {
        //     const errorCode = error.code;
        //     const errorMessage = error.message;
        //     // ..
        // });
        // [END auth_signup_password]

    </script>
    <script src="script.js"></script>
</body>
</html>

파이어베이스 붙이기 실패...

내일 console.log 찍어보면서 어디서 꼬이는지 확인해봐야겠다.

DB 특강 (2022-11-16)

1. 데이터베이스  :

    협의로는 데이터를 모아 놓은 곳
    광의로의 데이터베이스는 DBMS에 의해 관리제어 받는 것 (협의 광의가 바뀐 것 같은데..)

2. DBMS         :

    DataBase Management System 데이터베이스 관리 시스템
    그저 나열되어 있을 뿐인 데이터를 제어, 모니터링, 튜닝, 백업, 복구 등 다양한 관리 작업 수행하는 것
    그 종류로는 MySQL, Oracle, DataBase 등이 있다.

3. RDBMS        :

    관계형 데이터베이스 (Relational DBMS)은 데이터가 열과 행으로 저장되어 있다.
    장점 : 직관적, 관계 파악 용이, 정확성이 높다.
    단점 : 성능 향상 비용이 비싸고, 최초 설계가 어긋날 경우 요소 추가 및 제거가 쉽지 않다.
    종류 : MySQL, Oracle, sQLite, MariaDB, PostgresSQL
    언어 : SQL(Structured Query Language)
    확장 : Scale Up 수직 확장

4. NoSQL        :

    비관계형 데이터 베이스 (Not only SQL)은 RDBMS를 제외한 나머지를 의미한다.
    광계형에 비해 유연하게 데이터를 쓰고 읽을 수 있다.
    유형 :  Key - Value 타입 > Redis, AWS Dynamo
            Document 타입 > MongoDB, Firebase(Firestore)
            column 타입 Cassandra 타입  HBase 타입
    확장 : Scale Out 병렬 확장

TIL 12th - Split Landing Page

2022. 11. 16. 09:34

다음과 같은 랜딩페이지 제작을 목적으로 한다.

해당 페이지는 반으로 영역이 나뉘어져 있으나,

영역에 마우스를 올릴 경우 이벤트가 활성화 되어

활성화 된 영역이 확대 되며, 활성화 되지 못한 부분은 축소된다.

또한 BUY NOW를 누를 경우 버튼의 배경이 Transperent 속성을 잃게 된다.

<body>
    <div class="container">
        <div class="split left">
            <h1>PlayStation 5</h1>
            <a href="#" class="btn">Buy Now</a>
        </div>
        <div class="split right">
            <h1>XBox Series X</h1>
            <a href="#" class="btn">Buy Now</a>
        </div>

    </div>


    <script src="script.js"></script>
</body>

뼈대는 매우 간단하다.

CSS 가 조금 헤비한데 간단하게 살펴보면 다음과 같다.

:root {
    --left-bg-color : rgba(87,84,236,0.7);
    --right-bg-color :  rgba(43,43,43,0.8);
    --left-btn-hover-color : rgba(87,84,236,1);
    --right-btn-hover-color : rgba(28,122,28,1);
    --hover-width : 75%;
    --other-width : 25%;
    --speed : 1000ms;
}

.split.left .btn:hover {
    background-color: var(--left-btn-hover-color);
    border-color: var(--left-btn-hover-color);
}

.split.right .btn:hover {
    background-color: var(--right-btn-hover-color);
    border-color: var(--right-btn-hover-color);
}

.split.left {
    left :0;
    background:url('https://cdn.mos.cms.futurecdn.net/Vh6eSp4siwggK7RUys72nP-1920-80.jpg.webp');
    background-size: cover;
    background-repeat: no-repeat;
}

.split.left::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--left-bg-color);
}

.split.right {
    right: 0;
    background : url('https://assets-prd.ignimgs.com/2022/07/18/xboxseriesx-1-blogroll-1-1658125596470.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}

.split.right::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--right-bg-color);
}

.split.right, .split.left, .split.left::before, .split.right::before {
    transition: all var(--speed) ease-in-out;
}

.hover-left .left {
    width : var(--hover-width);
}

.hover-left .right {
    width : var(--other-width);
}

.hover-right .right {
    width : var(--hover-width);
}

.hover-right .left {
    width : var(--other-width);
}

또한 영역크기가 명확한 페이지인 만큼

화면이 작아질 경우 예상치 않은 모양새가 되어버리는 점을

감안하여 미디어쿼리를 통해 max-width를 설정해주었다.

@media (max-width: 800px) {
    h1 {
        font-size : 2rem;
        top: 30%
    }
    .btn {
        width: 12rem;
        padding:1.2rem;
    }
}

TIL 11th - Expanding Cards

2022. 11. 15. 09:23

수업 외 따로 시작하게 된 50 프로젝트 in 50 Days

첫 번째 프로젝트로 진행하게 된 Expanding Cards로 말할 것 같으면

클릭하면 펼쳐지는 사진첩들이고, 초기 화면은 다음과 같다.

해당 기능을 구현하기 위해 생애 첫 자바스크립트, AddEventListener 을 사용하게 되었다.

사용 조건은 단순하게 Click.

const panels = document.querySelectorAll('.panel')

panels.forEach(panel => {
    panel.addEventListener('click', () => {
        removeActiveClasses()
        panel.classList.add('active')
    })
})

function removeActiveClasses() {
    panels.forEach(panel => {
        panel.classList.remove('active')
    })
}

다른 사진을 클릭하면 기존에 눌러져있던 이미지는 작아지는 애니메이션 효과를 가지며

클릭당한 이미지는 늘어나는 애니메이션 효과를 지닌다.

.panel.active {
    flex: 5;
}

.panel.active h3 {
    opacity: 1;
    transition : opacity 0.3s ease-in 0.4s;
}

하지만 아직 화면의 크기가 커지면 (27인치 모니터의 전체화면 사이즈) 사진이 확대 되면서

Edge의 Radius가 해체되어, 해당 문제의 해결이 필요하다.

PREV 이전 1 2 3 4 NEXT 다음

에톡 프로그래밍