이안의 평일코딩

z-index 웹사이트를 제작하는데 왼쪽사진과 같이 Navbar위로 이미지가 상단으로 올라가 당황했다. 하나만 기억하면 된다. 바로 CSS에 z-index로 우선순위를 매기면 되는 것. .Header { position: fixed; color: white; font-family: 'NanumSquare', sans-serif; background-color: #11ffee00; font-size:40px; font-weight: 400; width: 100%; height: 80px; top: 0; z-index:1; } Header라는 className을 가진 Navbar에 z-index:1을 넣어주면 가장 최상단으로 올라가 해결된다. z-index의 숫자가 낮을수록 우선순위로 밀리고 높을수록 우선순..

헤더 스크롤 시 디자인 변경 Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으로도 올려본다. iancoding.tistory.com/216 [Vue] 스크롤 시 헤더 색 변경 1. 먼저 data에 scrollPosition을 null값으로 넣어준다. 2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다. 3. mounted를 통해 위의 updateScroll()이 발생하도록.. iancoding.tistory.com Vue는 위의 블로깅을 참조. Header.js import React, {useState, useEffect} from 'react'; import "./css/Header.css"; fu..

react-reveal 꽤 유용한 사이트다. 간편하게 애니메이션을 구현할 수 있다. www.react-reveal.com/ Home - React Reveal React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects. Scroll down to see it in action. www.react-reveal.com 먼저 터미널에 아래와 같이 입력하여 설치한다. npm in..

리액트 이미지 경로 보통 public에 이미지들을 다 집어넣고 쓰는 편인데 정말 간편한 방법이 있어 공유하고자 한다. 먼저 public에 img라는 폴더를 만들어준다. 그리고 src에서 작업하는 곳에서 이미지를 불러올 때 경로를 img/를 넣으면 아주 쉽게 불러온다. import React from 'react'; import "./Card1.css"; function Card1() { return ( ) } export default Card1; 간단하쥬?

리액트 초기 셋팅 최근 Vue를 계속 사용하다보니 리액트 초기 설정을 까먹어서 다시 기억하기 위해 써본다. 분명히 업로드한 것 같은데 블로깅이 안되어 있어서 다시 씀. 먼저, Nodejs 최신버전이 필요하다. nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 그리고 터미널(Mac) 또는 명령 프롬프트(Windows)에 아래와 같이 입력한다. npx create-react-app 프로젝트명 그리고 IDE에서(나는 vscode) 프로젝트명으로 만든 폴더를 open한 뒤 아래와 같이 입력하면 실행된다. npm run start 또는 yarn start (vue에서는 주구..

S3(Simple Storage Service) AWS의 대표적인 서비스로 객체 스토리지이다. 파일 업로드, 다운로드, 검색이 가능하며 무제한 용량에 다양한 인증, 권한 부여를 제공한다. 리전 기반 서비스로 매우 안전하고 상대적으로 빠르지는 않다. CDN과 연동 가능하며 static web page 기능 지원된다. 필요에 따라 버저닝(versioning) 기능 사용이 가능하며 다양한 요금 옵션으로 비용 절감이 가능하다. S3 사용예 클라우드 저장소 (개인 파일 보관, 구글 드라이브처럼 사용 가능) 서비스의 대용량 파일 저장소 - 이미지, 동영상, 빅데이터 (ex: 넷플릭스) 서비스 로그 저장 및 분석 AWS 아데나를 이용한 빅데이터 업로드 및 분석 서비스 사용자의 데이터 업로드 서버 (이미지 서버, 동영..

IAM(Identity and Access Management) AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스. 리소스(Resource): 자원. AWS에서는 컴퓨팅, 스토리지, 네트워크, ... 접근(Access): 리소스를 조작 및 제어하는 것. CRUD(쓰기, 읽기, 변경, 삭제) 사용자가 리소스를 사용하려고 할 때 권한을 세부적으로 조정하는 서비스 https://www.aws.training/Details/Video?id=54773 AWS training and certification www.aws.training AWS의 인증(자신이 누구라고 주장할 때 이를 확인하는 절차)을 담당하는 것은? IAM User, IAM Role AWS의 권한부여(사용자가 원하는 리소스에 접근하..

AWS Global Infrastructure https://www.infrastructure.aws/ 글로벌 인프라 리전 및 가용 영역 aws.amazon.com aws.amazon.com/ko/about-aws/global-infrastructure/ 글로벌 인프라 AWS 글로벌 인프라는 성능에 중점을 두고 설계되었습니다. AWS 리전은 짧은 지연 시간, 낮은 패킷 손실 및 향상된 전체 네트워크 품질을 제공합니다. 완벽하게 이중화된 100GbE 파이버 네트워크 백 aws.amazon.com - 가용영역(AZ, Availability Zones): 하나 이상의 데이터센터로 구성됨. 논리적 데이터센터 - 리전(Regions): 2개 이상의 가용영역의 모임, 각 리전은 각각 다른 AWS 서비스를 제공 - ..