axios와 react-query 기본 안녕하세요 TriplexLab 입니다. 오늘은 axios와 react-query를 가지고 맛보기을 해보겠습니다. 👉 react-query GET 요청 react-query를 사용하기 위해서는 공식문서에서 나온예시처럼 똑같이 세팅을 해줘야 합니다. // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import { QueryClient, QueryClientProvider } from "react-query"; import {ReactQueryDevtools} from "react-query/devtools" import App from './App'; const queryCl..

👉실전 프로젝트 시작 드디어 항해99의 마지막 실전 프로젝트 기간이 시작됐다. 난 이번 실전 프로젝트에서 부리더를 맡게 되었다. 5월부터 프론트엔드개발 공부를 시작했던 결과물이 이것으로 보여지니까 더욱 최선을 다해야겠다는 다짐을 했다. 👉아이디어 회의 드디어 팀원들이 랜덤으로 뽑혀서 우리팀은 나를 포함해서 5명이 되었고 백엔드 개발자 3명, 프론트 개발자 2명이 되었다. 우리는 첫날 어떤 서비스를 만들지 이야기를 시작했고 부리더인 내가 서비스 하나를 제안을 했다. 내가 생각한 서비스는 공유주차 서비스 같은 거였는데 이미 시장에 잘 되어 있는 앱이 존재하므로 우리가 만든 서비스는 사용자들이 별루 없을거라는 이유로 선정되지않았다.😂😂 그래서 우리는 어떤 서비스를 만들지 각자 생각해 오기로 했는데 4~5개의 ..

👉VSCode 기능 소개 안녕하세요 TriplexLab 입니다. 이번 시간에는 VSCode에서 유용하게 자주사용하는 TIP들을 정리해 봤습니다.😃😃 👉vscode 툴팁 useState를 만들려면 이런식으로 하단의 이미지 처럼 5번줄에 'useS'까지만 입력을 해주면 하단에 작은 창이 뜨는데 이런걸 툴팁이라고하는데요 왼쪽에는 'useState'라고 나와있고, 오른쪽에는 'react'라고 나와 있네요 VSCode에는 내가 입력한 코드의 바탕으로 완성할 단어를 추천해줍니다. 왼쪽에는 단어를 보여주고 오르쪽에는 import할 경로를 보여줍니다. 경로가 없는것은 그냥 단어만 완성해줍니다. 첫번째꺼는 선택해서 Enter를 누르면 자동으로 위쪽에는 useState를 import 해주는것이 생기고 하단에는 useSta..

항해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를 통..

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

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

👉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 자주 사용하는 정규식 패턴 👉정규 표현식(패턴)을 사용하는 이유 예를 들어서 전화번호를 유효성 검증을 해..

🧭카카오 지도 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 안녕하세요 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 애플리케이션 추가하기 버튼을 클릭하여 추가할 수 있습니다. 새로운 ..