전체 글(355)
-
Flex CSS에 대해 익숙하게끔 도와주는 사이트
https://appbrewery.github.io/flexboxfroggy/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com
2023.07.12 -
[CSS] Flex Layout - 방향 설정
flexbox 를 설정하여 반응형 CSS를 적용하였으면 이제 적용한 flex 아이템들의 순서, 방향을 지정해줄 수 있습니다. 그 중에서 일부 속성과 옵션들을 정리해보겠습니다. order [ html ] Red Orange Yellow Green Blue Indigo Purple [ style.css ] .red{ background-color: red; order: 2; // 2가 두번째로 높으므로 마지막에서 두번째 순서로 위치 } .orange{ background-color: orange; } .yellow{ background-color: yellow; } .green{ background-color:green; order: 1; // 1은 세번째로 높으므로 마지막에서 세번째 순서로 위치 } .bl..
2023.07.12 -
[React] S3 파일 불러오기
AWS S3 로 관리하고 있는 미디어 파일을 React 프로젝트에 불러오는 과정을 정리해보겠습니다. npm i aws-sdk npm i aws-sdk 명령어를 진행 중인 프로젝트의 터미널에서 입력하여 aws 를 설치해주거나 ubuntu 서버와 같은 가상 서버를 사용한다면 해당 서버 내의 프로젝트에 들어가서 터미널에 명령어를 입력하여 aws를 설치해줍니다. [ awsS3.js ] import AWS from "aws-sdk"; const config = { aws_reg: "",// aws 지역 ex ) ap-northeast-2 aws_key: "",// aws 키 aws_sec: "",// aws 시크릿 키 }; AWS.config.update({ region: config.aws_reg, access..
2023.07.11 -
[AWS] React 프로젝트 EC2 배포 / 개발 및 배포 시나리오 과정
이전에는 백엔드 Spring 프로젝트만 EC2 로 배포해보았는데 이제는 본격적으로 풀 스택 개발자가 되려면 프론트도 구현해야 하고 프론트 서버를 직접 배포하는 방법도 알아야 될 필요가 있기 때문에 프론트 React 서버를 배포하는 방법을 정리해보도록 하겠습니다. !! 물론 프론트 서버를 배포하는 방법에는 이 방법 말고도 다양한 방법이 있습니다. 우선 AWS EC2 에 접속해서 인스턴스를 생성하기 위해 인스턴스 시작을 눌러줍니다. 인스턴스 이름, OS 이미지를 정해줍니다. 저는 ububtu 환경으로 지정해주었습니다. 인스턴스 유형은 우선 가장 작은 micro 유형을 선택해주었습니다. ubuntu 서버에 접속하기 위해서는 키 페어가 필요한데 없다면 오른쪽의 새로운 키 페어 생성을 눌러줍니다. 보안 그룹도 새..
2023.07.10 -
[에러] [WARNING]: ERR! npm ci
[Reason] 2023-07-07T06:47:21.501Z [INFO]: # Cloning repository: git@github.com:TeamMegaPlan/TheRiver-FrontEnd.git 2023-07-07T06:47:24.302Z [INFO]: 2023-07-07T06:47:24.304Z [INFO]: Cloning into 'TheRiver-FrontEnd'... 2023-07-07T06:47:24.305Z [INFO]: # Checking for Git submodules at: /codebuild/output/src3925425612/src/TheRiver-FrontEnd/.gitmodules 2023-07-07T06:47:24.312Z [INFO]: # Retrieving env..
2023.07.07 -
[Git] Git에 용량이 큰 파일 올리는 방법
git 에 용량이 큰 데이터나 파일을 포함하여 올릴 때 공간이 부족하여 에러가 발생할 수 있습니다. 이를 보완해주기 위해 git LFS 라는 프로그램이 존재합니다. LFS 프로그램은 용량이 큰 데이터나 파일들을 따로 관리해주어 용량을 최소화시킬 수 있습니다. https://git-lfs.com/ Git Large File Storage Git Large File Storage (LFS) replaces large files such as audio samples, videos, datasets, and graphics with text pointers inside Git, while storing the file contents on a remote server like GitHub.com or GitH..
2023.07.07