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

👨‍💻 VIM 명령모드 텍스트 치환하기 안녕하세요 TriplexLab 입니다. 최근에 유닉스 커맨드 라인을 공부하고 있는데 좀 신기하고, 재미 있는 것을 찾아서 정리 할려고 합니다. VIM란 VIM은 CLI환경에서 텍스트 에디터 처럼 사용할수 있는 프로그램 입니다. 실습 시작 👇 메모장 파일에 다음과 같은 텍스트를 미리 작성했습니다. // test파일명 I love Javascript I like Java I want to learn deep learning! I like triplexlab! I like programiing! I am a programmer. Data science is important! I like computer science! 해당 파일있는 곳으로 접근하기 터미널에서 메모장 파..

💡 CSS에서 데이터 속성 사용하기 안녕하세요 TriplexLab 입니다. 오늘은 css에서 데이터 속성 사용는 방법에 관해서 살펴보도록 하겠습니다. HTML 문법 HTML 태그에 data-로 시작하는 속성을 사용해서 어떠한 데이터든 몰래 담아놓을수 있습니다. ... CSS 에서 접근하기 data- 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있습니다! 다음과 같이 접근해서 데이터 값을 가져올수도 있습니다. (유용하게 사용할수 있을것 같네요ㅎㅎ) article::before { content: attr(data-columns); // 3 } article::before { content: attr(data-index-number); // 12314 } article::before { con..

♻️ for의 break, forEach의 return false 차이점 안녕하세요 TriplexLab 입니다. 오늘은 for문에 break문과 forEach문에 return false문의 차이점을 설명 하다고 히겠습니다. 📝 배경설명 for문과, forEach문 둘다. 동일한 sceneInfo라는 배열 객체를 돌고 있습니다. 그리고 sceneInfo에 있는 scrollHeight값을 더해서 totalScrollHeight라는 변수에 갱신을 해주고 있는 상황 입니다. 💡 차이점 for문에 break문인 경우 : 특정 조건에 바로 break가 됩니다. forEach문에 return false문인 경우 : 특정 조건에 return false가 되긴 하는데 배열요소를 한번 쭉 돌고 빠져 나옵니다. const ..

👏 css 꿀팁 웹서비스 5가지 안녕하세요 TriplexLab 입니다. 오늘은 css 작업할때 유용하게 사용되는 꿀팁 3가지를 정리해보겠습니다. 프로젝트 할 때는 이런 도구를 잘 활용하는 면 이득을 보는 것 같네요ㅎㅎ 하지만 개인 공부를 하는 차원에서는 이런 도구를 활용하면 오히려 독이 될 수 있습니다. (개인 공부할 때는 바닥부터 만들어 보는 것이 기억에 오래 남습니다 👍👍) 📌 CSS Grid Generator CSS 그리드를 간편하게 만들 수 있도록 도와주는 온라인 서비스입니다. 그리드 행과 열, 사이 여백 등을 설정하면 HTML 코드와 CSS 코드를 생성해줍니다. CSS Grid Generator cssgrid-generator.netlify.app 행과 열 개수가 많은 그리드를 만들 때 깔끔한 ..

😸 TypeScript 설치및 환경설정 안녕하세요 TriplexLab 입니다. 오늘은 TypeScript 설치관한 이야기를 해보도록 하겠습니다. 😀 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 사이트에 들어가서 보면 다음과 같은 2가지 버전을 선택하여 다운로드 할수 있습니다. 왼쪽에 있는 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전'이라는 뜻입니다. LTS 버전이 되면, 그 뒤로 30개월 동안은 해당 버전에서 발견되는 각종 버그 등에 대한 패치(수정)를 Node.js 커뮤니티로부터 보장받을 수 있습니다. LT..

😏 CSS 선택자 :nth-child 안녕하세요 TriplexLab 입니다. 오늘은 CSS 선택자 :nth-child 대해서 정리해볼게요 📌 다섯 번째 요소 만 선택하기 li:nth-child(5) { color: green; } 📌 6번째 부터 요소 선택 li:nth-child(n+6) { color: green; } 📌 처음 부터 다섯 가지만 선택하십시오. li:nth-child(-n+5) { color: green; } 📌 매 넷째 선택, 처음 시작 li:nth-child(4n-7) { /* or 4n+1 */ color: green; } 📌 홀수 또는 짝수 만 선택 li:nth-child(odd) { color: green; } li:nth-child(even) { color: green; } 📌..

🍵 brew로 git 설치하기 안녕하세요 TriplexLab 입니다. 오늘은 brew로 git 설치하는 방법에관해서 설펴보도록 하겠습니다. Homebrew 설치가 안된분들은 지난 글을 보고 오시면 됩니다. 🏡 Homebrew와 Cask, 설치및 기본 사용법 Homebrew와 Cask, 설치 및 기본 사용법 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼‍♂️​ 오늘은 Homebrew 이라는 괜찮은 '패키지 관리 triplexlab.tistory.com brew로 설치 하셨다고 보고 바로 git 설치를 해보겠습니다. 1) brew로 git을 설치하려면 brew install git이라고 쓰고 실행하면 됩니다. 2) 조금 기다리면 아래와 같은 화면..

🥘 점심 메뉴를 내 맘대로 정렬하기 안녕하세요 TriplexLab입니다. 오늘은 2가지에 관해서 살펴보도록 하겠습니다. 1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법) 2) fetch함수를 사용해서 서버와 비동기 통신 하기 new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다. 자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙) 서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는..

instagram API [인스타그램 피드를 웹사이트에 출력하기] 안녕하세요 TriplexLab 입니다. 오늘은 인스타그램 API를 사용해서 웹사이트에 출력하는 과정을 알려 드리겠습니다. 3단계로 나눠서 진행 할것 입니다. 잘 따라 오세요:) 1. Facebook App - instagram API 설정 👇 준비물 1) 인스타그램 계정 2) 페이스북 개발자 사이트의 계정 3) 노출시킬 웹 사이트(페이지) 시작합시다. 1) 앱 만들기 버튼 클릭 2) 개인 계정거를 사용할것이기에 소비자를 체크 3) 본인이 알기 편한 앱 이름를 작성합니다. 그리고 비즈니스 관리자 계정 선택되지 않음. 앱 만들기 버튼 클릭하고 진행 합니다. 4) instagram 기본 표시에 있는 '설정' 버튼을 클릭 합니다. 5) 하단에 '..

⏰ 사용자 시간 지정(예약 기능) 안녕하세요 TriplexLab 입니다. 오늘은 사용자 시간 지정 기능에 관해서 살펴보도록 하겠습니다 :) 이게 무슨 기능인지 감이 안오시는 분들을 위해서 캡처 사진 공유합니다. 위와 같이 사용자가 직접 원하는 시간을 설정할수 있는 기능 입니다. 위에 캡처본은 비록 라이트모드, 다크모드를 변경하는 것만 할수 있지만 코딩을 다루는 저희로써는 이것을 활용해서 할수 있는 것이 많습니다 :) ✨ 사용자 시간 지정(예약 기능) 활용 예시 적절한 예시는 아니지만 비슷한 응용 예시는 다른 링크를 참고해주세요 👇👇 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레..

👩‍💻 자바스크립트 fetch, then, catch [Promise] 응용하고 안녕하세요 TriplexLab입니다. 오늘은 지난 시간에 했던 fetch함수 관해서 응용해보도록 하겠습니다 :) 하단에 지난시간에 다루었던 fetch함수 관한 글 링크 남겨 보겠습니다. 관심 있는 분들은 보세요~ 🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기 자바스크립트 fetch, then, catch [Promise] 이해하기 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중. triplexlab.tistory.com 위에에 작성한 코드는 렌덤으로 메뉴를 선택하..