https://inpa.tistory.com/entry/VScode-%E2%8F%B1%EF%B8%8F-%EC%83%88%ED%8C%8C%EC%9D%BC-%EC%83%88%ED%8F%B4%EB%8D%94-%EB%8B%A8%EC%B6%95%ED%82%A4-%EC%84%A4%EC%A0%95
전체 글
서버 컴포넌트란?서버 컴포넌트는 서버 측에서 렌더링되는 컴포넌트입니다.주로 서버에서 직접 데이터를 가져오거나, 비동기 작업을 수행한 후 HTML을 생성하여 클라이언트로 전달합니다.필자의 주관적 이해 : 주문이 들어오면(페이지 입장) 망치(JS)로 작업(데이터 가져오기 등) 후 작업물(완성된 HTML)만 보내줌렌더링 위치서버주요 특징클라이언트에 전달되는 HTML을 서버에서 미리 생성하기 때문에 클라이언트에서 실행되는 JavaScript 코드가 필요하지 않습니다.데이터 가져오기와 같은 무거운 작업을 서버에서 처리하여 클라이언트의 부하를 줄입니다.클라이언트 측의 초기 로딩 시간을 줄일 수 있습니다.서버에서만 접근 가능한 리소스나 환경 변수 등을 안전하게 사용할 수 있습니다.사용자가 자주 변화하지 않는 정적 콘..
https://github.com/LDK1009/ClubProject/tree/main GitHub - LDK1009/ClubProjectContribute to LDK1009/ClubProject development by creating an account on GitHub.github.com
아이템 우측 하단에 원을 클릭 시 해당 원의 크기가 커지며 화면을 덮는 애니메이션을 구현하였습니다.import { motion } from "framer-motion";import React, { useState } from "react";import styled from "styled-components";const Item = () => { // 원 클릭 여부 state const [isClick, setIsClick] = useState(null); return ( // 아이템 {/** * 아이템 우측 하단 원 * 클릭 시 isClick 상태가 변경된다. * animate는 isClick이 true일 경우 애니메이션 객체를 전달하도록 설정..
질문1 js는 단일 스레드라 한번에 하나의 작업만 수행할 수 있다.그렇다면 콜스택에는 절대로 2개 이상의 작업이 쌓이지 않는 것이 아닌가?ex) 콜스택에 쌓기 -> 콜스택 실행 -> 콜스택에 쌓기 -> ...반복 답변JavaScript는 단일 스레드이기 때문에 한 번에 하나의 작업만 실행할 수 있습니다. 하지만 콜 스택에는 여러 작업이 동시에 쌓일 수 있습니다.콜 스택은 현재 실행 중인 함수와 해당 함수에서 호출한 다른 함수들을 추적하는 데 사용됩니다. 아래는 콜 스택이 어떻게 작동하는지 설명하는 예제와 함께 좀 더 자세한 설명입니다. 예제 코드 function first() { console.log('First'); second(); console.log('First End');}function ..
https://velog.io/@chchaeun/%ED%8C%8C%EC%9D%BC-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%B2%A8%EB%B6%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8 파일 Drag and Drop 기능을 구현하자!사용자 경험 개선을 위한 파일 Drag and Drop 기능 추가velog.io import React, { useState } from "react";import styled from "styled-components";import dndImage1 from "../assets/DnDBox1.svg";import dndImage2 from "../assets/DnDBox2.svg";import uploadIcon1 from "..
커스텀 훅이란?커스텀 훅(Custom Hooks)은 React의 훅(Hooks) 기능을 사용하여 여러 컴포넌트에서 공통으로 사용되는 로직을 재사용할 수 있도록 해주는 함수입니다.React의 내장 훅(`useState`, `useEffect`, `useContext` 등)을 결합하여 새로운 훅을 만들 수 있습니다.이러한 커스텀 훅은 일반 함수와 비슷하게 동작하지만, React 훅의 규칙을 준수합니다. 커스텀 훅의 목적은 복잡한 로직을 하나의 컴포넌트에 집중시키지 않고, 독립된 함수로 분리함으로써 코드의 가독성과 유지보수성을 높이는 것입니다. 커스텀 훅 사용 이유1. 코드 재사용성 : 여러 컴포넌트에서 공통으로 사용하는 로직을 하나의 커스텀 훅으로 만들면, 중복 코드를 줄이고 재사용성을 높일 수 있습니다. ..