목록SW 개발 (173)
DATA101
[React] 에러 해결: "Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it."
❗️에러 상황 return에서 아래와 같이 코드 작성 후 실행 시 에러 발생 return ( {function} ) 📝에러 메시지 Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it. ✅해결책 다음과 같이 함수명 뒤에 괄호 붙여주면 해결됩니다. return ( {function()} ) 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊
[JavaScript] npm 모듈 재설치 방법(feat. 모듈 삭제 방법)
Step 1. 디렉토리 접근 터미널을 통해 package-lock.json과 node_modules 폴더가 위치한 디렉토리로 이동합니다. Step 2. package-lock.json 삭제 rm -rf package-lock.json Step 3. node_modules 삭제 rm -rf node_modules Step 4. npm 모듈 재설치 npm install 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊
[React] 버튼 자동 클릭/2번 클릭 방지하는 방법
❗️ 원인 onClick 이벤트에 함수가 아닌 실행문을 전달할 경우, 렌더링 될 때 onClick 이벤트가 실행됩니다. 위와 같이 작성할 경우, 렌더링 될 때 버튼이 자동으로 클릭됩니다. ✅ 해결방법 {alert("Hey Tech 블로그입니다.")}} /> 위와 같이 작성하면 버튼을 클릭할 경우에만 프로그램이 실행됩니다. 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊
[React] 에러 해결: "img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text"
❗️ 에러 상황 이미지를 화면에 출력하기 위해 아래와 같이 작성하였는데 에러를 마주하였습니다. 📝 에러 메시지 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text ✅ 원인 및 해결방법 아래와 같이, 웹 표준에 따라 img 태그는 alt를 작성해야 하며, 내용은 자유입니다. 포스팅 내용에 오류가 있다면 아래에 댓글 남겨주세요. 그럼 오늘도 즐거운 하루 보내시길 바랍니다 :) 고맙습니다😊
[React] 에러 해결: "Warning: Each child in a list should have a unique "key" prop."
❗️에러 상황 반복문을 통해 태그 안에 특정 값을 리스트에 넣는 작업을 수행하는 중에 에러를 마주하였습니다. let heyTechList = []; for (i = 1; i
[React] FileReader를 활용한 텍스트 파일 읽어오기
📌 개요 리액트에서 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 ( ); } } ✅ 결과 아래는 테스트용 텍스트 파일입니다. 아래는 콘솔에 찍힌 테스트 결과입니다. 포스팅 내용에 오류가 있다면 ..
[Docker] 도커 Ubuntu 이미지의 Timezone 설정 방법(feat. 한국 timezone)
개요 Docker 기반 Ubuntu 이미지 빌드 시 timezone의 default 값: UTC 대한민국 표준시: UTC+9 Dockerfile 수정으로 Ubuntu timezone 변경 가능 설정 방법 1) Dockerfile 코드 Dockerfile에 아래의 코드를 추가하면 대한민국 표준시로 timezon 변경 ARG DEBIAN_FRONTEND=noninteractive ENV TZ=Asia/Seoul RUN apt-get update && \ apt-get install -y tzdata 2) 코드 설명 ARG DEBIAN_FRONTEND =n oninteractive tzdata 설치 시 터미널에서 사용자가 timezone을 직접 설정할 수 있도록 인터페이스를 제공하지만, 도커 이미지 빌드 시에..
AWS Lambda를 활용한 DyanamoDB 테이블 데이터 삽입/조회 방법
👨💻 들어가며 본 튜토리얼을 잘 따라오시면 AWS Lambda에서 DynamoDB 테이블에 데이터를 삽입하는 방법과 테이블 데이터를 읽어오는 방법을 알아가실 수 있습니다. 🛠 기술 스택 AWS DynamoDB AWS Lambda (Runtime: Python 3.6) AWS IAM 📚 목차 1. AWS DynamoDB 세팅 1.1. DynamoDB 개념 1.2. DynamoDB 테이블 생성 2. AWS IAM 세팅 2.1. IAM 개념 2.2. IAM Role 개념 2.2. IAM Role 생성 3. AWS IAM 세팅 3.1. Lambda 개념 3.2. Lambda 함수 생성 3.3. Lambda 코드 4. 테스트 4.1. 데이터 삽입 로직 테스트 4.2. 데이터 조회 로직 테스트 1. AWS Dyn..