Nginx / AWS EC2를 활용하여 React와 Node 서버 배포해보기 1탄

1. EC2 서버 인스턴스를 생성인스턴스 이미지: Amazon Linux 2 AMI (HVM), 64bit(x86) 을 선택인스턴스 타입: t2.micro 타입을 선택 스토리지 사이즈: 최대 30GB까지는 무료HTTPS와 HTTP를 지원하도록 보안 설정Key를 발급받기 (키는 다시 재발급이 안되므로 잘 관리해야 한다)mkdir ~/keysmv ~/Downloads/backfront.pem ~/keyschmod 400 ~/Documents/keys/ci-cd-study.pem`mv ` : 파일을 특정 디렉토리에 옮기는 명령어`chmod `: 리눅스와 유닉스 계열 운영체제에서 파일 시스템 객체(파일, 디렉토리 등)의 접근 권한을 설정하는 명령어 chmod (changemode) 옵션은 숫자 또는 기호를 ..

• format_list_bulleted 프론트엔드 개발/개발환경
• · 2024. 6. 13.
• textsms

[Deep Dive] React Server Component를 정확히 아시나요? - 1편

계속해서 React Server Component를 딥다이브하다보니 RSC를 직접 구현하는 방식에 대해서 알려주는 영상들이 몇몇이 있었습니다. Next.js가 내부적으로 해주는 일들과 비슷하게 구현할 수 있도록 되어 있었으며, 이를 통해 RSC에 대해 좀 더 자세히 이해할 수 있게 되었습니다. Zustand의 메인테이너이신 DAISHI KATO님께서 React Server Component에서 중요하게 생각하는 것은 Serialization(직렬화)라고 합니다. RSC 전에는 리액트는 하나의 메모리 공간에서 동작했지만 RSC가 나오게 되면서 리액트는 여러 공간에서 사용가능해졌다고 합니다. (server와 client, 브라우저의 워커쓰레드까지...)실습실습을 통해 설명을 해보도록 하겠습니다.`npm i ..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 5. 8.
• textsms

React 18의 Suspense에 대해서 알아보자

ReactJS 커뮤니티의 "Suspense-in-react-18"와 "Behavioral changes to Suspense in React 18"을 읽고 정리한 글입니다. Request For Comments(RFC)는 `` 컴포넌트의 동작에 대한 몇 가지 변경사항을 설명합니다.동작 변경: 커밋된 트리는 항상 일관성을 유지커밋: React 컴포넌트 트리의 변경사항이 브라우저에 확정적으로 반영되었음을 의미.새로운 기능: 스트리밍을 통한 서버 사이드 렌더링 지원새로운 기능: 기존 컨텐츠를 숨기지 않기 위해 트랜지션 사용동작 변경: 컨텐츠가 다시 나타날 때 레이아웃 효과 재실행단, Suspense API 자체는 변경되지 않았습니다. 16.6에서 Suspense가 최초로 릴리즈 되엇을 때, 한 가지 use c..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 5. 3.
• textsms

React의 SEO 최적화 방법: React-Helmet-Async & Prerender

SEO란 무엇인가 Search Engine Optimization의 약어이며, 웹사이트가 검색 결과에 더 잘보이도록 최적화하는 과정입니다. 검색엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성합니다. 검색 결과로 나온 결과가 색인으로 만들어둔 콘텐츠인 것이죠. SPA란 무엇인가 SPA는 Single Page Application의 약어로, 하나의 html 파일에서 구동되는 웹 애플리케이션 형태의 페이지입니다. 유저는 브라우저에 한 번만 요청하여 페이지 전체를 로드합니다. 그 이후에는 유저 요청에 의해 필요한 데이터만을 업데이트하여 페이지를 계속 변경합니다. SPA의 단점: SEO가 어렵다. 검색 엔진의 크롤러는 링크를 타고 페이지를 돌아다니면서 웹 문서(HTML 파..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 4. 1.
• textsms

프론트에서의 SOLID를 이해해보자

카카오 FE 기술 블로그의 SOLID 관련 글을 읽다가 이해가 잘 안 되어서 직접 구현해보면서 이해한 바를 토대로 글을 써보고자 합니다. 아무래도 구체적인 코드보다 큰 그림에서의 코드를 통해 설명을 해주셨기 때문에, 아직 초보인 저로써는 직접 구현하며 더 이해하고자 하였습니다. (그리고 예시 코드보다 허접하며, 빠르게 구현 원리를 확인만 하려고 했기 때문에 최대한 단순화했습니다) 먼저, SOLID의 "I"와 "D"는 각각 "Interface Segregation Principle"와 "Dependency Inversion Principle"의 앞글자를 딴 것입니다. 한국어로 번역하면 인터페이스 분리 원칙과 의존성 역전 원칙이죠. 저도 많이 들어봤고, 예시도 몇 차례 보면서 눈과 머릿 속에서는 이해가 된 ..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 3. 28.
• textsms

리액트의 Compound Pattern에 대해 알아보자

리액트에는 몇 가지 디자인 패턴들이 있습니다. 그 중에서 Compound Pattern에 대해 배워보도록 하겠습니다! Compound 패턴을 통해 하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담할 수 있게 됩니다. 클릭하면 메뉴바를 보여줘서 수정, 삭제 작업을 할 수 있는 Flyout 컴포넌트를 만들어봅시다. `Flyout` 컴포넌트에는 2가지 컴포넌트가 필요합니다. 메뉴를 클릭하면 토글할 수 있도록 하는 `Toggle` 버튼 수정, 작업 버튼을 가지고 있는 `List` 컴포넌트 Context API를 통해 Compound Pattern을 구현해보도록 해보겠습니다. 먼저 Flyout 컴포넌트에 Context API의 Provider를 구현해보자. type ContextType = { open: ..

• format_list_bulleted 프론트엔드 개발/React
• · 2024. 3. 7.
• textsms