memo() (1) What is "memo()"? memo() 는 훅이 아닙니다. 하지만 우리가 배울 useCallback 이나 useMemo 사용하기 위해서는 반드시 알아야할 개념입니다. Memo 라는 함수는 컴포넌트의 불필요한 리렌더링을 하지 않도록 해주는 함수입니다. 불필요한 리렌더링이란, 화면에서 변경되는 부분이 없음에도 불구하고 아래의 이유로 화면이 다시 렌더링 되는 것을 말합니다. 불필요한 렌더링을 줄이는 것으로 리액트 프로젝트의 부하를 줄이고, 퍼포먼스 능력을 향상시킬 수 있습니다. *컴포넌트가 Re-Rendering될 조건 1. 자신의 상태가 변경될 때(state 변경) 2. 자신이 전달받은 props가 변경될 때(props) 3. 부모 컴포넌트가 리렌더링 될 때 4. forceUpdat..
Frontend
상세 페이지 구현하기 (1) Dynamic Route란? 우리는 저번 챕터에서 Router 컴포넌트를 통해서 URL 별로 어떤 컴포넌트로 페이지를 설정하고 직접 구현되는 것을 확인했습니다. 이번 챕터에서는 Dynamic Route에 대해서 배웁니다. Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말합니다. 예를 들어, works 페이지에 여러개의 work가 보이고 우리가 work마다 독립적인 페이지를 가지도록 구현하려면 어떻게 해야할까요? 아래 코드 처럼 페이지마다 각각 works/1, works/2, works/3 이런식으로 구현해야 할까요? import React from "react"; import { Browser..
react-router-dom이란? yarn add react-router-dom styled-components, redux 에 이어서 또 하나의 패키지를 소개합니다. 바로 react-router-dom 입니다. 지금까지 우리가 많은 실습과 과제를 했는데, 어딘가 좀 허전하지 않으셨나요? 네이버나 또는 다른 웹사이트를 우리가 사용할 때 보통 이 페이지에도 갔다가 저 페이지에도 갔다가 여러 페이지로 오가며 이동할 수 있는데, 우리는 항상 한 페이지에 머물러 있었어요. 하지만 오늘 react-router-dom을 배우면 여러 페이지를 가진 웹을 만들 수 있게 됩니다! react-router-dom 사용하기 src/pages폴더에 router에서 뿌려줄 페이지컴포넌트들 생성하기 src/Router.js에 r..
thunk에서 Promise 다루기 (1) Todos 조회하기 기능 구현 저번 챕터에서는 thunk를 통해서 3초를 기다리고, 이후에 숫자를 더하는 기능을 구현했습니다. 아주 간단한 예시였는데요. 이번 챕터에서는 조금 더 실용적인 예시를 다뤄보겠습니다. json-server를 띄우고 Thunk 함수를 통해서 API를 호출하고 서버로부터 가져온 값을 Store에 dispatch 하는 기능입니다. 우리가 배운 것을 한번에 모두 사용하는 모든 개념들이 총 집합되어있는 기능이라고 생각하시면 됩니다. 시작에 앞서 아래 작업을 먼저 진행해주세요. 1. json-server 설치 및 서버 가동 (db.json) { "todos": [] } 2.Slice로 todos 모듈 추가 구현 (우리가 이전에 01 챕터에서 작성..
Redux 미들웨어 리덕스의 핵심 요소 : Action: State가 변하는것. “무엇이 일어날지” Reducer: 변화를 일으키는, 즉 데이터(state)를 수정하는 함수. action을 통해 어떠한 행동을 정의했다면, 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다. Store: action과 action에 따라 상태를 수정하는 reducer를 저장하는 어플리케이션에 있는 단 하나의 객체. 스토어는 State 를 수시로 확인해 View 한테 변경된 사항을 알려주는 역할을 한다. Dispatch: 스토어의 내장 함수 중 하나로 리듀서에게 Action 을 발생하라고 시키는 것 store에서 reducer함수를 실행시켜 state를 업데이트한다. Subscribe: 액션이 디스패치 ..
Axios (1) Axios란? 공식문서에 따르면 axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트 라고 소개하고 있습니다. 다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지라고 생각하시면 됩니다. (2) Axios 설치하기 yarn add axios (3) 테스트를 하기 위해 목업데이터를 db.json설정 { "todos": [ { "id": "1", "title": "react" } ] } Axios 문법 구성 axios({ url: 'https://test/api/cafe/list/today', // 통신할 웹문서 method: 'get', // 통신할 방식 data: { // 인자로 보낼 데이터 foo: 'diary' } }); Axios 요청..
expo setup 1. 로컬저장소에 셋업 https://reactnative.dev/docs/environment-setup yarn create expo-app 파일명 2. expo계정에 프로젝트추가 eas update:configure 3. 배포 eas update App icon, Splash Screen 이미지 변경 https://docs.expo.dev/guides/app-icons/ App icons Learn about configuring the app's icon and best practices for Android, iOS and the web. docs.expo.dev splash screen(or launch screen)이란 앱을 구동(Cold start)할 때 보여주는 시작화..
오늘은 튜터님이 기존 React Native코드에 리펙토링과정(컴포넌트 분리)을 거치고, 파이어베이스를 적용한 코드를 분석했다. 전에 파이어베이스를 처음봤을때에는 자바스크립트 기본적인부분이 공부되지않아 이해하기가 사실 불가능에 가까웠는데, 그뒤로 자바스크립트를 공부하고나니 그렇게 어려운건 아니었구나 하며 내심 좋았다. 추가적으로 그동안 프로젝트에서 git을 제대로 활용하지못한게 아쉬워 공부를 했다. 버전 되돌리는 두가지 방법 버전을 되돌리는 방법에는 크게 revert와 reset이 있다. revert revert는 버전을 되돌린 새로운 버전을 만드는 방법이다. 만약 10개의 버전이 존재하고, 그중 revert하고싶은 버전이 4번째에 존재한다면 11번째의 버전은 4번째의 버전과 완벽히 동일한 상태로 새롭게..
