탐구소년

안녕하세요. 오늘은 웹문서에 바닐라 자바스크립트 코드를 추가하여 무한스크롤을 구현한 예를 기록해보려 합니다. 스크롤이 최대치(콘텐츠의 끝)까지 내려가면 자바스크립트 코드에 의해 새로운 콘텐츠가 생성 및 추가되는 방식으로 구현한 코드입니다. HTML, CSS, 자바스크립트 코드를 차례대로 살펴보고, 마지막에 전체 코드를 공개하였습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 무한스크롤 1번째 블록 2번째 블록 section 태그에는 두 개의 div 가 포함되어 있는데, 각각에는 class="box"가 추가되었습니다. 이 box 요소가 무한하게 추가될 요소입니다. 스크롤을 내리면 내릴수록 section의 하위 태그 개수가 증가할 예정입니다. CSS 1 2 3 4 5 6 7 8 html..

안녕하세요. 오늘은 구글 서치 콘솔에 내 사이트 등록하는 방법을 정리해보겠습니다. 개인 기록용으로 급하게 남기는 포스팅이라,, 그리 친절하고 자세하지는 않을 듯한 ㅋㅋ 주로 티스토리 블로그를 운영하시는 분들이 검색이 잘 되게 하기 위해서 이러한 작업을 수행하는 경우가 많은데, 이 포스팅에서는 개발자가 직접 개발한 페이지(웹서비스)를 등록하는 절차를 안내하도록 하겠습니다. 그러나 블로그 등록 절차와 사실상 아무런 차이가 없으니 참고해주세요(캡쳐 이미지 등이 조금 다를 뿐입니다). 1. 구글 서치 콘솔에서 속성 추가하기 구글 로그인이 되어 있는 상태에서 구글 서치 콘솔(search.google.com/search-console/)에 접속합니다. 그러면 좌측 상단에 '속성 검색'이라는 폼이 보이는데, 이를 누..

안녕하세요! 오늘은 모바일 전용 이미지 슬라이더를 간단하게 구현해보았습니다. 모바일에서는 손가락을 이용해 영역을 터치하면 터치이벤트가 발생하게 되는데, 이 터치의 시점과 위치를 잘 이용하면 버튼 없이 손가락만으로 움직일 수 있는 이미지 슬라이더 구현이 가능합니다. 그럼 바로 코드를 볼텐데, 참고로 코드 구성은 index.html + styles.css + script.css 세 가지입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Slider for mobile SWIPE! 태그는 단순히 이미지 네 장을 포함하고 있는 블록 영역을 만드는 것 외에 특별한 사항이 없습니다. 이미지는 제가 개인적으로 보관하고 있는 제 개인 ..

안녕하세요! 이번 포스팅은 AWS를 통한 서비스 매니지먼트 관련 사항 중 CloudFront의 캐시 문제에 대한 포스팅인데요, 필자가 직접 아마존 S3 버킷을 만들고, 버킷에 정적 파일을 업로드한 다음 CloudFront를 통해 배포하는 작업을 수행한 직후 경험한 다음과 같은 문제에 대한 해결책을 알아내고, 정리해보았습니다. 문제 S3 버킷의 정적 파일을 CloudFront로 배포한 다음 S3 버킷의 정적 파일(index.html)을 업로드한 후 얼마 지나지 않아 업데이트한 index.html을 새로이 업로드하였다(덮어쓰기). 그런데 배포된 주소로 페이지를 열어보니 index.html의 내용이 업데이트되지 않은 상태였다. 새로고침을 여러 번 해 보아도 이는 마찬가지 였다. 원인 CloudFront로 배포..

안녕하세요! 오늘은 라이브러리 없이 적은 양의 자바스크립트 코드만으로 간단한 이미지 슬라이더를 구현해보았습니다. 이미지 슬라이더 구현하는 방법이야 한트럭이지만, 그 중에 한 가지 방법으로써 '이렇게도 하는구나~'하는정도로 참고해주시면 감사하겠습니다. 그럼 HTML, CSS, JS 순으로 코드를 보겠습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 Simple Slider SIMPLE SLIDER PREV NEXT 제목을 나타내는 h1 태그와 이미지 네 장을 품고 있는 div 태그들, 그리고 button 태그 두 개를 작성해주었습니다. 스타일시트는 styles.css 파일을, 자바스크립트 코드는 script.j..

안녕하세요! 곧 자려고 하는데, 잠들기 전에 가볍게 자바스크립트 타이핑 효과 구현하는 방법 포스팅해봅니다. 비어있는 h1 태그를 만들고, 거기에 글자가 써지는 효과를 구현해 보았습니다. 좀 더 실감나는 효과를 만들기 위해 CSS로 간단한 애니메이션 효과도 적용해봤습니다. 코드는 index.html / style.css / script.js 세 파일로 구성되어 있습니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 repl.it 웹문서에 필요한 기본적인 구조에 CSS파일(style.css)과 JS파일(script.js)을 추가해주었습니다. 표시되는 태그는 h1 하나 뿐인데, 이마저도 아무것도 쓰여있지 않습니다. 스크립트 및 스타일시트 적용을 위해 class를 "text"로 지정..

개요 안녕하세요. 오늘은 자바스크립트 스크롤 애니메이션 라이브러리인 WOW.js의 사용법에 대해 정리해보려고 합니다. 다양한 종류의 애니메이션을 제공하는데다 사용법도 무척 간단해 개인적으로 강력 추천하는 라이브러리입니다. 그럼 바로 시작하도록 하겠습니다. 설치 WOW.js 의 메인 페이지로 이동합니다. 링크를 클릭 : wowjs.uk/ 그러면 위와 같은 페이지가 나타나는데, 여기에서 좌측 상단에 표시되는 메뉴 중 GITHUB 을 클릭합니다. 그러면 새 탭이 열리고 라이브러리를 다운로드할 수 있는 깃헙 저장소가 나타납니다. 깃헙 저장소 페이지를 보면 Code라고 적힌 초록색 버튼이 보이는데, 이를 클릭하면 박스가 하나 열립니다. 이 박스의 맨 아래에는 Download ZIP 이라는 메뉴가 있습니다. 이를 ..

pem 파일은 보안 웹 사이트를 인증하는 데 사용되는 인증서를 인코딩한 파일입니다. 이것이 있으면 웹 사이트에 접근 권한을 얻을 수 있습니다(인증서니까). AWS의 EC2서비스에서 서버 인스턴스를 생성한 뒤 .pem의 확장자로 된 키 파일을 다운로드 받으면 이를 통해 AWS의 서버에 접속할 수 있습니다. 이때 맥 터미널에서 이를 시도하려면 어떻게 해야 하는지 정리해둡니다. 일단 터미널을 열고, pem 파일이 있는 디렉토리로 이동하는 명령어를 입력합니다. 그런 다음 pem 파일의 권한을 변경해주고, 소유자에게 읽기 권한을 부여해주는 명령어를 수행합니다. 읽을 수 있어야 인증도 할 수 있기에 이렇게 해주는 것으로 사료됩니다(ㅋㅋ). 마지막으로 서버 인스턴스에 대한 원격 제어를 위해 SSH 프로토콜을 통한 접..

바닐라 자바스크립트 바닐라 자바스크립트(Vanila Javascript)란, 라이브러리나 프레임워크를 사용하지 않는 순수한 형태의 자바스크립트를 의미합니다. 좀 더 구체적으로 이야기하자면, 바닐라 자바스크립트는 프로그래밍 문제를 해결하기 위해 어떤 도우미 라이브러리나 프레임워크를 사용하는 것보다 코어 API나 유틸리티를 사용하여 코딩하는 방식을 의미합니다. 오늘날 대부분의 자바스크립트 프로그램은 제이쿼리, 리액트, 앵귤러 등 다양한 프레임워크 및 라이브러리에 의해 구현된 기능을 사용하고 있는데, 사실 이러한 라이브러리의 기능들은 모두 자바스크립트 언어를 기반으로 구현이 되어 있기에, 바닐라 자바스크립트 만으로도 구현이 가능한 것들입니다. ECMA Script (ES) 순수한 형태의 자바스크립트를 이야기할..

깃허브 계정과 저장소(repository)를 가지고 있다고 가정하고 정리를 진행합니다. 1. package.json 파일 수정하기 리액트 어플리케이션의 package.json 가장 아래 부분에 "homepage" 키와 그에 대한 밸류를 추가합니다. 이는 깃허브 주소를 어플리케이션이 인식할 수 있도록 해 주는 작업입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 { "name": "...", "version": "0.1.0", "private": true, "dependencies": { ... }, "scripts": { ... }, ..., "homepage": "https://깃헙계정명.github.io/저장소이름" } 2. package.json 의 scripts 항목 수정하기 1..