본문 바로가기

리엑트34

Redux Toolkit에 대하여... 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.. 2023. 7. 1.
XSS , CSRF에 대하여 ... 1. XSS XSS는 (Cross-Site-Scripting)이라는 글자의 약자로 클라이언트 사이드 공격이다. 이때 이말을 듣고 클라이언트 사이드 공격이 무엇인지 궁금해하시는 분들이 있을 것이다. 클라이언트 사이드 공격은 웹 페이지에 이용자를 대상으로 공격하는 기법을 의미한다. 즉 XSS는 사용자 정보(쿠키, 세션, 토큰), 클라이언트 입장에서의 의도치 않은 공격 등이 있다. 그렇다면 실제 예시로는 어떤 것이 있을까? 1-1) stored / persistent 이름을 보면 정말 복잡해 보이지만 사실은 엄청 간단하다. 예를 들어 input 창이 있다고 가정하자! 이때 input창에서 데이터를 입력하면 입력한 데이터가 폼을 통해서 서버로 이동할 것이고 리소스에 저장될 것이다. 근데 여기서 만약 input .. 2023. 6. 30.
state에 대하여... 오늘은 항해 99에서 WIL로 state에 대해서 조사하라는 숙제가 있었다. 그래서 오늘은 내가 공부하면서 정리한 state라는 개념에 대해 설명하고자 한다. 1. state 도대체 뭐야? state를 한국말로 하면 "상태"를 의미한다. 이때 "상태"는 react에서는 간단하게 데이터라고 보면 된다. 즉 "state를 관리한다.", "state를 변경한다"라는 말은 "데이터를 관리한다", "데이터를 변경시킨다"라는 말로 재해석 할 수 있다. 그럼 state의 정의에 대해서도 살펴보았으니 state의 종류에 대해서 살펴보자 state는 크게 2가지 종류가 있다. 첫번째는 지역상태로 한 컴포넌트내에서의 데이터를 의미한다. 두번째는 전역 상태로 여러 컴포넌트에서 참조할 수 있는 데이터를 의미한다. 2. sta.. 2023. 6. 26.
CSR vs SSR에 대하여... 나는 오늘 강의에서 브라우저의 렌더링 과정에 대한 워딩이 있어서 이것에 대하여 조사를 해볼까 한다. 1. CSR CSR은 Client Side Rendering의 줄임말이다. 말그대로 클라이언트 측에서의 렌더링을 의미한다. CSR의 동작 원리는 다음과 같다. 먼저 server 측에서 html,css,js등의 리소스를 주게 된다. 이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 렌더링 즉 페인팅을 하게 된다. 위에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 많다는 것을 알 수 있다. 하지만 다른 페이지를 이동할때는 가지고 있는 리소스를 가지고 DOM을 다시 그리면 되기 때문에 페이지 전환이 부드럽다는 장점이 있다. 2... 2023. 6. 23.
redux에 대하여... 오늘 나는 MVVM,FLUX에 대하여 다뤄보는 시간을 가졌다. 오늘 나는 MVVM,FLUX에 관점에서 redux를 어떻게 구현하는 지 살펴보도록 하겠다. 구체적으로 나는 MVVM,FLUX에서도 FLUX에 관점에서 리덕스를 설명하겠다. 이 구조가 redux가 돌아가는 구조다. 나는 이 구조에서 각각의 역할 들을 간단하게 설명하고 각각이 어떻게 연결되는지에 대해서 설명하겠다. 예를 들어서 버튼을 누르면 숫자가 올라가고 내려가는 프로그램이 있다고 하자 이때 view는 버튼과 숫자를 보여주는 페이지를 의미한다. import React from "react"; const Counter = ({ number, onIncrease, onDecrease }) => { return ( {number} +1 -1 ); }.. 2023. 6. 20.
MVVM과 FLUX에 대하여... 오늘 나는 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은 모델과 뷰, 뷰모델로 이.. 2023. 6. 20.