- 전체보기(61)
- 코딩테스트(21)
- js퀴즈(18)
- 자바스크립트퀴즈(16)
- 프로그래머스(15)
- TIL(15)
- WeCode(14)
- 위코드(14)
- 코딩문제풀이(10)
- 위벅스(4)
- 프로그래머스 코딩테스트(4)
- 정규표현식(4)
- 인터랙션(3)
- API(3)
- 미니프로젝트(3)
- 바닐라 자바스크립트(3)
- parseInt(3)
- 코딩챌린지(3)
- 코딩문제(3)
- Map(2)
- 클론 코딩(2)
- Array.prototype.split(2)
- reverse(2)
- validation(2)
- 라이브러리(2)
- 스타벅스(2)
- 토이프로젝트(2)
- 프론트엔드(2)
- 유효성(2)
- 짝수홀수구하기(1)
- 자바스크립트 애니메이션(1)
- function(1)
- Flap Clock(1)
- 로그인(1)
- modules(1)
- 취업(1)
- 스크롤 이벤트(1)
- 회고(1)
- asynchronous(1)
- 타임스탬프(1)
- Flux(1)
- 시맨틱태그(1)
- substring(1)
- Notion API(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)
- React(1)
- lambda(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)
- JavaScript(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)
- Nginx(1)
- 시간 계산(1)
- const(1)
- let(1)
- var(1)
- 나이 계산(1)
- 짝수와홀수(1)
- docker(1)
- UTF-16(1)
- fragment(1)
- repeat(1)
- JPEG(1)
- textContent(1)
- typing animation(1)
- loop(1)
- 스크롤 감지(1)
- 블록레벨스코프(1)
- WebAPIs(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)
- scheduling(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)
Lambda 스케줄링으로 매일 아침 자동으로 노션 페이지 만들기
매일 아침 노션 페이지 템플릿 복붙하기 귀찮아서 스케줄링 이벤트로 노션 API 호출 람다 함수 만든 썰
[번역] 자바스크립트 Map을 Object 대신 사용해야할 때는 언제일까요?
Map을 사용하던 도중 Map과 Object 둘 중 어떤 자료형을 해시맵으로 사용하면 좋을지 명확한 기준이 궁금했습니다. 마침 벤치마크 테스트와 함께 각 자료형에 대한 사용 가이드를 제시한 좋은 글이 있어 번역 후 소개드리게 되었습니다.
웹앱의 사용성을 높이는 Web Worker와 Service Worker에 대해 알아보기
`Broadcast Channel API`는 `Web Workers`라는 다소 생소한 피쳐에 의존하고 있었다. 그래서 내친김에 `Web Worker`와 `Service Worker`는 무엇인지 공부해봤다.
프론트엔드 개발자를 위한 Docker로 React 개발 및 배포하기
리액트 앱을 도커 컨테이너에 쉽게 띄워보자! 이 포스트는 Youtube의 Sanjeev Thiyagarajan라는 분이 올려주신 Docker + ReactJS tutorial 영상을 따라 쉽게 도커를 이해할 수 있도록 정리한 내용이다.
[RegExp] Using Repetition in Regular Expressions
Part 2. Using Repetition in Reguar Expressions
인프랩 심야 FE 네트워킹 데이 참여 후기
이벤트 링크인프랩에서 주최한 프론트엔드 개발자 오프라인 네트워킹 이벤트에 운좋게 당첨되어 어제 저녁 처음으로 개발자의 성지 판교에 다녀왔습니다. 🎉같은 업계에서도 공통된 포지션의 분들은 어떤 분들이신지, 어떤 생각을 하시는지 궁금했고, 제가 속한 프론트엔드 분야의 전
프론트엔드 아무개씨의 6월 회고
6월쯤, 매년 그렇듯 벌써 올해의 반이 지나가버렸다 말합니다. 새해가 밝은지 엊그제 같은데 어느덧 6월이고 지난 날을 돌아보며 중간 정산을 합니다.
정규표현식(Regular Expression) Part 1
특정 포맷의 문자 패턴을 찾아 정규화하거나 새니타이징 할때, 문자열을 찾아 바꿀때, RawHTML 속 원하는 태그를 파싱하거나 마크다운 텍스트를 화면에 렌더링할때도 정규표현식을 유용하게 사용하고 있습니다. 퇴근 후 공부했던 흔적을 모아 포스팅합니다.
LeetCode Challenge w/ JavaScript - 로컬에서 릿코드 테스트 환경 설정하기
국내에서 알고리즘 같은 코딩테스트 문제풀이 사이트로 프로그래머스, 백준이 유명한 것 처럼, 해외에선 LeetCode가 가장 잘 알려져있습니다. FAANG 같은 손에 꼽는 해외 유명 IT 기업의 SW 엔지니어가 되기 위한 테크니컬 인터뷰도 여기서 준비할 만큼 높은 기출
DocumentFragment 객체는 무엇이며 왜 써야할까?
오늘은 Render 함수를 구현하는 중 DOM을 효율적으로 다루는 과정을 고민하던 중 DocumentFragment에 대해 알게 되었고, 제가 배운 것을 글로 남겨봅니다.
heic-convert | HEIC 이미지 JPEG로 변환하기
어떻게하면 HEIC을 JPEG로 변환하고, 이를 자동화 시킬 수 있을까요? 이 글은 게시글에 첨부된 heic-convert 라이브러리를 사용하여 HEIC-JPEG 포맷 변환을 개인적으로 공부했던 기록입니다.
Vuex와 함께하는 더 나은 전역 상태 관리
현재 저희 회사는 프론트엔드 프레임워크로 Vue를 채택하여 사용하고 있습니다. 하지만 제가 담당하는 프로젝트에서 Vuex를 사용하고 있진 않았습니다. authentication 등 전역으로 관리되어야 하는 데이터를 Vue 커스텀 플러그인을 사용하고 있는 상황이었습니다.
프론트엔드 개발자로서 좋았던 책들 · 간단한 서평
최근에 읽은 책 네 권이 가까운 시일 내에 내가 발전해야 할 방향과 잘 맞는것 같아 추천하게 되었습니다. 『개발자의 글쓰기』는 개발자의 직무와 떼려야 뗼 수 없는 '글쓰기'를 가볍게 이해하기 좋은 책이었으며 『자바스크립트 코딩의 기술』은 ES6 이후 모던 자바스크립트의
개발자가 되었다.
허겁지겁 달려온 2021년의 끝자락과 정신없이 맞이한 2022년의 사이 개발자로서 커리어를 시작했다. 배운 것을 미처 소화시키기도 전에 허겁지겁 새로운 지식과 도구를 습득하는 엔트리 레벨, 배웠던 것 느낀 것들을 반추하고 정리할 필요
만들면서 배운 JS Promise : Get Country Info with Coordinates
API와 통신해서 좌표 값으로 국가 정보 가져오기위도와 경도를 입력하면 해당 좌표의 국가와 도시 정보가 화면에 출력되는 학습용 예제Fetch API를 이해하고 메소드를 사용할 수 있다.Open API에 정보를 요청하고 응답을 받아 정보를 활용할 수 있다.
ES6 Modules: Named Export vs. Default Export
ES6는 import/export 문법으로 모듈을 가져와 다른 파일에서 사용할 수 있다. 파일에서 모듈을 내보내는 두 가지 방법이 있는데, 이름이 지정된 내보내기(Named Export)와 기본 내보내기(Default Export)이다.이 두가지 방법의 차이점은 무엇인
자바스크립트의 비동기와 AJAX, API 이해하기
대부분의 코드는 동기적으로 작동한다.Most code is synchronous.동기적인 코드는 순서대로 작동한다.Synchronous code is executed line by line.동기적인 코드는 순서대로 작동하기 때문에 이전 코드의 실행이 끝나야 다음 코드가
플립 시계 만들기 with JS (2020)
숫자판이 틱,틱 소리를 돌아가며 가벼이 넘어간다. 지금 이 순간 흐르는 시간이 내는 소리다. 우리를 둘러싼 수 많은 장치들이 아날로그에서 디지털로 바뀌어 버린것도 이젠 오래 전이 되어버렸다.
Work In Progress - 위스타벅스 ☕️ 페이지 클론 기록하기 (2)
인스타그램, 스타벅스의 일부 페이지를 모방하며 실제 페이지의 구성과 기능을 따라하고 웹 페이지 제작에 대한 이해를 높이는 학습 과정으로서 위스타벅스 제작, 두번째 이야기.
웹페이지 HTML 구조 한눈에 보는 꼼수
HTML은 쉬우면서도 어렵다. 맥락에 맞게 군더더기 없이 시맨틱 태그를 잘 활용해서 작성해야 한다. HTML 작성을 잘 한다는 것은 마치 탄탄한 글을 쓰는 것과 같다.마음에 드는 페이지가 있고, 레이아웃을 참고하고 싶은데 각 컴포넌츠를 몇 Depth까지 구현했는지 개발