우리는 Calisthenics 입니다!

💡 WebRTC란? 웹 브라우저 간에 플러그인의 도움없이 Real Time Communication(RTC)를 하도록 설계된 API로 음성, 영상 또는 데이터를 교환할 수 있도록 사용하는 기술이다. 일반적으로 인터넷 네트워크는 아래와 같은 2가지 이유로 직접적으로 IP를 연결하는 방식은 불가능하다. 방화벽이 존재 일부 내부 네트워크를 통해 서로 매핑하여 통신하는 NAT(Network Address Translation) 환경을 사용 그렇기 때문에 시그널링(Signaling) 통신 절차를 통해 P2P로 통신하는데 Private Ip를 Public Ip로 바꿔주는 STUN/TURN 서버를 필요로 한다. 이와 관련된 개념은 다음 장에서 설명😊 🔗 참고자료 HTML5 Rock - WebRTC

프로젝트를 시작하는 단계에서 frontend 전체적으로 css 리셋을 진행해줘야한다. reset을 해주는 이유 - 사용자들은 특정 브라우저만 사용하는 것이 아니고 다양한 브라우저를 사용합니다. - 각 브라우저에서 제공하는 스타일들은 표준화 되어 있지 않아 각 브라우저마다 출력해주는 모양이 다를 수 있습니다. - 개발 단계에서 의도했던 대로 모든 사용자의 화면에서 동일하게 출력해주기 위해 초기화(reset)을 해야합니다. styled-components를 활용한 css 리셋 react에서 style을 적용하기위해 자주 사용되고 이번 프로젝트에서 사용하게 될 styled-components를 활용하여 css리셋을 해보겠습니다. 1. GlobalStyles.js 생성 후 reset 코드 작성 import re..

React에서 컴포넌트를 스타일링해주는 방법은 여러 가지가 있습니다. 1. css파일을 생성해서 import해서 className으로 적용한 스타일링 방식 2. 1번의 방법으로는 global로 css가 적용이 되므로, module 방식을 이용한 스타일링 방식 3. styled-components를 이용한 스타일링 4. React UI Framework인 element-UI를 기본적으로 활용하고, 제공되는 컴포넌트를 makeStyles()를 활용하여 커스터마이징 해주는 스타일링 방식 이번 프로젝트에서는 3번과 4번을 골고루 사용할 예정입니다 (*추후 해당 방법 선택 이유 포스팅 예정) 오늘은 3번 방식인 styled-components를 활용해서 React 컴포넌트를 스타일링해주는 방식을 포스팅하겠습니다...

이번 포스트는 React로 프로젝트를 할 때 자주 쓰이는 폴더와 이에 대한 설명을 해보려고 합니다. *기본적으로, 이번 프로젝트는 react-redux-toolkit 공식홈페이지에서 strongly recommended하는 폴더 구조로 이에 맞게 폴더 구조를 설정해보았습니다. 1. public React는 가상 DOM을 활용하여 변경된 부분만 Rendering 해주는 것이 핵심인 Library입니다. 이를 위해서는 실제로 DOM이 필요한데, 이는 index.html 파일로 public 폴더에 위치하고 있습니다. 아래부터는 src 폴더 내부의 폴더들이므로, 해당 내용 참고 하여 읽어주시면 감사하겠습니다😀 src 폴더 -> 대부분의 개발이 이루어지는 폴더로, 대부분의 코드는 해당 폴더에 작성이 되는 곳 2...

React에 대한 기본적인 문법과 팁에 대해서 정리해보았습니다😀😀 state를 변경하려고 하면 무조건 setState를 사용해서 변경해주어야함 이유: state 값에 변경이 생긴다면 이 값을 토대로 render()를 호출해줘야 하는데 setState를 사용하면 React에서 자동으로 render function을 호출해줌 setState를 사용할 때 state안에 default값들을 선언할 필요는 없다. class App extends React.Component{ state = { isLoading: false, }; componentDidMount() { setTimeout(() => { this.setState({ isLoading:true, book:true }) }, 3000); } state가..

React에서 Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해주는 기능입니다. 기존에 class 형식의 component를 사용해야 state를 내부적으로 관리하고 사용할 수 있던 것에서 Hook을 사용하면 function component에서도 state를 사용할 수 있게 되었습니다. 오늘은 Hook에서 많이 사용되는 useState를 사용하여 작성해본 custom Hook을 소개하려고 합니다. 1. 기본적인 useState import React, { useState } from "react"; import "./styles.css"; export default function App() { // (1)이라는 초기 값을 item에 입력 const [i..