IPv4, IPv6 IPv4 (Internet Protocol version 4) 정의: IPv4는 1980년대 초반부터 사용되어 온 인터넷 프로토콜 주소 체계입니다. IPv4 주소는 32비트로 구성되어 있으며, 0.0.0.0부터 255.255.255.255까지의 주소를 나타낼 수 있습니다. 주소 구조: IPv4 주소는 4개의 8비트 옥텟(octet)으로 구성되며, 각 옥텟은 점(.)으로 구분됩니다. (10진수 사용) 예: 192.168.1.1 주소 공간: IPv4는 약 43억 개의 고유한 주소를 제공할 수 있습니다. 하지만 이 주소 공간은 예상보다 빨리 고갈되었고, 이를 대체하기 위한 다양한 방법(예: NAT)이 도입되었습니다. 문제점: 주소 공간의 고갈 및 보안 문제 등의 한계로 인해 새로운 IP 버..

랜케이블의 정의 랜케이블이란 무엇인가? 랜케이블(LAN Cable)은 'Local Area Network'의 약자로, 지역 네트워크를 구성하기 위한 전송 매체를 의미합니다. 물리적으로는 구리나 광섬유로 만들어진 케이블로, 디지털 데이터를 전송하는 데 사용됩니다. Ethernet 및 네트워킹에서의 랜케이블의 역할 Ethernet은 네트워킹의 표준 프로토콜 중 하나로, 랜케이블은 이 Ethernet 프로토콜을 사용하여 디바이스 간의 데이터를 전송합니다. 컴퓨터, 스위치, 라우터 등과 같은 장치들을 서로 연결하여 데이터를 주고받을 수 있게 해줍니다. 랜케이블의 종류 Cat 5, Cat 5e, Cat 6, Cat 7 등등 Cat 5: 이전 표준의 랜케이블로, 최대 100Mbps의 속도와 최대 100m의 거리까지..

목표한 구현을 완료하였다! 하지만 마음에 들지 않는것이 하나 있는데 그것은 이미지 슬라이드 구현이다. 현재는 넣어진 데이터베이스의 갯수를 전부 나눠서 들어가게 되었는데 이것을 슬라이드로 바꾸는 작업을 하였다. react-slick React Slick은 React 애플리케이션에서 많이 사용되는 캐러셀/슬라이더 라이브러리입니다. 이 라이브러리는 다양한 옵션과 기능을 가진 반응형 및 인터랙티브한 캐러셀을 유연하게 생성하고 사용할 수 있도록 제공합니다. 이 라이브러리는 인기 있는 Slick 캐러셀 jQuery 플러그인을 기반으로 구축되었습니다. yarn add react-slick React Slick GitHub 저장소 React Slick 문서 React Slick 라이브러리를 사용하여서 슬라이드 구현을 ..

기본적으로 접속을하면 로그인 권한에 따른 브라우저 라우트 설정을 한다. app.js import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { Home, Browse, SignIn, SignUp } from './pages'; import * as ROUTES from './constants/routes'; import { IsUserRedirect, ProtectedRoute } from './helpers/routes'; import { useAuthListener } from './hooks'; export default function App() { const { user } = useAuthListener..

코드 수정 /src/pages/signin.js import React, { useState, useContext } from 'react'; import { useNavigate } from 'react-router-dom'; import { FirebaseContext } from '../context/firebase'; import { Form } from '../components'; import { HeaderContainer } from '../containers/header'; import { FooterContainer } from '../containers/footer'; import * as ROUTES from '../constants/routes'; import { signInWit..

Firebase signup 사용하기 firebase에 Authenication 이메일/비밀번호를 누르고 체크 후 저장 코드 만들기 회원가입 lib/firebase.prod.js import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const config = { apiKey: process.env.REACT_APP_apiKey, authDomain: process.env.REACT_APP_authDomain, projectId: process.env.REACT_APP_projectId , storageBucket: process.env.REACT_APP_storageBucket , messagingSen..

src/lib/firebase.prod.js import Firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth'; // 1) when seeding the database you'll have to uncomment this! // import { seedDatabase } from '../seed'; const config = { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '', appId: '', }; const firebase = Firebase.initializeApp(conf..

mainPage 구성 및 Route 설정 Route 설정 브라우저의 경로를 지정하기위해 리액트 라우터를 사용한다. react-router-dom SPA앱을 만들 때 많이 사용되는 패키지 react-router - 웹&앱 react-router-dom - 웹 react-router-native -앱 사용 버전 "react-router-dom": "^6.13.0", ## react-router-dom 설치 yarn add react-router-dom 이후 footer, accordion, opt-form, header, feature 순으로 components를 구성하고 이전 app.js를 containers 폴더에 컨테이너화 시키면서 필요한 코드들을 작성한다. react-router-dom 6+ 버전 사..

global-styles.js 만들기 기본적으로 사용되는 스타일시트이다. /src/global-styles.js import { createGlobalStyle } from 'styled-components'; export const GlobalStyles = createGlobalStyle` html, body { height: 100%; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #000000; color: #333333; font-size: 16..

fixtures/jombotron 출력하기 jumbotron.js import styled from 'styled-components/macro'; export const Inner = styled.div` display: flex; align-items: center; flex-direction: ${({ direction }) => direction}; justify-content: space-between; max-width: 1100px; margin: auto; width: 100%; @media (max-width: 1000px) { flex-direction: column; } `; export const Container = styled.div``; jumbotron/index.js imp..