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 카..

📚 목차 1. AS IS: 동일 파일 업로드 불가한 경우 2. 해결방법 3. TO BE: 동일 파일 업로드 가능한 경우 1. AS IS: 동일 파일 업로드 불가한 경우 아래의 예시로 상황을 설명해 드립니다(그림 1). 파일 업로드 시(i.e., onChange) 팝업이 뜨는 로직을 작성하였습니다. 헌데, 같은 파일을 업로드할 경우 이후 로직이 수행되지 않는 것을 확인하실 수 있습니다. 2. 해결방법 { this.onFileChange(e); e.target.value = ''; }}/> input 태그에서 onChange 옵션에서 파일 업로드 로직 호출 후 event에서 value를 초기화하면 해결 가능합니다. 3. TO BE: 동일 파일 업로드 가능한 경우 코드를 적용하면 위의 그림 2와 같이 같은 파..

📚 목차 1. 404 에러 의미 2. 404 에러 시 리턴 페이지 만들기 3. 결과 1. 404 에러 의미 404 Error는 HTTP에서 파일을 찾지 못 할 시 발생하는 에러 코드입니다. 여기서 맨 앞 숫자 4는 클라이언트 오류를 의미하는 숫자이며, 뒤의 숫자 2개는 구체적인 에러 코드입니다. 이 에러는 서버를 찾긴 했으나 URL에 해당되는 페이지(파일)를 찾을 수 없을 때 발생합니다. 즉, 아래의 그림 1처럼, 개발해 놓지 않은 URL로 접근할 경우, 이에 대응하는 페이지를 리턴하여 사용자에게 올바른 경로로 접근하라고 안내할 수 있습니다. 2. 404 에러 시 리턴 페이지 만들기 리액트에서 404 에러 발생 시 반환할 페이지를 만들어 봅니다. 1) 패키지 설치 npm i react-router-dom..

🛠 테스트용 숫자 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()} ) 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊

❗️ 원인 onClick 이벤트에 함수가 아닌 실행문을 전달할 경우, 렌더링 될 때 onClick 이벤트가 실행됩니다. 위와 같이 작성할 경우, 렌더링 될 때 버튼이 자동으로 클릭됩니다. ✅ 해결방법 {alert("Hey Tech 블로그입니다.")}} /> 위와 같이 작성하면 버튼을 클릭할 경우에만 프로그램이 실행됩니다. 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊

❗️ 에러 상황 이미지를 화면에 출력하기 위해 아래와 같이 작성하였는데 에러를 마주하였습니다. 📝 에러 메시지 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text ✅ 원인 및 해결방법 아래와 같이, 웹 표준에 따라 img 태그는 alt를 작성해야 하며, 내용은 자유입니다. 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊

❗️에러 상황 반복문을 통해 태그 안에 특정 값을 리스트에 넣는 작업을 수행하는 중에 에러를 마주하였습니다. let heyTechList = []; for (i = 1; i