전체 글 137

[React] 리액트 App.js 화면에 꽉 차게 설정

💥 트러블 슈팅 문제점 :   개발 중 굉장히 거슬리는 문제 하나가 발생하였다..  맨 위 헤더 컴포넌트의 border를 설정했는데.. 저렇게 hr처럼 나온다. 확인해보니 화면에 꽉 차지 않는 이유 때문 !   아니 왜 App.js가 화면에 꽉 차지 않지?  그래서 style에 width : 100%도 추가해주었는데.. 되지 않았음 😭    하지만 문제는 생각보다 간단히 해결된다. 해결방법 - 기본 스타일 초기화브라우저의 기본 스타일이 영향을 미칠 수 있다고 한다. CSS 리셋이나 노말라이즈 CSS를 사용하여 기본 스타일을 초기화하자 !  npm install normalize.css // index.jsimport 'normalize.css'; 이렇게 간단하게 해결 가능 ~

FE/React 2024.06.12

[React] 하단 네비게이션 만들기

만든지는 한~ 참 되었지만 까먹기 전에 얼른 써야겠다  ✅ 하단 네비 커스텀 요구사항 1. 클릭 시, 페이지 이동(기본)2. 페이지에 맞는 Footer메뉴 선택 3. 페이지 바닥에 고정 👩🏻‍💻 하단 네비 만드는 과정 1. App.js에 페이지 Router 생성 기본적으로 페이지를 이동하기 위해서는 페이지 라우팅이 필요하다. 하단 네비에서 react-router-dom의 Link를 사용할 계획이었기에 App.js에 이러한 라우터를 추가해주었다.  } /> }/> }/> }/> }/> }/>    2. Footer.jsx 생성 - Link로 경로를 주고, 메뉴들을 생성해주었다. impo..

FE/React 2024.06.11

[FE] 리액트 CI/CD (1) AWS S3에 SPA 올리고 Github-actions으로 자동 업데이트

이번주에 배포를 처음해본 프론트엔드 쌉 주니어입니다. 이번 편은 저의 첫 배포에서의 시행착오와 발생했던 에러들에 대해서 담아볼까 합니다. 목차1. IAM 유저 생성 2. S3 버킷 생성 3. Github-actions 연결 1. IAM 유저 생성   1 - 1. S3, AWS Cloud 사용을 위한 Access 추가   2. S3 버킷 생성 ** 가비아에서 도메인 구매 후 연결할 예정이시라면, 꼭 도메인 이름과 버킷 이름을 통일하시길 바랍니다.. ( EX. 버킷이름 - domain.com ) 2 - 1. 버킷 생성 - ACL활성화 > 버킷 소유자 선호 - 퍼블릭 액세스 차단 해제    2 - 2. 정적 호스팅 설정 생성된 버킷 속성 탭(properties)에서 정적 호스팅(Static website ho..

FE 2024.06.05

[AWS] S3과 버킷

아마존 S3란?- Amazon Simple Storage Service(Amazon S3)는 확장성, 데이터 가용성, 보안 및 성능을 제공하는 객체 스토리지 서비스 - S3는 인터넷을 통해 어디서나 대규모 데이터를 저장하고 검색할 수 있는 매우 확장 가능하고 내구성이 뛰어난 스토리지 솔루션을 제공한다.  S3의 주요 기능과 특징 1. 객체 스토리지 객체 스토리지란 객체라고 하는 비정형 형식으로 데이터를 저장하고 관리하는 기술이다  - S3는 파일(객체)을 저장하고 각 파일은 고유한 키를 가진다.- 객체는 메타데이터, 데이터, 키로 구성된다. 2. 버킷버킷은 Amazon S3에 저장된 객체에 대한 컨테이너 - 버킷은 S3에서 데이터를 조직화하는 기본 단위이며 객체는 버킷에 저장된다.- 각 버킷은 고유한 이..

[개발] 2024.05.19

[항공/방산] ASIP

ASIP, Aircraft Structural Integrity Program: 항공기의 구조적 요소들의 수명을 관리하고 예상 수명을 넘어설 경우에도 안전성을 보장하는 프로그램  규격: MIL-STD-1530 (미국 국방산업에서 사용되는 표준 규격 중 하나)  내용해당 규격은 항공기의 수명을 평가하고 예측하기 위한 절차와 시스템 안전성을 평가하고 보장하기 위한 요구사항을 정의 주요 업무 내용 Task1. Design InformationTask2. Design Analyses & Development Testing Task3. Full-Scale Testing Task4. Force Management Data PackageTask5. Force Management   참고 https://www.dau...

[지식창고] 2024.05.08

정형 데이터와 비정형 데이터

수집 가능한 데이터는 정형 데이터, 비정형 데이터로 나눌 수 있다.  정형 데이터정형 데이터는 고정된 형식과 구조를 갖춘 데이터이다. 즉, 보유하고 있는 정보에 대한 정의된 스키마가 존재한다.  주로 테이블 형태의 데이터베이스에 저장되며, 각 열(column)은 특정한 데이터 유형을 나타내고, 각 행(row)은 해당 데이터의 인스턴스를 나타낸다. 정형데이터의 예시는 다음과 같다.고객데이터 - 고객의 이름, 성별, 나이, 이메일 주소, 전화번호 등과 같은 정보를 포함주문 데이터 - 상품명, 가격, 주문 날짜, 수량 등과 같은 주문에 관련된 정보를 포함 주식 시세 데이터 - 주식 시장에서의 주식 가격, 거래량, 시장 지수 등과 같은 정보를 포함 학생 성적 데이터 - 학생의 이름, 학번, 과목별 성적 등과 ..

[지식창고] 2024.05.07

[React] FontAwesome 사용하기

(내가 잘 까먹어서 올려두는) 리액트에서 폰트 어썸 사용하기 폰트어썸을 모를땐 파일에 jpg를 추가해서.. 하나씩 넣었다. 블로그에 올리고 img주소를 복붙했다. 이 얼마나 고된 작업이던가 하지만 폰트어썸을 만나고 난 뒤, 내 인생은 360도 변했다. 폰트어썸.., 나의 빛(까진 아님), 폰트어썸, 나의 구원 ! 어쨌든 정말 간편하다! 1. fontAwesome설치 $ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/react-fontawesome 2. FontAwesome.jsx 파일 만들기 import { library } fro..

FE/React 2024.04.17

[C#/BOJ] 1834번: 나머지와 몫이 같은 수

1. 문제 1834번: 나머지와 몫이 같은 수 N으로 나누었을 때 나머지와 몫이 같은 모든 자연수의 합을 구하는 프로그램을 작성하시오. 예를 들어 N=3일 때, 나머지와 몫이 모두 같은 자연수는 4와 8 두 개가 있으므로, 그 합은 12이다. www.acmicpc.net 2. 코드 using System; class BJ1834 { static void Main() { long n = long.Parse(Console.ReadLine()); long sum = ((n * n * n) - n) / 2; Console.WriteLine(sum); } } 3. 풀이 간단한 수학 문제이다. 그러나 여기서 가장 중요한 것은 바로 형(type) 처음 int로 입력을 받고 입력값을 2,000,000으로 입력했을 때 ..

[알고리즘]/BOJ 2024.04.15

[IT지식] CSCI/CSC/CSU

CSCI Computer Software Configuration Item : 소프트웨어 형상 품목 - 형상관리를 하는 단위 ex) 소프트웨어 시스템 자체 CSC Computer Software Component : 소프트웨어 구성품 - 독립적으로 배포 가능한 단위 ex) 개별적인 기능 또는 모듈 CSU Computer Software Unit :소프트웨어 단위 - 독립적으로 테스트 가능한 단위 ex) 웹 서버, 데이터베이스 서버, FE프레임 워크 등

[C#/BOJ] 1037번: 약수

1) 문제 1037번: 약수 첫째 줄에 N의 진짜 약수의 개수가 주어진다. 이 개수는 50보다 작거나 같은 자연수이다. 둘째 줄에는 N의 진짜 약수가 주어진다. 1,000,000보다 작거나 같고, 2보다 크거나 같은 자연수이고, 중복되 www.acmicpc.net 2) 코드 using System; using System.IO; class Multi { static void Main() { int count = Int32.Parse(Console.ReadLine()); //C#에서 숫자 리스트 입력받기 string input = Console.ReadLine(); string[] factorsStr = input.Split(' '); int[] factors = new int[count]; for(int..

[알고리즘]/BOJ 2024.04.13