ETC
유닉스 커맨드 라인과 그 밖에 유용한 TIP들을 공유합니다.
-
항해99 | 5주차 WIL회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 Axios 입니다. 이번 글은 "Axios & fetch 비교 #16" 라는 글과 겹치는 내용이 조금 있습니다. 👍🔥 Axios란? / Axios & fetch 비교 #16 ⚡️Axios란 우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 저는 앞에서 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax triplexlab.tistory.com 👉Axios 란? - Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. - 쉽게 말해서 백엔드랑 프론트엔드랑 통신..
항해99 | 5주차 WIL회고항해99 | 5주차 WIL회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 Axios 입니다. 이번 글은 "Axios & fetch 비교 #16" 라는 글과 겹치는 내용이 조금 있습니다. 👍🔥 Axios란? / Axios & fetch 비교 #16 ⚡️Axios란 우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 저는 앞에서 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax triplexlab.tistory.com 👉Axios 란? - Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. - 쉽게 말해서 백엔드랑 프론트엔드랑 통신..
2022.06.13 -
🔥Javascript redux 사용법 1/3 안녕하세요 TriplexLab 입니다. 이번시간에는 vanillaJS에서 redux에 대해서 살펴보도록 하겠습니다. Redux는 전역 상태관리 라이브러리 입니다. Redux는 크게 4가지 만 기억하면 됩니다. subscribe, action, reducer, store 입니다. 👀Redux 컨셉 component(화면)와 store(데이터 저장공간)가 있는데요. store에서 저장되어 있는 데이터를 component가 subscribe을 통해서 사용할수 있게 되는 것입니다. 그러면 component에서 어떠한 값을 변경하면 그 값을 store에 데이터도 업데이트를 해야 할텐데 이럴때 다이렉트로 업데이트를 하는것이 아니라 바로 action과 reducer를 통..
Javascript redux 사용법 1/3🔥Javascript redux 사용법 1/3 안녕하세요 TriplexLab 입니다. 이번시간에는 vanillaJS에서 redux에 대해서 살펴보도록 하겠습니다. Redux는 전역 상태관리 라이브러리 입니다. Redux는 크게 4가지 만 기억하면 됩니다. subscribe, action, reducer, store 입니다. 👀Redux 컨셉 component(화면)와 store(데이터 저장공간)가 있는데요. store에서 저장되어 있는 데이터를 component가 subscribe을 통해서 사용할수 있게 되는 것입니다. 그러면 component에서 어떠한 값을 변경하면 그 값을 store에 데이터도 업데이트를 해야 할텐데 이럴때 다이렉트로 업데이트를 하는것이 아니라 바로 action과 reducer를 통..
2022.06.12 -
항해99 | 4주차 회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 라이프사이클(클래스형 vs 함수형), react hooks 입니다. 👉라이프사이클 생명주기 메서드, 즉 리액트의 데이터가 실행되고 움직이는 순서같은 거라고 생각하면 된다. 👉클래스방식 위 그림을 보면, 클래스 방식으로 리액트 컴포넌트를 만들 때 그 컴포넌트의 여러 메소드 들이 어떤 순서로 호출되는가를 보여준다. 시작점에서 시작하여 componentWillMount() 라는 메소드는 리액트가 그 컴포넌트에 구현되어있는 메소드를 호출하는 것으로 약속되어있다. 어떤 컴포넌트가 생성되기 전에 처리해야 할 일이 있다면, componentWillMount()라는 메소드를 구현하는것을 통해서 (컴포넌트가 우리가 필요로 하는 코드를 갖..
항해99 | 4주차 WIL회고항해99 | 4주차 회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 라이프사이클(클래스형 vs 함수형), react hooks 입니다. 👉라이프사이클 생명주기 메서드, 즉 리액트의 데이터가 실행되고 움직이는 순서같은 거라고 생각하면 된다. 👉클래스방식 위 그림을 보면, 클래스 방식으로 리액트 컴포넌트를 만들 때 그 컴포넌트의 여러 메소드 들이 어떤 순서로 호출되는가를 보여준다. 시작점에서 시작하여 componentWillMount() 라는 메소드는 리액트가 그 컴포넌트에 구현되어있는 메소드를 호출하는 것으로 약속되어있다. 어떤 컴포넌트가 생성되기 전에 처리해야 할 일이 있다면, componentWillMount()라는 메소드를 구현하는것을 통해서 (컴포넌트가 우리가 필요로 하는 코드를 갖..
2022.06.06 -
항해99 | 3주차 회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 서버리스와, DOM 입니다. 📌서버리스(Serverless)란? 서버리스(Serverless)라는 단어만 보면 자칫 '서버리스 = 백엔드 리스' 라거나 '서버가 없다' 라고 생각할 수 있지만 단순히 미리 아래와같이 서버의 역할을 미리 설정해둔 서버를 서버리스라고 한다. 역할1. 데이터 관리 (db -> 요청에 따른 데이터 가공 -> 응답) 역할2. 헬스체크 ( 미리 답이 정해진 일정한 규칙을 실행시켜 장애의 유무를 결정하고, 필요할 때는 장애 단위를 분리시키는 자기 진단 기능.) 역할3. 데이터 관리 (db -> 요청에 따른 데이터 가공 -> 응답) 📌DOM란? 보통 HTML=DOM이라고 많이 생각하는데, 완전히 같은 개..
항해99 | 3주차 WIL회고항해99 | 3주차 회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 서버리스와, DOM 입니다. 📌서버리스(Serverless)란? 서버리스(Serverless)라는 단어만 보면 자칫 '서버리스 = 백엔드 리스' 라거나 '서버가 없다' 라고 생각할 수 있지만 단순히 미리 아래와같이 서버의 역할을 미리 설정해둔 서버를 서버리스라고 한다. 역할1. 데이터 관리 (db -> 요청에 따른 데이터 가공 -> 응답) 역할2. 헬스체크 ( 미리 답이 정해진 일정한 규칙을 실행시켜 장애의 유무를 결정하고, 필요할 때는 장애 단위를 분리시키는 자기 진단 기능.) 역할3. 데이터 관리 (db -> 요청에 따른 데이터 가공 -> 응답) 📌DOM란? 보통 HTML=DOM이라고 많이 생각하는데, 완전히 같은 개..
2022.05.30 -
👉JavaScript의 ES란? ES는 ECMA Script로 자바스크립트의 표준 규격을 의미한다. 자바스크립트는 넷스케이프 사에서 개발한 언어인데, 자바스크립트 언어가 인기를 끌기 시작하자 마이크로소프트 사에서도 Jscript라는 언어를 개발하여 IE에 탑재하였다. 👉JavaScript vs ECMAScript 간혹 JavaScript와 ECMAScript가 똑같다고 오해하는 경우가 있는데요. 둘 사이에는 명확한 차이가 있습니다! 일단 첫 번째 차이점은, JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준입니다. 쉽게 생각하면 ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만..
항해99 | 2주차 WIL회고👉JavaScript의 ES란? ES는 ECMA Script로 자바스크립트의 표준 규격을 의미한다. 자바스크립트는 넷스케이프 사에서 개발한 언어인데, 자바스크립트 언어가 인기를 끌기 시작하자 마이크로소프트 사에서도 Jscript라는 언어를 개발하여 IE에 탑재하였다. 👉JavaScript vs ECMAScript 간혹 JavaScript와 ECMAScript가 똑같다고 오해하는 경우가 있는데요. 둘 사이에는 명확한 차이가 있습니다! 일단 첫 번째 차이점은, JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준입니다. 쉽게 생각하면 ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만..
2022.05.23 -
🚢 항해 시작 시작하자마자 팀이 편성되어서 4일간 미니 프로젝트를 해야했다. 우리팀은 '나의 식사 기록하기'를 만들었다. 내가 먹은것을 기록하는 간단한 서비스 입니다. 이중에서 내가 만든 페이지는 글쓰기 페이지 + 기능을 만들게 되었다. Flask와 Ajax를 이용해서 서버와 통신을 했는데 많이 해봐서 그런지 익숙해진것같아서 뿌듯했다.😃👍 역시 개발은 많이 반복적으로 학습하는게 최고인것 같다.🔥🔥(영혼없이 따라치는것은 의미가 없는것 같다..) 🌊 알게된 것 셀레니움 크롤링 크롤링에서는 정적, 동적 페이지 크롤링으로도 접근이 불가능한 데이터에 접근할 때 유용하게 사용됩니다. 팀 협업의 중요성 팀안에서 협업이 얼마나 중요한거고, 팀 안에서 소통을 어떻게 하느냐가 작업 진행에서 중요한지 다시 알게되었다. 나는..
항해99 | 1주차 회고🚢 항해 시작 시작하자마자 팀이 편성되어서 4일간 미니 프로젝트를 해야했다. 우리팀은 '나의 식사 기록하기'를 만들었다. 내가 먹은것을 기록하는 간단한 서비스 입니다. 이중에서 내가 만든 페이지는 글쓰기 페이지 + 기능을 만들게 되었다. Flask와 Ajax를 이용해서 서버와 통신을 했는데 많이 해봐서 그런지 익숙해진것같아서 뿌듯했다.😃👍 역시 개발은 많이 반복적으로 학습하는게 최고인것 같다.🔥🔥(영혼없이 따라치는것은 의미가 없는것 같다..) 🌊 알게된 것 셀레니움 크롤링 크롤링에서는 정적, 동적 페이지 크롤링으로도 접근이 불가능한 데이터에 접근할 때 유용하게 사용됩니다. 팀 협업의 중요성 팀안에서 협업이 얼마나 중요한거고, 팀 안에서 소통을 어떻게 하느냐가 작업 진행에서 중요한지 다시 알게되었다. 나는..
2022.05.19 -
🔥정규 표현식(패턴) 안녕하세요 TriplexLab 입니다. 오늘은 정규 표현식에 관해서 이야기를 해보도록 하겠습니다. 먼저 정규 표현식은 쉽게 특정한 규칙을 가진 문자열의 집합이라고 말할수 있습니다. 즉 개발자가 개발을 잘할려면 컴퓨터의 패턴을 찾는(컴퓨터적 사고력)연습을 하기 위해서 알고리즘 문제를 많이 풀어보는 연습을 합니다. 정규표현식도 이런 특정한 문자열 패턴을 찾는거라고 생각하면 됩니다. 👉Reference 아래 하단의 정리된 내용은 다음 링크들을 참고 했습니다. 정규 표현식 연습할수 있는 사이트 정규표현식, 이렇게 시작하자! 정규표현식 , 더이상 미루지 말자 🤩 JavaScript MDN 자주 사용하는 정규식 패턴 👉정규 표현식(패턴)을 사용하는 이유 예를 들어서 전화번호를 유효성 검증을 해..
정규 표현식(패턴)🔥정규 표현식(패턴) 안녕하세요 TriplexLab 입니다. 오늘은 정규 표현식에 관해서 이야기를 해보도록 하겠습니다. 먼저 정규 표현식은 쉽게 특정한 규칙을 가진 문자열의 집합이라고 말할수 있습니다. 즉 개발자가 개발을 잘할려면 컴퓨터의 패턴을 찾는(컴퓨터적 사고력)연습을 하기 위해서 알고리즘 문제를 많이 풀어보는 연습을 합니다. 정규표현식도 이런 특정한 문자열 패턴을 찾는거라고 생각하면 됩니다. 👉Reference 아래 하단의 정리된 내용은 다음 링크들을 참고 했습니다. 정규 표현식 연습할수 있는 사이트 정규표현식, 이렇게 시작하자! 정규표현식 , 더이상 미루지 말자 🤩 JavaScript MDN 자주 사용하는 정규식 패턴 👉정규 표현식(패턴)을 사용하는 이유 예를 들어서 전화번호를 유효성 검증을 해..
2022.05.13 -
🧭카카오 지도 api 안녕하세요 TriplexLab 입니다. 오늘은 카카오 지도 api 두번째 시간으로 우편번호 서비스를 이용해서 위도, 경도 값을 구해오는 것을 해보겠습니다. 📬우편번호 서비스를 이용한 카카오 지도 (() => { const _tr = (select) => document.querySelector(select); const mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.5547125, 126.9707878), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; // 지도를 생성합니다 const map = new kakao.ma..
카카오 지도 api #2🧭카카오 지도 api 안녕하세요 TriplexLab 입니다. 오늘은 카카오 지도 api 두번째 시간으로 우편번호 서비스를 이용해서 위도, 경도 값을 구해오는 것을 해보겠습니다. 📬우편번호 서비스를 이용한 카카오 지도 (() => { const _tr = (select) => document.querySelector(select); const mapContainer = document.getElementById('map'), // 지도를 표시할 div mapOption = { center: new kakao.maps.LatLng(37.5547125, 126.9707878), // 지도의 중심좌표 level: 3 // 지도의 확대 레벨 }; // 지도를 생성합니다 const map = new kakao.ma..
2022.04.13 -
🧭카카오 지도 api 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오톡 지도 api 사용하는 모습을 보여 드리겠습니다. 🎯ToDo List 👉카카오 맵 관리 설정 [KaKao developers] 1. 카카오 맵 API사이트에서 제공하는 기본 지도 HTML를 가져온다. [참고 링크] 2. 카카오 개발자 사이트에 가서 내 애플리케이션에 Test용도를 만들어준다. 3. 웹으로 만들 거니깐 JavaScript 키값을 'appkey=발급받은 APP KEY를 사용하세요'라는 곳에 수정합니다. 4. 카카오 개발자 사이트에 플랫폼 탭에서 테스트할 해당 주소를 추가해야 합니다. ex) http://127.0.0.1:5500 애플리케이션 추가하기 버튼을 클릭하여 추가할 수 있습니다. 새로운 ..
카카오 지도 api🧭카카오 지도 api 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오톡 지도 api 사용하는 모습을 보여 드리겠습니다. 🎯ToDo List 👉카카오 맵 관리 설정 [KaKao developers] 1. 카카오 맵 API사이트에서 제공하는 기본 지도 HTML를 가져온다. [참고 링크] 2. 카카오 개발자 사이트에 가서 내 애플리케이션에 Test용도를 만들어준다. 3. 웹으로 만들 거니깐 JavaScript 키값을 'appkey=발급받은 APP KEY를 사용하세요'라는 곳에 수정합니다. 4. 카카오 개발자 사이트에 플랫폼 탭에서 테스트할 해당 주소를 추가해야 합니다. ex) http://127.0.0.1:5500 애플리케이션 추가하기 버튼을 클릭하여 추가할 수 있습니다. 새로운 ..
2022.04.08 -
⚡️axios, XMLHttpRequest 파일 업로드하기 안녕하세요 TriplxLab 입니다. 오늘 파일 업로드하면서 클라이언트에서 처리해야 하는 progressBar에 관해서 살펴보도록 하겠습니다. 전송 0% 👉XMLHttpRequest 기반으로 작업한 파일 업로드 기능 XMLHttpRequest 기반으로 작업한 파일 업로드 progressBar를 구현해봤습니다. 👉axios 기반으로 작업한 파일 업로드 기능 axios 기반으로 작업한 파일 업로드 progressBar를 구현해봤습니다. axios를 사용하게 되면 지원하는 메소드가 별루 없어서 디테일하게 작업해야 하는 상황에서는 못쓸것 같다. 공식 API 문서를 봤는데 '파일 업로드에 대한 진행 이벤트 처리를 허용합니다.'라는 onUploadProgr..
axios, XMLHttpRequest 파일 업로드하기⚡️axios, XMLHttpRequest 파일 업로드하기 안녕하세요 TriplxLab 입니다. 오늘 파일 업로드하면서 클라이언트에서 처리해야 하는 progressBar에 관해서 살펴보도록 하겠습니다. 전송 0% 👉XMLHttpRequest 기반으로 작업한 파일 업로드 기능 XMLHttpRequest 기반으로 작업한 파일 업로드 progressBar를 구현해봤습니다. 👉axios 기반으로 작업한 파일 업로드 기능 axios 기반으로 작업한 파일 업로드 progressBar를 구현해봤습니다. axios를 사용하게 되면 지원하는 메소드가 별루 없어서 디테일하게 작업해야 하는 상황에서는 못쓸것 같다. 공식 API 문서를 봤는데 '파일 업로드에 대한 진행 이벤트 처리를 허용합니다.'라는 onUploadProgr..
2022.03.24 -
🏋️프론트엔드 면접 질문 안녕하세요 오늘은 프론트엔드 개발자 (기술)면접 인터뷰 질문에 대해서 이야기를 해볼게요 👉1. 브라우저 렌더링 원리 📌사진을 보듯이 브라우저의 기본구조는 사용자 인터페이스에서, 브라운저 엔진으로 그 다음에 '렌더링엔진'으로 연결됩니다. '렌더링엔진'의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일을 합니다. '렌더링엔진'은 HTML, XML 문서와 이미지를 표시할 수 있고, 플러그인이나 브라우저 확장기능을 이용해 PDF 같은 다른 유형도 표시할 수 있습니다. 그리고 각 브라우저마다 사용하는 '렌더링엔진'이 다른데 파이어폭스는 게코(Gecko)엔진으로 사용하고, 사파리, 크롬은 웹킷(webkit)을 사용한다는 것도 알고 있으면 굉장히 좋습니다. 더보기 렌더링 엔진 동작 ✅브라..
프론트엔드 개발자 (기술)면접 인터뷰 질문🏋️프론트엔드 면접 질문 안녕하세요 오늘은 프론트엔드 개발자 (기술)면접 인터뷰 질문에 대해서 이야기를 해볼게요 👉1. 브라우저 렌더링 원리 📌사진을 보듯이 브라우저의 기본구조는 사용자 인터페이스에서, 브라운저 엔진으로 그 다음에 '렌더링엔진'으로 연결됩니다. '렌더링엔진'의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일을 합니다. '렌더링엔진'은 HTML, XML 문서와 이미지를 표시할 수 있고, 플러그인이나 브라우저 확장기능을 이용해 PDF 같은 다른 유형도 표시할 수 있습니다. 그리고 각 브라우저마다 사용하는 '렌더링엔진'이 다른데 파이어폭스는 게코(Gecko)엔진으로 사용하고, 사파리, 크롬은 웹킷(webkit)을 사용한다는 것도 알고 있으면 굉장히 좋습니다. 더보기 렌더링 엔진 동작 ✅브라..
2022.03.21 -
🧑🏻💻Node.js로 크롤링하기(맛보기) 안녕하세요 TriplexLab 입니다. 오늘은 Node.js로 웹 크롤링에 관해서 살펴보도록 하겠습니다. 사실은 크롤링이라는것은 구글에 검색앤진, 네이버에 검색앤진이 내 사이트를 퍼가는 행위를 크롤링이라고 부릅니다. 내가 원하는 사이트에 원하는 데이터를 가져오는 행위가 웹스크래핑이라고 부릅니다. 두가지 단어를 혼용해서 사용하기도 합니다. 👉목표 이번에 할것은 Node.js를 이용해서 인프런 사이트에 데이터를 웹스크래핑을 하고 mongodb에 저장하는것을 해보겠습니다. 👉모듈 설치 yarn add axios cheerio dotenv mongoose 그리고 여기서 사용할 팩키지들을 모두 불러 옵니다. // app.js const axios = require('ax..
Node.js로 크롤링하기(맛보기)🧑🏻💻Node.js로 크롤링하기(맛보기) 안녕하세요 TriplexLab 입니다. 오늘은 Node.js로 웹 크롤링에 관해서 살펴보도록 하겠습니다. 사실은 크롤링이라는것은 구글에 검색앤진, 네이버에 검색앤진이 내 사이트를 퍼가는 행위를 크롤링이라고 부릅니다. 내가 원하는 사이트에 원하는 데이터를 가져오는 행위가 웹스크래핑이라고 부릅니다. 두가지 단어를 혼용해서 사용하기도 합니다. 👉목표 이번에 할것은 Node.js를 이용해서 인프런 사이트에 데이터를 웹스크래핑을 하고 mongodb에 저장하는것을 해보겠습니다. 👉모듈 설치 yarn add axios cheerio dotenv mongoose 그리고 여기서 사용할 팩키지들을 모두 불러 옵니다. // app.js const axios = require('ax..
2022.03.17