JSX(20)
-
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <App.css>
/* 기본 스타일 초기화 */body { margin: 0; padding: 0; box-sizing: border-box; font-family: pretendard-regular; background-color: #282c34; color: white; text-align: center; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow-x: hidden;}/* 상단 고정 섹션 */#top-section { width: 100%; flex-shrink: 0; /* 상단 고정 */ text-align: center; pad..
2024.12.11 -
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <App.js>
import React, { useState, useEffect } from "react";import "./App.css";import { startClock } from "./js/clock";import { initializeQuotes } from "./js/quotes";import { initializeWeather } from "./js/weather";import Background from "./js/background";import FocusMode from "./jsx/FocusMode";function App() { const [username, setUsername] = useState(null); // 사용자의 이름을 저장하는 상태 변수 const [focusMode, se..
2024.12.11 -
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <background.JSX>
import React, { useState, useEffect } from "react";import styled from "styled-components";import axios from "axios";const BackgroundWrapper = styled.div` background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), // 배경 위에 반투명한 검은색 (50% 투명도)를 얹는 그라디언트 효과 url(${(props) => props.backgroundImage}); // backgroundImage 값을 받아 동적으로 배경 이미지를 설정 // props.backgroundImage가 "image.jpg"라면 ..
2024.12.11 -
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <clock.js>
function getClock() { // 현재 시간을 가져와 시계를 업데이트하는 함수 const clockElement = document.getElementById("clock"); // HTML에서 id가 click인 요소를 가져온다 if (!clockElement) return; // clockElement가 없으면 종료 (안전장치) const now = new Date(); // Date 객체를 사용해 현재 시간을 가져온다 const hours = String(now.getHours()).padStart(2, "0"); const minutes = String(now.getMinutes()).padStart(2, "0"); const second..
2024.12.10 -
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <greeting.js>
// 사용자의 이름을 화면에 표시하는 함수function paintGreetings(username) { const greeting = document.querySelector("#greeting"); // HTML에 JS 객체를 연결 if (!greeting) return; // 요소가 없으면 종료 greeting.innerText = `Hello ${username}`; // HTML의 에 Hello [사용자 이름] 형식의 텍스트를 삽입한다 greeting.classList.remove("hidden"); // hidden을 지워 숨겨져 있던 인사말을 화면에 표시한다 } function onLoginSubmit(event) { // event를 괄호안에 쓰는 이유는..
2024.12.10 -
[팀 포트폴리오] [Momentum 클론 웹사이트] 2. 코드 분석 <weather.js>
export function initializeWeather() { const weather = document.querySelector("#weather span:first-child"); const city = document.querySelector("#weather span:last-child"); // HTML에 각 JS 객체 연결 const API_KEY = "-"; // OEPN API 고유 키값 (- 자리에는 개인의 키 값 연결 필요) 선언 (가독성을 위해 이렇게 함) if (!weather || !city) { console.error("Weather or city element not found in DOM"); // 에러일 경우 에러값 콘솔 메시지로 출력하게 하기..
2024.12.10