profile
© 가치 지향 프론트엔드 코린이 🧑🏻‍💻
태그 목록
전체보기 (47)코딩테스트(20)js퀴즈(18)자바스크립트퀴즈(16)프로그래머스(15)TIL(15)위코드(14)WeCode(14)코딩문제풀이(10)프로그래머스 코딩테스트(4)위벅스(4)미니프로젝트(3)코딩문제(3)인터랙션(3)API(3)코딩챌린지(3)바닐라 자바스크립트(3)parseInt(3)Map(2)토이프로젝트(2)reverse(2)유효성(2)정규표현식(2)클론 코딩(2)Array.prototype.split(2)스타벅스(2)validation(2)function(1)Flap Clock(1)로그인(1)modules(1)스크롤 이벤트(1)asynchronous(1)타임스탬프(1)시맨틱태그(1)substring(1)자바스크립트 변수 선언(1)fromCharCode(1)ScrollIntoView(1)square root(1)라이브러리(1)유효성 검사(1)스코프(1)Primitive Type(1)지역변수(1)(1)시맨틱웹(1)호이스팅(1)무한스크롤(1)REST(1)자바스크립트 함수(1)뷰포트(1)Array.prototype.sort(1)타이핑(1)모듈(1)intersection observer(1)자바스크립트문제(1)위스타그램(1)나이(1)애니메이션(1)WIP(1)getBoundingClientRect(1)스코프체인(1)blur(1)옵저버(1)레이지로딩(1)arguments(1)프론트엔드(1)input(1)backdrop-filter(1)모듈패턴(1)자바스크립트 기초(1)자바스크립트 문자열 분리(1)자바스크립트 문제(1)SQRT(1)HTML 구조(1)primitives(1)ajax(1)Geocode(1)플립 시계(1)이미지 확대(1)ux(1)함수표현식(1)유저 인터페이스(1)이상한 문자 만들기(1)프로미스 체인(1)비동기(1)썸네일메이커(1)for(1)뷰포트 노출 감지(1)디자이너(1)태그(1)export default(1)썸네일 만들기(1)function declaration(1)아날로그(1)자동스크롤(1)interaction(1)UI(1)Intl(1)charCodeAt(1)레이아웃(1)DOMRect(1)Reference Type(1)keyframes(1)Math.sqrt()(1)자바스크립트(1)정적스코프(1)반복문(1)시간 계산(1)const(1)let(1)var(1)나이 계산(1)짝수와홀수(1)UTF-16(1)repeat(1)textContent(1)typing animation(1)loop(1)스크롤 감지(1)블록레벨스코프(1)Lazy loading(1)카멜케이스(1)이벤트위임(1)트윈맥스(1)렉시컬스코프(1)Split Flap(1)Observer(1)모달창(1)함수(1)setInterval(1)중복클릭방지(1)스크롤링(1)블러효과(1)변수 이름(1)화살표함수(1)semantic(1)html(1)자바스크립트 변수(1)날짜(1)직사각형별찍기(1)모달(1)에라토스테네스의체(1)전역변수(1)function expression(1)데이터타입(1)이미지 주소(1)타이핑 애니메이션(1)Fetch(1)마우스 이벤트(1)중복 선언(1)수박수박수(1)다이얼로그창(1)substr(1)변수 이름 짓는법(1)시맨틱(1)랜덤(1)함수선언식(1)parameters(1)시저암호(1)internationalizing(1)스크롤 다운(1)Unsplash(1)썸네일(1)메소드(1)Array.prototype.map()(1)GSAP(1)scrollTo(1)문자열을 정수로 바꾸기(1)ES6(1)원시타입(1)참조타입(1)시간(1)Date(1)BigInt(1)약수의합(1)기록(1)만나이(1)modal(1)for statement(1)자바스크립트 라이브러리(1)정수제곱근(1)UI디자인(1)UI디자이너(1)GreenSock(1)가시성(1)짝수홀수구하기(1)자바스크립트 애니메이션(1)
post-thumbnail

만들면서 배운 JS Promise : Get Country Info with Coordinates

API와 통신해서 좌표 값으로 국가 정보 가져오기위도와 경도를 입력하면 해당 좌표의 국가와 도시 정보가 화면에 출력되는 학습용 예제Fetch API를 이해하고 메소드를 사용할 수 있다.Open API에 정보를 요청하고 응답을 받아 정보를 활용할 수 있다.

2021년 9월 19일
·
5개의 댓글
post-thumbnail

ES6 Modules: Named Export vs. Default Export

ES6는 import/export 문법으로 모듈을 가져와 다른 파일에서 사용할 수 있다. 파일에서 모듈을 내보내는 두 가지 방법이 있는데, 이름이 지정된 내보내기(Named Export)와 기본 내보내기(Default Export)이다.이 두가지 방법의 차이점은 무엇인

2021년 9월 18일
·
0개의 댓글
post-thumbnail

자바스크립트의 비동기와 AJAX, API 이해하기

대부분의 코드는 동기적으로 작동한다.Most code is synchronous.동기적인 코드는 순서대로 작동한다.Synchronous code is executed line by line.동기적인 코드는 순서대로 작동하기 때문에 이전 코드의 실행이 끝나야 다음 코드가

2021년 9월 12일
·
0개의 댓글
post-thumbnail

플립 시계 만들기 with JS (2020)

숫자판이 틱,틱 소리를 돌아가며 가벼이 넘어간다. 지금 이 순간 흐르는 시간이 내는 소리다. 우리를 둘러싼 수 많은 장치들이 아날로그에서 디지털로 바뀌어 버린것도 이젠 오래 전이 되어버렸다.

2021년 9월 4일
·
2개의 댓글
post-thumbnail

Work In Progress - 위스타벅스 ☕️ 페이지 클론 기록하기 (2)

인스타그램, 스타벅스의 일부 페이지를 모방하며 실제 페이지의 구성과 기능을 따라하고 웹 페이지 제작에 대한 이해를 높이는 학습 과정으로서 위스타벅스 제작, 두번째 이야기.

2021년 8월 28일
·
4개의 댓글
post-thumbnail

웹페이지 HTML 구조 한눈에 보는 꼼수

HTML은 쉬우면서도 어렵다. 맥락에 맞게 군더더기 없이 시맨틱 태그를 잘 활용해서 작성해야 한다. HTML 작성을 잘 한다는 것은 마치 탄탄한 글을 쓰는 것과 같다.마음에 드는 페이지가 있고, 레이아웃을 참고하고 싶은데 각 컴포넌츠를 몇 Depth까지 구현했는지 개발

2021년 8월 28일
·
29개의 댓글
post-thumbnail

Image Zoom on Hover 🔍 바닐라 자바스크립트로 만들기

Image Zoom on Hover 기능은 쇼핑몰 상세 페이지에서 흔히 보이는 기능이다. 마우스 커서를 이미지 영역 위에 올리면 확대된 이미지를 보여주는 뷰포트가 생겨서 별도의 모달이나 윈도우 없이도 이미지를 자세히 볼 수 있는 인터랙션 중 하나이다.\*타벅스 사이트에

2021년 8월 26일
·
2개의 댓글
post-thumbnail

Work In Progress - 위스타벅스 ☕️ 페이지 클론 기록하기 (1)

위스타벅스라고 이름 붙인 과제, 페이지의 일부만 클론하는 주간 프로젝트를 진행중이다.원하는 화면과 기능을 구현하는 과정과 느낀 점을 남기기 위해 아래와 같이 기록함음료 제품 상세 페이지를 구성하고 있다. \*타벅스 홈페이지에서 HTML 구조를 아주 많이 참조했다. 그

2021년 8월 24일
·
14개의 댓글
post-thumbnail

ID/PW 필드 입력값 유효성 검증 로직 (순한맛)

유효성을 검증하는 것은 매우 중요하다. 서버에 데이터를 요청하기 전, 사용자의 입력 값이 최소한의 요구 조건에 부합하는지 검증 하는 것은 사용자의 실수는 물론 서버로의 무작위한 요청을 방지할 수 있는 좋은 방법이다.순한맛이라고 표현한 이유는 이번 유효성 검증의 허들은

2021년 8월 23일
·
2개의 댓글
post-thumbnail

만 나이, 한국 나이, 생일 계산기 만들기 (1) 로직편

저번 주 부트캠프에서 치렀던 테스트 중 만 나이를 계산하는 문제가 있었다.만 나이를 계산하는 로직을 짜는 김에 한국 나이와, 다음 생일까지 남은 일 수를 구하는 계산기를 만들어보고 싶었다.실생활에 흔히 사용되는 기능을 직접 코드로 풀어가면서 JavaScript의 Dat

2021년 8월 22일
·
2개의 댓글
post-thumbnail

Semantic Web & Semantic Tags

코딩이란 사람의 관점에서 세상의 이치를 컴퓨터에게 가르쳐주는 것 나는 개인적으로 코딩이란 사람과 세상의 이치를 컴퓨터에게 가르쳐주는 것이라는 정의를 좋아한다. 나는 코드를 짜면서 명확하고 자명하다고 생각했던 일상의 상태와 현상, 관념에 대해 다시 한 번 반추하게 된다

2021년 8월 19일
·
2개의 댓글
post-thumbnail

이미지 URL 유효성 이중 검증과 User Mistake-Proofing 연습

유효성 검증(Validation)은 처리할 데이터가 부정확, 불완전 또는 불합리한지 확인하기 위해 사용되는 처리 과정을 말한다.우리는 일상에서 많은 유효성 검증을 경험한다. 대표적으로 웹페이지에서 회원 가입할때 입력한 전화번호와 이메일 주소가 해당 포맷인지, 사용자가

2021년 8월 16일
·
4개의 댓글
post-thumbnail

프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)

원제 : 32 User Interface Elements For UI Designers프론트엔드 개발자는 유저 인터페이스(UI)에 대해 그 어떤 개발자보다 잘 이해하고 숙지해야 합니다. 디자이너와 소통하며 그들을 이해하고, 때론 스스로 제품과 서비스의 사용성을 개선하기

2021년 8월 15일
·
23개의 댓글
post-thumbnail

Unsplash 랜덤 이미지 요청과 클로저를 활용한 모듈 패턴으로 예제 만들기

'What is Your Tag?' 예제를 직접 만들어보면서 url만으로 unsplash 사이트의 속 특정 키워드의 랜덤 이미지 가져오는 법, 그리고 자바스크립트 모듈 패턴(Module Pattern) 설계를 공부해봤다.

2021년 8월 13일
·
0개의 댓글
post-thumbnail

썸네일 메이커(Thumbnail Maker) 만들기 | Toy Project

누구든지 10초 안에 무난한 벨로그 썸네일을 만들 수 있습니다. 어도비, 오피스 없어도 됩니다. 당신은 개발과 글쓰기에만 집중하세요. 나의 첫 토이 프로젝트 개발기

2021년 8월 9일
·
79개의 댓글
post-thumbnail

Intersection Observer (뷰포트 노출 감지) | APIs

Intersection Observer란 뷰포트의 영역과 타겟 요소 영역의 중첩을 감지(Detect)하는 웹 API 기술이다.쉽게 말해 사용자의 화면에 특정 요소가 보이는지의 여부와, 영역이 겹친 정도 등을 알려주는 비동기적 센서라고 할 수 있다.Intersectio

2021년 8월 7일
·
0개의 댓글
post-thumbnail

모달 다이얼로그 만들기 | JS Snippets

모달 다이얼로그(Modal Dialogs)는 메인 컨텐츠 위에 나타나는 사용자 인터랙션 중 하나다. 일반 시스템 다이얼로그는 팝업으로 나타나지만 모달 다이얼로그는 화면 위의 레이어로 나타나는 차이가 있다.모던 브라우저 환경에서 자주 사용되는 기술 중 하나이며 사용자의

2021년 8월 6일
·
1개의 댓글
post-thumbnail

자동 스크롤링 버튼 만들기 | JS Snippets

버튼을 누르면 해당 섹션으로 부드럽게 스크롤링 되는 기능은 제품과 서비스를 소개하는 한 장짜리 랜딩 페이지에서 자주 볼 수 있다. 타겟 요소까지 스크롤이 되는 것은 다음과 같이 정의할 수 있다. 타겟 요소 영역의 최상단이 뷰포트의 상단과 일치하는 것

2021년 8월 5일
·
0개의 댓글
post-thumbnail

타이핑 애니메이션 만들기 | JS Snippets

자기 소개 페이지의 리퍼런스를 찾다보니 많은 분들이 타이핑 애니메이션을 사용한 것을 볼 수 있었다. 아직 내 페이지의 구성이 결정된 건 아니지만 연습 삼아 직접 만들어보기로 했다.문서 편집기에 글을 적을 때 입력 커서가 깜빡이며 하나씩 글자가 입력되는 모습을 볼 수 있

2021년 8월 5일
·
0개의 댓글
post-thumbnail

GSAP 자바스크립트 애니메이션 라이브러리 | JS Library

쉽게 말해, 자주 사용되지만 일일히 구현하기엔 까다롭거나 불편한 자바스크립트의 코드의 특정 기능을 기성품으로 만들어 묶어놓은 패키지 같은 것을 말한다. 예를 들자면 가구를 만들때 경첩이나 슬라이드 같은 하드웨어는 만들어진 것을 사서 조립하는 것과 비슷한 개념이다.

2021년 8월 4일
·
0개의 댓글