[React] React Query (1) - React Query를 사용해야 하는 이유
·
study/프론트엔드🔯
개요 방학 동안 진행할 프로젝트에서 React Query를 쓰게 되었다. 현업에서는 거의 필수라는 말을 듣고 이게 대체 뭐길래?! 싶었다. 프로젝트 프론트 리더분이 저번에 내가 만든 UMC 미션을 보시고, React Query를 쓰면 따로 로딩 화면을 만들지 않아도 된다고 하셔서 더 기대가 된다. React Query란? React Query는 데이터 캐싱, Fetching, 동기화를 쉽게 해주는 라이브러리다. Redux 단점 1. 장황한 Boilerplate 코드 Redux 기본 원칙을 만족시켜야 하기 때문에 코드가 너무 장황해진다. Redux-toolkit을 써서 좀 줄였긴 하지만 여전히 하나의 API 요청을 처리하기 위해 여러 개의 Action, Reducer를 만들어야 한다. 2. API 요청을 ..
[FE 배포] Netlify로 3초 만에 리액트 프로젝트 배포하기
·
study/프론트엔드🔯
프론트엔드 배포는 EC2로만 해봤었는데 이번에 UMC 미션하면서 netlify를 알게 되었다. vercel과 비슷한 사이트인 것 같은데 정적 사이트를 아주 쉽게 배포할 수 있어서 앞으로 많이 사용할 것 같다. https://www.netlify.com/ 100GB까지 무료로 사용할 수 있고, Build도 300분까지 무료라서 AWS의 과금이 두려운 사람에게 완전 추천한다.🤩🤩 회원가입하고 로그인하면 아래와 같이 뜰 건데, 깃허브 리포지토리와 연동해주면 된다. 원하는 브랜치를 선택해주고, 아래에서 빌드 설정을 해주면 된다. 자동으로 빌드를 해주기 때문에 따로 vscode에서 npm run build를 해줄 필요가 없다. 프로젝트 폴더가 안에 들어가있다면 Base directory를 설정해주면 되는데, 나는..
[error] Node.js Error <SyntaxError: Cannot use import statement outside a module>
·
study/Server
개요 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 방식으로 처리된다.
[Github Pages] 리액트 프로젝트 깃허브 페이지로 배포하기🌟
·
study/Git👾
개요 맨날 로컬에서만 개발하면서 화면공유해서 진행상황을 공유했었는데ㅎㅎ,,, 프론트 결과물을 수시로 다른 파트 분들이 확인할 수 있게 적당히 배포할 필요성을 느꼈다. 아직 EC2 파서 배포해본 경험이 많지는 않아서 깃헙 페이지로 배포해보기로 했다. html 처음 공부할 때였나 한 번 배포해보려다가 실패한 기억이 있었어서 어려운 줄 알았는데 진짜 겁나 쉬웠다.. 버튼 3번 클릭 정도?ㅠㅠ 배포하기! 일단 레포지토리 만들어서 프로젝트에 연결하셔야 해요! 저는 이미 레포 파놨어서 이건 생략할게요. git remote add origin 링크복붙 git add . git commit -m 브랜치명 하시면 됩니당 그 다음부터 차근차근 하시면 돼요~! 1. 프로젝트 폴더 가서 npm install --save gh..
[K-MOOC] 경희대학교 K-MOOC 강좌 소개 (1)
·
Experience/K-MOOC 서포터즈
안녕하세요! 저번 주에는 K-MOOC이 무엇인지와 가입, 수강신청 방법에 대해 알려드렸는데요. 이번 주에는 경희대학교 K-MOOC 강좌를 소개해드리려고 합니다. 이번에 새롭게 개설된 8개의 신규강좌는 다음 주에 소개해드릴 예정이고, 이번 포스팅에서는 5개의 기개발강좌를 소개해드릴게요! 1. 삼국지 인문학 2. 비만의 사회학 3. 언어의 신비 들추어보기 이렇게 3가지의 개별강좌 먼저 소개해드리겠습니다. 책임교수 경희대학교 민광동 교수님(중국어학과) 강좌소개 〈삼국지 인문학〉은 소설《삼국지》에 대한 전반적 개황을 소개하는 강좌입니다. 전반부는 주로 소설《삼국지》 내용의 전개 순서에 따라 도원결의편 · 영웅본색편 · 삼고초려편 · 적벽대전편 · 삼국정립편 ·회자정리편 · 출사표편 ·인생무..
[UMC 5기] KSSS지부 아이디어톤 상 받은 후기ㅎㅎ
·
Experience/외부 활동🏃
UMC는 참여하는 학교가 많아서 지부별로 쪼개서 운영한다. 우리 학교는 이번에 KSSS지부에 속하게 되었는데 경희대, 숭실대, 상명대, 성신여대라서 KSSS... 키세스라고 한다..ㅎ 4기 때는 아이디어톤에 참가하지 않았었는데 5기 때는 최대한 많은 행사에 참가해보고 싶어서 신청하게 되었다. 아이디어톤은 해커톤처럼 개발을 해야하는 것은 아니고 빠른 시간 동안 아이디어를 디벨롭하는 행사이다. 아이디어톤 전에 각 PM님들이 준비한 아이디어를 보고 원하는 아이디어에 지원하면 됐었다. PM분들도 아이디어가 구체화되지 않은 상태였어서 그런지 플랫폼의 거의 다 앱이었는데 그냥 웹에 지원할까 하다가 아이디어에만 집중하는 행사라고 생각해 신경 안 쓰고 원하는 아이디어에 지원했다. 1시에 서울창업허브 공덕에서 진행되었는..
cowboysj
'분류 전체보기' 카테고리의 글 목록 (7 Page)