DATA101

📌 개요 리액트에서 FileReader를 활용하여 업로드한 텍스트 파일의 내용 읽어오기 👨‍💻 코드 import React, {Component} from 'react'; class FileUpload extends Component { onFileChange(e){ let file = e.target.files[0]; let fileReader = new FileReader(); fileReader.onload = () => { console.log(fileReader.result); }; fileReader.readAsText(file); } render(){ return ( ); } } ✅ 결과 아래는 테스트용 텍스트 파일입니다. 아래는 콘솔에 찍힌 테스트 결과입니다. 포스팅 내용에 오류가 있다면 ..

🤖 에러 상황 React에서 배포 파일 생성 시도 중 에러를 마주하였습니다. npm run build 배포 파일 생성뿐만 아니라 React 서버 실행 시도에도 같은 에러를 마주할 수 있습니다. 📝 에러 코드 sh: react-scripts: command not found 💡 원인 package.json 내 모든 dependency를 다운로드하지 않아서 package.json 내 script를 제대로 일어오지 못하여 발생한 에러입니다. ✅ 해결방법 npm install 을 통해 모든 패키지를 설치해 줍니다. npm install npm install로 해결되지 않는 경우 모든 패키지를 설치하였음에도 같은 에러가 발생한다면, node-modules 폴더를 삭제하고 다시 모든 패키지를 설치해 보시길 바랍니다..

에러 상황 React 기반 화면 UI 구현 중 아래 에러 메시지 확인 에러 메시지 JSX expressions must have one parent element. 에러 원인 - JSX 문법에서 Component가 여러 개 있다면 반드시 parent element로 감싸야 하는데 그렇지 않아서 발생한 이슈 - Component 내부는 하나의 DOM Tree 구조로 이루어져야 한다는 규칙을 따라야 함 해결책 간단하게 div 태그 또는 fragment 태그 또는 중괄호{}로 여러 Component를 감싸는 parent element를 사용하면 쉽게 해결 가능 해결책 예시1: div 태그 ... 해결책 예시2: fragment 태그 ... 해결책 예시3: 태그명 생략가능 ... 포스팅 내용에 오류가 있다면 아..

에러 상황 React 서버 오픈 중에 아래와 같은 에러 메시지 확인 에러 메시지 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결책 npm update 후 서버 재시작 npm update npm update 후에도 서버 실행이 안 된다면 react-scripts 설치 후 서버 재시작 npm install -g react-scripts npm start 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 고맙습니다 :)

🔥 목표 자바스크립트(리액트)에서 Promise의 역할과 상태 3가지에 대해 이해한다. 📝 목차 1. Promise는 무엇인가? 2. Promise의 역할 3. Promise의 상태(State) 3.1. Pending(대기) 3.2. Fulfilled(이행) 3.2.1. 소개 3.2.2 Promise 객체 연결 3.3. Rejected(실패) 3.3.1. 소개 3.3.2. 활용 예시 1. Promise는 무엇인가? JavaScript(React)에서 Promise는 비동기 처리에 활용되는 객체입니다. 여기서 비동기 처리란 line by line 순차적으로 특정 코드의 실행을 끝까지 기다리지 않고 다음 코드를 선제적으로 처리하는 것을 의미합니다. 2. Promise의 역할 Promise는 주로 웹 서비스 ..

💡 목표 리액트 설치 및 기본적인 세팅 방법을 학습한다. 1. nodejs 설치 node.js 설치 링크입니다. https://heytech.tistory.com/199?category=521346 Node.js 설치 방법 공유!(+설치 에러 해결 방법) 💡학습목표 Node.js 설치하는 방법과 환경 변수 설정하는 방법에 대해 학습한다. Node.js 설치여부 확인 cmd 창에 아래 명령어를 입력해 봅니다. (cmd 창 키는 방법: 키보드 내 윈도우 버튼 + cmd 입력) n heytech.tistory.com 2. IDE 설치(VS Code) VS Code 설치 링크입니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefi..