React(리액트)
1.React 환경설정
프로젝트를 경험하면서 프런트 도구로 react를 선정하여 개발했던 경험을 적어보려고 한다. 참고 링크 Create React App을 사용해보려고한다. 위 사진의 Create React App탭에서의 Create React App 하늘색으로 음영처리된 부분을 클릭
2.React 입문
React 시리즈의 1에서의 환경구축이 끝났다면 본격적으로 React를 시작해보도록 하겠습니다. 위 명령어를 터미널에서 시작하여 react를 구동해보겠다. 위 명령어는 현재 나의 경로가 react app 안으로 들어와있어야한다. react app 구조 알아보기 n
3.React Router(라우터에 대해 알아보자)
참고링크
4.React Link 컴포넌트
HTML의 a태그라고 할 수 있는 Link 컴포넌트에 대해서 알아보자. 참고링크 React Router에서 제공하는 NavLink와 Link는 URL을 생성하고 애플리케이션 내에서 내부 링크를 생성하는 데 사용되는 컴포넌트입니다. 이 두 컴포넌트는 React Rou
5.React Audio-Player
프로젝트에서 오디오플레이어를 적용했던 패키지를 소개하려고한다.참고링크https://github.com/lhz516/react-h5-audio-player사용방법은 매우간단하다.설치 및 import오디오 파일 경로잡아주기패키지 적용적용 모습오디오플레이어의 css
6.React 비동기통신(axios)
참고링크 React에서 비동기 통신을 적용하기 위해 조사를 해보았을 때 Axios와 fetch 라이브러리가 많이 언급이 되었다. 필자는 Axios 라이브러리를 활용하여 비동기 통신을 적용하였고 그 이유와 코드를 소개하려고 한다. Axios 장단점 장점 많은 개발
7.React 녹음기능
프로젝트에 적용했던 녹음기능에 대해서 소개하려고한다.먼저 녹음하기위해 읽어야할 스크립트를 구현해보자.record.js와 css을 적용할 record.module.css를 생성했다.스크립트에 나올 문장을 text 변수에 구현했다. text 배열을 하나씩 인덱싱할 변수로