Git 브랜치 - Rebase 안녕하세요 TriplexLab 입니다. 오늘은 Git 브랜치 - Rebase에 관해서 살펴보겠습니다. Rebase는 말 그대로 기준을 다시 설정할수 있는 명령어 입니다. Rebase를 사용하면 중복되는 커밋을 하나로 합칠수도 있고, 커밋 순서도 변경할수 있습니다.😃👏🏻🎯 여기서는 중복되는 커밋 메시지1~3을 합쳐서 하나의 커밋으로 만들어봅시다. 👉🏻 rebase 사용하기 3개의 커밋 메세지를 합쳐줄거라 git rebase -i HEAD~3을 실행한다. 만약에 2개의 커밋만 바꾸고 싶으면 2 를 적으면 된다. git rebase -i HEAD~3 👉🏻 합치거나 편집할 commit 선택 그러면 아래와 같은 vi 창이 뜨는데, 중복된 커밋 메시지 pick => s 로 바꾼다. 위..

🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 사용됩니다. 프로퍼티 설명 clientX, clientY 마우스 포인터의 브라우저 표시 영역에서의 위치 pageX, pageY 마우스 커서의 문서 영역에서의 위치 offsetX, offsetY 마우스 포인터의 이벤트 발생한 요소에서의 위치 screenX, screenY 마우스 포인터의 모니터 화면 영역에서의 위치 1️⃣ clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 ..

API 설계에 대한 중요성 안녕하세요 TriplexLab입니다. 오늘은 API 설계에 대한 중요성 관해서 이야기를 공유하려고 합니다. 이번 글은 항해 99 7기 실전 프로젝트 5주 차를 지나면서 실제로 있었던 에피소드입니다. 먼저 API 설계라는 것은 프론트앤드 개발자와, 백앤드 개발자와의 소통을 하는데 서로 약속을 미리 정해놓는 문서라고 생각하면 됩니다. 그 문서는 다음과 같이 생겼습니다. (간단예시로 회원가입쪽 API만 가져왔습니다.) 👉🏻API를 설계할때 반드시 가독성이 좋은 딕셔너리 구조를 활용해서 만들어야 합니다. 우리팀은 처음에 API 설계를 할때 어떻게 설계를 하면 좋을지 감이 없는 상태였기 때문에 딕셔너리 구조를 사용하지 않고, data: { userName: 'TriplexLab', ge..

React Query 리액트 쿼리 안녕하세요 TriplexLab입니다. 오늘은 React Query 리액트 쿼리에 관해서 이야기를 공유하려고 합니다. 이번 글은 항해 99 7기 실전 프로젝트 4주 차를 지나면서 실제로 있었던 에피소드입니다. 먼저 React Query(리액트 쿼리)에 관한 자세한 내용은 다음 링크를 참고해주세요. [링크 참고] 👉🏻도입한 이유 저희 프론트 팀이 React Query(리액트 쿼리) 기술을 도입한 이유 중에 하나는 React Query에서 제공해주는 다양한 부가 옵션들이 많고, 소스 코드가 간결해서 유지보수에 좋을 것 같다는 판단을 하여 도입하게 되었습니다. 다양한 부가 옵션을 사용하는 입장에서는 잘 알고 사용하면 약이지만 모르고 그냥 사용하면 독이 된다는 사실을 다시 한번 ..

👉JavaScript의 자료형과 JavaScript만의 특성 이번 시간에는 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까?에 대해서 살펴보겠습니다. 🎯느슨한 타입(loosely typed)의 동적(dynamic) 언어 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당 가능합니다. 🎯JavaScript 형변환 자바스크립트는 타입이 매우 유연한 언어이다. 때문에 때로는 자바스크립트 엔진이 필요에 따라 ‘암시적변환’ 을 혹은 개발자의 의도에 따라 ‘명시적변환’ 을 실행한다. 암시적변환 암시적 변환이란 자바스크립트 엔진이 필요에 따라 자동으로 ..

😏Mac OS 환경 세팅 안녕하세요 이번시간에는 맥북, 혹은 IMac을 세로 장만하면 프론트앤드 개발자로서 환경세팅을 어떻게 하는지 처음부터 정리해보겠습니다. ✌️1. Xcode를 다운로드 받자 App Store에서 최신버전을 검색해서 다운받으면 된다. 근데 간혹 옛날 버전의 Xcode가 필요하다면 아래 링크에 들어가서 로그인하고 필요한 Xcode 버전을 검색하여 찾을 수 있습니다. 로그인 - Apple idmsa.apple.com ✌️2.Visual Studio Code 설치하기 Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, ..

👉실전 프로젝트 3주차 시간이 너무 빠르게 갔다.😭 3주차 MVP개발을 하며 기술을 다뤄봤던 내용을 정리해보려고 합니다. 보통 회사에서는 FE개발자가 인프라 구축에 관해서 전혀 신경쓰지 않고, BE개발자분들이 인프라 구축을 하겠지만 저희는 그런것 구분하지 않고 공부하는 관점과, 새로운것을 경험해보자라는 마인드로 접근하여 FE, BE 모두 같이 진행을 하였습니다. 📌트러블 슈팅(FE) CI CD 적용 👉도입이유 배포 자동화를 통해 효율적인 협업 및 작업 환경을 구축하기 위함 👉문제상항 협업 시 코드 배포를 해야하는 상황이 빈번히 발생 filezila를 통한 수동 배포와 배포 이후 에러 확인되어 재배포하는 일이 잦아짐에 따라 배포에 많은 시간이 소요됨 👉해결방안 1안) Jenkins 2안) Github Ac..

🤟GitHub Action으로 AWS S3에 배포 자동화 안녕하세요 Tripexlab 입니다. 이번 시간에는 GitHub에 Action이라는 기능을 사용해서 AWS S3에 배포 자동화 하는것을 공유해보겠습니다.👍👍👏👏🎉🎉 👉S3에 웹사이트를 호스팅 할 수 있는 경우와 장점 일반적으로는 EC2에 nginx나 apache를 띄우고, static 파일을 업로드하는 식으로 배포를 하는데, 단순히 Vue.js나 React같이 SPA로 된 프로젝트의 경우는 자바스크립트만 동작하면 되기에 서버가 필요없다. 이런 경우, S3 스토리지에 올리면 서버 없이 간단히 프론트 앱을 런칭할 수 있습니다. 금액적인 측면에서도 서버를 운영하는 비용보다, S3에 정적 호스팅하는 비용이 저렴합니다. 👉GitHub Actions 란? A..

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..

👉async/await이란? 안녕하세요 TriplexLab 입니다. 이번 시간부터 async/await관해서 이야기를 해보겠습니다. (async/await이란 fetch함수말고, Promise객체를 좀더 간단하게 다룰수 있는 방법 입니다. 😃😃👏👏👍) 자 이제 위에 있는 이미지에서 강조한 부분들을 설명하도록 하겠습니다. Promise객체가 등장하므로써 콜백핼 문제를 해결하고, 비동기 실행 코드를 조금더 보기좋게 작성하는것이 가능해 졌습니다. Promise객체가 등장한 이후에도 더 발전했습니다. async/await의 구분 입니다. async는 비동기라는 의미 입니다. async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다. asynchronous의 줄임말로 우리가 배운 비동기를 의미합니다..