Hey Tech

🙏 들어가며본 포스팅에서는 직접 기획부터 개발까지 주도한 ChatGPT 기반 전생 스토리 서비스를 소개합니다.📚 목차1. 개요 2. 서비스 흐름도 3. 서비스 상세 소개 4. 기술 스택📌 1. 개요본 서비스는 최근 가장 핫한 인공지능(AI) 대화형 서비스 ChatGPT를 활용하여 사용자의 전생을 (재미로) 알려주는 스낵(snack) 콘텐츠입니다. 대화형식으로 제공되는 총 5가지 질문에 대해 타이핑하여 자유롭게 답변하면, 이를 ChatGPT가 고려하여 전생을 분석해 주는 서비스입니다. 프론트엔드는 React로, 백엔드 인프라는 ChatGPT 공식 API와 AWS를 활용하여 구축하였습니다. 🔗 본 서비스는 하기의 링크를 통해 회원가입 없이 무료로 이용하실 수 있습니다. https://previouslife...

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

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

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