개요 진행하고 있는 프로젝트에서 Git flow 방식으로 협업하기로 했다! 원래는 세미 git flow..?ㅎ느낌으로 협업했었는데 이번에는 제대로 해보려고 한다. 원래 하던 방식! 사실 Git flow가 보통 다들 프로젝트를 하는 방식과 크게 다르지는 않다. 원래 내가 하던 방식을 말하자면, main은 안 건드리고 develop을 판다.기능마다 issue를 파서 각 이슈 별 브랜치를 만들고, 작업이 끝나면 develop 브랜치로 merge한다. main 브랜치는 배포용으로 사용하는 브랜치기 때문에 개발이 끝나면 develop을 main에 merge해서 배포한다. 내가 하는 사이드 프로젝트에서는 이렇게만 해도 아무런 문제가 없지만, 회사에는 QA팀도 있고, 엄청난 이슈가 생길 수도 있기 때문에 Git fl..

개요 방학 동안 진행할 프로젝트에서 React Query를 쓰게 되었다. 현업에서는 거의 필수라는 말을 듣고 이게 대체 뭐길래?! 싶었다. 프로젝트 프론트 리더분이 저번에 내가 만든 UMC 미션을 보시고, React Query를 쓰면 따로 로딩 화면을 만들지 않아도 된다고 하셔서 더 기대가 된다. React Query란? React Query는 데이터 캐싱, Fetching, 동기화를 쉽게 해주는 라이브러리다. Redux 단점 1. 장황한 Boilerplate 코드 Redux 기본 원칙을 만족시켜야 하기 때문에 코드가 너무 장황해진다. Redux-toolkit을 써서 좀 줄였긴 하지만 여전히 하나의 API 요청을 처리하기 위해 여러 개의 Action, Reducer를 만들어야 한다. 2. API 요청을 ..

프론트엔드 배포는 EC2로만 해봤었는데 이번에 UMC 미션하면서 netlify를 알게 되었다. vercel과 비슷한 사이트인 것 같은데 정적 사이트를 아주 쉽게 배포할 수 있어서 앞으로 많이 사용할 것 같다. https://www.netlify.com/ 100GB까지 무료로 사용할 수 있고, Build도 300분까지 무료라서 AWS의 과금이 두려운 사람에게 완전 추천한다.🤩🤩 회원가입하고 로그인하면 아래와 같이 뜰 건데, 깃허브 리포지토리와 연동해주면 된다. 원하는 브랜치를 선택해주고, 아래에서 빌드 설정을 해주면 된다. 자동으로 빌드를 해주기 때문에 따로 vscode에서 npm run build를 해줄 필요가 없다. 프로젝트 폴더가 안에 들어가있다면 Base directory를 설정해주면 되는데, 나는..

개요 Node.js 프로젝트 세팅을 하고 index.js에서 Common JS 방식이 아니라 ES 방식으로 import 해줬는데 SyntaxError: Cannot use import statement outside a module 가 떴다. /* const express = require("express"); */ //common JS 방식 import express from "express"; //ES6 해결법 package.json에서 아래 코드를 추가해줘야 한다. "type": "module" "type"을 따로 설정해주지 않았거나 "commonjs"로 설정되어 있으면 기본적으로 commonjs 방식으로 설정되기 때문에 type 필드 값을 module로 설정해줘야 es6 방식으로 처리된다.

개요 맨날 로컬에서만 개발하면서 화면공유해서 진행상황을 공유했었는데ㅎㅎ,,, 프론트 결과물을 수시로 다른 파트 분들이 확인할 수 있게 적당히 배포할 필요성을 느꼈다. 아직 EC2 파서 배포해본 경험이 많지는 않아서 깃헙 페이지로 배포해보기로 했다. html 처음 공부할 때였나 한 번 배포해보려다가 실패한 기억이 있었어서 어려운 줄 알았는데 진짜 겁나 쉬웠다.. 버튼 3번 클릭 정도?ㅠㅠ 배포하기! 일단 레포지토리 만들어서 프로젝트에 연결하셔야 해요! 저는 이미 레포 파놨어서 이건 생략할게요. git remote add origin 링크복붙 git add . git commit -m 브랜치명 하시면 됩니당 그 다음부터 차근차근 하시면 돼요~! 1. 프로젝트 폴더 가서 npm install --save gh..

개요 프론트엔드 개발을 하다 보면 쿼리 파라미터 값을 추출해야 할 때가 있다. URLSearchParmas() 방법만 알고 있었는데 UMC 웹 스터디를 진행하면서 useLocation을 알게 되었다. 방법1. useLocation()사용 useLocation은 현재 페이지 경로 정보 객체를 반환하는 react-router-dom 함수다 search 속성에 쿼리 파라미터 정보가 있으니 이를 사용하면 된다. import React from 'react'; import { useLocation } from 'react-router-dom'; function MyComponent() { // useLocation 훅을 사용하여 현재 경로 정보를 가져옴 const location = useLocation(); /..