react에서 setState 함수의 비동기적 처리 특징 기억해두기

react에서 useState로 만든 state에 대해 상태 변경을 위해 setState 함수를 사용하는데 이게 비동기적으로 처리된다는 특징이 있다 그래서 setState로 상태 변경을 하고 console.log로 전후 비교해도 상태가 안바뀌는 것을 확인할 수 있다 const [board,setBoard] = useState({}); const data = {id:state}; const response = await axios.get('/get/one',{ params: data}) console.log(response.data); console.log(board) setBoard(response.data); // 데이터는 response.data 안에 들어있습니다. console.log(board);..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 31.
• textsms

react에서 webcam 사용해서 얼굴 캡쳐하기

1. navigator.mediaDevices.getUserMedia() navigator.mediaDevices.getUserMedia()를 이용하면 사용자 기기에 내장된 웹캠을 이용하게 한다 인자로는 객체 형태로 보통 video : true하면 비디오를 쓰고 audio: true하면 오디오를 쓰고.. 그 외에 비디오 화면 크기 width, height도 주기도 한다 const getWebcam = (callback) => { try { const constraints = { 'video': true, 'audio': false } navigator.mediaDevices.getUserMedia(constraints) .then(callback); } catch (err) { console.log(er..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 25.
• textsms

리액트 기본 블로그 만들기 실습으로 마무리

1. 미니 블로그 기획 블로그에 필요한 화면을 리액트 컴포넌트로 만들고, 각 컴포넌트를 연결하여 겉모습이 그럴듯한 블로그 만들기 개발을 시작하기 전에, 기획과 필요한 기능, 전체 디자인에 대해 간단하게 정리 기능이나 디자인이 중간에 변경될 수 있지만, 간단하게라도 정리된 내용이 없다면 중간에 헤매는 경우가 자주 발생 1-1) 필요한 기능 글 목록 보기(리스트 형태) 글 보기 댓글 보기 글 작성 댓글 작성 1-2) 전체 화면 디자인 메인 화면은 글 목록을 보여주고, 글 작성 버튼을 누르면 글을 작성할 수 있는 화면으로 이동해서 글을 작성할 수 있도록 메인 화면에서 글을 클릭하면, 전체 글의 내용과 댓글을 볼 수 있는 형태가 되도록 글 보기 화면 하단에는 댓글을 작성할 수 있는 기능이 들어가도록 2. 프로젝..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 21.
• textsms

리액트 기본 배우기 -CSS에 대해-

1. CSS에 대해 웹개발에서 스타일링을 위해 대표적으로 사용하는 것이 CSS CSS는 Cascading Style Sheets의 약자, 스타일링을 위한 일종의 언어 cascading은 계단식이라는 뜻으로, 여러가지 스타일이 정의되어 있는데, 한번에 여러 스타일이 적용될 경우에 스타일 충돌을 막기 위해 계단식으로 스타일이 적용되는 규칙이 있다. 하나의 엘리먼트가 여러개의 스타일 규칙을 만족하면, 해당 스타일을 마치 계단을 한칸씩 내려가는 것처럼 우선순위에 따라 하나씩 적용하게 된다. 결과적으로 하나의 스타일이 여러개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러개의 스타일이 적용될 수 있다. 엘리먼트에 스타일이 적용되는 규칙을 selector라고 부른다. 스타일을 어떤 엘리먼트에 적용할지를 선택..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 16.
• textsms

리액트 기본 배우기 -컨텍스트에 대해-

1. 컨텍스트란 무엇인가 일반적인 리액트 앱에서 데이터가 컴포넌트의 props를 통해 부모에게 자식으로 단방향 전달되었다 하지만 여러 컴포넌트에 걸쳐 자주 사용되는 데이터의 경우, 기존 방식으로는 코드가 너무 복잡해지고 사용하기에 불편함이 많았다. 이런 과정에서 나온 것이 바로 컨텍스트(context) 컨텍스트는 리액트 컴포넌트들 사이에서 데이터를 기존의 props를 통해 전달하는 방식 대신에 컴포넌트 트리(component tree)를 통해 곧바로 컴포넌트에 전달하는 새로운 방식을 제공한다 이를 통해 어떤 컴포넌트든지 데이터에 쉽게 접근할 수 있다 위 그림은 props를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 일반적인 방식 하지만 이 방식에서는 여러 컴포넌트에 걸쳐 자주 사용되는 데이..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 16.
• textsms

리액트 기본 배우기 -합성과 상속-

1. 합성(composition) 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 여기서 A라는 컴포넌트와 B라는 컴포넌트가 반복적으로 나타남 이 페이지 자체도 하나의 리액트 컴포넌트 그래서 이 페이지는 컴포넌트 A와 컴포넌트 B를 합쳐서 페이지 컴포넌트를 만든 것이기 때문에 합성 컴포넌트를 사용했다고 볼 수 있다. 리액트로 개발을 하다보면 이처럼 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 일이 많다 합성이라고 무작정 그냥 컴포넌트들을 붙이는 것이 아니고 어떻게 조합할 것인가에 대한 고민이 필요하며 이에 따라 합성의 사용기법이 나뉜다 2. containment 하위 컴포넌트를 포함하는 형태의 합성 방법 사이드바나 다이얼로그같은 박스 형태의 컴포넌트는 자신의 하위 컴포넌트를 미리 알 수 없..

• format_list_bulleted 프로그래밍/React
• · 2023. 1. 15.
• textsms