티스토리

Koras02코딩웹
검색하기

블로그 홈

Koras02코딩웹

koras02.tistory.com/m

현재 사용중인 언어 - next-js,react,vue, typescript

구독자
6
방명록 방문하기
공지 [공지사항] 개발 이슈나 공식문서 업⋯ 모두보기

주요 글 목록

  • [React]Supabase를 사용한 Todo앱 빌드하기 정말 오랜 시간끝에 포스팅을 하게되었습니다. 사실 요즘들어서 크게 포스팅할 일이 없어서 글을 쓰지 않았지만 이번에는 Firebase를 대체할 수 있는 것이 있다기에 Supabase 포스팅을 하고자 합니다. 이번 시간에서는 Supabase를 사용해서 ReactTodo 앱을 구축해보겠습니다. 먼저 시작하기전에는 React와 Next.js에 대한 사전적인 지식이 필요합니다. 우리가 구축해볼 앱은 위와 같은 Todo 앱형식의 서비스를 구축해보려 합니다. 다음은 위 서비스에 필요한 필수 사항입니다. React.js Next.js Supabase Chakra UI Vercel 1. Supabase 테이블, 인증 및 스토리지 구성 위 서비스를 구성하기전 먼저 Supabase를 사용해 기능을 구현해보는 시간을 가져보겠.. 공감수 2 댓글수 1 2022. 3. 31.
  • [React] StroyBook 도입기 Storybook 이란 ? Storybook은 React에서 컴포넌트 단위의 UI 개발 환경을 지원하는 도구로써 Storybook을 사용하면 실제 웹 어플리케이션의 환경과는 별개로 컴포넌트 UI 개발 진행이 가능합니다. 스토리북(Storybook)의 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 됩니다. Storybook을 React에 적용하는법 먼저 CRA(Create React App)를 이용해서 프로젝트를 하나 생성해주어야 합니다. 우선 웹팩 환경을 구성하지 않고 Storybook을 적용하는 방법입니다. 타입스크립트 기반의 프로젝트를 생.. 공감수 0 댓글수 0 2022. 3. 1.
  • [React] 간단한 결제시스템 만들어보기 프로젝트 개발시 간단하게 결제시스템을 이용해고 싶다면 결제를 대행해주는 담당사의 API를 가지고 만드실 수 있습니다. 이런 간단한 Pay를 추가하는 방법을 알아보겠습니다. React에서 App.js, Home/index.js 와 Payment/index.js를 다음과 같이 작성해보세요. App.js import React from 'react'; import { Switch } from 'react-router-dom'; import { Route } from 'react-router-dom'; import Home from './Home'; import Payment from './Payment'; function App() { return ( ); } export default App; Home/in.. 공감수 0 댓글수 0 2022. 2. 23.
  • [React] React 상태관리에 대해 알아보자 -context api, redux, mobx, swr React에서는 전역상태를 관리하는 라이브러리들이 상당히 존재합니다. 제일 유명한 상태관리 라이브러리로는 Redux(리덕스)라는 라이브러리가 존재합니다. 하지만 이 Redux를 포함한 여러가지의 상태관리 라이브러리가 존재하는데 오늘은 그것을 알아보려고 합니다. 1. 전역상태에 대한 정의 상태관리 라이러리를 소개하기 전에 먼저 전역상태가 무엇인가라는 것을 정의해보도록 하겠습니다. 우리가 다루어야할 상태가 무엇이 있는지를 정의하고 이를 구분할 수 있어야 함 어떤 상태가 들어가야하는자 기획을 생각하고 파악해볼 필요가 있음 상태를 나눌 필요가 없다면? 굳이 상태관련 라이브러리를 사용해야 하는가? 2. 글로벌 상태 관리란? 전역 상태관리를 사용하면 여러 구성 요소간에 데이터를 쉽게 전달/조작할 수 있습니다. (영.. 공감수 0 댓글수 0 2022. 2. 9.
  • [React] useRef 란? 이번시간에는 React에 상태를 제어하는 useState를 이어서 useRef라는 것을 배워보도록 하겠습니다. useRef란? useRef는 특정 DOM을 가리킬 때 사용하는 Hook함수 입니다. useRef를 사용하는 예로는 대상에 대한 포커스 설정, 특정 엘리먼트의 크기나 색상을 변경할 때 사용합니다. ref ref 자체의 뜻을 설명하자면 ref는 Javascript의 getElementById() 처럼 컴포넌트의 어떤 부분을 선택할 수 있게 해주는 방법입니다. DOM에 접근 할 수 있도록 하는 기능을 가진 hook이라고 보면 됩니다. 리액트에 있는 모든 컴포넌트는 reference element(래퍼런스 엘리먼트)를 가지고 있어서 어떤 컴포넌트에 ref={변수명}을 넣어준다면, 리액트에서 해당 컴포.. 공감수 0 댓글수 0 2022. 2. 7.
  • [React] useEffect란 ? 이번시간에는 React에서 제공하는 Hooks중 하나인 useEffect에 대해서 알아보도록 하겠습니다. 1.UseEffect란? useEffect Hook을 이용하여 우리가 React에게 컴포넌트가 렌더링 된 이후에 어떤일을 수행할지 정해줄 수 있습니다. useEffect는 기본적으로 몇 가지 조건에 의해 작동합니다. 페이지가 처음 렌더링 되고 난후 useEffect는 무조건 한번 실행됩니다. useEffect에 배열로 지정한 useState 값이 변경될 때 실행되게 됩니다. 즉 React에서는 우리가 작성한 함수를 기억했다가 DOM 업데이트 수행 이후에 이를 불러내서 실행해주게 됩니다. UseEffect를 컴포넌트 안에서 부르면? useEffect를 컴포넌트 내부에 두어 effect를 통해 앞전에 나.. 공감수 0 댓글수 0 2022. 2. 5.
  • [React] State 생명주기 (클래스형과 함수형의 차이) 이번 시간에는 React에서 state를 이용해 생명주기 및 Class형과 함수형 생명주기의 차이점을 알아보자. React에서 생명주기란? React에서 모든 컴포넌트는 아래 세가지 단계를 거친다. 초기화 단계 업데이트 단계 소멸 단계 각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하고 각 단계 속에서 호출되는 메서드들을 바로 생명주기 매서드 라고 부른다. 리액트는 웹에서 UI 데이터가 변경되면 자동으로 컴포넌트가 업데이트되고 동적으로 화면을 그려준다. 제대로 된 기능을 수행하려면 이런 자동으로 업데이트 되는 과정에 끼어들어 API를 호출하기도 하고 데이터를 가공해줘야 할때도 있다. 따라서 생명주기의 각 단계별로 필요한 순간에 필요한 작업들을 끼워넣을 수 있는 메서드들이 존재한다. 위 이미지는 리액트.. 공감수 0 댓글수 0 2022. 1. 28.
  • [React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이 1. 클래스형 컴포넌트 react 컴포넌트를 선언하는 두가지 방식 중 하나. [클래스 컴포넌트 & 함수 컴포넌트] 현재 자주 사용하지 않지만, 아직도 사용하는 기업들도 있다. 클래스형으로 구성된 프로젝트의 유지보수를 위해서도 클래스형 컴포넌트에 대한 개념도 알아야 한다. 2. 클래스형 컴포넌트와 함수형 컴포넌트의 차이 1) 선언 방식 함수형 컴포넌트 import React from 'react'; import './App.css'; function App() { const name = 'react'; return {name} } export default App; 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component {.. 공감수 0 댓글수 0 2022. 1. 27.
  • [React] Atomic 패턴에 대하여 아토믹 패턴 디자인은 시스템을 만드는 하나의 방법론으로 총 5가지의 구분 단계가 있다. Atoms(원자) Molecules(분자) Organisms(유기체) Templates Pages 뷰를 Atoms(원자) -> Molecules(분자) -> Organisms(유기체) -> Templates -> Pages 순으로 작은것들을 만들고, 결합해 좀 더 큰 단위의 뷰를 만들어 나가는 디자인 시스템이다. 웹앱은 여러 페이지 단위 이루이지고 페이지는 Input, button, form 등의 태그들로 이루어져 있다. 이를 원자, 분자, 유기체같은 생물학적인 개념으로 접근한 것이다. 장점 1. 재사용 가능한 설계 시스템을 제공합니다. 컴포넌트들을 혼합해 일관성 있고 재사용의 효율을 높이는 디자인을 할 수 있다. 2.. 공감수 1 댓글수 0 2022. 1. 19.
  • [React] Component와 props, state 🚀 Component, props, state Component 컴포넌트를 통해 UI를 재새용 가능한 개별적인 여러 조각으로 나눈다. 컴포넌트는 개념적으로 Javascript의 함수와 유사한 방식이다. 'props' 라는 입력을 받은후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 엘리먼트는 일반 객체(plain object)로 React 앱의 가장 작은 단위이다. 엘리먼트는 컴포넌트의 '구성요소' 이다. 컴포넌트를 선언하는 방식에는 함수형 컴포넌트 와 클래스형 컴포넌트가 있다. Class Component class HelloWorld extends React.Component { render() { return Hello!; } } 클래스형 컴포넌트는 React.Componen.. 공감수 0 댓글수 0 2022. 1. 18.
  • [React] Container-Presenter 패턴 개요 React의 가장 기본적인 디자인 패턴으로는 Container Presenter 패턴이 있다. container + presenter 패턴은 데이터처리와 데이터출력을 분리 하는 것이다. 즉 Container에서는 API Request, Exception Error, state 변경, redux, dispatch... Presenter에는 props, UI..을 관리하는 것이다. Container에서 처리하거나 받아온 데이터들을 Presenter 컴포넌트에 Props로 넘긴다. 예시 // src/components/blog/Blog.js import React, {Component} from 'react'; class Blog extends Component { state = { loading: tr.. 공감수 0 댓글수 0 2022. 1. 18.
  • [React] React - Next Router vs React Router 먼저 모든 코드에 의미를 담고서 이야기 해보면 Next 프레임워크와 React 프레임워크를 사용하면서 두 가지 차이점에 대해 궁금증이 생길것이다. React.js는 많은 스타트업 및 대기업에서 프론트엔드 프레임워크로 사용하고 있는데 Next.js는 사실상 React.js와 많이 다르면서 취업하는데 있어 다른 개발자들에 비해 이점을 가져가지 못할 수 있다. 결론은 Next.js는 React.js를 감싸고 있는 프레임워크로 보면된다. React의 기능들을 그대로 가지고 있으면서 Next.js에서만 구현할 수 있는 추가 기능들이 존재해 오히려 React보다 좀 더 배울만한 것이 많다고 볼 수 있다. 그런데, Next.js와 React에서 차이가 유일하게 크게 보이는 것은 바로 Router부분이다. 라우팅을 구.. 공감수 0 댓글수 0 2022. 1. 17.
  • [React] React Immutable Immutable 이란? immutable은 react와 마찬가지로 페이스북 팀에서 만든 상태관리 라이브러리다. 불편함(Immutablity)를 지키며 상태관리하는 것을 편리하게 해준다. 설치법 npm install immutable Immutable의 필요성 Immutable은 이름에서도 알 수 있듯 객체의 불변성을 제공하는 라이브러리이다. react의 컴포넌트는 state 또는 상위 컴포넌트에서 전달받은 props(상태값)이 변할 때 리렌더링된다. 만약 직접 객체안에 내부 값을 직접 수정한다면 레퍼런스가 가리키는 곳은 같기 때문에 똑같은 값으로 인식한다. 따라서, 전개 연산자나 assgin함수를 이용하여 새로운 객체나 배열을 만들었지만 구조가 복잡할 경우에는 그 코드 또한 복잡한 방식으로 구성되었다... 공감수 0 댓글수 0 2022. 1. 17.
  • [React] Virtual DOM 이란? Virtual DOM이란? Virtual DOM은 말 그대로 가상 돔이다. 그런데, 가상 돔이 필요한 이유는 무엇일까? 이를 이해하기 위해서는 브라우저의 작동 방식에 대해 알아볼 필요가 있다. 브라우저 작동 방식 "브라우저 엔진" 과 "렌더링 엔진"은 무었일까? 그림에서 알 수 있듯이 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진이다. 렌더링 엔진은 HTML documents와 웹 페이지의 리소스들을 브라우저에 시각적으로 출력해준다. 브라우저가 화면에 그리는 과정 요청과 응답 만약 브라우저에서 어떠한 링크를 누르거나 URL에 주소를 입력하고 엔터를 누르면 그 페이지 안에서 HTML요청이 이루어지고 해당 서버에서 HTML document를 응답으로 준다. HTML 파싱과 D.. 공감수 0 댓글수 0 2022. 1. 16.
  • [React] React 조건부 렌더링 React 조건부 렌더링 이란? 조건부 렌더링은, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다. React에서 원하는 동작을 수행하는 캡슐화된 별개의 컴포넌트를 생성할 수 있다. 또한 State에 의존하여 그 중 일부만 렌더링 시키는 것도 가능하다. 크게 3가지 방법으로 나눠 소개할 수 있다. if-else 조건문 논리 연산자 && 조건부 연산자 1. if - else 조건문 사용자가 로그인 하는 여부에 따라서 또는 컴포넌트를 표현하는 예시이다. function Gretting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { // 로그인 상태라면 return ; } return ; } ReactDOM.render( // Tr.. 공감수 0 댓글수 0 2022. 1. 16.
  • [React] JSX 문법이란? JSX 란 무엇일까? jsx는 자바스크립트의 XML이다. 자바스크립트 문법의 확장판으로써 React에서 요소를 제공한다. JSX는 다음과 같은 특징을 갖는다. 컴파일에 최적화 되어있다. 컴파일 과정이 필요하기 때문에 변환하는 과정에서 오류가 있다면 빌드시 오류를 발생한다. 확장자는 .jsx 나 .js를 사용할 수 있다. JSX 코드의 변환 과정 jsx는 HTML 코드처럼 작성하지만 Babel(바벨)을 통해 자바스크립트 문법으로 변환된다. 이는 Babel 공식 홈페이지에서 실험해볼 수 있다. Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 위 홈페이지에서 try i.. 공감수 0 댓글수 0 2022. 1. 16.
  • [React] create-react-app & Typescript 초기 세팅법 완벽 정리 🥩 Typescript & create-react-app 최근 타입스크립트 강의를 들으면서 create-react-app을 설정하는 법이 궁금했다. 왜냐면 React 제일 많이 사용해보았고 포트폴리오도 React로 주 언어로 개발했기 때문이다. 그리고 앞으로 사용하게될 것이기도 하고, 언제까지나 JS계열로 프로젝트를 진행할 수 는 없다! 그리고 업무시 중요한 eslint 와 preiiter 설정도 해보자! 1. create-react-app을 이용해 typescript 버전으로 설치 2. eslint & preitter typescript 버전으로 설치 이 두가지 버전이 세팅에 가장 중요한 부분이다. 하지만 먼저 알아야 하는 사항들 세가지가 있다 1. Typescript를 사용하는 create-react.. 공감수 2 댓글수 0 2021. 10. 21.
  • [React] 컴포넌트 라이프 사이클과 주요 메서드 호출 순서 컴포넌트 라이프사이클 이란 컴포넌트 라이프사이클은 컴포넌트의 생성부터 소멸에 이르는 일련의 이벤트로 생각할 수 있습니다. 모든 리액트 컴포넌트에는 LifeCycle을 갖습니다. LifeCycle은 세가지 카테고리로 나뉘며, 개괄적인 그림은 다음과 같습니다. 또한 컴포넌트는 LifeCycle마다 메서드를 가지고 있습니다. 이 메서드를 이용해 특정 시점에 원하는 동작을 하도록 만들 수 있습니다. 메서드에 대해서 더 자세히 알아보겠습니다. 컴포넌트 라이프사이클 메서드 알아보기 에러 처리 메서드를 제외하고 LifeCycle의 메서드는 총 8가지 입니다. 자주 사용되는 LfieCycle 메서드를 설명해보겠습니다. 1. Mounting 컴포넌트의 인스턴스가 생성되 DOM상에 삽입되는 단계입니다. Mounting은 .. 공감수 0 댓글수 0 2021. 10. 14.
  • [React] useMemo와 useCallback useMemo와 useCallback을 배우기 전 알야아 한 것 1. 함수형 컴포넌트는 그냥 함수다. 함수형 컴포넌트는 단지 jsx를 변환하는 함수 2. 컴포넌트가 렌더링 된다는 것은 누군가 그 함수(컴포넌트)를 호출해 실행되는 것을 뜻한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또는 다른 함수 등) 도 매번 다시 선언되어 사용된다. 3. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경될 때마다 리렌더링된다. (심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게서 받은 props가 변경되지 않더라도 리렌더링 되는게 기본) useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a,b),.. 공감수 0 댓글수 0 2021. 10. 13.
  • [React] 리덕스 (Redux)란 ? 리덕스(Redux) 란? 공식문서를 참조한 정의는 다음과 같다. 자바스크립트로 구동되는 어플리케이션에서 예측 가능한 상태관리를 도와주는 상태관리 라이브러리 그런데, React의 setState, Hooks의 useState로만 사용해서 구현해도 충분히 상태관리에 이상이 없는데 굳이 리덕스를 사용하는 이유는 무엇일까? 우리가 알고 있는 리액트에 상태관리는 각 컴포넌트 안에서 이루어지는데, 각 컴포넌트에 필요한 상태에 대해서는 각각의 컴포넌트 내에서 선언되고 수정된다. Redux는 (Flux 패턴을 활용) 전역상태를 관리하기 위한 라이브러리이다.(React,Vue,Angular에서 모두 사용 가능) 예를 들어 위 그림과 같이 컴포넌트 구성이 있다고 가정하고, 자식 컴포넌트6에서 자식 컴포넌트8로 상태를 전달.. 공감수 0 댓글수 0 2021. 10. 12.
  • [React]setState는 비동기 동작 React를 통해서 웹 개발을 하다보면 당연스럽게 만지게 되는 주요 메소드들이 있는데 그 중에 하나가 setState입니다. 1. setState는 어느 기능을 가지고 있는가? 리액트는 state가 변화될때 다시 render를 해주기 때문에 setState는 component를 re-render할때 꼭 필요합니다. 그런데 setState를 사용하다보면 state가 정상적으로 업데이트도지 않거나 조금 느린 템포로 업데이트되는 상황을 종종 찾아볼 수 있습니다. 그럼 이제 왜 그런 상황이 발생하는지 좀더 자세히 알아보도록 해보겠습니다. 2.setState를 조금 더 깊게 알아보자 setState를 알려면 본인의 소스코드에 대해서 잘 살펴보아야 합니다. CRA(create-react-app) 보일러 플레이트를 .. 공감수 1 댓글수 0 2021. 10. 12.
  • [React] Stateful / Stateless 이번 시간에는 상태가 있는 Stateful Component 와 상태가 없는 Stateless Component에 대해 알아보겠다. 1. React의 Stateful Component 말그대로 State(상태)가 있는 Component를 말한다. class에서 this 인스턴스를 통한 state에 접근하고 상태를 관리함 CASE A. class선언후 생성자 인스턴스에서 this를 통한 state(상태)관리 // Here is an excerpt from the counter example constructor(props) { super(props); this.state = { count: 0 }; } CASE B. React Component Class 중 useState module을 사용해 상태관리 .. 공감수 0 댓글수 0 2021. 10. 11.
  • [React] React Life Cycle 생명주기 시작하기 전에 리액트 라이프 사이클에 대해 정확하게 알고 있지 않기에 이 포스트를 작성하기로 했다.이 링크를 참고하면 좀 더 자세하게 LifeCyle을 이해할 수 있다. 앞으로 LifeCylcle의 업데이트된 사항을 위 링크에서 확인해 보고 이전과 비교하면 더 좋을 것이다. 1. 리액트에 라이프 사이클 이란 ? 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리 언어이다. 그렇다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질때 끝이난다. 위의 이미지는 리액트의 라이프 사이클을 나타낸 화면이다. 이제 이 각각의 메서드들이 어떤 역할을 하는 지 알아보겠다. 2. 라이프사이클의 분류 .. 공감수 0 댓글수 0 2021. 10. 10.
  • [React] React Hooks이란? 1.Hook 이란? 상태 관리가 가능하고 라이프사이클 API를 사용할 수 있는 함수형 컴포넌트 리액트에서 컴포넌트를 정의하는 방법 리액트에서 컴포넌트를 정의하는 방법은 두가지 가 있다. 클래스형 컴포넌트 - state를 가지고 있어 상태 변화에 대한 관리를 할 수 있다. - 단계별로 라이프 사이클을 경험할 수 있고, 라이프 사이클 API를 사용할 수 있다. 함수형 컴포넌트 - 클래스형 컴포넌트에 비해 선언하기가 간편하여 주로 화면을 그리는 역할을 한다. - 메모리 자원을 클래스형 컴포넌트 보다는 덜 사용한다. - state와 라이프사이클 API 사용이 불가능 하다. 한마디로 클래스형은 stateful component, 함수형은 stateless component라고 할 수 있다. ※ 그러나 React .. 공감수 0 댓글수 0 2021. 10. 10.
  • [React] 컴포넌트 성능 개선 React.memo() 1.React.memo란? React.memo는 함수형 컴포넌트에서 동일한 파라미터로 생성된 함수들을 메모이제이션을 이용하여 재사용하게 도와 줍니다. 예를 들어 다음과 같은 상황이 있다고 가정해보겠습니다. 이름, 나이, 주소값을 받는 useState를 이용해 표현하고 있고 주소를 제외한 이름, 나이를 파라미터로 받는 컴포넌트가 있습니다. 여기서 이름, 나이 값이 변경되면 해당 값을 가져다 사용하는 컴포넌트도 당연히 리 렌더링이 발생되어 수정된 화면을 보여줘야 합니다. 하지만 주소값이 변경될 경우에는 어떨까요? 주소 값이 변경되더라도 useState로 정의된 값들을 같이 리 렌더링이 발생되기 때문에 이름,나이,값이 동일함에도 불구 하고 해당 값들을 가져다 사용하는 컴포넌트도 리 렌더링이 발생됩니다. 결국 .. 공감수 0 댓글수 0 2021. 10. 9.
  • [React] react에서 불변성을 지켜야하는 이유 불변성이란 단어는 React를 관통하는 핵심키워드라 볼 수 있습니다. 불변성은 어떤 값을 직접 변경하지 않고 새로운 값으로 다시 만들어내는 것입니다. 필요한 값을 변형해서 사용하려면 어떤 값의 사본을 만들어 사용해야 합니다. JS에서 원시타입은 괜찮지만 객체 타입의 불변성을 지키는 것은 고려해야 하는 부분이 있습니다. 아래와 같은 코드가 있다고 가정할때 user와 copyUser 변수는 같은 참조 (Memory Address) 값을 가집니다. (객체 타입은 참조 값을 주고받습니다.) 그렇기 떄문에 user가 가지고 있는 객체의 값이 변경된다면 copyUser도 같은 객체를 가지기 때문에 값이 공유 됩니다. 하지만 이런 작동 방식에는 값을 예측할 수 없거나 버그를 유발하기 떄문에 붋변성을 통해서 해결해야 .. 공감수 0 댓글수 0 2021. 10. 9.
  • [React] useCallback과 useMemo를 제대로 사용하는 법 useCallback React 문서에는 아래와 같이 설명되어 있습니다. const memorizedCallback = useCallback(() => { doSomething(a,b); }, [a,b]); // function , dependencies 메모이제이션된 콜백을 반환합니다. 콜백과 그것의 의존성 값의 배열을 전달해야 합니다. useCallback은 콜백의 메모이제이션된 버전을 반환할 것입니다. 그 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. 이것은, 불필요한 렌더링을 방지하기 위해 (예로 shouldComponentUpdate를 사용하여) 참조의 동일성에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용합니다. useCallback(fn, deps) 은 use.. 공감수 0 댓글수 0 2021. 10. 9.
  • [React] useEffect와 useLayoutEffect의 차이는 무엇일까? React가 웹 프레임워크 시장에서 대세가 되면서, 많은 사람들이 웹 어플리케이션을 제작하기 위해 React를 사용하고 있습니다. 특히, 2018년 10월의 React Conf에서 발표된 React Hooks가 등장함에 따라서 Class Component기반에서 Functional Component 기반으로 넘어오고 있습니다. 많은 hooks에서 useEffect 와 useLayoutEffect 의 차이점을 명확하게 구분하지 못하는 경우가 많아 이번 글에서는 useEffect 와 useLayoutEffect 의 차이점을 설명해 보겠습니다. 설명에 들어가기전에 필수개념2가지를 먼저 눈에 익혀보자 Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스.. 공감수 0 댓글수 0 2021. 10. 9.
  • [React] 프로젝트를 Github Pages에 배포하는법 이번 시간에는 그 동안 다루지 못한 Github Pages를 React에서 배포하는 방법을 알아보도록 하겠습니다. 제가 지금 현재 Windows버전으로 진행중인데 방식은 동일하니 참고하시면 되겠습니다. 우선 먼저 배포할 프로젝트를 준비해주세요. 1. Github 저장소 만들기 먼저 자신의 Github 저장소를 하나 생성해줍시다. 저장소 이름, 설명을 작성후 Create repository 클릭 첫번째 comman line 부분을 오른쪽상단 아이콘을 클릭해 복사 or 아래 명령어대로 차례대로 입력 git init git add * git commit -m "first commit" git remote add origin https://github.com/Koras02/react-github-pages.gi.. 공감수 2 댓글수 0 2021. 10. 8.
  • REACT - Github Pages SPA(Single-Page-App) 해결 이번 시간에는 단일 페이지 블로그를 제외한 클론 페이지 제작 시 중요한 SPA(Single-Page-App)에 대한 해결방법을 포스팅해보겠습니다. 기본적으로 깃허브에서는 SPA를 지원하지 않습니다. 리액트 라우터(React)의 를 사용하면 데모사이트 같은 리액트(react), 그 외 프런트엔드 라이브러리 및 프레임워크를 사용하면 애플리케이션을 쉽게 배포 할 수 있습니다. 1.SPA 가 필요한 이유? 기본적으로 github Pages는 단일 페이지 앱을 지원하지 않습니다. 예를 들어 URL이 example.tId/foo이고 /foo가 프론트엔드 경로인 경우, 깃허브 페이지 서버는 /foo를 모르기 때문에 404 에러를 반환합니다. 이 문제를 해결하는 방법을 알아보겠습니다. 작동방식 - Github 페이지 .. 공감수 0 댓글수 0 2021. 9. 12.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.