DDOstory

자바스크립트에서 '변수'란? 변수(Variable)는 데이터를 저장하는 공간이에요.이름을 붙여 어떤 값들을 담아두고,필요할 때 그 이름을 불러서 사용할 수 있어요. 예를 들어let name = "도희"; 위 코드에서는 name이라는 변수에 "도희"라는 문자열을 저장했어요.이제부터 name을 사용하면 "도희"를 의미하게 돼요.변수 선언 방식 : var, let, const 자바스크립트에서는 변수를 선언할 때세 가지 키워드를 사용할 수 있어요.키워드재할당 가능재선언 가능스코프var✅ 가능✅ 가능함수 스코프let✅ 가능❌ 불가블록 스코프const❌ 불가❌ 불가블록 스코프각각 자세히 살펴보자 var (거의 안 씀)var nickname = "deco";var nickname = "dodo"; // 재선언도 가능..

자바스크립트는 왜 필요한가?웹 페이지를 처음 만들던 시절에는 HTML만 있어도정보 전달에는 큰 문제가 없었어. 하지만 사용자들이 웹에서 점점 더 많은 걸 기대하게 되면서,정적인 HTML과 CSS만으로는 부족한 상황이 찾아왔지. 예를 들어 이런 것들이야:버튼을 클릭하면 창이 뜨는 기능사용자가 입력한 값을 검사해서 경고 메시지를 보여주는 기능스크롤하면 애니메이션이 재생되는 기능실시간으로 서버에 데이터를 요청해서 새로운 내용을 불러오는 기능이런 인터렉티브한 기능을 가능하게 만들어주는 것이 바로 자바스크립트(JavaScript)자바스크립트는 어떤 언어인가?자바스크립트(JavaScript)는 웹 브라우저에서 동작하는 인터프리터 기반의 프로그래밍 언어 초기에는 단순한 스크립트 언어였지만, 지금은 웹 개발의 핵심 ..

미들웨어운영 체제와 해당 운영 체제에서 실행되는 애플리케이션 사이에 존재하는 소프트웨어숨겨진 변환 계층으로 가능하는 미들웨어는 분산 애플리케이션의 통신 및 데이터 관리를 가능하게 합니다.데이터와 데이터베이스가 "파이프" 사이를 쉽게 통과할 수 있도록 두 가지 애플리케이션을 함께 연결하기 때문에 배관이라고 함미들웨어를 사용하면 사용자가 웹 브라우저에서 양식을 제출하거나 웹 서버가 사용자의 프로필을 기반으로 동적 웹 페이지를 반환하도록 요청할 수 있습니다.미들웨어 예시데이터베이스 미들웨어, 애플리케이션 미들웨어, 메시지 지향 미들웨어, 웹 미들웨어 및 트랜잭션 처리 모니터가 있음각 프로그램은 SOAP(Simple Object Access Protocol), 웹 서비스, REST(Representational..

아코디언 디자인은 shadcn/ui의 Accordion을 사용하여 구현하였습니다single 타입 ( Accordion Type = "single" )한 번에 하나의 아코디언 아이템만 펼쳐진 상태로 유지됩니다새로운 아이템을 펼치면 이전에 펼쳐져 있던 아이템은 자동으로 접힙니다사용자가 한 번에 하나의 정보에만 집중하도록 유도합니다사용 시나리오FAQ 페이지사용자가 궁금한 질문을 클릭하면 답변이 펼쳐지고, 다른 질문을 클릭하면 이전 답변은 접히도록 하여 깔끔한 정보 제공이 가능합니다설정 매뉴여러 설정 옵션 중 현재 활성화된 옵션만 보여주고, 다른 옵션을 선택하면 이전 옵션은 숨깁니다단계별 폼복잡한 폼을 단계별로 나누어 한 번에 하나의 단계만 보여줌으로써 사용자의 집중도를 높이고 폼 작성 과정을 간소화합니다장점정..

슬라이드 디자인은 shadcn/ui의 Carousel를 사용하여 구현하였습니다IntersectionObserveruseEffect 훅을 이용한 초기화 및 정리useEffect(() => { // IntersectionObserver 생성 및 감지 로직 return () => { // intersectionObserver 감시 해제 로직 } }, []);useEffect 훅은 Reac 컴포넌트가 렌더링될 때 특정 작업을 수행하도록 하는 훅입니다코드에서 IntersectionObserver를 생성하고 감시를 시작하는 작업을 수행합니다두 번째 인자로 빈 배열 [ ]을 전달하여, useEffect의 컴포넌트가 마운드될 때 단 한 번만 실행됩니다useEffect의 반환값을 return 함수로 전달하..

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제Fetch API 개념 Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고 CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함Fetch API 사용법요청을 생성하고 리소스를 취득하려면 fetch 메서드를 사용fetch()는 window와 worker 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드리소드를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용 가능fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받음반환 값은 해당 요청에 대한 Response로 이행하는 prom..

useTabsimport React, {useState} from "react";import ReactDOM from "react-dom";const content = [ { tab: "Section1", content: "I'm the content of the Section 1" }, { tab: "Section2", content: "I'm the content of the Section 2" },];const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentInde..

useInputimport React, {useState} from "react";import ReactDOM from "react-dom";const useInput = initialValue = { const [value, setValue] = useState(initialValue); return {value};};const App = () => { const name = useInput("Mr."); return ( Hello `);};const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);input를 업데이트함 useInput은 init..

useStateimport React from "react";import ReactDOM from "react-dom";function App() { return ( Hello Start editing to see some magic happen! );};const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);useState는 항상 2개의 value를 return첫번째 value를 item두번째 value는 값을 변경하게 함import React, {useState} from "react" // useState를 importconst [item, se..

useTitle - react document의 title을 몇개의 hooks와 함께 변경useInput - input 역할을 그대로 함usePageLeave - 유저가 page를 벗어나는 시점을 발견하고 함수를 실행useClick - element를 클릭하는 시점useFadeIn - 어떤 Element든 상관없이 애니메이션을 Element 안으로 서서히 사라지게 함useFullscreen - 어떤 Element든 풀스크린으로 만들거나 일반 화면으로 돌아가게 할 수 있음useHover - 어떤 것에 마우스를 올렸을 때 감지useNetwork - Online 또는 Offline 상태인지 감지useNotification - notification API를 사용할 때 유저에게 알림을 보냄useScroll - ..