goesnow | Seog Blog

리액트 Route를 Code Splitting으로 개선하기

동적 Import를 활용한 초기 로딩 속도 개선

프로젝트를 진행하며 로그 관리, 팝업 관리 등의 여러 데이터를 어드민 계정으로 한눈에 보기 위해 관리자 페이지를 만들어 왔었다. 처음엔 간단한 React CRA 웹페이지였지만 요구사항이 늘어가며 점점 페이지 수가 많아졌고, 웹팩을 이용해 하나의 번들로 빌드해주기에 초기 로딩 속도가 점점 느려져 DOMContentLoaded 시간이 1.1초대 이상을 유...

Posted by Seog on September 6, 2022

React Compound로 컴포넌트 설계하기 (2)

React Component 조합 및 Render props 사용하기

이 포스트는 React Compound로 컴포넌트 설계하기 (1) 이후의 포스트입니당 앞선 포스트에서의 예시는 Compound Components의 장점을 모두 보여주기에는 조금 부족하였다. Compound Components를 Custom Hooks나 다른 패턴과 사용하면 상태를 숨김으로 인해 더 깔끔한 추상화를 제공할 수 있다. 📚 기본적인 C...

Posted by Seog on July 21, 2021

React Compound로 컴포넌트 설계하기 (1)

React Component 조합 및 제어역전 알아보기

리액트를 사용하다보면 하위 컴포넌트에 Props를 넘겨줘야하는 일이 생긴다 하지만 기능을 추가하다보면 너무 많은 Props로 고통받기 십상이다 1 2 3 4 5 6 7 8 9 10 11 12 <Survey title='어플 설문조사' description='불편하신 점은 없으셨나요' questions=[{ label: ...

Posted by Seog on July 20, 2021

64-bit Oracle Client library cannot be loaded in mac

mac에서 oracle사용시 발생하는 에러 해결

mac에서 docker를 사용하여 oracle을 다운 받는데에는 성공하였지만, 막상 python + flask에서 실행해보니 에러를 맞이하였다. 나의 환경 OS : MACOS (Intel) oracle : oracle-xe-11g (jaspeen/oracle-xe-11g) 해결법 우선 출처는 이곳이다. 설명이 잘 되어있으니 보고 따...

Posted by Seog on June 4, 2021

맥에 오라클 설치하기

docker를 사용하여 맥에 오라클 설치!

학교 프로젝트로 oracle을 사용하래서 다운하려했더니 docker를 쓰랜다.. 1. docker 설치 도커 사이트가서 다운로드. 대부분 intel칩이겠죠…ㅎㅅㅎ 설치는 여느 다른 앱들과 다르지 않습니다. 2. oracle 다운로드 도커를 다운로드 후 실행하였으면 터미널을 킵니다. 꼭 실행하셔야 합니다 1 2 3 docker sea...

Posted by Seog on June 3, 2021

React Context API 사용하기

Context API란 ?!

👀 Context API ? 일반적인 React에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달된다 하지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (로그인 여부, UI 테마) 이 과정이 번거로울 수 있다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 ...

Posted by Seog on April 27, 2021

React Hooks 만들어 사용하기

custom hooks를 사용하여 코드 재사용하기

React Hooks? 기존의 React는 class를 바탕으로 작성되어 왔다. 하지만 class 컴포넌트는 여러가지 단점들을 가지고 있었다. 컴포넌트 재사용을 하기 어렵다. 라이프사이클 함수가 혼란을 일으킨다. 불필요한 반복 또한 존재한다. class의 this는 사람과 기계 모두를 혼동시킨다. 이러한 이유로, React에서 Fu...

Posted by Seog on April 25, 2021

worker 일시켜보기

web worker 사용하여 일시키기

페이지를 제작하다 보면 무거운 데이터 처리를 해야하는 일이 종종 생겼다. 그냥 많은 양의 데이터를 받아서 적용시키다보니 화면이 버벅거리는 현상이 생겼다. 과도하게 await을 하는 경우나 .. 엄청 큰 데이터 연산을 하는 경우 .. 이는 javascript가 싱글 스레드 방식으로 작동하기 때문이다. 🚶‍♂️ 1. 기본 개념 예를 들어,...

Posted by Seog on April 15, 2021

React useReducer

useReducer 를 사용하여 상태 업데이트 로직 분리하기

👣 useReducer 이해하기 나는 주로 Hooks를 사용하여 React 컴포넌트를 작성하는데, useState를 이용하여 상태관리를 하면 상태가 중구난방으로 관리될 수 있는 것을 겪었다. 다음은 내가 겪었던 관리하기 까다로웠던 간단한 예시이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22...

Posted by Seog on April 14, 2021

좋은 Component란?

좋은 React Component 설계란

웹애플리케이션의 크기가 커짐에 따라서 웹 컴포넌트의 설계가 중요해졌다. 잘 설계된 프로젝트는 리팩토링이 상대적으로 용이하며, 반복적인 일을 하지 않아도 된다. 그렇다면 어떻게 웹 컴포넌트를 잘 설계할까? 1. 공통적인 View, 기능 찾기 웹사이트의 디자인과 기획서를 받은 후 개발을 시작할 때 가장 중요한 포인트라고 생각한다. 우선 컴포넌트의 계층...

Posted by Seog on April 9, 2021

Seog Blog