2024/12 6

AWS의 글로벌 infrainstructure 구성 요소와 EC2 인스턴스란?

대학교에서 클라우드 컴퓨팅이라는 수업을 듣기도 했고, 배포 시에 많이 사용했던 AWS에 대한 주제를 가지고 포스팅하려고 합니다! AWS의 글로벌 인프라에는 어떤 구성 요소들이 포함이 되어있을까?AWS의 글로벌 인프라는 단순히 데이터센터의 집합이 아니라, 안정적이고 확장 가능한 서비스를 제공하기 위해 설계된 네트워크로 구성되어 있습니다. 이를 이해하려면, AWS가 제공하는 글로벌 인프라의 주요 구성 요소들을 살펴보아야 합니다. 1. 리전(Region)AWS 리전은 전 세계에 위치한 독립적인 지리적 영역입니다. 리전은 물리적으로 분리된 데이터센터 그룹으로 구성되어 있으며, 각 리전은 다른 리전과 완전히 독립적으로 운영됩니다. (기본적으로 버지니아 북부로 설정되어 있습니다.)예를 들어, 서울 리전(ap-nor..

위클리페이퍼 2024.12.22

고급 프로젝트에서 사용(도전)할 것 -1

현재 프론트엔드 팀원들이 기본적인 공부만으로는 힘들어하고 있어, 추가적인 공부를 진행하기 어렵다고 느껴집니다. 이에 따라, 개인적으로 고급 프로젝트에 적용해볼 기술들을 정리하려고 합니다. 1탄인 이유는 추가적으로 더 도전할 수 있는 것들이 있을까봐 제목으로 남겨놨습니다 ㅎ1. styled-componentsnpm install styled-componentsnpm 으로 설치 후 사용이 가능합니다. 기존 코드는 아래의 코드와 같이 별도의 파일을 분리하여 코드를 작성하였습니다.import React from 'react';import styles from './styles.module.css';const App = () => { return ( 클릭하기! );};export def..

추가공부 2024.12.19

Context API 활용하기 + next.js->typescript로

/components ├── AuthContext.js (Context를 생성하고 Provider 정의) ├── LoginButton.js (Context를 사용하는 컴포넌트) ├── UserInfo.js (Context를 사용하는 또 다른 컴포넌트) └── LogoutButton.js (로그아웃 기능을 제공하는 컴포넌트) 이런 파일 구조들이 있다면, 코드들은 아래와 같습니다.//AuthContext.jsimport { createContext, useContext, useState } from 'react';// 1. Context 생성const AuthContext = createContext();// 2. Provider 정의export function AuthProvider({ ..

추가공부 2024.12.18

모르는 거 확실하게 알고 넘어가기!

공부하다가 애매모호하거나 처음 보는 내용을 확실하게 알고자 포스팅을 합니다!1. Content-Type: application/json(많이 봤던 코드이지만, 막상 설명하려고 하니 뭐라고 해야할 지 몰라서 넣어봤습니다.) Content-Type: application/json는 HTTP request / response header에서 사용되는 MIME 타입 중 하나로, JSON (JavaScript Object Notation) 형식으로 데이터를 전송하거나 받을 때 사용됩니다. 이 헤더는 서버와 클라이언트가 서로 데이터를 어떻게 해석할지를 알려줍니다. 1. JSON (JavaScript Object Notation)JSON은 가벼운 데이터 교환 형식으로, 사람이 읽고 쓰기 쉽고 기계가 분석하고 생성하기..

추가공부 2024.12.17

TypeScript의 동작 원리 및 d.ts 타입 정의 파일이란?

TypeScript는 JavaScript의 상위 집합(Superset)으로, 정적 타입(static type)을 추가하여 개발자가 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있게 도와주는 언어입니다. 간단히 말해서, TypeScript는 우리가 작성한 코드를 JavaScript로 컴파일(transpile)해주는 트랜스파일러 역할을 합니다. 또한, TypeScript의 강력한 기능 중 하나는 타입 정의 파일(.d.ts)을 통해 타입 정보를 외부 라이브러리나 코드에 제공할 수 있다는 점입니다. React 애플리케이션에서는 d.ts 파일을 활용하여 컴포넌트, 함수, 모듈 등의 타입 정보를 정의할 수 있습니다. 그럼 TypeScript와 d.ts가 실제로 어떻게 동작하는지 살펴보겠습니다.! 코드 작성과 타..

위클리페이퍼 2024.12.15

AWS EC2로 Next.js 서버 배포하기 -1

AWS 배포에 대한 강의를 못 들었지만, 검색을 바탕으로 결과에 성공했기에 나중에 또 쓸 일을 위해 작성해둡니다. 혹시나 잘못된 점이 있다면 알려주세요! 그리고 나중에 수업을 듣고 잘못된 점이 있다면 추가적인 글을 남기려고 합니다.   1. AWS에 로그인 후 EC2를 검색하여 EC2 서비스에 진입합니다. 2. 리전을 서울로 선택한다. (기본적으로 버지니아 북부로 설정되어 있고, 우리나라로 하면 확실히 속도가 빠른 것을 느꼈습니다.)3. 인스턴스 시작을 누른다4. 원하는 이름을 채운 후 Amazon Linux가 선택되어 있는 지 확인한다. 저는 2023 AMI 기준으로 작성합니다. Linux2도 있고 Ubuntu도 있지만, 사실 상 배우지 않아서 무슨 차이점이 있는지 모릅니다..ㅎ 그러나 ubuntu로 ..

회고 2024.12.06