min

오늘은 virtual dom에 대해서 알아볼려고 한다. 정확히 말하자면 "버츄얼 돔과 리얼 돔의 차이를 설명해주세요"라는 질문에 답을 하려고 한다. 1. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요 버츄얼 돔의 경우에는 리엑트에서 제공하는 매커니즘으로 기존의 돔처럼 변화가 일어나는 즉시 dom을 업데이트 하는 매커니즘이 아니라 기존의 dom과 버츄얼 돔과의 차이점을 분석하고 이 차이점에 기반해서 바뀌는 부분들에 대해서만 업데이트를 하는 매커니즘이다. 이 매커니즘의 장점으로는 불필요한 dom의 업데이트가 일어나지 않기 때문에 성능적인 면에서 굉장히 빠르고 부드럽다는 장점이 있다. https://minprogramming.tistory.com/entry/리엑트를-다루는-기술-1강 리엑트 렌더링 과정에 대하여...

오늘은 전역상태관리에 대해서 알아볼려고 한다. 정확하게 말하자마녀 Redux를 제외한 다른 상태관리 툴에 대해서 설명하려고 한다. 1. redux말고 다른 상태관리 툴은 무엇이 있으며 어떤 차이점이 있는가? 1-1) redux를 제외한 나머지 툴로 대표적인 예시는 context api가 있습니다. 1-2) context api와 redux의 차이점으로는 성능 이슈와 관련이 깊습니다. redux의 경우에는 전역적으로 상태를 관리하고 이에 대해서 필요한 부분들에서만 렌더링이 이루어집니다. 반면 context api의 경우에는 한번 컴포넌트가 바뀔 경우에 모든 컴포넌트가 바뀐다는 단점이 존재합니다. 따라서 context api를 사용할 때는 불 필요한 리렌더링을 줄이기 위해서 useMemo나 React.mem..

오늘은 redux에 대해서 같이 이야기를 나눌려고 한다. 정확히 말하자면 redux는 무엇이고 왜 사용하는지에 대해서 알아볼려고 한다. 1. redux 란? : redux는 전역 상태 관리를 도와주는 라이브러리입니다. 2. redux의 사용이유 : redux 의 사용 이유에는 여러가지가 있지만 그중에서 2가지만 보도록 하겠습니다. 첫번째는 단방향 통신입니다. redux의 경우 단방향 통신 즉 FLUX 패턴에 근거하여 상태 관리가 이루어집니다. 이는 복잡한 상황을 간단하게 만들고 예상치 못한 오류를 사전에 해결할 수 있습니다. 다음은 미들웨어를 지원한다는 점입니다. 리덕스에는 리덕스 미들웨어를 제공합니다. 이는 로그 관리 , 에러 핸들링 , 비동기 처리를 하는 데 있어서 굉장히 용이합니다. 이는 결과적으로..

이번에는 상태 관리에 대해서 같이 이야기를 나눠볼려고 한다. 이야기의 주제는 다음과 같다. 첫번째 상태관리란 무엇인가? 두번째 상태관리는 왜 하는 것인가? 세번째 상태관리를 어떻게 진행하는가? 이다. 그렇다면 이 세가지 질문에 대해서 나만의 답을 해보도록 하겠다. 1. 상태관리란 무엇인가? : 상태관리를 알기 위해서는 먼저 상태에 대해서 살펴봐야 할 것 같다. 상태란 프로그래머 입장에서 봤을 때는 데이터이다. 즉 상태관리란 데이터를 관리하는 것이라고 볼 수 있다. 2. 상태관리를 하는 이유는 무엇인가? : 상태 관리를 하는 이유는 크게 2가지로 볼 수 있을 것 같다. 첫번째는 렌더링을 최적화하기 위해서 이다. 리엑트에서 렌더링이란 성능적인 측면에서 중요한 주제이다.. 두번째로는 상태의 불변성을 유지시키기..

오늘은 atomic pattern에 대해서 작성해볼려고 한다. 내가 atomic pattern에 대해서 공부하게 된 계기는 다음과 같다. 첫번째 컴포넌트를 나누는 기준을 명확하게 알고 싶다. 사실 기능적 폴더 구조나 타입별 폴더 구조 모두 컴포넌트를 나누는 기준이 명확하지 않다. 사실상 크게 컴포넌트를 나누는 기준은 알 수 있어도 세부적으로 컴포넌트를 나누는 기준은 알 수 없다. 그래서 나는 세부적으로 컴포넌트를 나누는 기준을 알기 위해서 atomic pattern에 대해서 알아볼려고 한다. 두번째 atomic pattern은 사실상 프론트엔드 디자인 패턴에서 유명한 디자인 페턴이다. 그 이유는 명확한 폴더 구조와 명확한 컴포넌트 분리 기준 때문이다. 그래서 나는 어떤 점에서 atomic pattern이..

1. 미들웨어 넌 도대체 머니? : 미들웨어는 중간다리 역할을 뜻한다. 즉 자세히 말하기 위해서 다음과 같은 예시가 있다고 하겠다. 액션 -> 리듀서 -> 스토어 이런 플로우를 가지고 redux의 상태관리가 진행된다고 하자. 여기서 미들웨어는 액션과 리듀서 사이에서 중간 다리로 액션에서 바로 리듀서를 거치지 않고 미들웨어에서 한번 중간 작업을 거치고 리듀서로 액션을 보내주는 역할을 의미한다.자 이제 미들웨어에 대해서 알게되었으니 그럼이제 redux 미들웨어를 언제 쓰는 지 살펴보자. 2. redux 미들웨어 그래서 언제 쓰는 데? : redux 미들웨어는 내가 액션을 리듀서로 보내기 전에 어떤 작업을 하고 싶을 때 사용한다. 그러면 어떤 작업은 어떤 것들이 있을까? 대표적인 예시로는 비동기 작업이다. 즉..

1. axios instance 도대체 왜 쓰는 거야? : axios instance를 쓰는 가장 큰 이유는 유지보수 때문이다. 그럼 여기서 드는 의문은 왜 유지보수 측면에서 axios instance를 쓰면 좋은지 이다. 이 이유를 설명하기 위해서 다음과 같은 예시가 있다고 하자 axios.get("https://localhost:3000") 이 코드를 보면 localhost 3000포트에 get 요청을 하는 것을 알 수 있다. 근데 만약에 통신을 300번 해야해서 저 코드가 300개 있다고 하자. 근데 만약에 저 localhost 3000포트가 3001포트로 바뀌면 어떻게 하나? 방법은 300개의 주소를 다 바꾸는 것이다. 여기서 우리는 유지보수가 떨어진다는 것을 알 수 있다. 그래서 이를 막기 위해..

1. json-server 도대체 너는 누구야?! : json-server 말 그대로 json으로 이루어진 서버를 의미한다. 하지만 이렇게 집고 넘어간다면 이 글을 읽는 독자 입장에서는 크게 도움이 되지 않을 것이다. 그래서 좀 더 자세히 설명하자면 이 때 server는 API 서버, DB 서버를 의미한다. 즉 API를 보내주거나 DB처럼 데이터를 저장할 때 사용하는 패키지다 2. json-server 그래서 왜 쓰는 거야?! : json-server에 대한 정의를 보았을 때는 이런 의문이 들었을 것이다. 이미 백엔드에서 API와 DB를 제공해주는데 구지 json-server를 쓰는 걸까?. 이 의문이 json-server를 사용하는데 필요한 핵심적인 키다. json-server를 사용하는 이유는 다음과..