세번째 프로젝트: Talky

Talky: HTML, PHP, mySQL을 이용해 채팅 어플리케이션 구현
👉 https://github.com/SumiSeo/talky

📅 작업기간
2021/8/25 ~ 8/28

🕹 기술스텍
HTML/CSS
JavaScript(ES6+)
PHP
mySQL

🙆🏻‍♀️ 주요구현사항
모든 페이지의 레이아웃 구현
AJAX를 이용하여 리로딩하지 않고 페이지 업데이트 구현
PHP를 이용해 form에 따라 새로운 페이지로 리디렉팅
HTML->PHP->mySQL을 이용하여 프론트앤드-백엔드 통합 구축

---

얏호! 처음으로 백엔드를 이용하여 홈페이지를 구축하였습니다.

form에서 입력받은 정보를 PHP로 -> mySQL로 전달하여 데이터 베이스에 저장하였습니다. 위의 화면과 같이, 유저 네임을 입력하고 메시지를 입력하면
1. 유저 이름
2. 메시지 내용
3. 메시지가 작성된 시간

채팅 메시지 로딩창으로 넘어갑니다. 화면상으로는 같은 페이지에 머무는 것 같지만 실제로는 그렇지 않습니다. 폼에서 입력받은 정보를 데이터베이스로 구축해주는 또 다른 php파일이 있습니다.

 try   {
        $db = new PDO("mysql:host=localhost;dbname=batch13;charset=utf8", "root", "");
        }
 catch (Exception $e) {
            die("Error : " . $e->getMessage());
        }

php가 받아온 정보들을 데이터 베이스로 전달해주고 난 즉시 위의 동일 화면으로 redirection 해주어서 화면상에선 별 다른 변화가 없어보긴 하지만요.

🔍 부딪혔던 문제와 해결 과정(1)

• 페이지가 리디렉팅 되는 순간 폼에서 받아온 정보들을 사라져 버리고 맙니다. 이때 필요한 것은 뭐다? 쿠키입니다. 🍪 처음 쿠키와 세션을 접하고 유저에게서 받아온 정보를 전부 세션과 쿠키로 저장해버리고 싶었습니다. 그러나, php도 다른 프로그래밍 언어와 마찬가치로 필요한 것만 variable로 저장해도 충분합니다.

if(isset($_POST["username"])){
        setcookie("username", $_POST["username"], time()+365*24*3600,null,null,false,true);
}

---

쿠키를 이용하였기 때문에 유저 이름은 한번 입력되면, 계속 저장할 수 있기 때문에 input의 value로 저장해주어 유저가 동일할 경우 이름을 계속 입력하는 수고를 덜어주었습니다. 또한, 유저가 바뀔 때마다 화면 중앙의 hello! Cornell! 과 같이 greeting이 바뀝니다.

🔍 부딪혔던 문제와 해결 과정(2)
결국 유저가 입력하는 name의 value와 greeting의 코드가 같다는 것을 발견하여 변수 값을 따로 입력해주지 않고 동일하게 선언해주었습니다.

<?php 
        $username = isset($_COOKIE["username"]) ? $_COOKIE["username"] : "";
?>

변수를 입력할 때 php코드를 줄여줄 수 있었습니다.

<li> <h4>Hello! <span> <?php echo $username?></span></h4></li>  

value = <?php echo $username;?>

처음엔 두 코드 모두 ternary operation을 이용하여 화면상 어지럽고 반복되는 코드였는데 수정해주니까 훨씬 readable합니다 :)

---

🔍 부딪혔던 문제와 해결 과정(3)
유저가 바뀔 때마다, 화면에 display되는 유저 이미지를 바꿔주고 싶었는데, 이 데이터를 sql에 저장하기는 좀 힘들었습니다. 현재 계획으로는, url을 저장하여 소스 코드식으로 입력을 해주던지, 아니면 다른 데이터 파일을 이용하여 이미지를 저장할 생각입니다. sql을 이용할 경우 이미지 파일을 어떻게 다룰 것인가에 대한 논의가 생각보다 다양하여 조금 더 고민해본 후 , 작업을 할 생각입니다.

---

👁 프로젝트 후기

프론트앤드에서도 할 수 있는 것을 백엔드에서 할 수 있고, 백엔드에서 할 수 있는것을 프론트앤드에서도 할 수 있다. 또한 백엔드 언어인 php에서 할 수 있는 기능들을 sql에서도 할 수 있다. 프론트앤드부터 백엔드를 통합적으로 구축하며 느낀 점은, 언제 어떤 언어를 이용하여 최상의 결과물을 낼 것인가 이다. 데이터 베이스로 보낼 때부터 데이터를 거를(?)것인지, 유저에게 보여줄 때 데이터를 filtering할 것인지 등... 개발 전반에 대한 사고력을 좀 높인 것 같았다. 나는 늘 프론트앤드에 자신이 있었고 왠지 백엔드는 안맞을 것 같다는 생각이 있었는데, 프론트 앤드를 거쳐 백엔드와 합쳐지는 과정이 정말 짜릿한 쾌감을 준다 ㅎㅎㅎ 🎉 이것이 개발의 맛인가 :)
나는 풀스택 개발자가 되기를 정말 잘 한 것 같다. 둘중에 한개만 배우고 공부했더라면 몰랐을 개발에 대한 전반적 이해력이 상승한 것 같아 뿌듯하다. 현재는 백엔드를 이용한 개인 블로그 구축중이며 내 자신 화이팅이다 ! 그리고 이미지 데이터를 어떻게 다룰 것인지도 꼭 해결할 것이다. 🙆