✅catch 메소드를 여러 개 쓰는 경우#9 안녕하세요 TriplexLab 입니다. 이번시간에는 catch 메소드를 여러 개 쓰는 경우에 대해서 살펴보겠습니다.🔥🔥 우리는 이제 catch 메소드를 Promise Chain 가장 마지막에 붙임으로써, 중간에 에러가 발생해서 어느 Promise 객체가 rejected 상태가 되더라도 항상 대처할 수 있도록 해야 한다는 걸 배웠습니다. 하지만 catch 메소드를 마지막뿐만 아니라 Promise Chain 중간중간에 쓰는 경우도 존재합니다. 만약 중간에 에러가 발생해도 catch 메소드가 그 대안을 뒤로 넘겨줄 수 있으면 catch 메소드를 중간에 써도 되는데요. 아래 코드를 잠깐 봅시다. fetch('https://friendbook.com/my/newsfee..

😃 catch 메소드는 마지막에 씁니다#8 안녕하세요 TriplexLab 입니다. 이번 시간에는 catch 메소드를 실무에서 보통 어떻게 사용하는지 보겠습니다. 일단 다음 코드를 보면 지금 fetch함수 작업이 실패하더라도 catch메소드에서 대비를 하고 있기 때문에 괜찮습니다. 그런데 만약 catch 메소드 뒤에 있는 then 메소드 콜백에서 에러를 발생하면 어떻게 될까요?? fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error) }) .then((result) => { console.log(result) }); 제가 여기서 이니적..

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

UI/UX 디자인 아이디어 공유 Mobile app design by Abu Bokkor Siddik Mobile app design I'm ready for new projects, Let's talk: abustudio82@gmail.com We will provide both service Design & Development: • Website & Mobile Design • Interaction Design • Front-End Development • UX Research and UX Design • User Interface Design Check My O dribbble.com

🏋️catch 메소드 이해하기#7 안녕하세요. 이번시간에는 catch 메소드에 대해서 이야기를 해보도록 하겠습니다. // Internet Disconnected fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); }); fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달될 수 있는 걸까요? 사실 이 내용은 이전의 'then 메소드 완벽하게 이해하기' 노트를 잘 읽었다면 바로 이해할 수 있는 내용인데요. 지금 이 코드를 이렇게 수정..

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

🧑🏻‍💻then 메소드 완벽하게 이해하기#6 Promise 객체를 배울 때는 then 메소드에 관해서만 확실히 알면 딱히 어려운 내용이 없습니다. 이번 노트에서는 Promise의 then 메소드에 관한 규칙을 제대로 깊이있게 배워봅시다. 잠깐 아래 코드를 보세요. 👇👇 const successCallback = function () { }; const errorCallback = function () { }; fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then(successCallback, errorCallback); // Promise-B 이 코드를 해석해봅시다. 일단, 이 코드에서 (1) fetch 메소드가 리턴하는 Promi..

🎤음성 인식 검색(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가 있..

💻rejected 상태가 되면 실행할 콜백#5 지금까지는 Promise 객체 fulfilled 상태인 경우만 생각했는데요. 사실 하나의 Promise 객체가 가질수 있는 상태는 총 3가지가 있다고 했습니다. 아직 작업중인 상태를 나타내는 pending 상태 작업이 성공적으로 완료 되었음을 나타내는 fulfilled 상태 작업이 실패 되었음을 나타내는 rejected 상태 이렇게 3가지 라고 했는데요. 이 중에서 fulfilled 상태는 작업 성공 결과를 갖게 되고, rejected 상태는 작업 실패 정보를 갖게 됩니다. 여기서 첫번째 then메소드를 보면 이때까지와 달리 총 두개의 콜백이 들어가 있습니다. 일단 첫번째 콜백은 우리가 이때까지 배웠던것 처럼 Promise 객체가 fulfilled 상태가 될..

🙏재귀함수 뽀개기 javascript 안녕하세요 TriplexLab 입니다. 오늘은 재귀함수[재귀패턴]에 관해서 이야기를 해보도록 하겠습니다. 👉재귀함수 개념 (재귀패턴) 재귀적으로 문제를 풀기 위해서는 문제를 같은 형태의 더 작은 문제로 쪼개야 하기 때문에 패턴을 찾아야 합니다. 재귀함수를 쓸 때는 항상 두 경우가 있어야 합니다. base case: 더 이상 문제를 쪼갤 필요가 없는 종료된 경우 recursive case: 문제를 쪼개서 풀어가는 경우 아주 간단한 예시를 살펴 봅시다.🙏 function f(n) { if (n 0){ // base case console.log(n) return countdown(n - 1) // recursive case } } countdown(4) 실행하면 실제로 ..

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