이것저것 해보기🌼

실습 안내본 실습은 2024년  AWS TechCamp에서 진행한 AWS 핵심 서비스로 웹 애플리케이션을 구축하는 방법에 대한 실습입니다. AWS TechCamp 바로가기https://aws.amazon.com/ko/events/seminars/aws-techcamp/ AWS TechCampAWS TechCamp 온라인 세션의 경우 3월 (Modern App) 6월 (AI/ML), 9월 (Data), 11월 (Every App) 총 4회 제공합니다. 세션은 3일 동안 진행되며 클라우드 클라우드 서비스가 생소한 분들을 위한 기초 과정 (레벨 100)aws.amazon.com https://catalog.us-east-1.prod.workshops.aws/workshops/600420b7-5c4c-498f-..

AWS Cloud 기본 설명AWS RegionAWS Region은 전세계에 AWS 데이터센터가 클러스터 형태로 위치한 물리적 위치입니다. 하나의 리전은 고가용성, 확장성과 내결함성을 위해 3개 이상의 AZ로 구성됩니다. Availability Zones 가용영역모든 AWS 리전은 지리적 영역 내에서 격리되고 물리적으로 분리된 최소 3개의 AZ(가용 영역)로 구성되고,모든 가용 영역은 AWS 리전의 중복 전력, 네트워크 및 연결이 제공되는 하나 이상의 개별 데이터 센터로 구성됩니다. Amazon VPCVirtual Private Cloud으로, 사용자가 정의한, 논리적으로 격리된 가상의 프라이빗 네트워크 환경(외부에서 제어가 불가능하고, 기존의 데이터센터 환경과 유사하게 사용 가능) VPC 구성하기  1...

Firebase 인증 소개firebase는 인증, 데이터베이스 등 다양한 기능을 제공한다.그 중에서 인증 기능을 활용해 로그인을 쉽게 구현할 수 있다. 구글, 페이스북 등 소셜 로그인도 가능하다.  가이드 보기 : https://firebase.google.com/docs/auth/web/start?hl=ko 웹사이트에서 Firebase 인증 시작하기  |  Firebase AuthenticationGoogle I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 웹사이트에서 Firebase 인증 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분firebase.google.com 다양한 소셜 로그인 기능이 있지만, 당장은 이메일/비밀번호 ..

1. firebase console 접속https://console.firebase.google.com/ 로그인 - Google 계정이메일 또는 휴대전화accounts.google.com 2. 새 프로젝트 추가 및 웹 앱 추가  3. 내 코드에 firebase SDK 추가먼저 firebase를 설치한다.npm i firebase 안내페이지에 나와있는대로, 아래 코드를 복사하여 내 프로젝트 코드에 추가해준다. 나의 경우에는 firebase.js를 만들어서 프로젝트 폴더 최상단에 추가하고,맨 마지막에 해당 app을 아래와 같이 밖에서 쓸수 있게 만들어주었다.export default app;  4. 배포하기나머지 가이드를 따라서 firebase-tools 를 설치하고, npm install -g fireba..

웹페이지의 리소스가 늘어나다보면 폰트를 불러오는 용량도 네트워크 비용을 많이 잡아먹는 경우가 생긴다.이때는 폰트를 woff로 경량화하거나, 거기에서 추가로 서브셋 폰트로까지 경량화를 해주면 좋다. NotoSans 폰트는 자주 쓰이는 웹 폰트이지만 생각보다 큰 용량을 갖고 있기 때문에, 서브셋 폰트라고 하는 경량화 폰트로 쓰는 경우가 많다.서브셋 폰트는 한국어에서 거의 쓰이지 않는 문자집합을 제외한 폰트를 말한다. 서브셋 폰트를 만드는 방법에는 몇가지가 있는데, 그중에 fonttools 라는 파이썬 라이브러리를 사용하는 방법을 공유한다. fonttools 다운로드https://github.com/fonttools/fonttools GitHub - fonttools/fonttools: A library to..

간편하게 웹 콘솔에서 바로 내 사이트를 배포할수 있는 방법에 대해 알아보자. 1. firebasehttps://console.firebase.google.com/ 로그인 - Google 계정이메일 또는 휴대전화accounts.google.com 장점- firebase의 인증 등 다른 기능 사용 가능 2. netlifyhttps://www.netlify.com/ Scale & Ship Faster with a Composable Web Architecture | NetlifyRealize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web plat..

1. 설치creat-react-app 으로 시작하기npm create-react-app my-redux-project typescriptnpm install redux --save 2. 간단한 덧셈, 뺄셈 기능 만들기- index.tsximport React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { createStore } from 'redux';import counter from './reducers';const root = ReactDOM.createRoot(  doc..

https://icon-icons.com/ko/ 무료 아이콘 SVG, PNG, ICO 또는 ICNS검색 새로운 Iconsets Planets Business management Business icons Music Instruments DIY and Crafts Linance Morning Routine Productivity Success illustrationicon-icons.com

SSR (서버 사이드 렌더링) 과 CSR (클라이언트 사이드 렌더링) SSR표시되어야할 html 파일을 브라우저가 다운 받고, javascript 파일도 다운 받는다.javascript 를 다운 받는 동안 이미 html 렌더링을 시작하기 때문에 웹페이지 표시가 빠르다.사용자가 페이지를 이동했을때 해당 페이지의 html 파일을 다운받고, javascirpt 파일을 다운받는 과정이 반복된다.렌더링은 빠르지만, 페이지 이동 시 마다 화면 깜박임이 생긴다. CSR사용자가 url 요청시 웹문서가 가지고 있는 모든 정보, 링크 페이지까지 한번에 다 받아온다.초기 화면 로드가 느리지만, 그 뒤로 사이트를 돌아다닐때는 로드 과정이 없어 사용성이 좋다.보통 로드가 될때 loading 임을 알려주는 화면이 먼저 표시되게 ..

Spring Boot 2.4 버전 이후 부터는 프로필 파일 형식이 약간씩 바뀌었다. 1)  local, dev, prod 로 파일을 나누는 방법과2) oauth 등 중요 인증정보를 include 시키는 방법에 대해 알아보자.  https://velog.io/@westreed/Spring-application.yml-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0 Spring application.yml 관리하기Spring boot 2.4 버전부터 적용되는 방법입니다. 기밀 정보 분리의 필요성 Spring에서는 애플리케이션의 설정 정보를 관리하는 파일이 있는데, resoures폴더의 application.yml (.properties)가 바로 그 프로필velog.io