1편, 카카오톡 웹 버전 만들기 (React, Material-UI)

안녕하세요?

 

2021년 9월 25일 세번째 업데이트가 있어 글을 수정합니다.

 

기존의 NextJS + Material-UI에서 NextJS + Chakra-UI로 변경했습니다.

 

이번에 Chakra-UI로 작업한 결과 느낀 점은 굉장히 가볍고 사용하기 쉬운 UI 라이브러리라는 겁니다.

 

Material-UI 가 생각보다 많이 무겁기 때문에 앞으로는 Chakra-UI를 더 많이 사용할 거 같네요.

 

그럼. 많은 이용 부탁드립니다.

 

https://kakaoweb.netlify.app/

카카오톡 웹

 

 

 

안녕하세요?

 

2021년 8월 1일 두번째 업데이트가 있어 글을 수정합니다.

 

기존의 React SPA(Single Page App)에서 NextJS를 사용하여 정적사이트로 빌드 했습니다.

 

그래서 좀더 빠른 속도를 가지게 되었고 향후 확장을 위한 개발 편의성까지 확보 했습니다.

 

많은 이용 부탁드립니다.

 

https://kakaoweb.netlify.app/

카카오톡 웹

 

---

 

안녕하세요?

 

업데이트가 있어 알려 드립니다.

 

제가 만든 완성형 카카오톡 웹 버전이 드디어 일반 메시지 200자까지 사용할 수 있게 업데이트 되었습니다.

 

그래서 카카오가 제공하는 API를 사용하여 거의 완벽한 웹 버전을 구축했으며, PC판이 없을 때 간단하게 사용할 수 있는 편안함을 제공하게 되었습니다.

 

sendDefault 함수의 objectType : 'text' 일 경우 에러가 발생하는 버그가 드디어 해결 되었나 봅니다.

 

일반 메시지는 200자까지 전송가능하며,

 

이미지가 첨부될 경우 100자까지 메시지를 전송할 수 있습니다.

 

이제 본격적인 완성형 카카오톡 웹 버전을 만나보십시요.

 

https://kakaoweb.netlify.app/

카카오톡 웹

---

 

안녕하세요?

 

지난번 C++ 개발 관련 포스팅 후 다음 포스팅 후 뭘 올릴까 고민하다가

 

옛날에 만들었던 카카오톡 웹 버전이 생각났습니다.

 

회사에서 카카오텍 PC 버전을 쓸 수 없을 경우 간단하게나마 웹 상에서 자신의 카카오톡을

 

제한된 범위내에서 컨트롤할 수 있게 해주는 웹서비스인입니다.

 

일단 완성형을 보시죠!

 

https://kakaoweb.netlify.app/

카카오톡 웹

 

 

사용방법은 직관적입니다.

 

메시지를 쓰고 카톡 전송 버튼을 누르면 자신의 카카오톡 아이디 로그인 창이 뜨고

 

 

카카오톡 아이디와 비밀번호를 알맞게 입력하면 자신의 핸드폰에 있는 카카오톡 친구나 채팅방이 뜹니다.

 

원하는 사람이나 채팅방을 고르고 전송하면

 

아까 위에서 입력한 내용이 전송됩니다.

 

 

 

 

 

작동 원리는 카카오톡 디벨로퍼에 가입하면 주어지는 링크 보내는 자바스크립트 API를 씁겁니다.

 

자, 이제 본격적인 개발에 들어가 볼까요?

 

일단, 카카오톡 디벨로퍼에 가입해야 합니다.

 

https://developers.kakao.com/

Kakao Developers

가입은 알아서 하시고,

 

사이트 상단 가운데에 "내 애플리케이션"을 클릭합니다.

 

그러면 다음과 같이 나옵니다.

 

 

저는 벌써 만들어 놓은 talk-cpro95 애플리케이션이 있네요.

 

새로 만들어야 하니까 "애플리케이션 추가하기"를 클릭합시다.

 

 

앱 이름에 "talk2-cpro95"처럼 멋있는 자신만의 앱 이름을 작성합니다.

 

  (여기서 앱 이름에 "kakao"나 "카카오"같은 명칭은 사용할 수 없습니다.)

 

사업자명에는 "개인"이라고 입력하시면 무관합니다.

 

그리고 저장버튼을 클릭합니다.

 

그러면 다음과 같이 뜹니다.

 

 

방금 만들었던 "talk2-cpro95"를 클릭해 봅시다.

 

 

여기서 중요한게 "앱 키"의 "Javascript 키"입니다.

 

나중에 다시 코드에 복사하시면 됩니다.

 

그리고 두번째 "플랫폼"을 클릭합니다.

 

 

우리는 웹상에서 앱을 만들려고 하니까 "Web 플랫폼 등록" 버튼을 누릅니다.

 

사이트 도메인을 입력해야 하는데 각각은 아래와 같습니다.

 

• "http://localhost:3000" 은 리액트 개발시 임시 서버입니다.
• "http://kakao2-cpro95.netlify.app"은 Netlify에 웹호스팅할때 사용할 주소입니다. 나중을 위해서죠!
• "http://k.kakaocdn.net"은 이미지를 전송할 때 사용하는 카카오CDN 서버라서 크로스오리진 에러를 방지하기 위해 입력해야 합니다.

 

저장을 하시면 아래와 같이 Redirect URI를 등록해야 합니다.

 

"등록하러 가기"를 클릭합니다.

 

 

그리고 아래와 같이 입력합시다.

 

 

 

지금까지 카카오 디벨로퍼 설정을 마쳤으니까 본격적인 래액트(React) 개발을 해 볼까요?

 

2편에서 뵙겠습니다.