ETC
유닉스 커맨드 라인과 그 밖에 유용한 TIP들을 공유합니다.
-
🧑🏻💻Homebrew M1 설치 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼♂️ 👉Homebrew와 Cask, 설치 및 기본 사용법 오늘은 macOS에서 사용하는 homebrew 이라는 괜찮은 '패키지 매니저'를 소개할게요~ (쉽게 이야기하면 패키지 매니저란 마우스로 여기저기 클릭하여 프로그램을 설치하는 앱스토어가 아니라 타자를 쳐서 프로그램을 설치할수 있는 앱스토입니다.) Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 그렇다면 왜 실제 Homebrew를 사용할까? 앱스토어엔 찾아볼 수 없는 개발과 관련한 다양한 패키지를 다운로드하는 것은 물론 프로그램 설치, 버..
Homebrew M1 설치🧑🏻💻Homebrew M1 설치 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼♂️ 👉Homebrew와 Cask, 설치 및 기본 사용법 오늘은 macOS에서 사용하는 homebrew 이라는 괜찮은 '패키지 매니저'를 소개할게요~ (쉽게 이야기하면 패키지 매니저란 마우스로 여기저기 클릭하여 프로그램을 설치하는 앱스토어가 아니라 타자를 쳐서 프로그램을 설치할수 있는 앱스토입니다.) Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 그렇다면 왜 실제 Homebrew를 사용할까? 앱스토어엔 찾아볼 수 없는 개발과 관련한 다양한 패키지를 다운로드하는 것은 물론 프로그램 설치, 버..
2022.02.28 -
안녕하세요 TriplexLab 입니다. 오늘은 jQuery + Ajax 관해서 살펴보도록 하겠습니다. FE개발들 사이에서 역사로 남고 있는 jQuery + Ajax 기술을 왜 글을 작성하냐고요?? 역사로 남게 될거니깐!! 정리하는 차원으로 이 글을 작성 합니다. 몇 십년을 웹시장에서 주름잡았던 jQuery + Ajax 기술 간단하게 요약해 봅니다. 👉jQuery + Ajax Ajax는 서버로에게 비동기 요청을 보낼수 있는 방식중에 하나 입니다. 종류는 크게 4가지가 있습니다. GET, POST, PUT, DELETE가 있는데, Ajax는 이러한 방식으로 API를 요청할 수 있도록 도와주는 라이브러리이다. GET : 데이터 요청 POST : 데이터 추가 PUT : 데이터 수정 DELETE : 데이터 삭제 ..
jQuery + Ajax안녕하세요 TriplexLab 입니다. 오늘은 jQuery + Ajax 관해서 살펴보도록 하겠습니다. FE개발들 사이에서 역사로 남고 있는 jQuery + Ajax 기술을 왜 글을 작성하냐고요?? 역사로 남게 될거니깐!! 정리하는 차원으로 이 글을 작성 합니다. 몇 십년을 웹시장에서 주름잡았던 jQuery + Ajax 기술 간단하게 요약해 봅니다. 👉jQuery + Ajax Ajax는 서버로에게 비동기 요청을 보낼수 있는 방식중에 하나 입니다. 종류는 크게 4가지가 있습니다. GET, POST, PUT, DELETE가 있는데, Ajax는 이러한 방식으로 API를 요청할 수 있도록 도와주는 라이브러리이다. GET : 데이터 요청 POST : 데이터 추가 PUT : 데이터 수정 DELETE : 데이터 삭제 ..
2022.02.15 -
🎤음성 인식 검색(JS) 안녕하세요 TriplexLab 입니다. 오늘의 예제는 음성 검색에 관해서 살펴 보도록 하겠습니다. 웹에서 음성 인식 추출 API( Web Speech API ) 사용합니다. 기본으로 제공해주고 있어 별도의 작업 없이 사용할 수 있습니다만, 아쉽게도 PC에서 현재는 Chrome, Edge, Safari에서만 제공되고 모바일에서는 안드로이드, 사파리, 등등 제공되고 있네요. 💻브라우저 스팩 확인하기 👉만들어볼 예제 유튜브 영상[링크참고] 타자가 아니라, 브라우저에서 음성으로 검색어에 입력을 하는 모습 입니다. 로컬에서 테스를 하였는데 매우 잘 동작 하네요 😃😃👍 👉소스코드 공유 HTML 구조는 다음과 같이 생겼습니다. onresult관한 이벤트에 관해서 살펴볼게요 recognitio..
음성 인식 검색(JS)🎤음성 인식 검색(JS) 안녕하세요 TriplexLab 입니다. 오늘의 예제는 음성 검색에 관해서 살펴 보도록 하겠습니다. 웹에서 음성 인식 추출 API( Web Speech API ) 사용합니다. 기본으로 제공해주고 있어 별도의 작업 없이 사용할 수 있습니다만, 아쉽게도 PC에서 현재는 Chrome, Edge, Safari에서만 제공되고 모바일에서는 안드로이드, 사파리, 등등 제공되고 있네요. 💻브라우저 스팩 확인하기 👉만들어볼 예제 유튜브 영상[링크참고] 타자가 아니라, 브라우저에서 음성으로 검색어에 입력을 하는 모습 입니다. 로컬에서 테스를 하였는데 매우 잘 동작 하네요 😃😃👍 👉소스코드 공유 HTML 구조는 다음과 같이 생겼습니다. onresult관한 이벤트에 관해서 살펴볼게요 recognitio..
2022.02.11 -
ESLint 설정 안녕하세요 TriplexLab 입니다 :) ESLint 설정에 대해서 살펴봅니다. 👉ESLint 간단한 소개 ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드 또는 안티 패턴을 찾기 위해 사용하는 Javascript linter 입니다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다. 👉ESLint 환경 설정 ESLint는 node.js 환경에서 동작 합니다. node.js가 먼저 설치되어야 합니다. [ESLint 공식문서를 참고했습니다.] 🎯환경(env) env는 사전 정의된 전역 변수 사용을 정의합니다. 자주 사용되는 설정으로는 browser, node가 있..
ESLint 설정ESLint 설정 안녕하세요 TriplexLab 입니다 :) ESLint 설정에 대해서 살펴봅니다. 👉ESLint 간단한 소개 ESLint는 코팅 스타일 가이드를 따르지 않거나 문제가 있는 코드 또는 안티 패턴을 찾기 위해 사용하는 Javascript linter 입니다. ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드(built-in rule)을 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수도 있습니다. 👉ESLint 환경 설정 ESLint는 node.js 환경에서 동작 합니다. node.js가 먼저 설치되어야 합니다. [ESLint 공식문서를 참고했습니다.] 🎯환경(env) env는 사전 정의된 전역 변수 사용을 정의합니다. 자주 사용되는 설정으로는 browser, node가 있..
2022.01.28 -
👏webpack5 default setting(웹팩5 Webpack) 안녕하세요 오늘은 webpack5 default setting에 관해서 이야기를 해보도록 하겠습니다. webpack5-default-setting-project은 html, css | scss, js, imgs, fonts 들을 모듈 형식으로 작업을 진행하고, 최종 파일을 min 파일로 압축시켜 배포할 수 있는 구조로써 프로젝트를 매번 새롭게 진행할 때 FE 개발자가 기본으로 세팅해야 하는 번거로움을 주리고자 만들었습니다. ✅반드시 확인해주세요! 현재 시점(2022년 1월 중순)에는 해당 setting 환경이 매우 잘 동작합니다. 하지만 시간이 어느정도 지나면 외부 모듈들은 버전이 변경될수 있으므로 내부 코드도 같이 변경이 됩니다. 그..
webpack5 default setting(웹팩5 Webpack)👏webpack5 default setting(웹팩5 Webpack) 안녕하세요 오늘은 webpack5 default setting에 관해서 이야기를 해보도록 하겠습니다. webpack5-default-setting-project은 html, css | scss, js, imgs, fonts 들을 모듈 형식으로 작업을 진행하고, 최종 파일을 min 파일로 압축시켜 배포할 수 있는 구조로써 프로젝트를 매번 새롭게 진행할 때 FE 개발자가 기본으로 세팅해야 하는 번거로움을 주리고자 만들었습니다. ✅반드시 확인해주세요! 현재 시점(2022년 1월 중순)에는 해당 setting 환경이 매우 잘 동작합니다. 하지만 시간이 어느정도 지나면 외부 모듈들은 버전이 변경될수 있으므로 내부 코드도 같이 변경이 됩니다. 그..
2022.01.17 -
크롬 개발자도구 TIP 안녕하세요 오늘은 크롬 개발자도구 TIP에 관해서 살펴보도록 하겠습니다. 👉 Devtools Screenshot(개발자 도구 스크린샷) 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생겨요. 거기서 screenshot이라고 검색하면 4가지 종류의 스크린샷이 있습니다. 상황에 맞에 본인에게 필요한거 선택해서 쓰시면 됩니다. 👉 Coverage(적용 범위) 이것도 마찬가지로 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생기면 coverage라고 검색하고 앤터키를 누르면 아래와 같이 창이 생깁니다. 그럼 여기서 새로고침 버튼을 클릭하면 아래와 같이 css와, js파일들을 ..
크롬 개발자도구 TIP크롬 개발자도구 TIP 안녕하세요 오늘은 크롬 개발자도구 TIP에 관해서 살펴보도록 하겠습니다. 👉 Devtools Screenshot(개발자 도구 스크린샷) 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생겨요. 거기서 screenshot이라고 검색하면 4가지 종류의 스크린샷이 있습니다. 상황에 맞에 본인에게 필요한거 선택해서 쓰시면 됩니다. 👉 Coverage(적용 범위) 이것도 마찬가지로 크롬에서 개발자 도구를 여시고 command + shift + p를 누르시면 중앙에 검색할수 있는 창이 생기면 coverage라고 검색하고 앤터키를 누르면 아래와 같이 창이 생깁니다. 그럼 여기서 새로고침 버튼을 클릭하면 아래와 같이 css와, js파일들을 ..
2021.12.23 -
테오의 스프린트 체험 1기 안녕하세요 TriplexLab입니다. 오늘은 제가 이번에 경험한 구글 스프린트 체험에 관한 서 이야기를 해보도록 하겠습니다. 먼저 이번 1기에 관한 자세한 배경 이야기를 알고 싶은 분들은 아래 링크를 참고해주세요!!👇👇 테오의 구글 스프린트(체험) 1기 💨 구글 스프린트 해보실래요? 혹시 5일만 진행하면 해보고 싶으신분 계신가요? 원격으로? 하루 1시간? 그냥 구글 스프린트 5일만 돌려보는거에요 잘 되든 말든... velog.io 🙋♂️나의 현 상황 및 목적을 이야기 하자면 이번 스프린트에서 얻고자 했던 것 - 새로운 사람들과 개발에 관한 커뮤니케이션을 해보고, 프런트 개발의 역할 중 데이터 바인딩에 관해서 익숙해지는 것 기술 스택 - html, css, JavaScript ..
구글 스프린트 체험 1기테오의 스프린트 체험 1기 안녕하세요 TriplexLab입니다. 오늘은 제가 이번에 경험한 구글 스프린트 체험에 관한 서 이야기를 해보도록 하겠습니다. 먼저 이번 1기에 관한 자세한 배경 이야기를 알고 싶은 분들은 아래 링크를 참고해주세요!!👇👇 테오의 구글 스프린트(체험) 1기 💨 구글 스프린트 해보실래요? 혹시 5일만 진행하면 해보고 싶으신분 계신가요? 원격으로? 하루 1시간? 그냥 구글 스프린트 5일만 돌려보는거에요 잘 되든 말든... velog.io 🙋♂️나의 현 상황 및 목적을 이야기 하자면 이번 스프린트에서 얻고자 했던 것 - 새로운 사람들과 개발에 관한 커뮤니케이션을 해보고, 프런트 개발의 역할 중 데이터 바인딩에 관해서 익숙해지는 것 기술 스택 - html, css, JavaScript ..
2021.12.19 -
블랙커피 스터디 소개 블랙커피 스터디를 소개합니다. 아래 링크를 클릭해서 확인할수 있습니다 :) 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - 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 스탭3 회고블랙커피 스터디 소개 블랙커피 스터디를 소개합니다. 아래 링크를 클릭해서 확인할수 있습니다 :) 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com moonbucks-menu 스탭3 회고 안녕하세요 TriplexLab 입니다. 오늘은 moonbucks-menu 스탭2을 이어서 스탭3 회고를 작성해보겠습니다. moonbucks-menu 스탭1 회고 moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌 triplexlab...
2021.12.06 -
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)..
moonbucks-menu 스탭2 회고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)..
2021.12.01 -
코드블럭 TEXT내용 클립보드 복사하기 안녕하세요 TriplexLab 입니다. 이번 시간에는 navigator를 이용한 코드블럭의 TEXT내용을 클립보드에 복사하는 방법에 관해서 살펴보도록 하겠습니다. 👉 코드설명 1. pre라는 시작 엘리먼트 바로 하단에 안에 button엘리먼트를 동적으로 삽입합니다.(렌더링 시점) $('.article_view pre').insertAdjacentHTML( 'afterbegin', '' ); 2. css에서 data-txt속성에 있는 텍스트를 읽옵니다. /* data-txt속성에 있는 텍스트를 읽옵니다. */ .code_btn:before{ content: attr(data-txt);} 3. 버튼을 클릭하면 navigator.clipboard.writeText() 메..
코드블럭 TEXT내용 클립보드 복사하기코드블럭 TEXT내용 클립보드 복사하기 안녕하세요 TriplexLab 입니다. 이번 시간에는 navigator를 이용한 코드블럭의 TEXT내용을 클립보드에 복사하는 방법에 관해서 살펴보도록 하겠습니다. 👉 코드설명 1. pre라는 시작 엘리먼트 바로 하단에 안에 button엘리먼트를 동적으로 삽입합니다.(렌더링 시점) $('.article_view pre').insertAdjacentHTML( 'afterbegin', '' ); 2. css에서 data-txt속성에 있는 텍스트를 읽옵니다. /* data-txt속성에 있는 텍스트를 읽옵니다. */ .code_btn:before{ content: attr(data-txt);} 3. 버튼을 클릭하면 navigator.clipboard.writeText() 메..
2021.11.28 -
moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com 👉 스탭 1에서 얻은 인사이트 1. 중복 코드를 하나의 함수로 따로 빼서 관리한다는 것 2. 요구사항을 단계별로 세세하게 나누는 게 중요하다는 걸 알게 됐다. 3. DOM 요소를 가져올 때는 $기호를 써서 변수로 사용할 수 있는 게 좋았다.(jquery 아님) 4. 새롭게 알게 된 메서드 insertAdjacentHTML // step1 요구..
moonbucks-menu 스탭1 회고moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com 👉 스탭 1에서 얻은 인사이트 1. 중복 코드를 하나의 함수로 따로 빼서 관리한다는 것 2. 요구사항을 단계별로 세세하게 나누는 게 중요하다는 걸 알게 됐다. 3. DOM 요소를 가져올 때는 $기호를 써서 변수로 사용할 수 있는 게 좋았다.(jquery 아님) 4. 새롭게 알게 된 메서드 insertAdjacentHTML // step1 요구..
2021.11.26 -
🦿 Webpack library build 안녕하세요 TriplexLab입니다. 오늘은 webpack으로 library를 직접 만들 수 있는 환경 세팅에 관해서 이야기를 해보겠습니다. 본격적인 이야기를 들어가기 앞서 먼저 배경 이야기를 해보자면 npm에 있는 수많은 플러그인, 또는 라이브러리가 있는데... 그런 것들을 가져다가 사용할 때는 몰랐습니다... 정말 좋은 시대에서 우리가 개발을 하고 있구나라는 사실을... 어떻게 생각지도 못했던 라이브러기들을 미리 만들어 놓고 무료로 배포까지 해주셨다니... 정말 외국에 개발자들의 마인드를 보고 배우고 싶다...라는 생각이 듭니다. 그래서 저도 대단한 플러그인은 아니지만, 서비스를 만드는 과정에서 자주 쓰는 기능들을 나만의 플러그인(모듈)을 만들고 싶어졌습니다..
Webpack library build🦿 Webpack library build 안녕하세요 TriplexLab입니다. 오늘은 webpack으로 library를 직접 만들 수 있는 환경 세팅에 관해서 이야기를 해보겠습니다. 본격적인 이야기를 들어가기 앞서 먼저 배경 이야기를 해보자면 npm에 있는 수많은 플러그인, 또는 라이브러리가 있는데... 그런 것들을 가져다가 사용할 때는 몰랐습니다... 정말 좋은 시대에서 우리가 개발을 하고 있구나라는 사실을... 어떻게 생각지도 못했던 라이브러기들을 미리 만들어 놓고 무료로 배포까지 해주셨다니... 정말 외국에 개발자들의 마인드를 보고 배우고 싶다...라는 생각이 듭니다. 그래서 저도 대단한 플러그인은 아니지만, 서비스를 만드는 과정에서 자주 쓰는 기능들을 나만의 플러그인(모듈)을 만들고 싶어졌습니다..
2021.11.15