2024/06 3

[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