미니 프로젝트를 마치며 서론 멋사에서 마지막 미니 프로젝트로 팀이 빌딩되었다. 프로젝트 주제 등 모든 것이 자유였다. 동아리의 마지막 마무리..! [팀 구성] 팀명 : 안녕 1팀 디자니어 1명 프론트엔드 2명 백엔드 3명 총 6명으로 이루어졌고, 나는 그 중 프론트엔드로 참여하게 되었고, 프론트엔드장 역할을 맡게 되었다. [프로젝트 기간] 23.9.4~23.11.19 한 학기 세션을 프로젝트로 대체하기로 하였고 중간에 중간고사 기간도 겹쳤기에 프로젝트 기간이 매우 길었다. [적용 기술 및 협업 툴] - Frontend : Html, Css, Javascript, React - Backend : Django - Collaboration Tool : Github, Figma, notion [프로젝트 진행] ..

ch02 웹팩이란? : 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 장점 1. 여러 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 2. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. babel npx create-react-app ./에서 npx는 무엇인가요? : npx는 노드 패키지 실행을 도와주는 도구입니다. 그래서 create-react-app이란 npm 레지스트리에 있는 패키지를 react-clayful-app 폴더에서 실행해서 리액트를 설치해줍니다. App.js : Routing 관련 일을 처리한다 React Router Dom이란? ..

react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 사용하는 이유 ex) 서버로부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많다. 그렇다보니 store는 클라이언트 state를 유지해야 하는데, 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존하게 된다. 그리고 그 데이터가 서로 상호작용하면서 서버 데이터도 클라이언트 데이터도 아닌 끔찍한 혼종이 탄생하게 된다.(예를 들면 서버에는 이미 패치된 데이터가 클라이언트에서는 패치되기 전 데이터가 유저에게 사용되고 있는 것이라고 볼 수 있다.) 그래서 react-query를 사용함으로 서버, 클라이언트 데이터를 분리한다. 이 ..

create-react-app을 설치하였을 때 자동으로 설치되는 React의 파일 중 React의 중요한 파일 3가지 1. index.js 2. App.js 3. index.html 1. index.js src 폴더의 하위폴더 메인 프로그램이라고 할 수 있다. 여기에서 html 템플릿 및 js의 컴포넌트를 조합하여 렌더링하고 실제 표시한다 2. App.js src 폴더의 하위폴더 이것은 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다. 3. index.html public 폴더의 하위폴더 메인 프로그램인 index.js에 대응되는 것으로, html 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. *..

React Query (리액트 쿼리) 리액트에서 비동기 로직을 리액트스럽게 다룰 수 있게 해주는 라이브러리이다. server state를 아주 효율적으로 관리할 수 있다. 기존에 isLoading, isError, refetch, 데이터 캐싱 등 개발자가 직접 구현하려면 꽤 귀찮거나 까다로웠던 기능을 제공해준다. QueryClientProvider ● 리액트 쿼리 사용을 위해 QueryClientProvider 를 최상단에서 감싸주어야한다. ● 쿼리 인스턴스를 생성 후 client={queryClient} 작성해준다. 기본 셋팅 import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient..

[React Hooks란?] : React에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리 [React Hook 개발 과정] 1. class component 사용 2. 함수 컴포넌트와 리액트 훅 사용 (리액트 훅은 함수 컴포넌트에서만 사용 가능하다) 함수 컴포넌트가 어떤 값을 유지할 수 있도록, '캐시'를 만들었다. 이 캐시를 이용하고자 만든 여러 개의 API를 '리액트 훅' 함수라고 부른다. ※API란? => 여러 프로그램들과 데이터베이스 그리고 기능들의 상호 통신 방법을 규정하고 도와주는 매개체이다. [React Hook의 필요성] 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. 함수 컴포넌트는 클래스 컴포..