위코드 2주차 프로젝트 'Instagram' 클론
상당히 오랜만의 벨로그 업데이트이다.
위코드의 2주차는 초보자인 나에겐 레이아웃을 구성하고 코드를 짜넣는 일 만으로도 굉장히 시간에 쫒겼기에 빠르게 시간이 흘렀다. HTML, CSS, Javascript 를 이용하여 Instagram 클론 프로젝트를 시작하였다.
크게는 '로그인 페이지' 와 '메인페이지' 2가지로 나누어서 작업했으며 최대한 현대 인스타그램의 레이아웃을 기준으로 작업하였다. 각 페이지들의 구현목표는 다음과 같다.
로그인 페이지
- 아이디와 비밀번호에 입력값이 있을 때 로그인 버튼의 색상의 변화
- 아이디와 비밀번호의 형식을 체크하여 '로그인 성공' 또는 '실패' 메시지 표시
메인 페이지
- 메인페이지 레이아웃 구성
- 댓글 추가 및 삭제 기능 구현
- '좋아요' 버튼의 클릭시 색상 변화
각 페이지는 개인적으로 위의 목표를 중점으로 구현을 시작하였으며 처음으로 제대로 된 웹페이지 모양을 만드는 작업을 하였기에 구성이나 함수가 조잡하게 보일 수 있다.
우선 먼저 로그인 페이지를 먼저 작업하였고 결과물의 모습은 아래와 같다.
로그인 페이지의 경우 아이디는 이메일 형식을 체크할 수 있고 이메일 형식이 어긋날 경우 alert 을 통해 경고를 띄운다.
비밀번호는 8자 이하의 글자 및 숫자의 입력 시에 alert 창을 띄우는 방식으로 작업되었다
로그인 버튼의 경우 ID/PW input 에 입력값이 들어오면 로그인 버튼의 색이 변화하며 색상 코드는 인스타그램의 색상코드를 참고하였다. 또한 ID/PW input 의 값이 모두 ture 를 반환할 때 로그인이 성공하며 메인페이지로 이동되게 하는데 서버가 없으므로 동일경로 내에 메인페이지 html 파일을 로드하는 방식이다.
위의 설명과 스크린샷 처럼 내 구성의도대로 로그인 페이지가 동작하는 것을 확인할 수 있다.
로그인 페이지의 레이아웃 자체는 생각보다 간단하게 구성 되었다.
크게 나누자면 위의 핸드폰 모양과 로그인 기능이 있는 mainPage 와 아래 링크들이 모여있는 footer 로 나누어져있다.
그리고 메인페이지는 이미지가 있는 좌측과 로그인 기능이 밀집한 우측으로 나누어져있다.
기존의 인스타그램 처럼 핸드폰 이미지 내부의 이미지가 바뀌는 것을 넣고 싶었으나 메인페이지까지 만들어야하는 상황에서 시간 부족으로 인해 그것까지 구현하지 못하였다.
기본적인 레이아웃을 잡고 내부에 모양을 내서 인스타그램 로그인 페이지의 모양새를 따라하는 것 자체는 어려운 일이 아니었다.
그러나 로그인 버튼에 이메일 형식 체크, 비밀번호 글자수 체크를 위한 함수를 구현하는 것이 자바스크립트를 이론으로 배울때와 다르게 막상 직접 함수를 짜보려니 어려운 일이었다.
function checkEmail() {
const inputId = document.getElementsByClassName("userinfoID")[0].value;
var exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
if(exptext.test(inputId)==false){
alert("메일형식이 올바르지 않습니다.");
return false;
} else {
return true;
}
}
function checkPw() {
const inputPw = document.getElementsByClassName("userinfoPW")[0].value;
if(inputPw.length < 8) {
alert('비밀번호를 확인해주세요.');
return false;
} else {
return true;
}
}이메일을 체크하는 함수와 비밀번호를 체크하는 함수는 위와 같이 구성되어 작동하며 위의 스크린샷에도 확인할 수 있듯이 정상적으로 작동됨을 알 수 있었다.
그리고 이제 로그인 버튼에 두 입력값을 확인한 후 로그인 실패와 성공을 가르는 함수는 아래와 같이 구성하였다.
function loginPermit() {
if (checkEmail() && checkPw()) {
alert("로그인 성공")
location.replace("westagram_main.html")
return true
} else {
return false
}
}&& 을 활용하여 아이디 패스워드 모두에게 true 값을 받을 시에 로그인 성공 후 메인페이지로 이동하며, 실패하면 체크 함수에서의 경고창이 나오게 된다.
이처럼 처음으로 클론 프로젝트지만 웹페이지 같은 웹페이지를 만들어봐서 그런지 굉장히 성취감 있고 재미있는 한주였다. 다음 포스트는 메인페이지 작업에 대해서 적어보겠다.
