Dseok의 코딩스터디

📌 slice()란?JavaScript의 slice() 메서드는 배열(Array) 또는 문자열(String)에서 특정 부분을 추출하여 새로운 배열이나 문자열을 반환하는 메서드입니다.✅ 기본 문법array.slice(start, end);string.slice(start, end);start: 추출을 시작할 인덱스 (0부터 시작)end: (옵션) 종료 인덱스 (이전 인덱스까지 포함, 해당 인덱스는 제외됨)원본 데이터는 변경되지 않음 (불변성 유지)📌 slice()의 주요 활용 사례배열에서 특정 요소 추출문자열에서 특정 부분 가져오기배열 복사 (얕은 복사)마지막 몇 개의 요소 가져오기페이지네이션 (데이터 나누기)배열에서 특정 구간 삭제 (splice()와 비교)Immutable 방식으로 배열 조작하기배열..

📌 useMemo란?React의 useMemo는 컴포넌트가 리렌더링될 때 불필요한 연산을 방지하고 성능을 최적화하는 Hook입니다. 비싼 연산(heavy computation)이나 의존성이 변경되지 않는 데이터를 메모이제이션(memoization)하여 저장하고, 불필요한 재계산을 방지합니다.✅ 기본 문법import { useMemo } from "react";function Component({ value }) { const computedValue = useMemo(() => { return value * 2; // 계산된 값 저장 }, [value]); return 계산된 값: {computedValue};}useMemo(() => { 연산 }, [의존성]) → 의존성이 변경될 때만 ..

📌 useRef란?React의 useRef는 DOM 요소나 값의 변화를 감지하지 않고 유지할 수 있는 참조(ref)를 생성하는 Hook입니다. 렌더링과 관계없이 데이터를 저장할 수 있으며, 컴포넌트가 리렌더링되어도 초기화되지 않는 값을 관리하는 데 유용합니다.✅ 기본 문법import { useRef } from "react";function Component() { const myRef = useRef(initialValue); return Hello;}useRef(initialValue): 초기값을 설정할 수 있으며, current 속성을 통해 접근 가능ref={myRef}: DOM 요소에 ref 속성을 설정하여 직접 참조 가능📌 useRef의 주요 활용 사례DOM 요소 직접 조작값을 저장하지만..

useEffect란? React는 UI를 구축하기 위한 라이브러리로, 컴포넌트의 상태(state)와 속성(props)에 따라 화면을 렌더링합니다. 그러나 **데이터 가져오기, 수동으로 DOM을 조작하기, 구독 설정 등과 같은 부수 효과(side effects)**를 처리해야 할 때가 있습니다. 이러한 부수 효과를 관리하기 위해 React는 함수형 컴포넌트에서 useEffect Hook을 제공합니다. useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 도와줍니다. 클래스형 컴포넌트의 생명주기 메서드인 componentDidMount, componentDidUpdate, componentWillUnmount를 대체하며, 함수형 컴포넌트에서도 이러한 생명주기 메서드의 기능을 구현할 수..

📌 개요HTML, CSS, JavaScript를 활용하여 디지털 모래시계 타이머를 구현합니다. 사용자가 버튼을 클릭하면 모래가 흘러내리는 애니메이션과 함께 타이머가 시작되며, 시간이 끝나면 알림을 출력하는 기능이 포함됩니다. 📌 구현 기능버튼을 클릭하면 타이머 시작모래가 점점 차오르는 애니메이션 효과 적용타이머 종료 시 메시지 출력JavaScript의 setInterval()을 활용하여 시간 감소📌 HTML 구조 ⏳ 디지털 모래시계 10초 남음 타이머 시작  📌 코드 설명✅ 1. HTML & CSS 구성sand-timer: 모래시계 컨테이너sand: 모래 애니메이션 영역timer-text: 타이머 텍스트 표시button: 타이머 시작 버튼✅..

📌 개요HTML, CSS, JavaScript를 활용하여 클릭할 때마다 랜덤한 얼굴(이모지, 아이콘, SVG 등)을 생성하는 기능을 구현합니다.이 기능을 통해 랜덤한 표정, 얼굴형, 액세서리 등을 조합하여 다양한 얼굴을 생성할 수 있습니다. 여기서는 Math.floor(Math.random()) 함수가 핵심입니다. 아래 MDN을 한번 보세요! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random Math.random() - JavaScript | MDNMath.random() 정적 메서드는 0보다 크거나 1보다 작은 부동 소수점 의사 난수를 반환하며, 해당 범위에서 거의 균일한 분포를 가지므로 원..

📌 개요HTML, CSS, JavaScript를 활용하여 간단한 채팅봇 인터페이스를 구현해볼겁니다. 사용자가 입력한 메시지에 대해 자동 응답하는 기능을 포함하며, 기본적인 챗봇 대화 흐름을 설정합니다. 현재 서버가 없기 때문에 데이터는 정해 놓고 구현을 합니다. 답변을 정해 놓았기 때문에 한정적입니다.😂 📌 구현 기능사용자가 입력한 메시지를 채팅창에 표시챗봇이 자동으로 응답 메시지 출력간단한 프롬프트 기반 응답 (예: 인사하면 인사 응답)UI 스타일링을 통해 실제 채팅 앱 같은 느낌 제공📌 HTML 구조 전송  📌 코드 설명✅ 1. HTML & CSS 구성chat-container: 채..

📌 개요HTML의 요소에 사용자가 값을 입력하면 리스트()가 동적으로 추가됩니다. 이후, 추가된 요소들 중 랜덤하게 선택된 요소가 3초마다 깜빡이는 효과를 구현합니다.이 기능은 JavaScript의 DOM 조작 및 이벤트 처리를 활용하여 구현됩니다. 📌 구현 목표사용자가 에 값을 입력하고 버튼을 누르면 요소가 생성됨생성된 요소를 객체로 관리하여 랜덤하게 선택3초마다 무작위로 선택된 요소가 깜빡이는 효과 적용📌 HTML 구조 랜덤 깜빡이기 기능 추가   📌 코드 설명✅ 1. 사용자 입력값을 리스트에 추가addButton.addEventListener("click", () => { const value = inputField.value.trim(); /..

📌 map() 메서드란?map() 메서드는 배열(Array)의 각 요소를 변환하여 새로운 배열을 반환하는 JavaScript 내장 메서드입니다. 기존 배열을 변경하지 않고, 새로운 배열을 반환하는 것이 특징입니다.✅ 기본 문법const newArray = array.map(function(element, index, array) { return element;});element: 현재 순회 중인 요소index: 현재 요소의 인덱스 (선택 사항)array: map()을 호출한 원본 배열 (선택 사항)✅ 화살표 함수 문법const newArray = array.map((element, index) => element * 2);✅ 설명: 위 코드는 배열의 모든 요소를 2배로 변환하여 새로운 배열을 반환합니..

📌 forEach()란?forEach() 메서드는 배열(Array)의 각 요소를 순회(iterate)하며 지정된 함수를 실행하는 JavaScript 내장 메서드입니다.기존의 for 루프와 달리 더 간결하고 가독성이 높은 코드 작성이 가능합니다.forEach()는 배열의 각 요소를 반복하면서 콜백 함수(callback function)를 실행하며, 원본 배열을 변경하지 않고 순회만 수행합니다. 따라서 새로운 배열을 반환하는 map()과는 차이가 있습니다. 또한 break나 return으로 반복을 중단할 수 없어 특정 조건에서 반복을 멈추려면 some()이나 every() 같은 다른 메서드를 고려해야 합니다. MDN 공식 문서도 참고해보시기 바랍니다.https://developer.mozilla.org/k..