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

🏋️프론트엔드 면접 질문 안녕하세요 오늘은 프론트엔드 개발자 (기술)면접 인터뷰 질문에 대해서 이야기를 해볼게요 👉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..

🧑🏻‍💻Homebrew M1 설치 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼‍♂️ 👉Homebrew와 Cask, 설치 및 기본 사용법 ​오늘은 macOS에서 사용하는 homebrew 이라는 괜찮은 '패키지 매니저'를 소개할게요~ (쉽게 이야기하면 패키지 매니저란 마우스로 여기저기 클릭하여 프로그램을 설치하는 앱스토어가 아니라 타자를 쳐서 프로그램을 설치할수 있는 앱스토입니다.) Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 그렇다면 왜 실제 Homebrew를 사용할까? 앱스토어엔 찾아볼 수 없는 개발과 관련한 다양한 패키지를 다운로드하는 것은 물론 프로그램 설치, 버..

안녕하세요 TriplexLab 입니다. 오늘은 jQuery + Ajax 관해서 살펴보도록 하겠습니다. FE개발들 사이에서 역사로 남고 있는 jQuery + Ajax 기술을 왜 글을 작성하냐고요?? 역사로 남게 될거니깐!! 정리하는 차원으로 이 글을 작성 합니다. 몇 십년을 웹시장에서 주름잡았던 jQuery + Ajax 기술 간단하게 요약해 봅니다. 👉jQuery + Ajax Ajax는 서버로에게 비동기 요청을 보낼수 있는 방식중에 하나 입니다. 종류는 크게 4가지가 있습니다. GET, POST, PUT, DELETE가 있는데, Ajax는 이러한 방식으로 API를 요청할 수 있도록 도와주는 라이브러리이다. GET : 데이터 요청 POST : 데이터 추가 PUT : 데이터 수정 DELETE : 데이터 삭제 ..

🎤음성 인식 검색(JS) 안녕하세요 TriplexLab 입니다. 오늘의 예제는 음성 검색에 관해서 살펴 보도록 하겠습니다. 웹에서 음성 인식 추출 API( Web Speech API ) 사용합니다. 기본으로 제공해주고 있어 별도의 작업 없이 사용할 수 있습니다만, 아쉽게도 PC에서 현재는 Chrome, Edge, Safari에서만 제공되고 모바일에서는 안드로이드, 사파리, 등등 제공되고 있네요. 💻브라우저 스팩 확인하기 👉만들어볼 예제 유튜브 영상[링크참고] 타자가 아니라, 브라우저에서 음성으로 검색어에 입력을 하는 모습 입니다. 로컬에서 테스를 하였는데 매우 잘 동작 하네요 😃😃👍 👉소스코드 공유 HTML 구조는 다음과 같이 생겼습니다. onresult관한 이벤트에 관해서 살펴볼게요 recognitio..

ESLint 설정 안녕하세요 TriplexLab 입니다 :) ESLint 설정에 대해서 살펴봅니다. 👉ESLint 간단한 소개 ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드 또는 안티 패턴을 찾기 위해 사용하는 Javascript linter 입니다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다. 👉ESLint 환경 설정 ESLint는 node.js 환경에서 동작 합니다. node.js가 먼저 설치되어야 합니다. [ESLint 공식문서를 참고했습니다.] 🎯환경(env) env는 사전 정의된 전역 변수 사용을 정의합니다. 자주 사용되는 설정으로는 browser, node가 있..

👏webpack5 default setting(웹팩5 Webpack) 안녕하세요 오늘은 webpack5 default setting에 관해서 이야기를 해보도록 하겠습니다. webpack5-default-setting-project은 html, css | scss, js, imgs, fonts 들을 모듈 형식으로 작업을 진행하고, 최종 파일을 min 파일로 압축시켜 배포할 수 있는 구조로써 프로젝트를 매번 새롭게 진행할 때 FE 개발자가 기본으로 세팅해야 하는 번거로움을 주리고자 만들었습니다. ✅반드시 확인해주세요! 현재 시점(2022년 1월 중순)에는 해당 setting 환경이 매우 잘 동작합니다. 하지만 시간이 어느정도 지나면 외부 모듈들은 버전이 변경될수 있으므로 내부 코드도 같이 변경이 됩니다. 그..

크롬 개발자도구 TIP 안녕하세요 오늘은 크롬 개발자도구 TIP에 관해서 살펴보도록 하겠습니다. 👉 Devtools Screenshot(개발자 도구 스크린샷) 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생겨요. 거기서 screenshot이라고 검색하면 4가지 종류의 스크린샷이 있습니다. 상황에 맞에 본인에게 필요한거 선택해서 쓰시면 됩니다. 👉 Coverage(적용 범위) 이것도 마찬가지로 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생기면 coverage라고 검색하고 앤터키를 누르면 아래와 같이 창이 생깁니다. 그럼 여기서 새로고침 버튼을 클릭하면 아래와 같이 css와, js파일들을 ..

테오의 스프린트 체험 1기 안녕하세요 TriplexLab입니다. 오늘은 제가 이번에 경험한 구글 스프린트 체험에 관한 서 이야기를 해보도록 하겠습니다. 먼저 이번 1기에 관한 자세한 배경 이야기를 알고 싶은 분들은 아래 링크를 참고해주세요!!👇👇 테오의 구글 스프린트(체험) 1기 💨 구글 스프린트 해보실래요? 혹시 5일만 진행하면 해보고 싶으신분 계신가요? 원격으로? 하루 1시간? 그냥 구글 스프린트 5일만 돌려보는거에요 잘 되든 말든... velog.io 🙋‍♂️나의 현 상황 및 목적을 이야기 하자면 이번 스프린트에서 얻고자 했던 것 - 새로운 사람들과 개발에 관한 커뮤니케이션을 해보고, 프런트 개발의 역할 중 데이터 바인딩에 관해서 익숙해지는 것 기술 스택 - html, css, JavaScript ..

블랙커피 스터디 소개 블랙커피 스터디를 소개합니다. 아래 링크를 클릭해서 확인할수 있습니다 :) 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com moonbucks-menu 스탭3 회고 안녕하세요 TriplexLab 입니다. 오늘은 moonbucks-menu 스탭2을 이어서 스탭3 회고를 작성해보겠습니다. moonbucks-menu 스탭1 회고 moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌 triplexlab...

moonbucks-menu 스탭2 중간 회고 안녕하세요 TriplexLab 입니다. 오늘은 moonbucks-menu 스탭1을 이어서 스탭2 회고를 작성해보겠습니다. moonbucks-menu 스탭1 회고 moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌 triplexlab.tistory.com moonbucks-menu 스탭1 회고 참고해주세요. 👍👍 👉 스탭 2 중간즘 에서 얻은 인사이트 1. 상태값이 중요한 이유는 사용자에게 입력 받은 정보(상태)를 저장하고, 불러와줘야 동적인 웹페이지를 만들수가 있습니다. - (EX)..