위클리페이퍼 13

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

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

위클리페이퍼 2024.12.22

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

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

위클리페이퍼 2024.12.15

JWT로 인증 시스템을 구현하는 방법 및 RESTful API란?

React 애플리케이션에서 사용자 인증을 구현하는 대표적인 방법 중 하나가 JSON Web Token(JWT)을 활용하는 것입니다. JWT는 RESTful API와도 자연스럽게 호환되며, 서버에 상태를 저장하지 않고 인증할 수 있다는 장점이 있습니다. JWT 기반 인증의 기본 개념JWT(JSON Web Token)는 JSON 포맷의 토큰으로, 세 가지 부분으로 구성되어 있습니다: 이전 글에서 잠깐 언급했었습니다!헤더(Header): 어떤 알고리즘을 사용해 서명(Signature)했는지를 나타내는 정보입니다.페이로드(Payload): 유저 정보나 권한 등의 데이터를 담고 있습니다.서명(Signature): 서버에서 설정한 비밀 키와 Header, Payload로 생성된 해시로, 데이터의 위변조 여부를 확인..

위클리페이퍼 2024.11.14

세션 기반 인증 vs. 토큰 기반 인증: 개념과 차이점

웹사이트나 애플리케이션에 로그인을 하게 되면, 우리가 누구인지 확인하고 계속 로그인 상태를 유지해주는 편리한 방식이 필요합니다. 이를 ‘인증’이라고 하죠. 웹이나 애플리케이션에서 가장 흔히 쓰이는 인증 방식은 세션 기반 인증과 토큰 기반 인증이 있습니다.  1. 세션 기반 인증세션 기반 인증은 전통적인 방식으로, 주로 예전부터 웹사이트에서 사용해온 인증 방법입니다. 우리가 로그인할 때마다, 서버는 우리 정보와 인증 상태를 확인한 후 서버의 메모리에 세션이라는 것을 생성하고, 여기에 로그인 정보를 저장합니다. 그리고, 세션 ID라는 고유한 ID를 만들어 브라우저에 쿠키 형태로 보내줍니다.이 다음에는 사이트 내에서 여러 페이지를 이동해도, 브라우저는 자동으로 세션 ID를 보내면서 우리가 로그인된 상태임을 서..

위클리페이퍼 2024.11.04

Next.js VS React.js

오늘은 리액트만 사용할 때와 비교해서 Next.js 사용하는 이유에 대해서 포스팅을 진행하려고 합니다. Next.js에 대해서 먼저 알아봅시다.Next.js의 공식 사이트: https://nextjs.org/Next.js란? 서버 사이드 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다. 라고 사전에 나와있지만, 간단히 말하면 리액트에서 기본 기능을 확장하여 안정되고 빠른 웹 어플리케이션을 개발할 수 있습니다! Next.js 안정화된 버전인 15.0.0이 2024년 10월 21일에 발표가 되었다는 소식도 있답니다..ㅎ 안정화된 버전이지만 아직은 두고보고 사용할 예정입니다. 이제 React.js와 비교해서 Ne..

위클리페이퍼 2024.10.24

REACT: CSR, SSR, SSG

안녕하세요! 이번 포스트에서는 웹 페이지 렌더링 방식인 CSR, SSR, SSG에 대해 공부한 내용을 정리해보려고 합니다. 저도 이번에 찾아보면서 공부한 내용이라, 완벽하진 않지만 이해한 대로 최대한 풀어썼습니다! 😊CSR, SSR, SSG란 무엇일까?웹 페이지가 사용자에게 어떻게 보여지는지에 따라 렌더링 방식이 나뉘는데, 크게 세 가지가 있습니다. CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static-Site Generation). 사실 이 개념들을 이번에 처음 접했습니다..ㅎCSR(Client-Side Rendering)CSR은 브라우저(클라이언트)에서 웹 페이지를 렌더링하는 방식입니다. 서버에서는 기본 HTML만 전달하고, 나머지는..

위클리페이퍼 2024.09.08

React: useMemo, useCallback, 생명 주기, key 설정 이유?

안녕하세요! 이번 포스트에서는 리액트에서 자주 사용되는 useMemo, useCallback Hook과 리액트의 생명주기(lifecycle), 그리고 배열을 렌더링할 때 꼭 알아야 하는 key 설정에 대해 알아볼게요. 리액트 예습 차원에서 검색하고 공부한 내용이라서 많이 부족합니다😊 목차1. useMemo와 useCallback이란?2. React에서의 생명주기3. 배열을 렌더링할 때 key를 왜 설정해야하나?useMemo와 useCallback이란?리액트에서 useMemo와 useCallback은 성능 최적화를 위한 Hook입니다. 두 Hook 모두 불필요한 연산이나 함수 재생성을 방지하기 위해 사용됩니다. 말만 봐도 효율적일 것 같은데, 각각의 기능이 무엇인지 알아봅시다. useMemo: 어떤 계산..

위클리페이퍼 2024.09.01

React: 렌더링, Virtual DOM, Component

안녕하세요! 오늘은 리액트의 핵심 개념에 대해 알아보려고 해요. 리액트를 아직 배운 건 아니지만, 미리 예습하는 마음으로 중요한 주제들을 정리해보았습니다.  목차1. React 렌더링 하는 방식2. React의 Virtual DOM3. React의 컴포넌트(component) React 렌더링 하는 방식리액트는 사용자 인터페이스(User Interface: UI)를 효율적으로 업데이트하고 관리하기 위해 설계된 라이브러리라고 합니다. 전통적인 웹 개발 방식에서는 HTML 요소들이 변경될 때마다 전체적인 DOM(Document Object Model)을 업데이트해야 했는데, 이 과정에서 성능이 저하되는 문제로 인해 리액트는 리액트만의 새로운 렌더링 방식을 사용합니다!리액트의 렌더링 과정컴포넌트 기반 렌더링:..

위클리페이퍼 2024.08.25

렉시컬 스코프(Lexical Scope): 코드 유효 범위 이해하기

포스팅을 통해 렉시컬 스코프에 대해서 알아봅시다! [목차]1. 렉시컬 스코프란?2. 렉시컬 스코프의 작동 방식3. 렉시컬 스코프의 작동 예시 렉시컬 스코프란?렉시컬 스코프를 알기 전에 스코프(scope)에 대해서 말하자면, 스코프는 변수가 어디에서 사용할 수 있는 지 결정하는 범위를 의미합니다.그럼 Lexical 스코프는? 직역하면 어휘 범위...? 라고 말할 수 있습니다.다시 말하면, 코드가 작성된 위치에 따라 변수의 유효 범위가 결정되는 방식입니다.코드를 작성할 때 변수가 어디에서 선언되었는 지에 따라서 그 변수를 어디에서 접근할 수 있는지가 결정됩니다. 렉시컬 스코프의 작동 방식위에서 말했다시피 함수가 어디에서 선언되었는 지에 따라 그 함수 내부에서 어떤 변수에 접근할 수 있는지가 결정되기 때문에 ..

위클리페이퍼 2024.08.18

JS에서는 var는 왜 이제 안 쓰일까? 그리고 this는 무엇을 가리킬까?

요즘 JS를 배우고 있는데 변수를 선언할 때 let, const로 배우고 있지만, 예전 코드들을 찾아보면 심심찮게 var로 변수를 선언하는 것을 볼 수 있습니다. 근데 왜 var는 이제 쓰지 않는 추세입니다! 그 이유는 무엇일까요?  그리고 this 키워드를 도대체 어떤 걸 가리키고 있는 지 헷갈리는 데 정확하게 알아보고 공부하려 합니다![목차]1. var, let, const의 차이점 및 예시2. 다양한 상황 속에서 this가 향한 곳은?var, let, const의 차이점 및 예시1. 선언 var는 중복 선언이 가능해요.var x = 10;var x = 20;console.log(x); 같은 x가 쓰였지만 덮여씌워져서 console에는 20으로 출력이 됩니다. let x = 10;let x = 20;..

위클리페이퍼 2024.08.18