분류 전체보기 146

vue3) props 전달 방법

🔸문제상황 - form 안에 label 과 input 이 반복되어 label 과 input을 공통 컴포넌트로 분리하려고 한다. 상품명 설명 상세 상품가격 상품 등록 🔸Props 생성 방법 - 우선 자식 컴포넌트를 생성하고 props 로 받아올 것들을 지정한다. type 과 default 를 설정할 수 있다. // src/components/common/FormInput.vue {{ labelText }} - 부모 컴포넌트를 생성해서 props 속성명과 넘겨줄 값을 적는다. 이때,아래 사항을 유의해서 넘겨주자 // 이런식으로 :이 없는 것은 문자열 데이터를 그대로 전달하는 방식이다. // : 이 있는건 변수를 바인딩 하기위한 표현식이다. 그리고 나서 component 를 import 해온 후에 compon..

오픈마켓 프로젝트)React-Query 는 어떻게 데이터가 동기화 되는가

0. 글을 쓰게 된 이유 오픈마켓 프로젝트에서 서버데이터를 기존에 Redux-Toolkit 의 createAsyncThunk 로 다뤘었다. 서버데이터를 캐싱,동기화가 잘 되는 React-Query 로 리팩토링 했었다. 나는 단지... React-Query 의 저런 장점이 있어서 리팩토링을 했었는데.. 얼마전에 개발자 시니어분께서 동기화가 정말로 되는지 확인을 했냐고 물어보셨다. 머리를 땅 하고 맞은 기분이었다!! 동기화가 되겠거니..하고만 생각하고 있었는데...확인을 안했던 것이다...ㅎㅎㅎ 그리고 새로운 데이터가 서버에 등록이 되는데 그걸 클라이언트가 어떻게 알아차리고 데이터를 업데이트 시키는지 물어보셨는데 대답을 하나도 하지 못했다!! 이제 그걸 알아보도록 하겠다 1. 쇼핑몰 페이지를 통해 데이터가 ..

React) 제어컴포넌트 비제어컴포넌트

0. 개요 - 리액트는 , , 와 같이 입력을 받을 수 있는 폼 요소들을 제어 컴포넌트와 비제어 컴포넌트로 구분하고 있다. 1. 제어컴포넌트 제어 컴포넌트는 상태(state)와 함께 사용되며, 해당 컴포넌트의 상태에 의해 값이 제어된다. 이 상황은 마치 입력 폼 요소가 이벤트 핸들러 외에 다른 누군가에 의해 변경될 수 없도록 제어하고 있는 것 같다. 이렇게 입력 폼 요소의 value 속성을 지정하여 값을 제어할 수 있는 컴포넌트를 제어 컴포넌트라고 한다. 즉, 사용자의 입력을 받는 컴포넌트에 event 객체를 이용해 setState()로 값을 저장하는 방식을 제어 컴포넌트 방식이라 한다. => 제어 컴포넌트는 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화된다. export default funct..

[사용자 인증방식] 세션,JWT,OAuth

0. 세션(서버 기반 인증 시스템) 1) 유저가 로그인을 하면 2) 서버는 아이디와 비밀번호를 회원 DB 에서 확인해본다. 3) 회원정보가 맞다면 세션 저장소(ex: 메모리, 데이터베이스 등)에서 회원 정보 세션을 생성한다. 4) 세션 저장소에서 서버로 Session ID를 발급한다. 5) Session ID는 사용자의 웹브라우저에 전달된다. 6) 사용자가 권한이 필요한 페이지에 접속 요청을 하면, 사용자의 브라우저는 요청 헤더에 쿠키(session_id가 포함)를 포함 시켜 서버에 전달한다. 7,8) 서버는 받은 요청 헤더의 쿠키 정보에서 'session id' 값을 추출해서 세션 ID를 사용해서 자신의 세션 저장소에서 해당 세션 ID와 연결된 사용자 정보를 찾는다. 9) 세션 ID에 해당하는 사용자 ..

Next.js) className did not match

0. 에러메세지 next. js를 그냥 설치만 했을 뿐인데 계속 콘솔창에 에러메세지가 났다. Warning: Prop `className` did not match. Server: "__className_20951f vsc-initialized" Client: "__className_20951f" at body at html at RedirectErrorBoundary 1. 에러 해결과정 - 처음에는 아래 게시글에서 RootLayout 에 이 태그를 추가하라고 했었다. https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c What cause..

오픈마켓 프로젝트) 이미지 최적화

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 - 이 엄청 큰 사진(리소스) 들을 몇십개 불러온다고 생각해보자. ..