코드블럭 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() 메..

moonbucks-menu 스탭 1 회고 안녕하세요 TriplexLab 입니다. blackcoffee study라는 프론트 앤드 개발자 스터디를 최근에 알게 되어서 그곳에서 들은 내용들을 적어 보겠습니다. 블랙커피를 소개합니다. 훌륭한 의사소통은 블랙커피처럼 자극적이며, 후에 잠들기가 어렵다 - A.M. 린드버그(미국의 작가, 수필가) www.makerjun.com 👉 스탭 1에서 얻은 인사이트 1. 중복 코드를 하나의 함수로 따로 빼서 관리한다는 것 2. 요구사항을 단계별로 세세하게 나누는 게 중요하다는 걸 알게 됐다. 3. DOM 요소를 가져올 때는 $기호를 써서 변수로 사용할 수 있는 게 좋았다.(jquery 아님) 4. 새롭게 알게 된 메서드 insertAdjacentHTML // step1 요구..

🦿 Webpack library build 안녕하세요 TriplexLab입니다. 오늘은 webpack으로 library를 직접 만들 수 있는 환경 세팅에 관해서 이야기를 해보겠습니다. 본격적인 이야기를 들어가기 앞서 먼저 배경 이야기를 해보자면 npm에 있는 수많은 플러그인, 또는 라이브러리가 있는데... 그런 것들을 가져다가 사용할 때는 몰랐습니다... 정말 좋은 시대에서 우리가 개발을 하고 있구나라는 사실을... 어떻게 생각지도 못했던 라이브러기들을 미리 만들어 놓고 무료로 배포까지 해주셨다니... 정말 외국에 개발자들의 마인드를 보고 배우고 싶다...라는 생각이 듭니다. 그래서 저도 대단한 플러그인은 아니지만, 서비스를 만드는 과정에서 자주 쓰는 기능들을 나만의 플러그인(모듈)을 만들고 싶어졌습니다..

🚉 ngrok 사용법 안녕하세요 TriplexLab입니다. 오늘은 ngrok에 관해서 이야기해보도록 하겠습니다. 먼저 ngrok은 로컬에서 작업 중인 것을 안전한 터널을 통해 외부에 공유하려고 할 때 쓰면 유용한 도구입니다. 요즘 재택근무가 잦아지면서 현재 로컬에서 작업하던 것을 외부에 공유해줘야 하는 상황이 많이 있습니다. 이런 상황일 때 사용하면 정말 좋습니다. 👉 ngrok 설치 해당 사이트에 방문해서 회원가입 및 로그인을 해주세요. 아래 링크에 들어가서 보시면 운영 체제별로 zip으로 압축한 패키지를 제공하므로 다운로드하여서 압축을 해제하고 PATH에 걸린 폴더에 넣은 후에 사용하면 됩니다. ngrok - secure introspectable tunnels to localhost dashboar..

🔥 git commit id 보기 설정 안녕하세요 TriplexLab 입니다. 오늘은 터미널에서 git log를 볼때 commit id를 보고 치고 싶은 상황을 설정해보겠습니다. (Git은 log나 diff같은 명령의 메시지를 출력할 때 페이지로 나누어 보여줍니다. 기본으로 사용하는 명령은 less입니다.) 👉 commit id 한눈에 보기 제 터미널의 상황👇 다음 명령어를 통해서 git log를 한줄로 보여지고 있습니다. 깔끔하게 commit id를 볼수 있는것은 좋은데 불편한것은 마지막에 (END)라고 나옵니다. git log --prettey=oneline 이럴때는 다음 명령어를 작성하기 위해서는 저장하고 빠져나와야만 한다. 다음 명령어를 작성하면 된다. :wq 나는 한눈에 깔끔하게 commit i..

🗜 squoosh 이미지 압축 서비스 안녕하세요 TriplexLab입니다. 오늘은 구글에서 만든 'Squoosh'라는 이미지를 최적화 서비스에 관해서 살펴보도록 하겠습니다. 해당 사이트 주소입니다.👇 Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app 단순한 이미지 압축 사이트가 아닙니다. (단순한 이미지 압축 사이트는 검색하면 많이 나옵니다. 그것들 참고해서 사용하시면 됩니다.) 제가 이 사이트를 소계 하는 이유는 이런 경우에 사용하면 좋을 것 같습니다. 회사 사이트나, 개인 사이..

👨‍💻 자주쓰는 명령어 .zshrc에 단축명령어 등록하기 안녕하세요 TriplexLab 입니다. 오늘은 macOS 터미널에서 자주 쓰는 긴 명령어를 단축명령어로 설정하여 간편하게 사용하는 방법에 관한서 알아보겠습니다. (밑에 처럼 유튜브에 있는 영상의 배경음악을 mp3의 파일일로 다운로드 할수 있습니다.) 단축 명령어로 유튜브 뮤직에 음악을 다운로드함. 자 이렇게 쉽게 음악 파일을 다운 받기 위해서는 다음과 같이 설정이 필요 합니다. 저 같은 경우에는 vim을 사용할것 입니다. (nano, vi, vim은 다 비슷한 텍스트 에디터입니다. 자신이 편한것으로 사용해도 무방합니다.) 🎯 alias (단축키) 설정하기 아래 방법은 zsh를 사용할 때입니다. 1. 터미널을 켜고, 아래 명령어를 입력합니다. vim..

💩 인터넷 익스플로러 엣지(edge) 자동전환 안녕하세요 TriplexLab입니다. :) 인터넷에 떠 돌고 있는 인터넷 익스플로러에서 자동으로 엣지로 리다이렉트 되는 코드를 가지고 커스터마이징 했습니다. 필요하신 분은 사용하세요! 요즘 인터넷 익스프로러 창을 열러고할때 마이크로소프트 익스플로러 엣지(edge)로 자동전환되서 화면이 열리는 현상이 일어나고 있습니다. 2022년 6월에 마이크로소프트는 인터넷 익스프로러 서비스를 완전히 종료한다고 발표했습니다. 그래서 미리미리 준비했습니다. 조금 이라도 빨리 엣지 브라우저에 적응 하시라고 (이왕이면 크롬브라우저 사용하시면 좋겠네요! 이글을 보고 있는 개발자 분들은 크롬을 쓰시겠지만...) 물론 엣지 브라우저에서 아래와 같이 설정을 변경해서 IE11를 계속 사용..

📌 Github SSH public Key란 안녕하세요 TriplexLab입니다. 오늘은 Github SSH public Key 2개 이상 등록하는 방법에 관해서 살펴보도록 하겠습니다. 먼저 Github에서 SSH public Key를 사용하는 이유는 보다 안전하게 암호화된 원격에 접속하기 위해서입니다. 즉 컴퓨터와 컴퓨터가 인터넷과 같은 Public Network를 통해 서로 통신을 할 때 보안적으로 안전하게 통신을 하기 위해 사용하는 접속 프로토콜입니다. 📌 STEP 1 - Git Hub용 SSH Key 생성 🎯다음 명령어를 입력한다. (메일 계정은 본인 git계정에 등록한 이메일 주소를 써주도록 하자.) ssh-keygen -t rsa -b 4096 -C "yourEmail@example.com" ..

🔒 GitHub 토큰 인증 로그인 안녕하세요 TriplexLab입니다. 오늘은 GitHub에서 ID/PW기반의 Basic Authentication 인증을 금지하고, ID/Personal Access Token 방식의 Token Authentication 인증을 요구하고 있어서 문제점: GitHub에서 ID/PW기반의 Basic Authentication 인증을 금지함. 해결 방법 요약: 토큰을 발급받아서 내 로컬 키체인에 저장합니다. 오늘 한번 push를 해보니 정말로 에러 메시지가 뜬다. 👇👇 에러 메세지: remote: Support for password authentication was removed on August 13, 2021. Please use a personal access toke..

🔑 티스토리 Access Token 발급받기 안녕하세요 TriplexLab입니다. 오늘은 티스토리 API Access Token 발급받기 방법에 대해서 살펴보도록 하겠습니다. 먼저 티스토리 API를 이용하기 위해서는 아래 사이트에서 API를 사용할 수 있는 권한을 얻어야 합니다. 📌 API 발급 절차와 안내받기 티스토리 open_api사이트에 방문하여 앱을 등록해 주셔야 합니다.! 👇👇 TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com 이렇게 내용을 채우고 등록을 눌러주면 바로 아래처럼 앱 아이디와, 시크릿 키를 발급받을 수 있습니다. 이제 오픈 API 가이드에 들어가면, api 발급 절차와 안내를 볼 수 있습니다. 소개 · GitBook No results matching..

유닉스(Unix-certified) 안녕하세요 TriplexLab 입니다. 오늘은 유닉스의 역사에 관해서 조금 정리해보겠습니다. 지금 우리가 알고 있는 운영체제 맥, 윈도우, 안드로이드, 리눅스, ubuntu, Red Hat, Chrome OS 등등은 모두 유닉스 라는 하나의 운영체제에서 시작되었습니다. 그러니깐 현재 우리가 알고 있는 운영체제들은 모두 유닉스라는 하나의 뿌리에서 시작하여 파생된 운영체제인것 입니다. 유닉스는 c언어로 만들어졌고, 수정해서 다른 컴퓨터에 적용하기 편했습니다. 그렇다 보니 당시 큰 인기를 끌었고, 유닉스를 변경할 수 있는 언어인 c언어도 덩달아 인기를 얻었습니다. 유닉스를 수정해서 다른 컴퓨터에 적용하는 사례가 많아지다 보니 다양한 버전의 유닉스가 만들어졌고요. 이게 너무 ..