본문 바로가기

분류 전체보기

 (290)
데스크탑뷰 import React, { useEffect, useState } from 'react'; import { FaChevronRight } from 'react-icons/fa'; import { FaPlus } from 'react-icons/fa6'; import { useNavigate } from 'react-router-dom'; import LoginModal from '../Home/Login/LoginModal'; import { useDispatch, useSelector } from 'react-redux'; import { bootChannelTalk } from '../../redux/channelTalkSlice'; import Navbar from '../../components..
15_브라우저 작동방식 브라우저는 인터넷을 통해 웹페이지를 검색하고 표시하는 소프트웨어입니다. 인터넷 브라우저에 URL을 입력하거나 링크를 클릭하면, 다음과 같은 과정을 거쳐 웹페이지가 표시됩니다. 1. URL 해석: 사용자가 입력한 URL(Uniform Resource Locator)은 해당 웹페이지의 주소를 나타냅니다. 브라우저는 이 URL을 해석하여 해당 서버의 IP 주소를 찾습니다. 2. 서버 연결: 브라우저는 해당 서버에 HTTP 요청을 보냅니다. 요청에는 브라우저가 원하는 정보(웹페이지, 이미지 등)와 함께 사용자의 브라우저 정보(user-agent) 등이 포함됩니다. 3. 웹 서버 응답: 서버는 요청받은 정보에 대한 응답을 생성합니다. 이 응답은 일반적으로 HTML, CSS, JavaScript 및 기타 미디어 파..
생성-수정-결제페이지 import React, { useState } from 'react'; import { HiBell } from 'react-icons/hi'; import { BsPersonCircle } from 'react-icons/bs'; // 로그인 import { FaAngleLeft } from 'react-icons/fa6'; // import { RiLogoutBoxRLine } from "react-icons/ri"; import { IoLogOutSharp } from "react-icons/io5"; // 로그아웃 import { useNavigate } from 'react-router-dom'; import { NavbarIconContainer, NavbarNotificationIconDi..
14_동기 & 비동기의 차이 : 비동기프로그래밍 ✅ 동기 (Synchronous)와 비동기 (Asynchronous) 프로그래밍 ✅ 동기 (Synchronous) 프로그래밍: 동기 프로그래밍은 작업이 순차적으로 실행되고, 한 작업이 완료될 때까지 다음 작업이 시작되지 않습니다. 요청한 작업이 완료되기 전까지는 대기해야 하므로, 시스템 자원의 효율성과 응답성이 저하될 수 있습니다. 순차적인 프로그래밍 스타일로 코드의 흐름이 예측 가능하고 간단할 수 있습니다. ✅ 비동기 (Asynchronous) 프로그래밍: 비동기 프로그래밍은 작업이 병렬로 실행되고, 작업이 완료될 때까지 기다리지 않고 다음 작업을 계속할 수 있습니다. 비동기적으로 작업을 처리하면, 작업이 완료되기를 기다리는 동안 다른 작업을 수행할 수 있어 시스템 자원을 효율적으로 활용할 수 있습니다..
깃 커밋 순서 터미널 >> git add . git commit -m "Style: 회원가입, 로그인 스타일 적용" git status git pull git push 깃헙 >>
로그인모달창, 회원가입, 로그인 import React from "react"; import { IoClose } from "react-icons/io5"; import { Link } from "react-router-dom"; import { useDispatch } from "react-redux"; import { googleLogin, kakaoLogin } from "../../../redux/authSlice"; import { ModalContainer, Background, IoCloseDiv, LoginModalImg, P, GoogleBtn, KakaoBtn, LoginModalBtn, } from "./LoginModalStyles"; const LoginModal = ({ closeModal }) => { con..
메인페이지 webkit-scrollbar 적용 import React, { useEffect, useState } from 'react'; import { FaChevronRight } from 'react-icons/fa'; import { FaPlus } from 'react-icons/fa6'; import { useNavigate } from 'react-router-dom'; import LoginModal from '../Home/Login/LoginModal'; import { useDispatch, useSelector } from 'react-redux'; import { bootChannelTalk } from '../../redux/channelTalkSlice'; import { userLogout } from '../../re..
13_Javascript의 호이스팅에 대해 설명해주세요. ✅ 호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 소스 코드의 맨 위로 끌어올려지는 것을 의미합니다. 이는 실제로 코드의 위치와 상관 없이 변수 및 함수 선언이 컨텍스트(함수 스코프 or 전역 스코프)의 맨 위로 옮겨지는 것을 의미합니다. ✅ 변수 호이스팅: JavaScript에서는 변수 선언이 선언되기 전에도 사용할 수 있습니다. 이는 변수가 해당 스코프의 맨 위로 끌어올려진 후에 선언된 것처럼 동작합니다. console.log(x); // undefined var x = 5; 위의 코드에서 x 변수는 선언되기 전에 console.log()에서 사용되었지만, 오류가 발생하지 않고 undefined를 출력합니다. 이는 변수 선언이 호이스팅되어 해당 스코프의 맨 위로 끌어올려졌기..
Detail :UI_FloatingButton 스타일 적용 import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useParams } from "react-router-dom"; import { fetchFundingDetail } from "../../../apis/funding"; import Navbar from "../../../components/Navbar"; import { useDispatch, useSelector } from "react-redux"; import { userLogout } from "../../../redux/authSlice"; import { MainContainer, LeftCont..
12_JSX란 무엇인가요? ✅ JSX(JavaScript XML) JavaScript에서 UI를 작성하기 위한 XML과 유사한 문법을 제공하는 확장 문법입니다. 주로 React.js에서 사용되며 JavaScript 코드 안에 마크업을 작성할 수 있게 해줍니다. JSX는 가독성이 높고 컴포넌트 기반의 개발을 용이하게 해주는 장점을 가지고 있습니다. JSX는 JavaScript와 XML을 조합한 것으로 JavaScript 표현식을 포함할 수 있으며 HTML과 유사한 구조를 가지고 있습니다. JSX 코드는 일반적으로 컴파일되어 JavaScript 함수 호출이나 객체로 변환되어 브라우저에서 실행됩니다.

티스토리툴바