🔥Promisify(프로미스화)(Promise 동작원리)​ 이전 노트에서는 직접 Promise 객체를 만드는 방법을 배웠습니다. 그럼 언제 이런 식으로 Promise 객체를 직접 만들게 되는 걸까요? 다양한 경우들이 있지만, 전통적인 형식의 비동기 실행 함수를 사용하는 코드를, Promise 기반의 코드로 변환하기 위해 Promise 객체를 직접 만드는 경우가 많습니다. 각각의 예시를 통해 이게 무슨 말인지 이해해봅시다. 👉setTimeout 함수 예시 예를 들어 이런 wait이라는 함수가 있다고 합시다. function wait(text, milliseconds) { setTimeout(() => text, milliseconds); } wait 함수는 특정 밀리세컨즈만큼 시간이 지난 후에 text 파..

👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..

✅JavaScript로 최신순, 베스트순 만들기 안녕하세요 TriplexLab입니다. 오늘은 JavaScript로 최신순, 베스트순을 구현해 보겠습니다. 🔥Mock데이터를 화면에 출력 먼저 Mock 데이터를 fetch, async / await을 사용해서 화면에 출력하는 것부터 만들어 보겠습니다. const $ = (select) => document.querySelector(select); (() => { const getDatas = async () => { const res = await fetch("./mock.json"); const body = await res.json(); return body; } const handleLoad = async () => { await getDatas().t..

🧭카카오 지도 api 안녕하세요 TriplexLab 입니다. 오늘은 카카오 지도 api 두번째 시간으로 우편번호 서비스를 이용해서 위도, 경도 값을 구해오는 것을 해보겠습니다. 📬우편번호 서비스를 이용한 카카오 지도 (() => { const _tr = (select) => document.querySelector(select); const mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.5547125, 126.9707878), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; // 지도를 생성합니다 const map = new kakao.ma..

🧭카카오 지도 api 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오톡 지도 api 사용하는 모습을 보여 드리겠습니다. 🎯ToDo List 👉카카오 맵 관리 설정 [KaKao developers] 1. 카카오 맵 API사이트에서 제공하는 기본 지도 HTML를 가져온다. [참고 링크] 2. 카카오 개발자 사이트에 가서 내 애플리케이션에 Test용도를 만들어준다. 3. 웹으로 만들 거니깐 JavaScript 키값을 'appkey=발급받은 APP KEY를 사용하세요'라는 곳에 수정합니다. 4. 카카오 개발자 사이트에 플랫폼 탭에서 테스트할 해당 주소를 추가해야 합니다. ex) http://127.0.0.1:5500 애플리케이션 추가하기 버튼을 클릭하여 추가할 수 있습니다. 새로운 ..

안녕하세요 TriplexLab 입니다. 오늘은 커링에 대해서 이야기를 해보겠습니다. 🔥커링이란? 함수형 프로그래밍 고급패턴 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 고급패턴이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예를 들어 우리가 배민을 예시로 들자면 어떤 스토어 안에 들어가면 메뉴 리스트가 쭉 나옵니다. 이런 개념으로 아래 코드을 보시면 이해하기 편합니다. const order = (store) => (menu) => { console.log(`${store} - ${menu}`); }; // 사용하는 쪽에서 함수를 두 번 호출이 가능합니다. order('중국집')('자장면') order('중국집')('짬뽕') order('중국집')('탕수..

🏆직접 만들어보는 Promise 객체(Promise 동작원리) 이때까지 우리는 예시코드에서 fetch함수에서 리턴하는 promise객체를 사용했습니다. 그런데 사실 이렇게 어떤 함수가 리턴하는 promise객체를 가져다 쓰는게 아니라 직접 promise객체를 생성하는것도 가능합니다. 이번 시간에는 직접 promise객체를 만드는 방법을 배워 보겠습니다. 이 코드가 바로 promise객체를 직접 생성하는 코드 입니다. const p = new Promise((resolve, reject) => { }); new Promise 이 부분이 promise객체를 생성 하는 코드 인데요 이렇게 new를 붙이면 자바스크립트에서는 새로운 객체를 생성할수 있습니다. 여기서 중요한것은 파라미터로 들어간 콜백 함수 입니다...

⚡️axios, XMLHttpRequest 파일 업로드하기 안녕하세요 TriplxLab 입니다. 오늘 파일 업로드하면서 클라이언트에서 처리해야 하는 progressBar에 관해서 살펴보도록 하겠습니다. 전송 0% 👉XMLHttpRequest 기반으로 작업한 파일 업로드 기능 XMLHttpRequest 기반으로 작업한 파일 업로드 progressBar를 구현해봤습니다. 👉axios 기반으로 작업한 파일 업로드 기능 axios 기반으로 작업한 파일 업로드 progressBar를 구현해봤습니다. axios를 사용하게 되면 지원하는 메소드가 별루 없어서 디테일하게 작업해야 하는 상황에서는 못쓸것 같다. 공식 API 문서를 봤는데 '파일 업로드에 대한 진행 이벤트 처리를 허용합니다.'라는 onUploadProgr..

📔Promise 객체는 왜 등장했을까?(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise 객체는 왜 등장했을까? 라는 주제로 이야기를 해보겠습니다. 이때까지 우리는 Promise Chaining, then/catch/finally 메소드 등 Promise 객체에 관한 많은 것들을 배웠습니다. 그런데 여기서 궁금한 점이 하나 있습니다. Promise 객체는 왜 등장한 걸까요? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는 방법은 있었습니다. setTimeout 함수나, addEventListener 메소드처럼요. setTimeout(callback, milliseconds); addEventListener(eventname, callback);..

🏋️프론트엔드 면접 질문 안녕하세요 오늘은 프론트엔드 개발자 (기술)면접 인터뷰 질문에 대해서 이야기를 해볼게요 👉1. 브라우저 렌더링 원리 📌사진을 보듯이 브라우저의 기본구조는 사용자 인터페이스에서, 브라운저 엔진으로 그 다음에 '렌더링엔진'으로 연결됩니다. '렌더링엔진'의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일을 합니다. '렌더링엔진'은 HTML, XML 문서와 이미지를 표시할 수 있고, 플러그인이나 브라우저 확장기능을 이용해 PDF 같은 다른 유형도 표시할 수 있습니다. 그리고 각 브라우저마다 사용하는 '렌더링엔진'이 다른데 파이어폭스는 게코(Gecko)엔진으로 사용하고, 사파리, 크롬은 웹킷(webkit)을 사용한다는 것도 알고 있으면 굉장히 좋습니다. 더보기 렌더링 엔진 동작 ✅브라..

🧑🏻‍💻Node.js로 크롤링하기(맛보기) 안녕하세요 TriplexLab 입니다. 오늘은 Node.js로 웹 크롤링에 관해서 살펴보도록 하겠습니다. 사실은 크롤링이라는것은 구글에 검색앤진, 네이버에 검색앤진이 내 사이트를 퍼가는 행위를 크롤링이라고 부릅니다. 내가 원하는 사이트에 원하는 데이터를 가져오는 행위가 웹스크래핑이라고 부릅니다. 두가지 단어를 혼용해서 사용하기도 합니다. 👉목표 이번에 할것은 Node.js를 이용해서 인프런 사이트에 데이터를 웹스크래핑을 하고 mongodb에 저장하는것을 해보겠습니다. 👉모듈 설치 yarn add axios cheerio dotenv mongoose 그리고 여기서 사용할 팩키지들을 모두 불러 옵니다. // app.js const axios = require('ax..

🤟finally 메소드(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 이때까지 우리는 Promise객체의 then메소드와 catch메소드에 대해서 배웠습니다. 하지만 알아야 할 메소드가 하나더 남았습니다. 바로 finally 메소드 입니다. 만약 어떤 비동기 작업이 성공하든, 실패하든 상관 없이 그렇니깐 Promise 객체가 fulfilled 상태가 되든 , rejected 상태가 되든 상관 없이 항상 실행하고 싶은 콜백이 있을때는 어떻게 해야 할까요? 그런 콜백을 finally 메소드로 등록하면 됩니다. 일단 현재 코드에 finally 메소드를 추가해볼게요 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => ..