Pmos programming records Pmos programming records

라이프사이클 모든 컴포넌트에는 라이프사이클이 존재한다. 렌더링되기 전 준비 과정부터 페이지에서 사라질 때 끝난다. 종류 어떤 작업을 작동하기 전에 실행되는 메서드는 접두사로 Will이 붙고, 작업 후에 작동하는 것은 Did가 붙는다. 카테고리는 마운트, 언마운트, 업데이트로 나뉜다. 마운트 DOM이 생성되고 브라우저 상에 나타나는 것을 마운트라고 한다. 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render -> componentDidMount gerDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 componentDidMount : 컴포넌트가 브라우저 상에 나타난 후 호출하는 메서드 업데이트 (..

map() 자바스크립트 배열 객체의 내장 함수이다. 이를 이용해 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 원하는 규칙에 따라 변환한 후에 그 결과로 새로운 배열을 생성한다. map을 이용해 컴포넌트 렌더링 그러나 이대로 실행하면 key props이 없다는 경고가 발생한다. key 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 확인하기 위해 필요하다. 응용

id 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 특정 DOM 요소에 어떤 작업을 할 때 id를 달아서 특정 id에 스타일을 적용하거나 자바스크립트를 적용한다. react에서는 해당 id에 컴포넌트를 렌더링하라는 코드가 있다. ReactDOM.render(, document.getElementById('root')); HTML 처럼 프로젝트 내부에서 DOM에 이름을 다는 방법이 있는데 이를 ref 라고 한다. ref 사용 상황 DOM을 꼭 직접적으로 건드려야 할 때 사용한다. 예를 들어, 특정 input에 포커스 주기, 스크롤 박스 조작하기, Canvas 등이 있다. createRef() React에 내장되어 있는 createRef 함수를 사용해 ref를 설정할 수 있다. 설정하는 ..

event 사용자가 브라우저에서 DOM 요소와 상호작용하는 것을 이벤트라고 한다. 예를 들어 onClick과 같은 메서드를 일컫는다. event 주의사항 1. 이벤트 이름은 카멜 표기법(onclick -> onClick, onkeyup -> onKeyUp) 2. 이벤트에 JS 코드가 아닌 함수 형태의 값을 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다. 예를 들어 MyComponent에 onClick 값을 설정한다면 클릭할 때 doSomeThing 함수를 실행하는 것이 아니라 그냥 이름이 onClick인 props를 MyComponent에 전달해 줄 뿐이다. event handling 이벤트 처리는 다음과 같이 구현한다. 이벤트에 코..

state 컴포넌트 내부에서 바뀔 수 있는 값이다. props는 부모 컴포넌트가 설정하기 때문에 자식 입장에서는 읽기만 가능하다. state 주의사항 setState 혹은 useState와 같은 세터 함수로 값을 조작 해야한다. 배열이나 객체를 업데이트 할 때는 해당 자료의 사본을 만들고, 사본을 업데이트 한 후에 그 사본의 상태를 세터 함수에 넣는다. setState useState

클래스형 컴포넌트 함수형 컴포넌트와는 다르게 state, 라이프사이클, 임의 메서드 사용이 가능한 장점이 있다. 그러나, 공식 메뉴얼에서는 함수형 컴포넌트와 Hooks 사용을 권장한다. 함수형 컴포넌트와 선언 방식이 다소 차이가 있다. props 속성의 줄임말로 컴포넌트 속성을 설정할 때 사용하는 요소이다. 어떤 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정해준다. propTypes으로 타입을 지정하거나 필수 속성을 지정할 수 있다.

src/App.js JSX 자바스크립트의 확장 문법이며 이 코드는 브라우저에 실행되기 전에 코드가 변환하는 과정을 거친다. 다음과 같은 예시로 설명하겠다. 이렇게 변환하는 이유는 개발을 편한하게 하기 위함이다. 프로그래머가 매번 React.createElement 함수를 호출한다면 매우 불편하다. JSX 문법 1. 감싸인 요소 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 이렇게 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 트리 형식으로 이루어져 있기 때문이다. 2. 자바스크립트 표현 JSX 코드 내부에 자바스크립트를 사용하고 싶다면 {}로 감싸라. 3. if문 대신 조건부 연산자 JSX 내부에서 if문을 사용할 수 없다. 4. ..

schema 본 프로젝트에서는 nosql인 mongoDB를 사용했다. 스키마 설계는 다음과 같이 하였다. Room은 채팅방에 관한 정보가 들어있으며, 비밀번호가 있으면 비밀방이다. Chat에 존재하는 room을 이용해 Room schema를 참조할 수 있다. packages 소스 코드(핵심) app.js socket.js 실행화면 출처 https://github.com/zeroCho/nodejs-book ZeroCho/nodejs-book Contribute to ZeroCho/nodejs-book development by creating an account on GitHub. github.com