스파르타 덕담 공유 Sample Code - Html & JS

cliche-2 2022. 2. 6. 18:36

2022. 2. 6. 18:36

728x90

Front 페이지 만든다길래 자바 스크립트 좀 만질 줄 알았는데, 타이핑 연습용 프로젝트였다. 사실 타이핑 연습도 아니다. 복붙 하라고 코드를 다 제공해줬으니까. 코딩은 아니고 HTML 구조를 배우는 강의이다. 내용이 없어서 회고랄건 없고 해본 거 정리나 하는 글.

아무튼 그렇게 복붙한 html 페이지를 업로드하면 저장소에 있는 js 파일과 조합해서 배포해주는 것 같다. 아래는 그렇게 배포당한 페이지이다.

여행자 님의 덕담 페이지

덕담 한마디 남겨주세요!

deokdam.spartacodingclub.kr

Open Graph Protocol

Ogp ( https://ogp.me/ )

새롭게 배운건 og 태그; 링크 미리보기에 담을 내용을 규정하는 방식이다. HTML meta 태그에 og 속성값을 지정해주면 된다.

<html>
<head>

<!-- 필수 메타 속성 -->
<meta property="og:title"	content="제목"/>
<meta property="og:type"	content="음악,기사,동영상_등_개체_유형"/>
<meta property="og:image"	content="이미지URL"/>
<meta property="og:url"		content="개체의URL"/>

<!-- 선택 메타 속성 중 일부-->
<meta property="og:description"	content="2문장_정도의_설명"/>
<meta property="og:locale"		content="언어_DEFAULT_en_US"/>

</head>
...
</html>

여태 미리보기 기능은 해당 주소로 요청하여 받은 페이지 전체를 파싱한 다음, 임의의 이미지와 글을 가져와서 보여주는 줄 알았다. 굳이 그런 수고를 하지 않기 위해 head에 내용을 요약해주는 형태인 것 같다.

메타(구 페이스북)에서 처음으로 개발한 프로토콜이라고 한다. 정말 별 것 아닌 것 같은 기능인데 지금은 모두가 쓸 만큼 널리 퍼져있다. 오늘도 반성하게 된다. 사소하다고 생각한 것이 세상을 바꿔나가는 것을 보며, 내 편협한 시선을 교정할 필요가 있음에.

Amazon S3

Amazon S3 - 저장소 서비스

해당 예제에서 필요한 모든 리소스(폰트, 이미지, 코드 등)는 S3에서 가져온다.

<!-- 이런 -->
<meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/ogimage.png" />
<!-- 식으로 -->
<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script>

웹 페이지 호스팅도 CloudFront - S3로 하고 있다.

프런트 기능 뜯어보기

궁금했던 자바 스크립트 파일을 읽어보기로 했다. 수업에서 작성한 html 페이지에서 참고하는 js 파일 주소를 그대로 타고 들어가서,

스크립트를 얻었다. 혹은 개발자도구(F12 - Source)에서 확인해도 된다.

프런트엔드를 잘 아는 건 아니지만 일단 줄바꿈 안된 앞부분은 jquery 라이브러리겠거니 하고 날렸다. 어차피 읽는 용도니까 아래 부분만 남김. (한글이 깨질수도 있는데 중요한 건 아니니까 인코딩은 무시한다)

많은 기능이 있는 페이지가 아니라서 내용도 간단하다.

$(document).ready(function(){
    if (checkPublished()) {
        set_bg();
        make_footer();
    }
    list();
    $('.btn').attr('onclick','post()')
});

주소에 http가 포함되었으면 -> 배경 이미지 설정(set_bg), footer 설정(make_footer)해주고
덕담 목록과 좌표 받아와서 바구니 div 안에 리스팅한 뒤 (list)
덕담 남기기 버튼 클릭 -> 덕담 내용 유효성 체크하고 서버에 전송(post)

getRandomInt()

그런데 위 파일만 봤을때 난수 생성 함수는 대체 어디서 쓰는 건지 모르겠다. 난수가 필요할 때는 덕담 좌표값 구할 때 말고 있나 싶긴 한데, 정작 post()에서는 getRandomInt()를 콜 하지 않는다.

덕담 등록 시 msg만 보내지만 리스트로 반환되는 값에는 좌표가 있는 걸 보면, 받은 메시지에 대한 좌표값을 서버에서 계산하는 모양이다. 아니면 죽은 함수거나.

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min;
}

post()

[바구니에 덕담 남기기] 버튼을 클릭하면 post()가 실행되고, 데이터를 등록하기 위해 post타입으로 API를 호출한다. 입력한 메시지 유효성 검사를 post()에서 같이 실행한다. 예를 들면 내용 미입력, 글자 수 제한, 그 외 무시할 문자를 검출하는 작업이다.

function post() {
    let msg = prompt('�뺣떞�� �낅젰�섏꽭��') // 대충 덕담 입력하라는 내용
    
    /// 빈 값이면 종료
    if (msg === null) {
        return
    }
    /// 글자수 5자 미만이면 종료
    if (msg.length < 5) {
        alert('5湲��� �댁긽 �낅젰�섏꽭��!') // 5글자 제한있다는 내용
        return
    }
    /// ; 또는 \\를 지우고 메시지 저장하기
    /// 코드로 인식할까봐 해당 문자들을 지우는 것 같음
    msg.replace(';','').replace('\\','')
    
    $.ajax({
        type: "POST",
        url: "https://spartacodingclub.kr/api/free_newyear_2022/write", // 덕담 입력 시 호출하는 REST API
        data: {'mycode':mycode, 'msg':msg},
        success: function (response) {
            alert('�꾨즺!'); // 완료!라는 내용
            window.location.reload();
        }
    })
}

수정한 자바 스크립트 파일 적용하기

스크립트는 서버에 있는 파일을 가져와서 페이지 로드 시 적용하므로 로컬에서 수정해봤자 의미가 없다. 그래서 수정한 자바 스크립트를 적용하고 싶다면, 우리가 건드릴 수 있는 유일한 파일인 index.html을 커스터마이징해야 한다. (다른 방법이 있을 수도 있지만 일단 프런트알못인 내가 할 줄 아는 건 이것밖에 없다.)

1. 저장소에 있는 자바 스크립트 파일을 참조하는 이 코드를 주석처리한다.

<!--<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script>-->

2. 기능은 그대로 동작해야 하므로 jquery CDN을 추가해준다. 어차피 기본 기능만 쓰는 것 같아서 아무거나 긁어옴

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

3. 커스터마이징 한 free_newyear_2022.js의 내용을 <script> 태그 안에 붙여 넣는다.

<head>
	<script>
    	let mycode = '...';
        
        // Paste code Here
        
    </script>
</head>

4. 수정한 index.html을 배포한다.

(5. 이제는 한 글자 덕담도 입력할 수 있다.)

... 뭘 한 건지 모르겠다. 제발 생산적인 것 좀 하자

728x90

저작자표시 비영리

'📗 학습과 개발 기록 > Web' 카테고리의 다른 글

NodeJS 기초 샘플 (0)	2022.02.03
JWT(JsonWebToken) - 개념 (0)	2021.06.21

𝙯𝙚𝙥𝙩𝙜𝙢𝙠