프론트엔드 개발(18)
-
[번역] 웹으로 구현하는 로딩 쉼머(The Loading Shimmer!)
최근 프로젝트를 하면서 페이스북, 인스타그램 등 여러 트렌디한 서비스들이 쉼머라는 새로운 로딩 애니메이션을 도입하고 있다는 걸 알게 되었습니다. 관련해 UX 및 개발 자료를 찾으면서 쉼머에 관련된 한국어로 된 콘텐츠가 많이 없는 것 같아서 괜찮게 본 글을 번역해봤습니다. 의역이 포함되어 있고 원작자의 허가를 받고 번역했습니다. 원본 링크는 https://dev.to/dhilipkmr/the-loading-shimmer-29dc 입니다. Loading Shimmer를 접했을 때, 전 그게 웹 개발에 새롭게 도입된 끝내주는 기술이라고 생각했습니다. 하지만 Loading Shimmer는 이미 인터넷에서 많이 알려져 있었습니다. 느린 네트워크 접속 환경 때문에 DOM 로드에 시간이 걸릴 때면, 우리는 로딩 아이..
2020.01.22 -
JS 기술면접 스터디 6주차: immutable 객체부터 이벤트 루프까지
기술면접 스터디 5주차에 이어 6주차를 진행하고 관련 내용을 정리합니다. 이전의 내용이 궁금하시다면 다음을 클릭해주세요. 1주차: 이벤트 위임부터 코드구성까지 2주차: 호스트 객체부터 Ajax까지 3주차: 호이스팅부터 이벤트 버블링까지 4주차: 전역스코프부터 Promise까지 5주차: Math.max()부터 프로토타입 기반 상속까지 이번 글은 지난 1~4주차 글들처럼 다르게는 front-end-interview-handbook의 질문을 다루며, 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다. 6주차 질문은 Math.max()와 Math.min(), 컴퓨터가 다루는 소수, 지멋대로의 진법 변화, 함수 표현식과 선언식의 차..
2019.12.30 -
JS 기술면접 스터디 5주차: Math.max()부터 프로토타입 기반 상속까지
기술면접 스터디 4주차에 이어 5주차를 진행하고 관련 내용을 정리합니다. 이전의 내용이 궁금하시다면 다음을 클릭해주세요. 1주차: 이벤트 위임부터 코드구성까지 2주차: 호스트 객체부터 Ajax까지 3주차: 호이스팅부터 이벤트 버블링까지 4주차: 전역스코프부터 Promise까지 이번 글은 지난 1~4주차 글들과 다르게 9 JavaScript Interview Questions의 질문에 대해 다룹니다. 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다. 5주차 질문은 Math.max()와 Math.min(), 컴퓨터가 다루는 소수, 지멋대로의 진법 변화, 함수 표현식과 선언식의 차이, 키워드 없는 변수 할당, 객체지향 프로그래..
2019.09.27 -
[코드조각] 1부터 n까지의 합 구하기
1부터 n까지 합을 구하는 스니펫을 여러가지 방법으로 짜봤습니다. 1. for문 for문을 이용한 가장 간단한 방식입니다. 시간복잡도는 O(n)입니다. const sum=n=>{ let answer=0; for(let i=1;i { if(n===1) {return 1} return n+sum(n-1); } 3. 수학적인 방법 사용 중고등학교때 배웠던 가우스의 유명한 일화가 있습니다. 1+2+..+(n-1)+n를 빠르게 푸는 방법으로 ((1+n)*n)/2를 활용하는 것입니다. 시간복잡도는 O(1)으로 세 가지 방법 중 가장 빠릅니다. const sum=n=>{ return n*(n+1)/2; } 이밖에 다른 방법을 알고 있거나 더 효율적인 코드를 아신다면 댓글로 달아주세요. 많은 분들에게 큰 도움이 될 거..
2019.09.26 -
[HTML&CSS] JavaScript 없이 input 값 유무 판단하기: placeholder-shown
만약 여러분이 제작하는 서비스에서 input[type=text]의 값 유무를 판단해 "입력되었습니다"라는 문구를 표시해야 한다면 어떻게 구현할 수 있을까요. 아마 가장 처음으로 떠오르는 방법은 JavaScript로 input DOM의 value값을 받아오는 것일 것입니다. 아마도 위 기능은 다음과 같은 코드로 구현할 수 있습니다. 값이 입력되었습니다. 그러나 이렇게 JavaScript를 이용하지 않고도 HTML과 CSS만을 이용해 비슷하게 구현할 수 있습니다. 바로 가상 클래스 요소 :placeholder-shown과 css의 선택자를 이용하면 훨씬 간단하게 구현할 수 있습니다. 값이 입력 되었습니다. 가상 클래스 요소 :placeholder-shown은 input과 textarea에서 placehold..
2019.08.04 -
JS 기술면접 스터디 4주차: 전역스코프부터 Promise까지
기술면접 스터디 3주차에 이어 4주차를 진행하고 관련 내용을 정리합니다. 이전의 내용이 궁금하시다면 다음을 클릭해주세요. 1주차: 이벤트 위임부터 코드구성까지 2주차: 호스트 객체부터 Ajax까지 3주차: 호이스팅부터 이벤트 버블링까지 전체 질문 리스트의 출처는 front-end-interview-handbook이며, 이 글은 스터디 내용을 복기하고 정리하는 글로 아주 상세한 기술내용을 담고 있진 않습니다. 관련해서는 이후에 따로 정리할 계획입니다. 4주차 질문은 전역스코프, load 이벤트, SPA와 SEO, Promise와 Polyfill, Callback, JavaScript로 컴파일 되는 언어 등에 대한 내용입니다. 1. 일반적으로 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 ..
2019.07.31