min

1. Redux https://minprogramming.tistory.com/entry/redux%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC redux에 대하여... 오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다. 오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다. 구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명 minprogramming.tistory.com https://minprogramming.tistory.com/entry/MVVM%EA%B3%BC-FLUX%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC MVVM과 FLUX에 대하여... 오늘 나는 cs 스터디로 MVVM과 F..

1. XSS XSS는 (Cross-Site-Scripting)이라는 글자의 약자로 클라이언트 사이드 공격이다. 이때 이말을 듣고 클라이언트 사이드 공격이 무엇인지 궁금해하시는 분들이 있을 것이다. 클라이언트 사이드 공격은 웹 페이지에 이용자를 대상으로 공격하는 기법을 의미한다. 즉 XSS는 사용자 정보(쿠키, 세션, 토큰), 클라이언트 입장에서의 의도치 않은 공격 등이 있다. 그렇다면 실제 예시로는 어떤 것이 있을까? 1-1) stored / persistent 이름을 보면 정말 복잡해 보이지만 사실은 엄청 간단하다. 예를 들어 input 창이 있다고 가정하자! 이때 input창에서 데이터를 입력하면 입력한 데이터가 폼을 통해서 서버로 이동할 것이고 리소스에 저장될 것이다. 근데 여기서 만약 input ..

오늘은 항해 99에서 WIL로 state에 대해서 조사하라는 숙제가 있었다. 그래서 오늘은 내가 공부하면서 정리한 state라는 개념에 대해 설명하고자 한다. 1. state 도대체 뭐야? state를 한국말로 하면 "상태"를 의미한다. 이때 "상태"는 react에서는 간단하게 데이터라고 보면 된다. 즉 "state를 관리한다.", "state를 변경한다"라는 말은 "데이터를 관리한다", "데이터를 변경시킨다"라는 말로 재해석 할 수 있다. 그럼 state의 정의에 대해서도 살펴보았으니 state의 종류에 대해서 살펴보자 state는 크게 2가지 종류가 있다. 첫번째는 지역상태로 한 컴포넌트내에서의 데이터를 의미한다. 두번째는 전역 상태로 여러 컴포넌트에서 참조할 수 있는 데이터를 의미한다. 2. sta..

나는 오늘 강의에서 브라우저의 렌더링 과정에 대한 워딩이 있어서 이것에 대하여 조사를 해볼까 한다. 1. CSR CSR은 Client Side Rendering의 줄임말이다. 말그대로 클라이언트 측에서의 렌더링을 의미한다. CSR의 동작 원리는 다음과 같다. 먼저 server 측에서 html,css,js등의 리소스를 주게 된다. 이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 렌더링 즉 페인팅을 하게 된다. 위에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 많다는 것을 알 수 있다. 하지만 다른 페이지를 이동할때는 가지고 있는 리소스를 가지고 DOM을 다시 그리면 되기 때문에 페이지 전환이 부드럽다는 장점이 있다. 2...

오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다. 오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다. 구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명하겠다. 이 구조가 redux가 돌아가는 구조다. 나는 이 구조에서 각각의 역할 들을 간단하게 설명하고 각각이 어떻게 연결되는지에 대해서 설명하겠다. 예를 들어서 버튼을 누르면 숫자가 올라가고 내려가는 프로그램이 있다고 하자 이때 view는 버튼과 숫자를 보여주는 페이지를 의미한다. import React from "react"; const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }..

오늘 나는 cs 스터디로 MVVM과 FLUX에 대해서 공부해보는 시간을 가졌다. 내가 MVVM과 FLUX에 대해서 공부한 이유는 다음과 같다. 1. 면접에 자주 나오는 질문이라서 2. MVC는 들어봤어도 MVVM에 대해서는 들어본 적이 없어서 그래서 나는 오늘 저 2가지의 질문에 대해서 답해볼려고 한다. 1. MVC? MVVM??, FLUX ???? 도대체 뭐지??? MVC,MVVM,FLUX는 대표적인 디자인 패턴들의 예시다. 여기서 디자인 패턴은 우리가 만들려고 하는 서비스의 동작 원리를 설계한 설계도라고 한다. 즉 MVC,MVVM,FLUX는 설계도를 의미한다. 그럼 여기서는 MVC에 대해서는 추가적인 설명없이 MVVM,FLUX에 대해서 살펴보겠다. 1-1) MVVM MVVM은 모델과 뷰, 뷰모델로 이..

나는 context api를 왜 사용하는지 구지 redux라는 것이 있는데 context api를 이용하는 이유를 몰랐다. 그래서 나는 리엑트를 다루는 기술과 리엑트 공식 문서를 보면서 그 이유를 찾을 수 있었다. 나는 오늘 그 이유에 대해서 설명하고 얼마나 그 이유가 강력한지에 대하여 설명해보겠다. 1. 이유 context api를 쓰는 가장 간단한 이유는 사용방법이 간단해서 이다. 우리가 redux를 사용할려면 알아야 할것들이 정말 많다.(액션,액션 생성함수, 리듀서, 스토어) 그리고 이뿐만아니라 이들 사이에 관계에 대해서도 알고 있어야 한다. 하지만 context api는 정말 그 관계가 간단하다. 그 관계에 대해서 조금 설명을 해보겠다. 2. context api, redux의 사용이유 우리가 c..

나는 오늘 컴포넌트 성능 최적화를 배우면서 이걸 어떻게 구현하는지 , 성능이 비효율적이다 라는 것을 어떻게 아는 지가 궁금했다. 그래서 나는 오늘 그것에 대해서 말해볼까 한다. 성능을 최적화 시킬 수 있는 방법으로는 크게 3가지가 있다. 첫번째는 React.memo다. React.memo를 사용하는 경우는 props가 바뀌지 않았을때 강제 리렌더링을 막는 경우이다. 그럼 여기서 props가 바뀌지 않았는데 렌더링이 일어나는 경우는 어떤 것이 있을까? 지금 생각나는 예시로는 부모 state가 변경되었을 때 자동적으로 자식 props가 업데이트가 되고 결국에는 리렌더링이 발생한다. 정리하면 React.memo는 어떤 컴포넌트가 강제로 리렌더링이 일어나는 것을 막을 때 사용한다. 두번째는 useCallback..