하루 만에 채팅 앱 만들기 _라이프해킹스쿨 강의 수강

<개인공부>

by 데브수달 2022. 11. 26. 13:20

728x90

실습환경 2가지 에디터 설치 하기

1.atom.io

2.node.js

(최신판은 보통 에러가 있을 수 있으니, 이전 버젼 사용하는 것을 추천)

Atom 파일 실행- > file->new file -> untitled라는 메모를 쓸 수 있는 파일이 뜸.
해당 파일를 file-> save 버튼 클릭해서 어디에다가 저장할 지 지정 가능

윈도우 ->(내문서 or 바탕화면)-> 제목은 'test.html'로 지정 후 '저장'버튼 누르기

test.html

웹사이트를 만들기 위해서는 3가지를 알아야 한다.

1.Html = 이미지, 입력창,(웹사이트) 영역 구분 (ex. 사이드바, 헤더, 몸통 등등) 용도

2.Css = html로 넣은 요소들을 꾸며주는 용도

3.javascript = 웹 사이트를 움직이게(살아 숨쉬게) 하는 용도

1번째 html 용어에 대해서 알아 보기

#마크업 언어 #열고 닫는 태그 구성 # /없으면 여는 태그 / 있으면 닫는 태그 *모든 사이트는 head와 body 부분으로 이루어져있다. 웹사이트의 정보 넣어주는 곳* *웹사이트내 어떤 언어로 쓰여지는지 utf-8은 한글* *모바일과 pc에서 최적화되서 잘 보이게 세팅해주는 것.* *연산 및 함수를 자바스크립트안에서 사용 가능 * 웹사이트의 내용 부분*

안녕하세요.

*div는 가로로 꽉 차있는 상자(영역 구분을 위해서 사용한다.* *input은 여는 태그로만 이루어짐 *입력구성요소 추가 * *placeholder는 뭘 하는 입력창인지 뜬다.* *체크버튼* *라디오버튼 클릭*

<!DOCTYPE html>
<html>
#마크업 언어 #열고 닫는 태그 구성 # /없으면 여는 태그 / 있으면 닫는 태그
<head> #모든 사이트는 head와 body 부분으로 이루어져있다. #웹사이트의 정보 넣어주는 곳
     <meta charset="utf-8"> #웹사이트내 어떤 언어로 쓰여지는지 utf-8은 한글
        <meta name="viewport" content="width=device-width, initial-scale=1">
        #모바일과 pc에서 최적화되서 잘 보이게 세팅해주는 것.
        <script src="https://code.jquery.com/jquery-latest.js ">
<title>CEO개발부트캠프 </title> # 제목 -웹사이트 위에 배치되서 보인다.

        <style>
         #ceo{
             backgroud-color:black;
                color:white;
               }
            #Lifehackinf{
             width:500px;
               }
         </style>

         <script>
          alert("안녕하세요") #경고창 띄우기
            $(document).ready(()=>{
             $("ceo").on("click",()=>{
                 alert("클릭한 경우");
                });
             });
         </script>

    </head>

    <body> # 웹사이트의 내용 부분
<div id="ceo" > 안녕하세요.</div>
        #div는 가로로 꽉 차있는 상자(영역 구분을 위해서 사용한다.
        <input id="Lifehacking" type= "text" placeholder="메시지를 입력해주세요.">
        #input은 여는 태그로만 이루어짐  #입력구성요소 추가
        #placeholder는 뭘 하는 입력창인지 뜬다.
        <input type= "checkbox"> #체크버튼
        <input type= "radio"> #라디오버튼 클릭
    </body>
</html>

채팅 앱 만들기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>비밀 채팅앱-코딩품은해달</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
    <script src="./ceocamp.js"></script>
    
    <script>
    	$(document).ready(()=>{
        
        	loadMsgs();
        
        	$("btn").on("click",()=>{
            	sendMsg();
               
            });
            $("#messahe").keyDown((key)=>{
            	if(key.keyCode == 13){ sendMsg() };
            })
        });
    
    <style>
    	#container{
        	border:1px solid black;
            width:100%;
        }
        #header{
        	border:1px solid black;
            text-align: center;
            width:100%;
        }
        #chatlist{
        	height:500px;
            width:100%;
            overflow: scroll;
        }
        #bottom{
        	border:1px solid black;
            height:20px;
        }
        #btn {
        	float:right;
            width:14%;
            color:white;
            backgroud-color:black;
        }
        #massge{
        	float:left;
            width:84%;
       }
       </style>
        
    
  </head>

  <body>
  	<div id="container">
    	<div id="header">
        비밀채팅-코딩품은해달
        </div>
        <div id="bottom">
        	<input id="message">
            <div id="btn"> SEND</div>
        </div>
     </div>     
  </body>
</html>

실습예제2 에서 파일 풀기 아톰으로 예제2 열기

cmd -> cd

npm install -g firebase 설치하기

구글계정 로그인

firebase 에서 새프로젝트 생성

파이어베이스 에서 리얼타임 데이터 베이스 사용

미국

잠금 모드로 시작 사용설정

세팅 완료

프로젝트 개요 - >앱 아이콘 클릭 -> 코드캠프 ->등록

ceocamp.js에다가 const 삭제하고 다시 cmd에 있는 내용 붙여넣기

프로젝트 아이디 복사 해서

.firebaserc에다가 붙여넣기

터미널로 넘어와서 > firebase deploy 엔터'

firebase deploy는 수정된 소스가 적용되는 것 !!

네이버 서버에서 가져오는 것

파이어베이스라는 컴퓨터 서버에 있는 것을 불러오는 것

파이어베이스에 전송되서 그 html파일이 불러와지는 것

호스팅- 다른 컴퓨터에서도 내가 만든 도메인으로 들어올 수 있는 것

디폴로리

라이프해킹스쿨- 채팅앱만들기 후기

22.12.31까지 수강기간이라서 빠르게 큰 화면으로 실행해보기 위해서 pc방에 와서 수업을 듣는데,

정말 채팅앱 만들기에 필요한 부분들만 간략하게 설명해줘서 실제 구현해볼 수 있도록 진행해주셨다.

알던 내용들은 다시금 복습하는 계기가 되고, 모르던 부분은 새롭게 알게되는 계기가 되었으며,

서버에서 html를 불러와서 웹사이트에 표시되게끔 하는 거에 대해서 정확히 이해할 수 있었다.

현재 atom.io 웹사이트가 500에러가 떠있어서 설치를 못해서 실습을 온전히 진행 하지 못했지만,

티스토리에 정리한 내용을 바탕으로 그리고 다운 받아놓은 예제파일을 바탕으로 12월 말에 다시금 실행해서 비밀 채팅앱 포트폴리오를 만들어볼 예정이다.

정말 간략하게 디자인되어있는 부분이기에 내가 추가하고 싶은 부분들을 추가하거나 꾸며서 새롭게 올려봐야겠다 ㅎㅎ

현재 oz코딩스쿨이라고 해서 국비지원 첫 실행하는 부트캠프가 있는데, 사실 설명회를 듣고 받은 채팅앱 강의이지만,

회사만 안 다니는 상태라면 좋은 종은 조건과 좋은 멘토들과 함께 큰 성장을 할 수 있는 부트캠프일 것 같다는 생각을 했다.

내년 여름에도 다시금 새롭게 개강한다고 하니 , 처음개강하는 것만큼 같은 조건일지는 모르지만 꼭 한 번 참여하고 싶다는 생각을 했다 .

강의를 진행해주신 이한별 선생님께 감사하다는 말씀을 블로그통해서 드립니다.

728x90

'<개인공부>' 카테고리의 다른 글

방송대_유비쿼터스컴퓨팅개론 정리하기 (0)	2023.01.07
[DAY0]HTML+CSS+JS 온라인 스터디 1기 _책 구입 인증 및 다짐 (0)	2022.12.08
[3강. JSP개요]JSP프로그래밍 _예제모음 (0)	2022.11.19
[8과] JSP프로그래밍_쿠키 필기하기 (0)	2022.11.19
[2강.JSP 프로그래밍 개발 환경 설정하기] JSP프로그래밍 (0)	2022.11.13