탐구소년

안녕하세요! 곧 자려고 하는데, 잠들기 전에 가볍게 자바스크립트 타이핑 효과 구현하는 방법 포스팅해봅니다. 비어있는 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 이라는 메뉴가 있습니다. 이를 ..

자바스크립트에는 Math라는 내장 객체가 존재합니다. 이 내장객체는 랜덤으로 숫자를 반환받을 수 있는 메소드 random() 을 제공하는데, 여기에서는 이를 기본으로 1부터 45 사이의 숫자 6개를 반환받는 로또번호 추첨하기 스크립트를 작성해보도록 하겠습니다. 1 2 3 4 5 6 7 8 const number = [] while(number.length

프론트엔드 개발자 기술면접시 나올 수 있는 몇 가지 질문에 대해 정리해 봄 http 와 https 의 차이 http 는 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)의 약자로써, 서로 다른 시스템들 사이에서 통신을 주고받게 해주는 가장 기초적인 프로토콜이다. https 는 기존 http에 보안(security)이 추가된 것으로, 서버에서 브라우저로 전송되는 정보가 암호화되지 않는 http의 약점을 보완한 프로토콜이다. HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 이 문제를 해결했는데, SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아주는 인증서 소프트..

안녕하세요 탐구소년입니다! 이번 게시글에서는 HTML/CSS/Javascript로 코드를 작성하여 웹 문서를 표시했을 때, 전체 또는 일부의 내용을 이미지 파일로 내보내는 방법에 대해 알아보도록 하겠습니다. 예상컨대 다양한 방법과 관련 라이브러리가 여러가지 경로를 통해 제공되고 있으리라 생각이 드는데요. 여기에서는 dom-to-image 라는 라이브러리를 사용해 목표하는 기능을 구현해보도록 하겠습니다. dom-to-image? 자바스크립트로 작성된 라이브러리로, DOM 요소를 벡터나 래스터 이미지로 변환하는 데 사용할 수 있습니다. filsaver? 파일 내보내기 기능을 구현할 때 곧잘 사용되는 라이브러리입니다. 적용 예 먼저 아래와 같이 html 문서를 작성해줍니다(이미지는 아무거나 사용해도 무관합니다..

async await는 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능입니다. 프로미스가 자바스크립트 표준이 된 이후에 등장한 새로운 표준인데, 프로미스를 대체하는 개념이라기 보다는 보완하는 개념입니다. async await 함수가 프로미스를 반환하기 때문입니다. async 함수 선언의 기본 형태는 다음과 같습니다. 1 2 3 4 5 6 7 // async 함수는 프로미스를 반환합니다 async function getData(){ return "Javascript make me angry"; } // 따라서 then 메소드 호출이 가능합니다 getData().then(data => console.log(data)) async 함수에는 await 식이 포함될 수 있습니다. 이 ..

프로미스(promise)는 비동기 상태를 값으로 다룰 수 있는 객체입니다. 프로미스를 사용하면 비동기 프로그래밍을 할 때 동기 프로그래밍 방식으로 코드를 작성할 수 있습니다. 프로미스 객체는 비동기 작업의 완료 또는 실패에 대한 결과값을 나타낼 수 있습니다. 프로미스는 최종 결과를 반환하지는 않고, 대신 상태값을 반환해서 미래의 어떤 시점에 결과를 제공합니다. 프로미스는 다음 중 하나의 상태를 가집니다. 대기(pending) : 이행하거나 거부되지 않은 초기 상태. 이행(fulfilled) : 연산이 성공적으로 완료됨. 거부(rejected) : 연산이 실패함. 이행이나 거부가 처리되었을 때, 프로미스에 연결한 핸들러는 해당 프로미스의 then 메소드에 의해 처리됩니다. 아래는 프로미스의 기본 예제 코드..

이제 state에 대해 알아보도록 하겠습니다. state는 동적 데이터를 다룰 때 사용합니다. 동적 데이터란 말 그대로 변경 가능한 데이터를 의미합니다. 컴포넌트를 자바스크립트 객체라고 했는데, 객체의 구성 요소 중 일부의 개수가 바뀐다던지, 속성이 바뀌는 상황을 다룰 수 있도록 해 주는 것이 바로 state인 것입니다. state는 함수형 컴포넌트에서는 지원되지 않는 개념입니다. 따라서 이제부터는 클래스형 컴포넌트를 다루어야 합니다. 클래스형 컴포넌트의 작성을 위해서는 기본적으로 다음과 같은 형태로 시작해야 합니다. 1 2 3 4 5 6 7 8 import React from 'react'; import './App.css'; class App extends React.Component{ } expor..

자바스크립트의 배열 객체의 메소드 중에는 map()이라는 메소드가 존재합니다. map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해줍니다. map() 메소드의 기본형은 다음과 같습니다(출처:MDN). map() 메소드의 인자로는 배열의 각 요소를 처리할 콜백함수가 전달됩니다. 여기에서 콜백함수의 인자는 최대 4가지가 가능하지만, 주로 현재의 값(currentValue)과 인덱스 번호(index)가 많이 사용됩니다. 간단한 예제를 보겠습니다. 1 2 3 4 5 const animal = ["Rabbit", "Cat", "Dog"] animal.map(function(current, index){ console.log(current, index) })..

props(속성) props는 컴포넌트에 전달하는 데이터를 의미합니다. 자바스크립트 함수의 매개변수라는 개념을 알고 계실텐데, 컴포넌트의 props 또한 매개변수와 비슷한 역할을 합니다. 전달되어지는 값에 따라서 결과의 차이를 만들어낼 수가 있고, 그로 인해 효율적인 컴포넌트 재사용이 가능해집니다. 컴포넌트 여러 개 사용하기 다음과 같은 구조를 만들고, App.js와 Book.js를 각각 작성해주겠습니다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react'; import './App.css'; import Book from './Book'; function App() { return ( ); } export default App; B..