전체 글 (17) 썸네일형 리스트형 웹소켓과 Socket.IO 웹소켓 ws프로토콜을 이용하는 양방향 통신방식 한번 연결되면 "연결을 끊지 않고 계속 유지"한 상태로 "클라이언트와 서버가 서로 데이터를 주고 받는다" 서버 하나에 여러 클라이언트가 붙어서 지속적으로 데이터를 주고 받아야하는 서비스에 유용 Socket.IO 웹소켓이 지원되지 않는 브라우저에서도 작동하도록 내부적으로 구현 # 데이터 전송 to 클라이언트 (서버 -> 클라이언트) socket.emit('이벤트 이름', '클라이언트에게 전송할 데이터 내용'); - emit()메서드를 통해 클라이언트에게 "데이터"를 보낼 수 있다. - 클라이언트에서는 "이벤트이름"으로 데이터를 받아 처리할 수 있다. # 데이터 전송 to 클라이언트 (클라이언트 -> 서버) socket.emit('이벤트 이름', '서버에게 보낼.. vue의 상태관리 vuex 상태관리 여러 컴포넌트 간의 데이터 전달과 이벤트 통신을 한 곳에서 관리하는 패턴 Vue 상태관리 데이터를 단방향으로, 중앙집중적으로 관리 상태(state) 앱을 작동하는 data 뷰(view) 데이터를 받아 그려주는 vi 화면 액션(action) 사용자의 입력에 따라 반응적으로 데이터를 변경하는 method Vuex 여러 컴포넌트라도 쉽게 상호작용할 수 있게 돕는 라이브러리 state, muations, actions, getter 4가지 형태로 관리 관리 포인트는 store 라 불림 state 원본 소스 역할인 data, mutation을 통해서만 변경 가능 muations 유일하게 state를 변경할 방법, 메서드와 유사. commit을 통해서만 호출, 함수로 구현 API를 통해 전달 받은 데이터를.. Redux 알아 보기 액션 (Action) 리덕스의 상태 값을 수정하는 유일한 방법: 액션 객체와 함께 dispatch 메서드 호출 타입 속성값을 가진 자바스크립트 객체 (* type 속성 값이 꼭 존재해야 함) type 속성값으로 액션 객체 구분, type 속성값을 제외한 나머지는 상태 값을 수정하기 위해 사용되는 정보 액션 객체에는 type 속성 값 외에도 원하는 속성 값을 넣을 수 있음 dispatch 메서드가 호출된 순서대로 리덕스 내부에서 상태 값 변경 리듀서 (Reducer) 액션이 발생했을 때 상태 값을 변경하는 함수 useReducer를 작성할 때와 똑같은 형태를 가지고 있음 Action(액션)에서 발생하는 dispatch() 메소드를 사용하여 reducer 호출 (state, action) => nextSta.. 리덕스의 세 가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 가지고 온다. 전체 상태 값을 하나의 객체(스토어)에 저장해야 한다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. State is read-only 상태는 읽기 전용이다. 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다. 상태값은 액션이라는 객체를 통해서만 상태를 변경할 수 있다. 3. Changes are made with pure functions 변경(리듀서 함수)은 순수함수로만 가능하다. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 똑같은 파라미터로 호출 된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다. Hook이란? 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 사용 할 수 있게 해주는 함수 useState를 이용하여 함수형 컴포넌트에서도 상태 변수 선언 가능 useEffect를 이용하여 라이프 사이클 관리 가능 최상위(at the Top Level)에서만 Hook을 호출 (반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출X) 오직 React 함수 내에서 Hook을 호출 (일반적인 JavaScript 함수에서 호출X) useState const [ 상태이름, 상태를 변경할 함수 이름(속성값) ] = useState(초기값); 상태(동적인 값)를 관리할 때 사용한다. 값을 변경할 때 절대 상태를 직접 변경하는 것이 아닌 상태변경 함수에 값을 전달하는 방식으로 변경한.. 리액트 컴포넌트의 Life Cycle 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 수명 주기가 존재 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전 준비 과정에서 시작하여, 페이지에서 사라질 때 끝난다 Mounting(생성 될 때), Updating(업데이트 할 때), Unmounting(제거 할 때) 세 가지 Mounting : DOM이 생성되고 웹 브라우저에 나타나는 것 Updating : 컴포넌트가 업데이트 될 때 (props가 바뀔 때, state가 바뀔 때, 부모 컴포넌트가 리렌더링 될 때, 강제로 렌더링 할 때) Unmounting : 컴포넌트가 DOM에서 제거하는 과정 React.js 컴포넌트 선언 방식 함수형 컴포넌트 React 공식 문서에서는 함수형 컴포넌트 사용을 권장 함수를 기반으로 작성하는 컴포넌트 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드 클래스형 컴포넌트 Class형 컴포넌트의 state 선언 방식과 함수형 컴포넌트의 state 선언 방식이 다름 반드시 super(props)를 호출 (선언 전 까지 this 키워드 사용 X) state의 이름과 초기값을 constructor(생성자)에서 설정 render() 함수에서 this.state를 사용하여 state에 새로운 값 넣을 수 있음 React.js 특징 스터디 하면서 정리한 걸 올려봅니다. React.js 특징 페이스북에서 개발하고 관리 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 단 반향 데이터 흐름을 갖는다 컴포넌트 기반이므로 컴포넌트가 스스로 상태 관리 (Hook 을 이용한 함수형 컴포넌트 선언 방식 권장) React의 상태가 업데이트 되면 React의 비교 알고리즘을 통해 Virtual DOM과 실제 DOM을 비교하여 차이가 나는 부분만 실제 DOM에 업데이트 방식 UI 데이터 리액트에서 UI데이터는 반드시 속성값과 상태값으로 관리 상태값 : 컴포넌트 내부에서 해당 컴포넌트가 관리하는 값 속성값 : 부모 컴포넌트에서 내려주는 값, 불변 변수 이전 1 2 3 다음
