[교육] {코드캠프} 프리캠프 8기 - 5일차(마지막날) (자바스크립트 + 싸이월드 주크박스 탭 부분 완성 + final과제 + git & github)

2021. 10. 22. 18:24

📖 배운 내용

1. 자바스크립트 로그인 창 구현

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>이벤트 감지</title>
    <script>
        function checkValidation() {
            const email = document.getElementById("email").value;
            const password1 = document.getElementById("password1").value;
            const password2 = document.getElementById("password2").value;

            if (email !== "" && password1 !== "" && password2 !== "") {
                document
                    .getElementById("mybutton")
                    .setAttribute("style", "background-color: yellow");
            } else {
                document
                    .getElementById("mybutton")
                    .setAttribute("style", "background-color: none");
            }
        }
    </script>
</head>

<body>
    <input id="email" type="text" placeholder="이메일을 입력해주세요." oninput="checkValidation()"/><br>
    <input id="password1" type="password" placeholder="비밀번호를 입력해주세요." oninput="checkValidation()"/><br>
    <input id="password2" type="password" placeholder="비밀번호를 확인해주세요." oninput="checkValidation()"/><br>
    <button id="mybutton">회원가입</button>
</body>

</html>

비밀번호 확인 칸에 문자열이 쓰였을 때 oninput 속성을 통해 함수를 실행하고 setAttribute로 회원가입 버튼 background-color를 노란색으로 표시할 수 있도록 하였다.

2. 자바스크립트 휴대폰 번호 입력창 구현

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>휴대폰 포커스</title>
    <script>
        function changePhone1(){
            const phone1 = document.getElementById("phone1").value // 010
            if(phone1.length === 3){
                document.getElementById("phone2").focus();
            }
        }
        function changePhone2(){
            const phone2 = document.getElementById("phone2").value // 010
            if(phone2.length === 4){
                document.getElementById("phone3").focus();
            }
        }
        function changePhone3(){
            const phone3 = document.getElementById("phone3").value // 010
            if(phone3.length === 4){
                document.getElementById("phone3").blur();
            }
        }
    </script>
</head>
<body>
    <input id="phone1" type="text" size="3" maxlength="3" oninput="changePhone1()"> - 
    <input id="phone2" type="text" size="4" maxlength="4" oninput="changePhone2()"> - 
    <input id="phone3" type="text" size="4" maxlength="4" oninput="changePhone3()">
</body>
</html>

첫 번째 칸에 숫자 3자리가 적히면 다음 칸으로 커서가 자동적으로 이동할 수 있도록 하였다.
두 번째 칸도 마찬가지로 4자리가 적히면 다음칸에 커서를 focos() 하게 된다.
(의외로 이러한 기능이 없는 웹사이트들이 많은데 생각보다 쉽게 구현이 가능해서 신기했다.)

3. 싸이월드 주크박스 탭, 내비게이션 바 완성

<코드 github 주소>

cyworld-mento

GitHub - K-Junyyy/CYWORLD-Clone-Coding

Contribute to K-Junyyy/CYWORLD-Clone-Coding development by creating an account on GitHub.

github.com

4. Final 과제(회원가입 창 만들기)

🔨 구현한 기능

✔️ 초기 disabled 속성을 주어 인증번호 전송, 인증 확인, 가입하기 버튼 클릭 방지
✔️ 지역 선택란에서 초기값은 "지역을 선택하세요"로 하며, 초기값은 선택 불가
✔️ 성별은 둘 중 하나만 선택 가능
✔️ 휴대폰 번호 입력 시 3, 4, 4자리로 입력할 수 있도록 구현
✔️ 첫째 칸 3자리 입력 시 둘째 칸으로 포커스 이동
✔️ 둘째 칸 4자리 입력 시 셋째 칸으로 포커스 이동
✔️ 셋째 칸 4자리 입력 시 인증번호 전송 버튼 활성화
✔️ 인증번호 전송 버튼 클릭 시 토큰 생성 및 타이머 실행, 인증 확인 버튼 활성화
✔️ 3분 이내 인증 확인 버튼 클릭 시 "인증이 완료되었습니다" 메시지 띄우기
✔️ 3분 동안 버튼을 누르지 않는 경우 인증번호 전송 버튼과 인증 확인 버튼 비활성화
✔️ 그리고 토큰 정보를 "000000", 시간을 "03:00"으로 초기화
✔️ 인증 확인 시 인증 확인 버튼을 "인증 완료"로 변경, 가입하기 버튼 활성화
✔️ 가입하기 버튼 클릭 시 이메일, 이름, 비밀번호, 비밀번호 확인, 지역, 성별 확인
✔️ 조건에 맞지 않는다면 입력창 아랫부분에 빨간 글씨로 에러 표시
✔️ 조건을 모두 만족시키고 가입하기 버튼 클릭 시 에러 메시지 제거 후 가입 확인 메시지

<final.html>

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>회원가입 페이지</title>

    <link href="final.css" rel="stylesheet" />
    <script src="final.js"></script>

</head>

<body>
    <div class="wrapper">
        <div class="title"><h1 style="font-size: 21px;">코드캠프 회원가입</h1></div>
        <div class="email">
            <input id="email" type="text" placeholder="이메일을 입력해 주세요.">
            <div id="emailError" class="error"></div>
        </div>
        <div class="name">
            <input id="name"  type="text" placeholder="이름을 입력해 주세요.">
            <div id="nameError" class="error"></div>
        </div>
        <div class="password">
            <input id="password" type="password" placeholder="비밀번호를 입력해 주세요.">
            <div id="passwordError" class="error"></div>
        </div>
        <div class="passwordCheck">
            <input id="passwordCheck" type="password" placeholder="비밀번호를 다시 입력해 주세요.">
            <div id="passwordCheckError" class="error"></div>
        </div>
        <div class="phone">
            <input id="phone1" type="text" size="1" maxlength="3" oninput="changePhone1()"> -
            <input id="phone2" type="text" size="3" maxlength="4" oninput="changePhone2()"> -
            <input id="phone3" type="text" size="3" maxlength="4" oninput="changePhone3()">

        </div>
        <div class="auth">
            <div id="certificationNumber">000000</div>
            <button disabled id="sendMessage" onclick="getToken()">인증번호 전송</button>
        </div>

        <div class="timer">
            <div id="timeLimit">03:00</div>
            <button disabled id="completion" onclick="checkCompletion()">인증확인</button>
        </div>
        <div class="area">
            <select id="area">
                <option selected disabled>지역을 선택하세요.</option>
                <option>서울</option>
                <option>인천</option>
                <option>경기</option>
            </select>
            <div id="areaError" class="error"></div>
        </div>
        <div class="gender">
            <input id="gender_man" type="radio" name="gender">남성  
            <input id="gender_woman" type="radio" name="gender">여성
            <div id="genderError" class="error"></div>
        </div>
        <div class="line">
            <hr>
        </div>
        <div class="signUp">
            <button id="signUpButton" disabled onclick="signUpCheck()">가입하기</button>
        </div>
    </div>

</body>

</html>

<final.css>

* {
    margin: 0px;
    box-sizing: border-box;
    font-size: 11px;
}

html {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

body {
    width: 45%;
    border: 1px solid black;
}

input{
    border: 1px solid black;
    border-radius: 3px;
    line-height: 35px;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 10px;
}


.wrapper {
    padding: 10px;
}

div {
    padding-top: 3px;
    padding-bottom: 8px;
}

.title {
    text-align: center;
    font-weight: 700;
}

.email input {
    width: 100%;
}

.name input {
    width: 100%;
}

.password input {
    width: 100%;
}

.passwordCheck input {
    width: 100%;
}

.phone {
    display: flex;
    justify-content: space-between;
    line-height: 35px;
}

#phone1 {
    width: 18%;
}

#phone2 {
    width: 30%;
}

#phone3 {
    width: 30%;
}

.auth {
    display: flex;
    justify-content: space-between;
}

.timer {
    display: flex;
    justify-content: space-between;
}

.auth div {
    width: 30%;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

.auth button {
    width: 70%;
}

.timer div {
    width: 30%;
    text-align: center;
    font-weight: 700;
    font-size: 15px;
}

.timer button {
    width: 70%;
}

.area select {
    width: 100%;
    height: 40px;
}

.gender {
    text-align: center;
}

.signUp button {
    width: 100%;
    cursor:pointer;
}

button{
    cursor: pointer;
    height: 30px;
}

.error{
    font-size: 1px;
    height: 20px;
    color:red;
    font-weight: 700;
}

<final.js>

// 휴대폰 번호 입력 부분
function changePhone1(){
    const phone1 = document.getElementById("phone1").value // 010
    if(phone1.length === 3){
        document.getElementById("phone2").focus();
    }
}
function changePhone2(){
    const phone2 = document.getElementById("phone2").value // 010
    if(phone2.length === 4){
        document.getElementById("phone3").focus();
    }
}
function changePhone3(){
    const phone3 = document.getElementById("phone3").value // 010
    if(phone3.length === 4){
      document.getElementById("sendMessage").focus();
      document.getElementById("sendMessage").setAttribute("style","background-color:yellow;")
      document.getElementById("sendMessage").disabled = false;
    }
}

// 문자인증+타이머 부분
function initButton(){
  document.getElementById("sendMessage").disabled = true;
  document.getElementById("completion").disabled = true;
  document.getElementById("certificationNumber").innerHTML = "000000";
  document.getElementById("timeLimit").innerHTML = "03:00";
  document.getElementById("sendMessage").setAttribute("style","background-color:none;")
  document.getElementById("completion").setAttribute("style","background-color:none;")
}

let processID = -1;

const getToken = () => {

  // 인증확인 버튼 활성화
  document.getElementById("completion").setAttribute("style","background-color:yellow;")
  document.getElementById("completion").disabled = false;

  if (processID != -1) clearInterval(processID);
  const token = String(Math.floor(Math.random() * 1000000)).padStart(6, "0");
  document.getElementById("certificationNumber").innerText = token;
  let time = 180;
  processID = setInterval(function () {
    if (time < 0 || document.getElementById("sendMessage").disabled) {
      clearInterval(processID);
      initButton();
      return;
    }
    let mm = String(Math.floor(time / 60)).padStart(2, "0");
    let ss = String(time % 60).padStart(2, "0");
    let result = mm + ":" + ss;
    document.getElementById("timeLimit").innerText = result;
    time--;
  }, 50);
};

function checkCompletion(){
  alert("문자 인증이 완료되었습니다.")
  initButton();
  document.getElementById("completion").innerHTML="인증완료"
  document.getElementById("signUpButton").disabled = false;
  document.getElementById("signUpButton").setAttribute("style","background-color:yellow;")
}


// 가입부분 체크

function signUpCheck(){

  let email = document.getElementById("email").value
  let name = document.getElementById("name").value
  let password = document.getElementById("password").value
  let passwordCheck = document.getElementById("passwordCheck").value
  let area = document.getElementById("area").value
  let gender_man = document.getElementById("gender_man").checked
  let gender_woman = document.getElementById("gender_woman").checked
  let check = true;

  // 이메일확인
  if(email.includes('@')){
    let emailId = email.split('@')[0]
    let emailServer = email.split('@')[1]
    if(emailId === "" || emailServer === ""){
      document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다."
      check = false
    }
    else{
      document.getElementById("emailError").innerHTML=""
    }
  }else{
    document.getElementById("emailError").innerHTML="이메일이 올바르지 않습니다."
    check = false
  }


  // 이름확인
  if(name===""){
    document.getElementById("nameError").innerHTML="이름이 올바르지 않습니다."
    check = false
  }else{
    document.getElementById("nameError").innerHTML=""
  }


  // 비밀번호 확인
  if(password !== passwordCheck){
    document.getElementById("passwordError").innerHTML=""
    document.getElementById("passwordCheckError").innerHTML="비밀번호가 동일하지 않습니다."
    check = false
  }else{
    document.getElementById("passwordError").innerHTML=""
    document.getElementById("passwordCheckError").innerHTML=""
  }

  if(password===""){
    document.getElementById("passwordError").innerHTML="비밀번호를 입력해주세요."
    check = false
  }else{
    //document.getElementById("passwordError").innerHTML=""
  }
  if(passwordCheck===""){
    document.getElementById("passwordCheckError").innerHTML="비밀번호를 다시 입력해주세요."
    check = false
  }else{
    //document.getElementById("passwordCheckError").innerHTML=""
  }


  // 지역선택 확인
  if(area === "지역을 선택하세요."){
    document.getElementById("areaError").innerHTML="지역을 선택해주세요."
    check = false
  }else{
    document.getElementById("areaError").innerHTML=""
  }

  // 성별체크확인
  if(!gender_man && !gender_woman){
    document.getElementById("genderError").innerHTML="성별을 선택해주세요."
    check = false
  }else{
    document.getElementById("genderError").innerHTML=""
  }
  
  if(check){
    document.getElementById("emailError").innerHTML=""
    document.getElementById("nameError").innerHTML=""
    document.getElementById("passwordError").innerHTML=""
    document.getElementById("passwordCheckError").innerHTML=""
    document.getElementById("areaError").innerHTML=""
    document.getElementById("genderError").innerHTML=""
    
    //비동기 처리이벤트
    setTimeout(function() {
      alert("코드캠프 가입을 축하합니다.")
  },0);
  }
}

<코드 github 주소>

https://github.com/K-Junyyy/CYWORLD-Clone-Coding/tree/main/class/final

GitHub - K-Junyyy/CYWORLD-Clone-Coding

Contribute to K-Junyyy/CYWORLD-Clone-Coding development by creating an account on GitHub.

github.com

5. git, github 사용법, 파일 생성부터 commit, push 그리고 잔디심기 까지

편집기로 vscode를 사용했습니다.

git config --global user.name "깃허브name" 
git config --global user.email "깃허브email"

여기에서 name은 아래와 같이 프로필 클릭 시 나타나는 로그인 아이디를 의미합니다.

git config --list

잘 적용됐는지 확인할 수 있습니다.

git remote add origin URL

URL부분은 아래와 같이 저장소의 코드 탭에서 복사해 갈 수 있습니다.

git init

현재 폴더 git 초기화

git status

현재 git 상태

git add .

수정한 파일을 staging 함 (. 은 모든 파일이라는 뜻!)

git commit -m "메시지"

스테이지에 올라올 파일을 커밋함

git push origin main

원격 저장소로 올리기

(git push origin 브랜치 이름)

git checkout -b main

git 브랜치 이동
저의 경우에는 처음의 브랜치가 master였으므로 main으로 옮겨주었습니다.

잔디가 심어졌습니다! ㅎㅎ

💎 후기

사실 처음에 인스타 광고를 보고 신청을 하게 되었고 커리큘럼을 살펴보니 별다른 생각 없이 그저 그랬지만 5일 동안 매일 구로로 가서 4시간 이상씩 강의를 듣고 실습을 진행해보면서 커리큘럼을 굉장히 잘 짰구나 라고 느꼈고 새로 알아가는 내용 또한 많았습니다. 오픈 기념 무료 코스이지만 멘토님들의 뜨거운 열정이 보였고 질 좋은 강의와 노션에 있는 자료들은 굉장한 가치가 있다고 느껴졌습니다. 노션에 있는 알고리즘 문제를 수업 쉬는 시간마다 짬 내서 다 풀어보았는데 혼자 풀어보면서 실력도 확실히 많이 늘었고 정답도 같이 주셔서 제가 못 풀었던 문제에서 어떠한 부분을 놓치고 있었는지 알 수 있었습니다.
또한 CSS display:flex, justify-content, align-items로 요소 정렬하는 것은 항상 헷갈리고 이해가 안 됐었는데 설명을 너무나도 잘해주셔서 확실하게 이해할 수 있었고 싸이월드 제작 실습이 프런트엔드의 개념에 큰 도움이 되었습니다. 마지막 날 수업 종료 직전에 알려주셨던 git과 github 그리고 명령어들로 commit, push 하고 잔디 심는 방법은 아주 유용한 정보였습니다. 다만 아쉬웠던 점은 노션에 git에 관한 정보나 사용 방법, 깃 기초 명령어, 파일 생성부터 잔디 심는 과정에 대한 내용이 없어서 쪼금 아쉬웠지만....! 수업방식, 오프라인 진행, 강의 내용, 배우는 내용 모두 잘 짜여졌다고 느꼈습니다. 멘토님들 항상 친절하게 질문 답변해주셔서 감사드렸고 고생하셨습니다!

저작자표시 비영리

'💻IT' 카테고리의 다른 글

[개발상식] MVC 패턴이란? (Model-View-Controller) (10)	2021.11.05
국내 코딩 부트캠프 가격 비교 (2021년 11월 기준) (17)	2021.11.04
[교육] {코드캠프} 프리캠프 8기 - 4일차 (자바스크립트 + DOM 요소 조작) (0)	2021.10.21
[교육] {코드캠프} 프리캠프 8기 - 3일차 (싸이월드 게임 부분 완성, 자바스크립트 for, if문 + @) (0)	2021.10.20
json 데이터 정렬해주는 사이트 (0)	2021.10.20

코딩 공부 일지