개발일지, 개인 또는 단체 포트폴리오 등
참고 자바스크립트: IntersectionObserver (1) 이미지 lazy-loading 구현 jQuery: 제이쿼리 이미지 지연 로딩(lazy loading) 플러그인 (jQuery Lazy) 자바스크립트: 무한 스크롤 (스크롤 이벤트 이용, 라이브러리 없이) intersectionObserver를 사용하지 않고 마우스 스크롤 이벤트를 이용해 이미지 지연 로딩(lazy loading)을 하는 방법입니다. 이미지 지연 로딩이란 웹 페이지를 렌더링할때 이미지를 불러오지 않고 사용자가 특정 영역을 더보기…
Firebase(파이어베이스)에서 실시간 데이터베이스(Realtime Database)를 Rest API 형태로 사용하기 방법은 매우 간단합니다. 파이어베이스 접속 주소 뒤에 .json 확장자를 붙이면 Rest API 형태로 사용할 수 있습니다. 이 예제는 편의를 위해 별도의 규칙이나 유효성 검사가 설정되어 있지 않으며, 아래처럼 읽기 및 쓰기가 익명의 사용자들에게 전부 열려있는 형태입니다. 매우 위험한 상태로 테스트 목적 더보기…
reqres.in 이라는 사이트를 이용하면, 별도의 서버를 만들거나 샘플 데이터를 생성하지 않고도 빠르고 편리하게 Restful API 환경을 마련할 수 있습니다. 아래는 공식 홈페이지에 소개되어 있는 서비스의 특징 및 장점입니다. 미리 데이터가 마련되어 있어 별도로 샘플 데이터를 만들 필요가 없습니다. 실제로 동작하는 Restful API이며 응답 코드 (GET, POST, PUT 및 더보기…
구글 스프레드시트에서는 잘 알려지지 않은 함수가 하나 있습니다. GOOGLETRANSLATE 라는 함수를 사용하면 구글 번역기를 이용하여 특정 셀에 있는 문장이나 단어를 자동으로 번역합니다. 다량의 외국어 데이터에 대한 초벌 번역이나 단어장 만들기용으로 활용도가 높습니다. 구문 GoogleTranslate(텍스트, 출발어, 도착어) 텍스트 – 문장이 있는 특정 셀 주소 또는 문장을 직접 입력합니다. 출발어 – 더보기…
설정하기 이미지 또는 아이콘 파일을 준비한 다음, header 태그에 다음 부분을 설정합니다. href 부분에 파일 경로를 입력합니다. <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> <link rel=”icon” href=”<%= BASE_URL %>favicon.ico”> <link rel=”shortcut icon” href=”<%= BASE_URL %>logo.png”> <link rel=”apple-touch-icon” href=”<%= BASE_URL %>logo.png”> <title><%= htmlWebpackPlugin.options.title %></title> </head> rel="icon" 부분은 파비콘(favicon)을 설정합니다. 더보기…
input 태그에서 radio 타입은 checkbox와 다르게 특정 그룹 내 여러 라디오 버튼 중 하나만 선택할 수 있는 것이 특징입니다. 기본 형태 <input type=”radio” value=”1″ name=”score”> 1 <input type=”radio” value=”2″ name=”score”> 2 <input type=”radio” value=”3″ name=”score”> 3 <input type=”radio” value=”4″ name=”score”> 4 <input type=”radio” value=”5″ name=”score”> 5 value에 자바스크립트나 폼 더보기…
자습서: React 시작하기 리액트 공식 자습서로 처음 제시하는 과제는 ‘틱택토’ 게임입니다. 자습서라는 이름에 맞지 않게 이해하기 어렵고 구현 난이도가 높은 편입니다. 이 자습서의 구성은 먼저 자습서가 제시하는 범위의 예제를 완성한 후에, 추가 구현사항 6가지를 스스로 풀어보도록 하고 있습니다. 기존 코드는 다음과 같습니다. See the Pen Tic Tac Toe by Dan 더보기…
위와 같은 경우처럼 한글로 된 특정 단어 뒤에 들어갈 조사를 덧붙힐 때 사용할 수 있는 예제입니다. 맨 마지막 단어의 종성을 알아낸 뒤, 특정 공식에 대입해 0이라면 받침이 없는 것이고. 그 외의 경우는 받침이 존재합니다. // 맨 마지막 글자에 받침이 있는지 찾아서 있다면 true, 없다면 false 를 반환 function isEndWithConsonant(korStr) 더보기…
React나 Vue 등의 SPA에서 볼 수 있는 SPA 라우팅을 흉내내는 예제입니다. 참고로 window.location.pathname을 이용한 URL 입력 기능을 실행하려면 SPA 라우팅을 지원하는 HTTP 서버가 필요합니다. 간단하게 설정할 수 있는 서버로 크롬 브라우저 플러그인인 Web Server for Chrome 을 소개합니다. 해당 앱을 실행하면 설정 창이 나옵니다. 여기서 index.html 파일이 있는 디렉토리를 더보기…
[프로그래머스/레벨2] 프린터 (자바스크립트) 문제 일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 나머지 더보기…