Ella 프론트엔드일지

1. 라이트하우스 성능 분석 - 라이트 하우스 성능 분석을 했더니 이미지 관련 최적화를 할 필요성을 느꼈다. - 이미지의 렌더링된 크기는 377*377 이었는데 실제 고유 크기는 1500px*1500px 이 넘었다. (이미지 요소를 클릭해서 개발자 도구에서 확인해보면 아래와 같이 나온다) - 예제 - 렌더링된 크기: 120 × 120 px 렌더링된 가로세로 비율: 1∶1 고유 크기: 1200 × 1200 px 기본 가로세로 비율: 1∶1 파일 크기: 175 kB 현재 소스: https://images.unsplash.com/photo-1542435503-956c469947f6?w=1200&h=1200&q=80&fm=jpg&fit=crop - 이 엄청 큰 사진(리소스) 들을 몇십개 불러온다고 생각해보자. ..

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 게시물에 접속하면 공격자가 임의로 삽입한 스크립트가 실행되어 쿠키 및 세션이 탈..