오르막길

공공데이터 포털에서 제공하는 이미지 링크를 사용하려는데, 이미지가 뜨지 않고 엑스박스(엑박)이 떠서 당황했던 적이 있었다. 구글링해본 결과, img 형식을 지켜야하는 것은 같지만, 추가로 지정해줘야하는 부분이 있었다. 바로 refferPolicy를 설정해준다는 것이다. Referrer-Policy - HTTP | MDN Referrer-Policy - HTTP | MDN The Referrer-Policy HTTP header controls how much referrer information (sent with the Referer header) should be included with requests. Aside from the HTTP header, you can set this policy i..

부모→ 자식간의 prop은 가능하지만 자식→부모간의 prop은 불가능하다. redux없이 어떻게 state를 주고받으면 좋을까? 자식에게 함수를 전달하고, 자식이 부모의 함수를 호출해주면 된다. 예를 들어 버튼 자식 컴포넌트를 누르면, 버튼내용으로 모드를 바꾸는 기능을 구현한다고 하자. text는 버튼에 들어갈 내용이고, selectMode는 부모가 가지고 있는 함수이다. // TextButton.jsx : 버튼 자식 컴포넌트 export default function TextButton({ text, selectedMode }) { const onClick = () => { // 이 버튼을 클릭하면 console.log(text); selectedMode(text); // 부모의 selectedMode..

리액트 프로젝트를 진행하던 중 외부 라이브러리 스크립트를 가져와 사용해야 하는 일이 생겼다. 여기저기 구글링 하며 알아본 정보를 정리하고자 한다. 1. effect - hook 이용하기 https://usehooks.com/useScript/ useScript usehooks.com 직접 설명하는 것보다 훨씬 잘 정리된 글이다. 원래는 이 방법으로 구현하고자 했고, 코드도 작성해 두었지만 다른 라이브러리도 있지 않을까 싶어 더 찾아보었다. 2. Hemlet 사용하기 https://www.npmjs.com/package/helmet helmet help secure Express/Connect apps with various HTTP headers. Latest version: 6.0.1, last pub..

SCSS 란? SASS와 비슷한, 문법적으로 멋진 CSS라는 뜻. SASS 보다 늦게 나왔고, 약간의 문법 차이가 있으나 매우 비슷하다. 넓은 범용성 높은 호환성 중괄호로 중첩을 표현 세미콜론으로 속성을 구분 CSS와 좀 더 비슷 공식 레퍼런스나 프레임워크가 SCSS를 선호 중첩, 변수 선언, 연산자 등 보유 MUI란? https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. mui.com..

webRTC(Web Real-Time Communication) 웹 브라우저가 서로 통신할 수 있도록 설계된 API 웹 브라우저 상에서는 어떠한 플러그인도 필요 없이 음성 채팅과 화상채팅, 데이터 교환까지도 가능하게 하는 기술 WebRTC 기술은 P2P(Peer-to-Peer) 통신에 최적화 Kurento란? 전체 WebRTC 스택의 기능적 구현을 제공하는 미디어 서버 (미디어 서버 : 압축(인코딩)된 동영상 파일들이 미디어서버로 들어오면 해석(디코딩) 한 후 사용자(Client) 가 볼 수 있게 재포장(압축) 해서 사용자의 동영상 Player 형태에 맞게 보내주는 역할) HTTP, RTP, WebRTC를 포함한 네트워크 스트리밍 프로토콜 등 다양한 기능 지원 openVidu란? ttps://docs.o..