👨‍💻 [JavaScript] 배열을 유용하게 활용하는 10가지 방법 안녕하세요 TriplexLab 입니다. 이번 시간에는 객체 배열에서(key-value)에서 유용하게 활용하는 10가지 방법에 관해서 정리해보겠습니다. 이번 포스트는 다음 링크를 참고 했습니다. [Javascript] 15가지 유용한 map, reduce, filter 아래 글을 번역 및 요약한 글. dongmin-jang.medium.com 다음과 같은 데이터가 있다고 가정해봅시다. const datas = [ { id: 1, type: "ko", name: '비빔밥', price : '8,000' }, { id: 2, type: "ko", name: "삼계탕", price : "12,000" }, { id: 3, typ..

항해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 비동기 통신 라이브러리 이다. - 쉽게 말해서 백엔드랑 프론트엔드랑 통신..

🔥Javascript redux 사용법 1/3 안녕하세요 TriplexLab 입니다. 이번시간에는 vanillaJS에서 redux에 대해서 살펴보도록 하겠습니다. Redux는 전역 상태관리 라이브러리 입니다. Redux는 크게 4가지 만 기억하면 됩니다. subscribe, action, reducer, store 입니다. 👀Redux 컨셉 component(화면)와 store(데이터 저장공간)가 있는데요. store에서 저장되어 있는 데이터를 component가 subscribe을 통해서 사용할수 있게 되는 것입니다. 그러면 component에서 어떠한 값을 변경하면 그 값을 store에 데이터도 업데이트를 해야 할텐데 이럴때 다이렉트로 업데이트를 하는것이 아니라 바로 action과 reducer를 통..

⚡️Axios란 우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 저는 앞에서 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재한다고 했죠? 그것은 바로 axios 라고 하는 외부 패키지를 사용하는 것입니다. 잠깐 간단하게 axios 패키지를 사용한 코드를 보겠습니다. axios .get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }); 이 코드는 axios 패키지에서 제공하는 a..

항해99 | 4주차 회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 라이프사이클(클래스형 vs 함수형), react hooks 입니다. 👉라이프사이클 생명주기 메서드, 즉 리액트의 데이터가 실행되고 움직이는 순서같은 거라고 생각하면 된다. 👉클래스방식 위 그림을 보면, 클래스 방식으로 리액트 컴포넌트를 만들 때 그 컴포넌트의 여러 메소드 들이 어떤 순서로 호출되는가를 보여준다. 시작점에서 시작하여 componentWillMount() 라는 메소드는 리액트가 그 컴포넌트에 구현되어있는 메소드를 호출하는 것으로 약속되어있다. 어떤 컴포넌트가 생성되기 전에 처리해야 할 일이 있다면, componentWillMount()라는 메소드를 구현하는것을 통해서 (컴포넌트가 우리가 필요로 하는 코드를 갖..

✅여러 Promise 객체를 다루는 방법(심화) 이때까지 우리는 하나의 Promise 객체를 다루기 위해 알아야 하는 지식들을 배웠습니다. 하지만 실무 개발에서는 여러 개의 Promise 객체를 동시에 다뤄야 하는 경우 도 있는데요. 이번 노트에서는 여러 개의 Promise 객체를 다뤄야 할 때 사용되는 Promise의 메소드들을 배워보겠습니다. 1. all 메소드 설명을 하기에 앞서 바로 코드를 보겠습니다. // 1번 직원 정보 const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json()); // 2번 직원 정보 const p2 = fetch('https://learn.codeit.kr/api/members/2')...

🎯이미 상태가 결정된 Promise 객체 이전까지우리는 pending 상태에 있다가 fulfilled 상태 또는 rejected 상태가 되는 Promise 객체를 직접 만드는 법을 배웠습니다. 그런데 아예 처음부터 바로 fulfilled 상태이거나 rejected 상태인 Promise 객체를 만드는 것도 가능한데요. 어떻게 할 수 있는지 살펴봅시다. 1. 이미 상태가 결정된 Promise 객체 만들기 (1) fulfilled 상태의 Promise 객체 만들기 const p = Promise.resolve('success'); Promise의 resolve라는 메소드를 사용하면 바로 fulfilled 상태의 Promise 객체를 만들 수 있습니다. 위와 같이 쓰면 fulfilled 상태이면서, 작업 성공 ..

항해99 | 3주차 회고 안녕하세요 TriplexLab 입니다. 이번주 회고 주제는 서버리스와, DOM 입니다. 📌서버리스(Serverless)란? 서버리스(Serverless)라는 단어만 보면 자칫 '서버리스 = 백엔드 리스' 라거나 '서버가 없다' 라고 생각할 수 있지만 단순히 미리 아래와같이 서버의 역할을 미리 설정해둔 서버를 서버리스라고 한다. 역할1. 데이터 관리 (db -> 요청에 따른 데이터 가공 -> 응답) 역할2. 헬스체크 ( 미리 답이 정해진 일정한 규칙을 실행시켜 장애의 유무를 결정하고, 필요할 때는 장애 단위를 분리시키는 자기 진단 기능.) 역할3. 데이터 관리 (db -> 요청에 따른 데이터 가공 -> 응답) 📌DOM란? 보통 HTML=DOM이라고 많이 생각하는데, 완전히 같은 개..

👉서서히 변하는 애니메이션 keyframes 안녕하세요 TriplexLab 입니다. 오래간만에 HTML+SCSS(CSS3)에 글을 작성하네요:D keyframes를 사용해서 서서히 변하는 애니메이션을 만들어 보겠습니다. *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { display: grid; align-items: center; justify-items: center; margin: 0; background-color: #000; } div { width: 300px; height: 300px; border-radius: 50%; box-shadow: 0 0 20px #fff, -20px 0 80..

👉JavaScript의 ES란? ES는 ECMA Script로 자바스크립트의 표준 규격을 의미한다. 자바스크립트는 넷스케이프 사에서 개발한 언어인데, 자바스크립트 언어가 인기를 끌기 시작하자 마이크로소프트 사에서도 Jscript라는 언어를 개발하여 IE에 탑재하였다. 👉JavaScript vs ECMAScript 간혹 JavaScript와 ECMAScript가 똑같다고 오해하는 경우가 있는데요. 둘 사이에는 명확한 차이가 있습니다! 일단 첫 번째 차이점은, JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준입니다. 쉽게 생각하면 ECMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서'이고, JavaScript는 ECMAScript를 준수해서 만..

🚢 항해 시작 시작하자마자 팀이 편성되어서 4일간 미니 프로젝트를 해야했다. 우리팀은 '나의 식사 기록하기'를 만들었다. 내가 먹은것을 기록하는 간단한 서비스 입니다. 이중에서 내가 만든 페이지는 글쓰기 페이지 + 기능을 만들게 되었다. Flask와 Ajax를 이용해서 서버와 통신을 했는데 많이 해봐서 그런지 익숙해진것같아서 뿌듯했다.😃👍 역시 개발은 많이 반복적으로 학습하는게 최고인것 같다.🔥🔥(영혼없이 따라치는것은 의미가 없는것 같다..) 🌊 알게된 것 셀레니움 크롤링 크롤링에서는 정적, 동적 페이지 크롤링으로도 접근이 불가능한 데이터에 접근할 때 유용하게 사용됩니다. 팀 협업의 중요성 팀안에서 협업이 얼마나 중요한거고, 팀 안에서 소통을 어떻게 하느냐가 작업 진행에서 중요한지 다시 알게되었다. 나는..

🔥정규 표현식(패턴) 안녕하세요 TriplexLab 입니다. 오늘은 정규 표현식에 관해서 이야기를 해보도록 하겠습니다. 먼저 정규 표현식은 쉽게 특정한 규칙을 가진 문자열의 집합이라고 말할수 있습니다. 즉 개발자가 개발을 잘할려면 컴퓨터의 패턴을 찾는(컴퓨터적 사고력)연습을 하기 위해서 알고리즘 문제를 많이 풀어보는 연습을 합니다. 정규표현식도 이런 특정한 문자열 패턴을 찾는거라고 생각하면 됩니다. 👉Reference 아래 하단의 정리된 내용은 다음 링크들을 참고 했습니다. 정규 표현식 연습할수 있는 사이트 정규표현식, 이렇게 시작하자! 정규표현식 , 더이상 미루지 말자 🤩 JavaScript MDN 자주 사용하는 정규식 패턴 👉정규 표현식(패턴)을 사용하는 이유 예를 들어서 전화번호를 유효성 검증을 해..