반응형 개발/React6 [React/TypeScript] Context API를 활용한 전역 모달 관리하기 프로젝트를 진행하는 과정에서 경고창 등으로 React의 Alert을 직접적으로 사용할 경우 사용자 경험(UX) 적으로 부정적이라는 이슈가 있고, 커스터마이징을 할 수 없단 이슈가 있었다. 특히, Alert 함수를 직접 사용 시에 동기적인 실행으로 인해 경고창이 닫히기 전까지 코드 실행이 중단되는 이슈가 발생하기에, 모달을 이용해서 알림 창을 커스텀하고자 하였다. 이 과정에서 모달 하나를 만들 경우 컴포넌트에 계속해서 귀속되는 현상으로 모달을 관리하기 힘들고, 코드가 굉장히 지져분해져서 모달을 전역으로 관리하기로 했고, 이 과정에서 Context API를 적용해 보았기에 기록으로 남겨보고자 한다. Context API API Context란? React에서 지원하는 기능으로 부모 - 자식 간에 props를.. 2023. 11. 21. [React/axios] Post 메서드 사용 시 500에러 발생 해결 방법 Axios Post메서드 프로젝트를 진행하다보니 원인을 모를 500에러가 많이 발생했었는데, 처음에는 서버에서 발생하는 오류라고 생각하고 백엔드 쪽에서 많이 수정을 시도하고, 여러 가지 테스트를 진행하면서 해결하려고 시도했다. 단순하게 리액트에서 시도할 경우 500에러가 계속 발생했고, 포스트맨을 활용해서 진행한 결과 정상적으로 원하는 형태로 동작하는 모습을 확인했다. 이 과정에서 에러를 해결하기 위해서 Axios의 Post 메서드에 대해 많이 찾아보았고, 발견한 원인에 대해서 적어보자 한다. 기본적으로 axios로 백엔드랑 통신할 경우 아래와 같은 형태로 axios를 사용하는 경우가 대부분이다. const config = { method: 'post', // HTTP 메서드 url: 'https://e.. 2023. 8. 22. [React / Typescript] Openvidu를 활용한 WebRTC 구현 프로젝트를 진행하면서 WebRTC 기술을 사용해야 하고 이를 프론트에서 구현을 해주어야 했다. 이 과정에서 자바스크립트가 아닌 타입스크립트를 사용하였기에 테스트 코드를 찾기도 어려웠고, 전부 예시나 튜토리얼이 자바스크립트로만 진행되었기에 어려움이 많았다. 특히 타입스크립트를 활용하지면 ESLint를 적용하니 모든 곳에서 에러가 발생해서 하나하나 일일이 맞춰서 뜯어 고치는 등 오랜 시간을 소요했기에 기록을 남기고자 작성한다. WebRTC - Web Real Time Communication의 약자로 웹이나 앱에서 별다른 소프트웨어 없이 카메라와 마이크 등을 활용하여 커뮤니케이션을 할 수 있게 해주는 기술 - NAT 우회 과정인 시그널링을 통해 실시간으로 데이터를 교환할 수 있게 해주는 기술 Openvidu.. 2023. 8. 18. [React] 이벤트 핸들링 정리 이벤트 핸들링 - 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 - 이벤트 이름은 카멜 표기법으로 작성 - 이벤트 설정 시 함수 형태의 값을 전달 - DOM 요소에만 이벤트 설정 가능 (직접 만든 컴포넌트에 이벤트 설정 불가) - Clipboard, Focus, Mouse, Form 등 OnChange 이벤트 // Event.js import React, { Component } from 'react' class Event extends Component{ render(){ return ( 이벤트 {console.log(event)} } > ) } } export default Event //App.js import React from 'react' import Event from './Event' .. 2023. 7. 7. [React] 컴포넌트 & props 정리 및 생성하기 클래스형 컴포넌트 - 임의의 메서드를 정의 할 수 있음 - stat 기능 및 라이프사이클 메서드와 같은 기능 사용 가능 - 리액트 v16.8 이후 Hooks라는 기능이 도입되면서 함수형 컴포넌트 사용을 권장 import React, { Component } from 'react' import './App.css' class App extends Component { render(){ const name = 'react' return {name} } } export default App 함수형 컴포넌트 - 함수를 기반으로 작성하는 컴포넌트 - 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있음 - 함수형 프로그래밍을 할 수 있음 - Hooks가 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌.. 2023. 7. 7. [React] JSX 개념, 문법 정리 JSX (JavaScript XML)란? - 자바스크립트에 XML을 추가한 확장 문법 - 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 // JSX로 작성 function App(){ return{ Hello world ); } // 변환된 코드 function App(){ return React.createElement("div", null, "Hello", React.createElement("b", null, "world")); } - JSX 사용 시 HTML을 작성하듯이 활용할 수 있으므로 가독성이 높아지고 편하게 UI 렌더링 가능 JSX 문법 - 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야함 // 부모 태그로 감싸.. 2023. 7. 7. 이전 1 다음 반응형
