김 양의 멋따라 개발따기

1. 문제 상황 배경 음악을 재생한 후 다른 페이지를 가도 음악이 계속 재생하고 있는 상황 2. 문제 해결 함수형 컴포넌트의 생애주기를 관리할 수 있는 훅인 useEffect의 return 문을 활용하고 addEventListener 로 만들어준 event를 return 문 안에서 removeEventListener를 사용해 줌 useEffect(() => { const audio = new Audio(playList); const timeUpdateHandler = () => { setCurrentTime(audio.currentTime); setRatio((audio.currentTime / audio.duration) * 100); if (audio.duration === audio.currentT..

1. 문제상황 더블클릭 또는 드래그 할 경우에 파일이 추가 되어야 했음 2. 문제해결 preventDefault()를 이용해 브라우저 기본 이벤트를 막아주고 drop 했을 경우 이벤트가 발생하도록 함 onDragOver={(e) => e.preventDefault()} onDrop={(e: any) => handleDrop(e)}

1. 문제상황 google-meet을 클론하던 중 화면 공유에서 막힘 2. getDisplayMedia()로 해결! import React,{useRef} from "react" const Stream = () => { const video_ref = useRef(); //화면공유 const onClickScreenBtn = async () => { let captureStream; try { captureStream = await navigator.mediaDevices.getDisplayMedia(); } catch (err) { console.log(err); } return captureStream; }; return ( screen ); }; export default Stream; 결과 버튼을..

1. 라이브러리 설치 //npm npm install react-i18next --save //yarn yarn add react-i18next 2. 언어별 json파일 만들기 //src/util/language/korean/page.json { "about-who-1":"연구와 경험의 숙성 속 나의 성장이 팀과 회사의 성장으로 연결되어 함께 나란히 걸어 나아가는 우리는 어느덧 프로입니다. 좋아하는 일을 제일 잘하며 끼 많고 개성 넘치는 ’나’ 들이 모여 디자인과 홍보의 모든 일들에 산뜻하고 참신한 솔루션을 만들어 냅니다.", } //src/util/language/english/page.json { "about-who-1":"We are professionals where our individual g..

1. 마운트(Mount) DOM이 생성되고 웹 브라우저상에 나타나는 것 호출하는 메서드 컴포넌트 생성 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있는 값을 state에 넣을 때 사용하는 메서드 render UI를 렌더링하는 메서드 componentDidMount 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 함수형 컴포넌트의 마운트 과정 함수 컴포넌트 호출 구현부 실행 props 취득, hook 실행, 내부 변수 및 함수 생성 hook에 등록해둔 상태값, 부수함수 효과 등은 별도 메모리에 저장되어 관리됨 return 실행 렌더링 시작 렌더 단계(Render Phase) 가상 DOM 생성 커밋 단계(Com..

0. 리덕스(Redux)란? 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너 일관적으로 동작하고, 서로 다른 환경(서버, 클라이언트, 네이티브)에서 작동하고, 테스트하기 쉬운 앱을 작성하도록 도와줌 React나 다른 뷰 라이브러리와 함께 사용가능 다음 조건을 충족할 때 사용하는 게 적절함 계속해서 바뀌는 상당한 양의 데이터가 있다 상태를 위한 단 하나의 근원이 필요하다 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 더 이상 적절하지 않다 1. 리덕스 툴킷(Redux Toolkit)이란? Redux 로직을 작성하기 위해 저희가 공식적으로 추천하는 방법 Redux 앱을 만들기에 필수적으로 여기는 패키지와 함수들을 포함 2. Flux 와 Redux Flux와 마찬가지로 Redux에서는 애플리케이션의 특정 ..

0. npm Trends react 가 압도적인 다운로드 횟수를 이어왔음 프로젝트의 규모가 크고 확장될 가능성이 높은 경우 자바스크립트의 문법이 능숙한 개발자 컴포넌트를 작은 단위로 나누어 비슷한 UI 재사용을 많이 할 경우 자유도가 높은 개발환경을 선호할 경우 TypeScirpt 도입을 고려할 경우 vue 가 최근 급속도로 다운로드 횟수가 증가함 규모가 작고 가벼운 프로젝트 빠른 속도가 핵심인 프로젝트 자바스크립트 문법이 미숙한 개발자 퍼블리셔가 있거나 기존 html, css, js 코드를 SPA로 변경할 경우 개발자간 코드 통일성, 커뮤니케이션 비용을 줄이고 싶은 경우 1. Angular 앵귤러는 AngularJS 로 부터 시작 앵귤러는 구글사에서 2010년 10월에 자바스크립트 기반의 오픈 소스 프..

0. JSX란? JavaScript를 확장한 문법 JavaScript의 모든 기능이 포함 됨 JSX는 React “엘리먼트(element)” 를 생성 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움 JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있음 function formatName(user) { return `${user.first} ${user.second} ${user.third}` } const user = { first: 'Rive', second: 'Sieo', third : "Noah" }; const element = ( Hello, {formatName(user)}! ); 컴파일이 끝나면, JSX 표현식이 정규 JavaScript ..

0. React에서 컴포넌트가 리렌더링 되는 조건 자신의 state가 변경 될 때 부모에서 받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 강제 업데이트 시켰을 때(shouldComponentUpdate) 0-1 메모이제이션(memoization) 메모이제이션 연산의 결과값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계싼의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술 React 메모이제이션 React.memo(컴포넌트), useCallback(()=>{함수},[]), useMemo(()=> 함수의 리턴 값 ,[])를 사용해서 가능 React.memo() ..

0. 컴포넌트란? 리액트로 만들어진 앱을 이루는 최소한의 단위 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수. 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문이다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다. 1. 클래스형 컴포넌트 class 키워드로 시작 Component로 상속을 받아야함 render() 함수를 사용해서 JSX를 반환 props를 조회할 때 this 키워드를 사용 비교 ) 함수형 컴포넌트에서는 함수의 파라미터로 받아..