profile
© 가치 지향 프론트엔드 개발자
태그 목록
전체보기 (53)코딩테스트(21)js퀴즈(18)자바스크립트퀴즈(16)TIL(15)프로그래머스(15)WeCode(14)위코드(14)코딩문제풀이(10)프로그래머스 코딩테스트(4)위벅스(4)API(3)parseInt(3)코딩챌린지(3)코딩문제(3)바닐라 자바스크립트(3)인터랙션(3)미니프로젝트(3)프론트엔드(2)validation(2)라이브러리(2)reverse(2)Map(2)토이프로젝트(2)Array.prototype.split(2)클론 코딩(2)정규표현식(2)스타벅스(2)유효성(2)짝수홀수구하기(1)자바스크립트 애니메이션(1)function(1)Flap Clock(1)로그인(1)modules(1)취업(1)스크롤 이벤트(1)asynchronous(1)타임스탬프(1)Flux(1)시맨틱태그(1)substring(1)자바스크립트 변수 선언(1)fromCharCode(1)ScrollIntoView(1)square root(1)책 추천(1)개발자의 글쓰기(1)유효성 검사(1)heic-convert(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)vue(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)썸네일메이커(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)heic(1)Reference Type(1)keyframes(1)Math.sqrt()(1)자바스크립트(1)정적스코프(1)반복문(1)documentFragment(1)시간 계산(1)const(1)let(1)var(1)나이 계산(1)짝수와홀수(1)UTF-16(1)fragment(1)repeat(1)JPEG(1)textContent(1)typing animation(1)loop(1)스크롤 감지(1)블록레벨스코프(1)base64(1)Lazy loading(1)카멜케이스(1)이벤트위임(1)트윈맥스(1)렉시컬스코프(1)vuex(1)Split Flap(1)Observer(1)모달창(1)함수(1)setInterval(1)DOM(1)중복클릭방지(1)스크롤링(1)블러효과(1)변수 이름(1)개발공부(1)화살표함수(1)wysiwyg(1)semantic(1)html(1)인턴(1)자바스크립트 변수(1)날짜(1)직사각형별찍기(1)모달(1)에라토스테네스의체(1)전역변수(1)function expression(1)개발자(1)leetcode(1)데이터타입(1)이미지 주소(1)타이핑 애니메이션(1)Fetch(1)마우스 이벤트(1)중복 선언(1)수박수박수(1)다이얼로그창(1)substr(1)변수 이름 짓는법(1)aws(1)시맨틱(1)랜덤(1)함수선언식(1)parameters(1)시저암호(1)internationalizing(1)스크롤 다운(1)Unsplash(1)썸네일(1)메소드(1)Array.prototype.map()(1)GSAP(1)근황(1)scrollTo(1)독서(1)문자열을 정수로 바꾸기(1)ES6(1)원시타입(1)참조타입(1)시간(1)Date(1)BigInt(1)약수의합(1)기록(1)만나이(1)redux(1)modal(1)for statement(1)자바스크립트 라이브러리(1)정수제곱근(1)UI디자인(1)서평(1)UI디자이너(1)GreenSock(1)가시성(1)
post-thumbnail

LeetCode Challenge w/ JavaScript - 로컬에서 릿코드 테스트 환경 설정하기

국내에서 알고리즘 같은 코딩테스트 문제풀이 사이트로 프로그래머스, 백준이 유명한 것 처럼, 해외에선 LeetCode가 가장 잘 알려져있습니다. FAANG 같은 손에 꼽는 해외 유명 IT 기업의 SW 엔지니어가 되기 위한 테크니컬 인터뷰도 여기서 준비할 만큼 높은 기출

2일 전
·
0개의 댓글
post-thumbnail

DocumentFragment 객체는 무엇이며 왜 써야할까?

오늘은 Render 함수를 구현하는 중 DOM을 효율적으로 다루는 과정을 고민하던 중 DocumentFragment에 대해 알게 되었고, 제가 배운 것을 글로 남겨봅니다.

3일 전
·
0개의 댓글
post-thumbnail

heic-convert | HEIC 이미지 JPEG로 변환하기

어떻게하면 HEIC을 JPEG로 변환하고, 이를 자동화 시킬 수 있을까요? 이 글은 게시글에 첨부된 heic-convert 라이브러리를 사용하여 HEIC-JPEG 포맷 변환을 개인적으로 공부했던 기록입니다.

6일 전
·
0개의 댓글
post-thumbnail

Vuex와 함께하는 더 나은 전역 상태 관리

현재 저희 회사는 프론트엔드 프레임워크로 Vue를 채택하여 사용하고 있습니다. 하지만 제가 담당하는 프로젝트에서 Vuex를 사용하고 있진 않았습니다. authentication 등 전역으로 관리되어야 하는 데이터를 Vue 커스텀 플러그인을 사용하고 있는 상황이었습니다.

2022년 3월 5일
·
0개의 댓글
post-thumbnail

프론트엔드 개발자로서 좋았던 책들 · 간단한 서평

최근에 읽은 책 네 권이 가까운 시일 내에 내가 발전해야 할 방향과 잘 맞는것 같아 추천하게 되었습니다. 『개발자의 글쓰기』는 개발자의 직무와 떼려야 뗼 수 없는 '글쓰기'를 가볍게 이해하기 좋은 책이었으며 『자바스크립트 코딩의 기술』은 ES6 이후 모던 자바스크립트의

2022년 2월 26일
·
4개의 댓글
post-thumbnail

개발자가 되었다.

허겁지겁 달려온 2021년의 끝자락과 정신없이 맞이한 2022년의 사이 개발자로서 커리어를 시작했다. 배운 것을 미처 소화시키기도 전에 허겁지겁 새로운 지식과 도구를 습득하는 엔트리 레벨, 배웠던 것 느낀 것들을 반추하고 정리할 필요

2022년 2월 2일
·
2개의 댓글
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일
·
4개의 댓글
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일
·
28개의 댓글
post-thumbnail

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

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

2021년 8월 13일
·
2개의 댓글