[2024년 버전]React AWS S3로 파일 업로드하는 창 만들기
AWS S3 으로 파일을 업로드 하는 페이지 제작 AWS S3으로 파일을 업로드 하는 페이지를 만드려고 합니다. 바로 시작하겠습니다. 설계 및 작동 위와 같이 저는 버킷 내부에 “test” 라는 폴더를 만들었습니다. 이 폴더 내부에 “animal” 이라는 폴더를 한 번 더 만들고, 그 하위에는 “cat” 과 “dog” 라는 2개의 폴더가 있습니다. 목적은 cat 폴더에 고양이 사진을, dog […]
[2024년 버전]AWS S3에서 이미지 파일 가져오기
AWS S3에서 이미지 파일 불러오기 목적은 AWS S3 특정 디렉토리 아래에 저장한 png, jpg 등 이미지 파일을 내 웹사이트에 불러오는 방법입니다. 우선은 하나를 불러와서 잘 나타나는지 확인을 하고, 그 다음은 디렉토리 내부에 있는 모든 이미지 파일을 순서대로 불러올 수 있도록 해보겠습니다. 사이트는 React 로 구성을 할 것이기에, React 코드를 함께 사용하겠습니다. 바로 시작을 해보겠습니다. 이미지 […]
리액트 프로그레스바 코드와 디자인
React Progress Bar 코드와 디자인 리액트 프로그레스 바를 어떤 식으로 작동 시키고, 또 어떤 식으로 디자인을 하면 좋을지 알아보겠습니다. 최종적으로 ProgressBar 컴포넌트와 이 컴포넌트를 상위 컴포넌트에서 어떻게 사용하면 되는지 정리하겠습니다. ProgressBar 컴포넌트 코드 const ProgressButton = ({ pageInfo, setCurrentPage, currentpage }) => { return ( {Object.entries(pageInfo).map(([pageNumber, pageName]) => ( setCurrentPage(parseInt(pageNumber))} > {pageName} ))} ); }; […]
[2024년 버전]S3 에서 JSON 파일 불러오기
S3 에서 JSON 파일 불러오기 목적은 특정한 S3 내부에 있는 경로에 JSON 파일을 넣어두고, 그 경로를 통해서 내 사이트의 프론트엔드에서 그 JSON 데이터를 불러와서 활용하는 것입니다. 버킷 권한 설정 내 S3에서 파일을 불러오기 위해서는 다음과 같은 조건 설정이 필요합니다. 내 버킷으로 이동하고 다음의 “권한” 탭을 클릭하세요. 권한 탭에서 아래로 드래그 합시다. 위와 같은 섹션이 나타난다면, […]
REACT 테이블 그리는 방법
React 테이블 그리는 방법 React 에서 테이블을 그리는 방법에 대해 알아보겠습니다. const dumi = { Variable1: { statistic: [1.23], p_value: [0.045], parameter: [10], method: [“t-test”], }, Variable2: { statistic: [2.34], p_value: [0.012], parameter: [20], method: [“ANOVA”], }, }; 저는 다음과 같이 객체 내부에 데이터들이 정렬되었다고 가정하고 진행하겠습니다. 형식은 간단합니다. Variable1 과 Variable2 라는 Key 를 […]
로지스틱 회귀 분석에 대하여
웹 통계를 위해 로지스틱 회귀 분석 코드를 어떻게 작성할까? 저는 EC2 내부에 저장한 특정 R script를 이용하여 데이터를 전달하고, 그 결과를 내려 합니다. 이를 위해서 다음과 같은 방식으로 백엔드에서 R script를 실행합니다. 위와 같은 Function 을 Backend.js 파일 내에 지정을 해두는 거죠. 그럼 해당 Function 이 받아야 할 Props에 알맞은 값들을 넣어 실행하면 작동이 됩니다. […]
EC2 R을 이용한 통계 페이지 만들기
EC2 에서 R을 이용한 통계 페이지 만들기 EC2에 R 세팅하기 지난번에는 EC2에서 R을 세팅하고 활용하는 방법을 확인했습니다. 이번에는 실제로 어떤 식으로 이것을 활용하면 좋을지 자세히 알아보겠습니다. 우선 목적은 다음과 같습니다. 1. 내 DB에 저장된 데이터 중 특정한 변수에 해당하는 데이터를 선택한다. 2. 이 데이터를 통해서 R 스크립트를 이용하여 데이터의 정규성 검정을 시행한다. 3. 정규성 검정을 […]
React 사이트 로고 및 이름 바꾸기
React 사이트 로고 및 이름 변경하기 React를 이용해서 코드를 짜고, npm start 와 같은 명령어로 테스트를 한다고 합시다. 이때 보통 페이지의 상단을 보면 이렇게 나타납니다. 요거를 내가 원하는 로고와 이름으로 변경하는 방법을 알아보겠습니다. 변경하는 방법 먼저 로고를 변경합시다. 프로젝트 폴더 내부에 있는 public 디렉토리를 봅시다. 여기에 index.html 이 존재할 겁니다. 내부를 보면 다음과 같이 icon […]
React 해제 가능한 라디오버튼
React 해제 가능한 라디오버튼 만들기 React 에서 라디오버튼을 구현하기는 쉽습니다. 다만, 라디오버튼의 특성이랄까요? 한 번 선택한 값을 다시 해제하는 것이 어렵습니다. 이를 위해서 어떤 방식으로 라디오버튼 컴포넌트를 만들면, 이것을 해제 가능할지 알아보겠습니다. 기본 코드 import React, { useState, useEffect } from “react”; const SpecialRadio = ({ data, field_id, onValueChange, options }) => { const [inputValue, […]
React 내가 원하는 폰트 사용하기
React 내가 원하는 폰트 사용하는 방법 React 로 사이트를 만들다 보면, 영어는 그럭저럭 기본적으로 사용할 만한 font 가 많은 것에 비해서 한글은 썩 예쁜 글자 찾기가 어렵습니다. 그래서 이번에는 괜찮은 한글 폰트 파일을 찾고 이를 적용하겠습니다. 괜찮은 폰트 찾기 괜찮은 폰트를 찾는 방법은 뭐 별 것 없습니다. 그냥 PPT 켜서 글씨체 중에서 괜찮은 글씨체를 찾으면 […]