아는게 없어서 쓰는 블로그

💥 FullCalendar작업을 하고 있는데 발생한 문제  이벤트가 부모 > 자식에게 적용되지 않는다 ! 날짜를 선택했을 때, 적용되는 이벤트(dateClick) 작성해두었었다. 그런데 날짜를 선택하면 잘 적용이 되었지만, 날짜 안에 자식 요소인 일정이 들어간 경우는 적용이 되지 않았다..즉, 일정(하위요소)가 추가되면 상위 요소에 적용되던 이벤트의 가용범위가 너무 작아진다는 문제 발생 !!  ✔️ 해결 방법 문제를 해결하기 위해 GPT 교수님께 여쭤보니 '이벤트 캡처링' or '이벤트 버블링'을 사용하라고 하심 !  * 이벤트 캡처링 : 이벤트가 최상위 부모 요소에서 시작해 이벤트가 발생한 요소까지 내려온다. * 이벤트 버블링 : 이벤트가 발생한 요소에서부터 다시 최상위 부모 요소까지 올라간다.  이..

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

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

이번주에 배포를 처음해본 프론트엔드 쌉 주니어입니다. 이번 편은 저의 첫 배포에서의 시행착오와 발생했던 에러들에 대해서 담아볼까 합니다. 목차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..

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

(내가 잘 까먹어서 올려두는) 리액트에서 폰트 어썸 사용하기 폰트어썸을 모를땐 파일에 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..

나같은 SSAP초보 인턴은 스타트업이 아닌 이상 문서 처리 작업을 더 많이 할 것이다. (아닐 수도 있다.) 그런데 단순 반복 문서 작업을 하던 중.. 문서만 보고있기에 심심하기도하고 눈알이 빠질 것 같아서 컴퓨터의 힘을 빌리기로 해 보았다. 요구사항 DD-MM-YY HH:MM:SS, Order, ?, Type, ?, Base, ?, 형태가 맞는지 다시 한번 확인해주세요. (회사가 공군이랑도 관련이 있고 아무래도 정보 노출에 민감하여 ?로 표시한 부분은 정보의 형태로 보면 된다.) 그런데 확인해야할 파일이 대락 50개에 한 파일당 평균 40줄 정도는 되어서 .. 프로그램을 작성해보았다. using System; class CheckInfo { static void Main(string[] args) { ..

.NET 이란? Microsoft에서 지원하는 무료 오픈 애플리케이션 플랫폼 사실 이 문장만 들으면 아 그렇구나 ~ 라고 할 수는 있지만 뭔말인지 모르겠다. 플랫폼이 한두개인가 ? 그래서 찬찬히 뜯어보자! C#과 .NET은 뗄 수 없는 사이니까 .. ✔️ 애플리케이션 개발 다양한 플랫폼에서 다양한 종류의 응용 프로그램을 개발할 수 있도록 도와주는 강력한 프로그래밍 프레임워크인 .NET은 말 그대로 크로스(cross) 개발 플랫폼이다. C#, Visual Basic, F# 등의 언어를 사용하여 웹 애플리케이션, 데스크톱 애플리케이션, 모바일 애플리케이션 등 다양한 종류의 응용 프로그램을 개발할 수 있다. * 플랫폼 : 소프트웨어가 실행되는 환경 * 프레임워크 : 소프트웨어 개발을 위한 구조와 도구를 제공하..

1. Sinppets란 Sinppets : 코드 조각이나 코드 템플릿 소프트웨어 개발에서 일정한 패턴이나 반복되는 코드를 빠르게 작성할 수 있도록 도와주는 기능 2. 사용 방법 리액트 개발을 할 때 효율적으로 작업하기 위해 사용하는 단축키가 몇가지 있다. Visual Studio Code에선 "ES7 React/Redux/GraphQL/React-Native Snippets"이라는 확장팩을 설치해서 사용할 수 있다. 확장팩 설치 > react sinppets 검색 3. 자주쓰는 단축키 1. 함수형 React 컴포넌트 생성 - rfc // rfc import React from 'react' export default function Home() { return ( Home ) } 2. 기본적인 클래스형 ..

샘플 데이터베이스 사용자 계정 중 하나인 hr(Human Resources) 계정을 사용해보자. SQL Command Line에서도 실행할 수 있지만 이번엔 SQL Develper에서 실행하는 실습을 진행할 것이다 ~! 1. SQL Developer 실행 2. 기존 SYSTEM에 접속 * 기존 시스템이 없다면 다음과 같은 과정을 따른다. 저기 초록색 + 버튼을 클릭하면 데이터베이스 접속 새로만들기 창이 나온다. 입력칸에 입력을 하고 테스트를 누른 뒤, 상태가 성공이 되면 접속을 진행한다. 3. HR 계정 잠금 풀기 SYSTEM에 접속하면(이 생성되면) 해당 접속에서 해당 구문을 작성한다. - ****는 SQL 사용자 비밀번호임 !! ALTER USER HR ACCOUNT UNLOCK IDENTIFIED ..