Ella 프론트엔드일지

0. Redux 등장배경 - MVC 패턴(양방향 데이터 흐름)이 주류였지만, 양방향 데이터 흐름은 복잡하고 데이터 흐름을 판단하기 불편했다. 이러한 해결방법으로 단방향 데이터 흐름인 Redux 가 등장했다. 🔸MVC 패턴(양방향 데이터 흐름) - 어떤 action 이 발생하면 데이터 상태가 변경되고 그에 따라 디스플레이를 변경하는데 상태가 변경되었다는 정보를 View와 Model이 서로 양방향으로 주고 받는 형태이다. 1) Model : 어플리케이션의 데이터를 관리해주는 부분 2) View : 어플리케이션이 사용자에게 어떻게 보여지는지에 대한 관리 3) Controller : Model 의 자료와 View의 인터렉션을 총괄하는 어플리케이션 로직 그러나 몇몇 사람들이 MVC가 대규모 어플리케이션 개발에는 ..

0. 버그 현황- 리액트쿼리로 리팩토링 도중 상품을 장바구니에 담았을때 TotalPrice 컴포넌트의 총 상품금액과 배송비가 업데이트가 안되는 문제가 발생했다.const useFetchCartItems = (token: string) => { const { data: cartList } = useFetchCartList(token); // console.log(cartList); const productIds = cartList.results.map((item: any) => { return item.product_id; }); // console.log("Product IDs:", productIds); const queryInput = productIds.map((productId: string) =..

0. props와 state props state - 부모 컴포넌트에서 자식컴포넌트로 전달되는 읽기전용 데이터 - 자식은 props를 사용해서 부모에게 데이터를 건네줄 수 없다. 부모가 props로 setState를 넘겨주면 자식이 그 함수를 이용해 값을 건네주는 방식이다(Lifting State UP) - 컴포넌트 내부에서 관리되며, 변할 수 있는 데이터 - state의 변경은 컴포넌트의 재렌더링을 유발한다.(웹 애플리케이션을 렌더 하는데 있어 영향을 미칠 수 있는 값) 🤔 props는 읽기전용이라는데 자식컴포넌트에서 상태 바꾸고 싶으면 어떻게 함? (Lifting State Up) 더보기 누르기 더보기 🔸Lifting State Up (State 끌어올리기) 1) 부모컴포넌트에서 'useState' ..

0. 버그 현황 - 이틀째 시달리는 에러.....어떻게 해결하면 좋을지 모르겠음 - redux-toolkit 의 createAsyncThunk 에서 react-query 로 장바구니 항목을 불러오는 페이지 리팩토링 하는 중 고난이도의 문제가 생김 - 장바구니 정보를 가져오는 API 를 불러오고 거기서 product_id 값을 반환 받으면 그 product_id 값을 이용해서 상세 상품 정보를 불러오는 API 를 통신해야했다. 장바구니 불러오는 API 에서 product_id 를 빼오기 위해서 결국 반복문을 쓸 수 밖에 없었다. // 장바구니 불러오는 API 응답값 { "count": Int, "next": String, "previous": String, "results": [ { "my_cart": I..

1. XSS (Cross Site Scripting) - 웹 어플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 - 주로 여러 사용자가 보게 되는 전자 게시판에 악성 스크립트가 담긴 글을 올리는 형태로 이루어진다. 이 취약점은 웹 어플리케이션이 사용자로부터 입력 받은 값을 제대로 검사하지 않고 사용할 경우 나타난다. 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)를 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 주로 다른 웹사이트와 정보를 교환하는 식으로 작동하므로 사이트 간 스크립팅이라고 한다. 🔸XSS 예제 - 이용자가 XSS 게시물에 접속하면 공격자가 임의로 삽입한 스크립트가 실행되어 쿠키 및 세션이 탈..

0. 배경설명 인터넷을 통해 데이터를 보내려면 TCP/IP 프토토콜로 보내는 IP주소, 받는 IP주소, 순서, 검증 등의 정보로 데이터를 한번 감싸고 그안에 데이터는 HTTP 프로토콜이라는 규약으로 묶어서 데이터를 주고 받게 된다. 여기서 HTTP 프로토콜은 특징들이 있다. 🔸HTTP 프로토콜 특징 1) 무상태성 - HTTP는 각 요청과 응답이 독립적이며 서로 연결되어 있지 않다. 서버는 이전에 했던 요청에 대한 정보를 저장하고 있지 않다. - HTTP 상태 정보를 기억하고 있지 않기 때문에 동일한 클라이언트가 재요청할 때마다 모든 정보를 다시 보내줘야한다. 2) 비연결성 - 클라이언트가 서버에 요청을 보내면 서버는 클라이언트에 응답을 보낸 후 연결을 종료한다. - HTTP/1.1 부터는 "Keep-Al..