DATA101

📌 들어가며 React Hook을 활용하여 웹 페이지에서 카톡 플러스 친구 채널과 1:1 채팅을 연결하는 기능이 포함된 버튼을 만드는 과정을 소개합니다. 📚 목차 1. 카톡 플러스 친구 생성 2. 카톡 앱 서비스 생성 3. 카카오 SDK 추가 4. 채팅 기능 추가 5. 결과 1. 카톡 플러스 친구 생성 연결할 카톡 플러스 친구 채널을 생성합니다. https://center-pf.kakao.com/ 카카오톡 채널 관리자센터 세상의 모든 비즈니스를 완성합니다. 지금 무료로 만들어 새로운 비즈니스 홈을 경험하세요. center-pf.kakao.com 2. 카톡 앱 서비스 생성 아래 링크를 통해 카톡 앱 서비스를 생성합니다(그림 1). https://developers.kakao.com/console/app 카..

🛠 테스트용 숫자 100조를 준비해 봤습니다. let testNum = 100000000000000; 숫자형 변수를 코드 맨 앞에 입력해 줍니다. [Number].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') ✅ 실행 결과 아래와 같이 정상적으로 콤마를 붙여준 것을 확인하실 수 있습니다. 포스팅 내용에 오류가 있을 경우 댓글 남겨주시면 감사드리겠습니다. 그럼 오늘도 행복한 하루 보내시길 바랍니다😊 고맙습니다.

❗️에러 상황 return에서 아래와 같이 코드 작성 후 실행 시 에러 발생 return ( {function} ) 📝에러 메시지 Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. ✅해결책 다음과 같이 함수명 뒤에 괄호 붙여주면 해결됩니다. return ( {function()} ) 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊

Step 1. 디렉토리 접근 터미널을 통해 package-lock.json과 node_modules 폴더가 위치한 디렉토리로 이동합니다. Step 2. package-lock.json 삭제 rm -rf package-lock.json Step 3. node_modules 삭제 rm -rf node_modules Step 4. npm 모듈 재설치 npm install 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊

🔥 목표 JavaScript와 HTML을 활용하여 간단한 Interactive Web 기능을 구현해 본다. 예제 간단한 예제를 실습해 봅니다. HTML을 활용해 버튼 UI를 생성하고 웹에 출력하고, JavaScript를 통해 사용자가 버튼을 클릭하는 것을 감지하여 클릭 횟수를 실시간으로 업데이트하는 것을 구현해 봅시다. 실습 코드 index.html Total Click: 0 버튼 실행결과 버튼 클릭 전입니다. 아래와 같이 버튼을 클릭하면 웹 페이지 및 콘솔에 클릭 횟수가 출력되는 것을 확인할 수 있습니다. JavaScript와 HTML를 활용하여 간단한 Interactive Web 기능을 구현해 봤습니다. 포스팅 내용에 오류나 질문이 있다면 댓글 남겨주시면 감사드리겠습니다. 고맙습니다 :)

🔥 목표 자바스크립트(리액트)에서 Promise의 역할과 상태 3가지에 대해 이해한다. 📝 목차 1. Promise는 무엇인가? 2. Promise의 역할 3. Promise의 상태(State) 3.1. Pending(대기) 3.2. Fulfilled(이행) 3.2.1. 소개 3.2.2 Promise 객체 연결 3.3. Rejected(실패) 3.3.1. 소개 3.3.2. 활용 예시 1. Promise는 무엇인가? JavaScript(React)에서 Promise는 비동기 처리에 활용되는 객체입니다. 여기서 비동기 처리란 line by line 순차적으로 특정 코드의 실행을 끝까지 기다리지 않고 다음 코드를 선제적으로 처리하는 것을 의미합니다. 2. Promise의 역할 Promise는 주로 웹 서비스 ..

💡 목표 JavaScript에서 배열 인덱싱을 통해 원소를 출력, 제거, 추가하는 방법에 대해 학습한다. 1. slice 함수: 특정 구간 인덱스의 원소 반환 함수 원형 배열.slice(시작 인덱스, 끝 인덱스) slice 함수는 특정 구간의 인덱스에 해당하는 원소를 반환합니다. 2개의 정수형 매개변수를 전달하는데 각각 시작 인덱스, 끝 인덱스입니다. 특히, 끝점 인덱스는 포함하지 않기 때문에, 원소를 추출하는 구간을 수학적으로 표현하면 [시작점, 끝점)입니다. 예제 코드 let arr1 = [1, 2, 3, 4, 5, 6, 7, 8]; let arrSlice = arr1.slice(2, 6); // [start, end) 구간 인덱싱 console.log(arrSlice); // 3, 4, 5, 6 위..

💡 목표 JavaScript에서 배열의 원소 추가/삭제하는 방법에 대해 이해한다. 들어가며 배열 선언 const arr = [80, 20, 10, 99, 1234]; 위와 같이 배열 객체를 생성하는 동시에 초기화했습니다. 1. concat 함수: 배열 간 병합 let arrConcat = arr.concat(5678); console.log("arr: ", arr); // [ 80, 20, 10, 99, 1234 ] console.log("arrConcat: ", arrConcat); // [ 80, 20, 10, 99, 1234, 5678 ] consoloe.log('----------------------------'); arrConcat = arr.concat([111, 222]); console...