[항해99] 5일차 TIL - 내가 사용한 코드들 (feat. 남의 프로젝트에 발가락 담기)

김헤일리·2022년 11월 19일

TIL 항해99

TIL

목록 보기

4/46

항해에서 첫번째 풀스택 미니 프로젝트가 끝났고, 아쉬운거도 많지만 나름 뿌듯한 점도 많다!
잊지 않기 위해 내가 열심히 작성했던 코드..와 함께 해결하고 싶었지만 그러지 못 했던 코드의 완성본을 적어둬야겠다.
다음 프로젝트땐 더 많이 기여할 수 있으면 좋겠다.

1. 웹사이트 배경으로 유튜브 비디오 Autoplay

우리 조의 프로젝트는 아니었지만, 개인적으로 흥미로워서 같이 구글링을 하면서 열심히 뒤져봤던 코드다!
이유는 알 수 없지만 당시에는 실행이 안됐었는데, 비슷하게 생겼지만 약간 다른 코드는 실행이 됐다. 뭘까?

❌ 실행 실패 코드:

사용된 소스코드(html, css)는 원래 그누보드에서 똑같이 긁어서 사용했었다.
하지만 실행엔 실패했다.😭 영상 링크를 첨부해도 썸네일 상태만 되어있을 뿐 autoplay가 진행되지 않았다.
- 이 문제에 대해선 크롬에서 저작권 이슈로 음소거를 해야한다.
- 근데 음소거 설정해도 실행 안됨,, 🫠

<div class="video-background">
    <div class="video-foreground">
    	<iframe class="ww" src="https://www.youtube-nocookie.com/embed/n0AY4ebPy4w?autoplay=1&loop=1&controls=0&vq=hd720" 
				frameborder="0" 
				allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        		allowfullscreen>
    	</iframe> 
      // 문제가 생겼던 부분은 <iframe> 부분이었다. embed 영상을 가져와서 url만 바꿨는데 실행 실패.
      // src에 담은 링크에서 "...embded/n0AY4ebPy4w?에서 /와 ?사이에 있는 저 문자열이 영상의 key라고 했다.
      // 이때 key 다음에 ?를 넣어서 autoply, look, mute 등을 추가하면 우리가 원하는 자동 재생이 실행되어야 했다.
    </div>
</div>

<div id="vidtop-content">
	<div class="vid-info">
    	<h1>YouTube</h1>
    	<p>Good!</p>
	</div>
</div>

⭕️ 실행 성공 코드:

유튜브 영상을 배경으로 넣을 때 참고할 형식:
- "유튜브 영상링크/embed/영상 키값 ?autoply=1&mute=1"
- 여기 "영상키값" 이라고 되어있는 부분 뒤에 저 "autoply"와 "mute"를 추가해야한다.

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/R7TXQF8bW_Y?autoplay=1&mute=1"
            title="YouTube video player" frameborder="0"
            allow="accelerometer; autoplay; mute; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>
</div> 
// 그누보드에서 긁어온거랑 다르게, "title = youtube video player" 부분을 추가했다.
// 그리고 <iframe> 태그 내부에 있던 class값은 빼버렸다.

아직 이 코드가 정확히 왜 됐는지는 알아내지 못 했지만, 추후 꼭 알아보고싶다.
이레님의 아이디어가 너무너무 마음에 들었기 때문!
나중에 프로젝트를 하게되면 나도 자동 재생을 메인 페이지에 추가하고싶다.

2. 회원가입 시 유효성 검사 (python + javascript)

원래 하고싶었던 방식은 조건에 맞지 않을 경우 [sign up] 버튼을 비활성화 처리하는 것이었지만, 계속 시도해도 실패해서 다른 방식으로 진행했다.
방식을 변경해서... 형식에 맞지 않을 경우 인풋필드를 초기화하고 빈칸인 인풋필드가 있는 경우 [sign up] 버튼 클릭 시 alert 메세지가 뜨도록!

❌ 구현 실패 코드:

파일이 날아가서 없다... 삭제 했었나보다... 왜 그랬니...?
백업을 소중히.. 버젼 관리를 소중히..
심지어 깃에 해당 부분을 커밋한적도 없다. 왜? 실행이 안됐으니까...
다음부턴 실행 안되는 코드도 일단 커밋 해둬야 하는걸까?
마음이 아프다...
- 지금 기억하는건, html에서 [sign up] 버튼 속성에 "disabled"를 추가했다는 것.
- JS 파일에다 각 인풋필드에 먹여놓았던 함수들을 하나로 엮어서 전부 "if" 조건을 달고, 모든 인풋필드가 true일 때 버튼 속성을 disabled = false로 만드려고 했다는 것이다.
  - &&를 이용해서 엮었었다.

⭕️ 구현 성공 코드:

버튼에 먹인 disabled 속성이 절대로 풀리지 않아서 규격에 안 맞을 경우 그냥 인풋 필드 초기화 시켰다.

const clearEmail = function () {
    document.getElementById('id').value = ""
} // 'id'라는 id 값을 가진 코드의 값을 빈 문자열("")로 만드는 함수 설정

verifyEmail = function () {
    let email = $('#id').val(); // email이라는 변수에 id'라는 id 값을 가진 코드의 값을 할당.
    let regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; // 이메일 정규 표현식 가져와서 regExp라는 변수에 할당

    if (email.match(regExp) == null) { // 만약 email의 값이 regExp에서 준 조건과 일치하지 않는다면
        clearEmail(); // 인풋필드의 값을 초기화 시키는 함수가 실행되고, 
        $('#id').focus(); // id'라는 id 값을 가진 코드로 커서가 이동된다.
        alert("올바른 이메일 형식을 사용해주세요!"); // 커서 이동 후 알럿 메세지 발동!
    }
}

const clearPW = function () {
    document.getElementById('pw').value = ""
} // 'pw'라는 'id'값을 가진 코드의 값을 빈 문자열로 만드는 함수 설정

check_pw = function () {
    let p1 = $('#pw').val(); // 'pw'라는 'id'값을 가진 코드를 p1 이라는 변수에 할당

    let charac = /^.*(?=^.{6,10}$)(?=.*\d)(?=.*[!@#$%^&+=]).*$/; // 비밀번호 정규 표현식을 가져와서 charac이라는 변수에 할당

    if (p1.match(charac) === null) { // 만약 p1의 값이 charac의 값과 일치하지 않는다면 
         clearPW(); // 인풋 필드를 초기화 시키는 함수가 실행되고,
         $('#pw').focus(); //커서가 pw으로 이동한다.
         alert('비밀번호 규칙을 맞춰주세요!'); // 커서 이동 후 알럿 메세지 생성
     }
}

const clearConfirm = function () { // 'confirm'이라는 'id'값을 가진 코드의 값을 빈 문자열로 만드는 함수 설정
    document.getElementById('confirm').value = ""
}

function pw_test() {
    let p1 = document.getElementById('pw').value; // p1 이라는 변수에 id 값이 'pw'라는 코드를 할당
    let p2 = document.getElementById('confirm').value; // p2 이라는 변수에 id 값이 'confirm'이라는 코드를 할당

    if (p1 != p2) { // 만약 p1의 값과 p2의 값이 일치하지 않으면,
        clearConfirm(); // 인풋 필드를 초기화 시키는 함수 실행
        $('#confirm').focus(); // 커서가 confirm으로 이동
        alert("비밀번호가 일치하지 않습니다!"); // 알럿 메세지 생성
    }
}