프론트엔드 개발 94

vue3) props 전달 방법

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

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..

Redux-Toolkit 상태관리 라이브러리 사용법

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

리액트) state의 모든 것 (props/state/로컬/전역/서버상태)

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