본문 바로가기

Frontend18

[React] Project Levup - 로그인 기능 만들기 https://chunws13.tistory.com/46 [FastAPI] Project Levup - 회원가입과 로그인 기능 만들기 개인적으로 사용할 용도이긴 하지만, 주변 사람들에게 소개하면서 사용을 권장하기 위해 간단한 회원 가입 기능을 만들어 두려고 한다. 회원 가입 기능을 만들기 전 몇 가지 패키지 설치가 필요 chunws13.tistory.com 백엔드 로그인 기능 구현이 끝났다면, 프론트엔드에서 응답을 받아 로그인을 구현하는 뷰를 만들어 보자 React 설치하는 방법은 이전에 작성한 적이 있으므로 생략한다. npm install axios npm install react-cookie 백엔드로 요청을 보내기 위해 axios, 응답한 내용 (로그인이 되었다는 증거)을 cookie에 저장하기 위해.. 2023. 11. 17.
[Web RTC] 웹 RTC 구현해보기 - 1 1.  내 비디오 & 마이크에서 정보 가져오기async function start() { try { // 로컬 비디오, 마이크 stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true }); // 로컬 비디오 트랙과 오디오 트랙 추출 localVideoTrack = stream.getVideoTracks()[0]; localAudioTrack = stream.getAudioTr.. 2023. 7. 1.
React App 만들기 - 메모 기능 구현하기 2 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 다음으로는, 할 일을 지울 수 있는 기능을 추가해야 한다. 그 전에, 이전에 만들었던 코드 내용을 보면, 텍스트만 표기되기 때문에, 할 일 리스트에 중복된 데이터가 들어가는 경우 어떤 데이터를 지울지 식별하기 어려움이 있으므로, 할 일 데이터를 배열이 아닌 object 형식으로 변경하고, 각 할 일 에는 할 일의 Id값과 할 일의 value (내용) 을 추가하는 코드로 변경해야 한다. impo.. 2023. 6. 21.
React App 만들기 - 메모 기능 구현하기 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 두 번 째 기능 구현을 하기 전, 시계 기능을 하는 코드들을 별도 컴포넌트로 이동시켰다. 기능 별로 분리해서 관리하는 것이, 다른 페이지 구현 때 재사용하기에도 편리하고, 기능 수정 할 때 코드 찾는 것도 수월하기 때문이다. // App.jsx import './App.css'; import { useState } from 'react'; import Todos from './Todos.jsx.. 2023. 6. 20.
React App 만들기 - 시계 기능 구현하기 구현이 필요한 기능들 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 현재 시간을 반환하는 javascript 내장 함수를 통해 간단하게 구현할 수 있다. let nowtime = new Data(); // 현재 시간 반환 이 기능을 이용해 아래와 같이 코드를 구성했다. React 파일 내 자바스크립트 언어 삽입은 { } 안에 넣어주면 된다. import './App.css'; function App() { let clock = new Date(); // 시간 .. 2023. 6. 15.
ReactApp 만들기 - React 설치 구현할 기능 정리하기 앱(페이지)을 구현하기 전, 앱에 들어갈 기능을 먼저 정리하고 들어가자, 이전 구현한 경험이 있는 기능과 새로 구현하고 싶은 기능은 아래와 같다. 구현한 적 있는 기능 현재 시간 알려주는 기능 (시계) 날씨 정보를 반환하는 기능 (API) 할 일을 등록할 수 있는 기능 (Form) 할 일 리스트를 보여주는 영역 (Todo-list) 할 일을 지울 수 있는 기능 새롭게 구현해 보고 싶은 기능 만다라트 생성 날씨 현황에 따른 배경화면 이펙트 기능 구현 내용이 정리되었다면, 본격적으로 Ract를 설치하자 npx create-react-app {appname} {appname}에 대문자가 포함된다면, 설치되지 않으므로 소문자로 이름을 정해주자 설치가 완료된 후, 폴더로 이동하여 프로그램이 .. 2023. 6. 15.