profile
© 가치 지향 프론트엔드 개발자
태그 목록
전체보기 (56)코딩테스트(21)js퀴즈(18)자바스크립트퀴즈(16)프로그래머스(15)TIL(15)WeCode(14)위코드(14)코딩문제풀이(10)위벅스(4)프로그래머스 코딩테스트(4)바닐라 자바스크립트(3)parseInt(3)코딩챌린지(3)인터랙션(3)API(3)코딩문제(3)정규표현식(3)미니프로젝트(3)Map(2)토이프로젝트(2)유효성(2)reverse(2)Array.prototype.split(2)클론 코딩(2)스타벅스(2)validation(2)라이브러리(2)프론트엔드(2)짝수홀수구하기(1)자바스크립트 애니메이션(1)function(1)Flap Clock(1)로그인(1)modules(1)취업(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)심야FE네트워킹데이(1)semantic(1)html(1)인턴(1)인프랩(1)자바스크립트 변수(1)날짜(1)직사각형별찍기(1)에라토스테네스의체(1)Unsplash(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)모달(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

인프랩 심야 FE 네트워킹 데이 참여 후기

이벤트 링크인프랩에서 주최한 프론트엔드 개발자 오프라인 네트워킹 이벤트에 운좋게 당첨되어 어제 저녁 처음으로 개발자의 성지 판교에 다녀왔습니다. 🎉같은 업계에서도 공통된 포지션의 분들은 어떤 분들이신지, 어떤 생각을 하시는지 궁금했고, 제가 속한 프론트엔드 분야의 전

2022년 6월 18일
·
2개의 댓글
·
post-thumbnail

프론트엔드 아무개씨의 6월 회고

6월쯤, 매년 그렇듯 벌써 올해의 반이 지나가버렸다 말합니다. 새해가 밝은지 엊그제 같은데 어느덧 6월이고 지난 날을 돌아보며 중간 정산을 합니다.

2022년 6월 16일
·
1개의 댓글
·
post-thumbnail

정규표현식(Regular Expression)을 공부했습니다. Part 1

특정 포맷의 문자 패턴을 찾아 정규화하거나 새니타이징 할때, 문자열을 찾아 바꿀때, RawHTML 속 원하는 태그를 파싱하거나 마크다운 텍스트를 화면에 렌더링할때도 정규표현식을 유용하게 사용하고 있습니다. 퇴근 후 공부했던 흔적을 모아 포스팅합니다.

2022년 6월 1일
·
0개의 댓글
·
post-thumbnail

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

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

2022년 5월 19일
·
1개의 댓글
·
post-thumbnail

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

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

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

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

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

2022년 5월 15일
·
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개의 댓글
·