Earn this, Earn it.

프로젝트에 대해선 Github Link 에서 확인해볼 수 있습니다. :) 이번 프로젝트에서는 WebRTC라는 최근 핫한 기술을 적용해봄으로써 기술적 도전을 해보기로 했습니다. 제일 처음으로 WebRTC API와 바닐라 JS만을 이용해 구현해봤는데, 서버측 인프라가 충분치 않은 환경에서 Mesh구조로 구현할 수 밖에 없었고, 이와 같은 Mesh 구조는 다중 사용자가 이용하는 저희 프로젝트에서는 적합하지 않다고 판단했습니다. 그래서 저희는 Agora SDK를 이용하기로 하였는데 리액트 관련 예제가 없어서 어려움을 겪었기 때문에 제가 공식문서를 공부하면서 정리한 튜토리얼을 공유해볼까 합니다.😁 최대한 많은 블로그와 공식문서를 참고했으나 요약하는 과정에서 잘못 해석된 내용이 있을 수 있습니다. 잘못된 점이 있으..

useState : 상태관리 const [todos, setTodos] = useState(); useEffect : 렌더링 이후 사이드 이펙트 처리 (login, fetch etc) 여러번 쓸 수 있음 (리액트 공식문서에 따르면) 비동기 함수의 경우 가져와서 써라! (직접 쓰지 말 것) useEffect(()=> ... ,[]) 2번째 인자에 빈 배열을 넣으면 초기에만 콜백을 실행한다. 2번째 인자인 배열에 state를 넣으면 그 state의 변화를 관찰하여 콜백이 실행된다(옵저버 패턴인듯?) 커스텀 훅 별도의 재사용 가능한 함수로 분리해서 쓰기 위해 사용. 이름을 use~~로 하면 리액트가 알아서 useEffect를 적절하게 실행해준다. useFetch = async (callback, url) =>..

이번 프로젝트에서는 JavaScript만을 사용해서 SPA를 구현해야하는 제한 사항이 주어졌습니다. 저는 이전까지는 리액트를 많이 써보지 않아서 리액트의 편리함을 제대로 느껴본 적이 없었는데, 이번 기회에 제대로 느끼게 되었다고 생각합니다...하하 오늘 포스팅에서는 직접 JavaScript로 SPA 구현하면서 느낀 React의 역할과 장점 등에 대해 얘기해볼까 합니다. (오로지 혼자 고민해보고 적용해보고 이런저런 실패기를 겪으며 고민한 내용에 대해 포스팅해보려 합니다.) JavaScript로 View Component를 구현해보자 가장 처음 이러한 제한 사항을 받고 검색한 결과 아래 유튜브 링크를 찾을 수 있었습니다. https://www.youtube.com/watch?v=6BozpmSjk-Y 이 영상..

2021년 7월 16일 from velog [Nomacoder] React.js로 영화 웹서비스 만들기 강의를 복습한 내용입니다. JSX React의 특유한 로직으로, 렌더링과 UI가 연결된 특징을 갖는다. 마치 HTML+Javascript. 자세한 것은 밑에서 다루도록 하고 쉽게 말해 둘 다 포함하는 Component를 다룬다고 볼 수 있다. Component란? Javascript 함수와 유사하며, props(속성을 나타내는 데이터)라는 임의의 입력을 받은 후 React Element를 반환한다. 크게 function과 class 두 가지 유형이 있다. 아래는 코드 예시이다. //함수형 function App(props){ return Hello, {props.name} } //클래스형 class D..