Algoroot's space

안녕하세요, 오늘은 Web API 중 하나인 Intersection Observer API에 대해 알아보는 시간을 갖겠습니다. 현대의 웹 개발은 사용자 경험을 개선하고 페이지 성능을 최적화하는 것이 매우 중요합니다. 이를 위한 다양한 기술 중 하나가 바로 "Intersection Observer API"입니다. IntersectionObserver he Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. Intersection Obser..

안녕하세요. 오늘은 Node.js를 활용한 SVG 파일 자동 모듈화 방법에 대해서 작성해 보고자 합니다. Background 회사 내부에는 개발에 사용하는 tokript라는 스크립트가 있습니다. 해당 스크립트는 commit 규칙뿐만 아니라 Api, Image, svg, page 등을 생성해 주는 아주 간편하고 유용한 스크립트입니다. 문제는 React-native에서 svg파일의 아이콘을 사용할 때 선언하는 방식이 tokript의 아이콘을 생성하는 방식과는 달라서 tokript에서 gen:icon을 사용할 수 없었습니다. 수정 요청을 할까하다가 직접 만들고 싶은 호기심에 작성해 보게 되었습니다. 폴더 안의 폴더가 있어 재귀함수를 적용시켜 탐색하였습니다. 1. 원하는 모듈의 형태와 추출할 경로 들어가기 앞서..

지난 두 포스팅에 걸쳐 자바스크립트의 비동기 처리 방법 콜백과 프로미스에 대해 작성했다. 1_ [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 2_ [자바스크립트 비동기 처리 ] 프로미스(Promise) 개념과 활용 이번에는 좀 더 간편하고 깔끔한 코딩이 가능해지는 async, await에 대해 다뤄보겠다. 프로미스의 체이닝과 같은 콜백 패턴 또한 가독성이 그리 좋지 않다. async, await 은 프로미스의 체이닝 없이 프로미스를 좀 더 간결, 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 API이다. 새로운 것이 추가된 것은 아니고 기존 존재하는 프로미스 위에 조금 더 간편한 API를 제공한 것으로 이를 문법적 설탕(syntactic sugar)이라고 한다. async 네트워..

지난 포스팅에서는 비동기 처리를 위한 콜백 지옥을 의도적으로 체험해보았다. [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 이번 포스팅에서는 이런 콜백지옥의 대안으로 ES6에서 나온 프로미스(Promise)에 대해 다뤄보는 시간을 가지겠다. 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 번거로워지며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. 이의 대안으로 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise) 를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이..

리액트를 공부하며 aync와 await에 대해 알아보고자 한 게 어떻게 해서 이런 편리한 API가 나오게 됐는지 궁금해 찾아보다 보니 콜백 지옥부터 시작하게 되었다. 개발 공부 극초반에 애용하던 드림 코딩 by엘리 유튜브 채널에서 관련 영상을 쭉 본 적이 있는데 그때는 이 비동기적 처리 부분에서 많이 헤맸고 결국 이해를 거의 하지 못하고 넘어갔었다. 하지만 이제는 직접 사용을 해보게 되는 시기가 왔고, 피할 수 없는 중요한 개념이라는 생각이 들어 이번 기회에 다시 공부해보기로 했다. 포스팅에 적힌 예시 코드는 엘리님 유투브 강의 기반으로 작성했고, 추가적인 설명은 모던 자바스크립트 deep dive책을 기반으로 덧붙였다. 앞으로 세 포스팅에 걸쳐 콜백 지옥을 직접 경험해보고 이의 대안으로 나온 프로미스(..

엘리님의 브라우저 101이라는 강의를 듣고 있다. 사실 직접해보는 시간을 가지고, 또 강의를 듣는 과정을 반복하니 어려웠던 함수를 선언하고 호출하는 것도 '아 이거구나!' 하는 순간이 왔다. 하지만 class를 이용해 리펙토링하는 과정에서 정말 너무 부족함을 깨달았다. 그 전과는 다른 어려움이랄까.. 항상 하루에 드는 깨달음이 있으면 글을 적는 편인데, 이번에는 그런게 없었고, 계속 '왜 그런 거지?'라는 의문이 들었다. 유튜브에 있는 class와 콜백 함수와 관련해 있는 강의는 다 보았다. 봐도 좀 어려웠지만, 반복해서 보니 이해가 좀 되는 것 같다 싶어 다시 강의를 보면 '왜?'라는 생각이 들었다. 그리고 다시 유투브강의들을 보고, 문법책도 보았다. 주말에 약속이있어 약속 장소를 가는 버스에서도, 자..

거의 다 썼는데 지워져서 다시 쓴다... 왜 저장이 안 되었을까요. 어젯밤 Array, for, forEach 관련해 세 문제를 풀었다. 1, 2 번은 결국에는 틀렸어도 근접은 했고, 왜 틀렸는지 알았을 때 깨달음이 한 번에 왔는데, 3번은 이해하는데 시간이 조금 걸렸고, 특히 forEach를 이용한 것은 답지도없고 너무 어려워서 늦은 밤까지 이해하려고 애를 썼다. 문법책을 보니 orEach를 이해하려면 콜백함수의 개념까지 이해해야 한다고 한다. 그래서 더 어려웠지만, 한 시간 넘게 그것만 바라보니까 적어도 이 문제를 완벽히 이해하는데는 성공했다. 오늘은 세 문제를 15분만에 풀고 기분 좋은 아침을 맞이하는 중이다. Q1 Array 안에서 철수를 찾아라. ( find, indexOf 이런 함수들 사용 금..

애플 코딩님의 강의를 듣고 있는데 이 강사님은 jQuery로 작성법을 알려주실 때가 많다. 순수 Javascript를 알고 싶은 나는 강사님이 jQuery로 작성하시면 강의를 잠시 멈추고 Javascript 작성법으로 최대한 찾아 적어놓는다. 덕분에 강의듣는 시간은 느려지긴 했지만, 이 과정이 꼭 필요하다고 생각했다. 재밌기도 하고.. 이번에는 HTML를 자바스크립트에서 동적으로 생성하는 것을 배웠다. 만약 아래의 HTML 코드에서 주석 처리된 부분을 순수 자바스크립트를 사용해 추가시키고 싶다면 어떻게 해야 할까? 상품선택 모자 셔츠 Select the size 1. jQuery 작성법 강사님이 알려주신 jQuery로 작성하면 간단하다. template라는 변수를 만들어 넣을 html 코드를 넣고 app..