'TIL' 카테고리의 글 목록 (3 Page)

2023. 10. 17. 10:45 TIL/개념정리

개요 https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955 https://www.zerocho.com/category/React/post/5f9a7c8807be1d0004347311 https://www.zerocho.com/category/React/post/5f9a6ef507be1d0004347305 라이프사이클 포스트를 읽고 제가 이해한 방식으로 정리한 글입니다. React 컴포넌트 라이프사이클 생애주기 또는 라이프사이클로 많이 표현되며 React의 모든 컴포넌트가 실행되거나 업데이트, 제거될 때 특정한 이벤트들이 발생하게 된다. Class 컴포넌트 라이프사이클 Mount 컴포넌트가 처음 실행될 때 발생하는 이벤트들 context..

React Virtual DOM 정리

2023. 10. 16. 10:04 TIL/개념정리

가상돔을 이해하기 위해서 우선 브라우저 렌더링 과정을 알아야한다. 브라우저 렌더링 과정 HTML 파일을 파싱하여 DOM Tree 생성 CSS 파일을 파싱하여 CSS Object Model (CSSOM) 생성 Render Tree를 통해 Layout(레이아웃) 생성 요소의 크기와 위치를 결정한다 이 과정을 reflow라고도 한다 Painting을 통해 스타일을 생성한다 스타일 정보를 기반으로 실제 화면에 렌더링됨 요소 업데이트 document.getElementById('some-id').innerValue = 'updated value'; 해당 ID를 찾기 위해 HTML을 파싱 해당 요소의 하위 요소를 제거 DOM update, CSS update 레이아웃 업데이트 트리를 순회하며 화면에 다시 Repai..

Rest API 설계시 네이밍과 기본규칙

2023. 10. 4. 14:31 TIL/개념정리

RestfulAPI 네이밍과 기본규칙 Restful API설계를 위한 네이밍규칙 Restful API는 URI를 통해 리소스를 식별합니다. 통합 자원 식별자(Uniform Resource Identifier, URI)는 인터넷에 있는 자원을 나타내는 유일한 주소 Uniform: 리소스를 식별하는 통일된 방식 Resource: URI로 식별 가능한 모든 종류의 자원을 지칭 Identifier: 다른 항목과 구분하기 위해 필요한 정보 이러한 리소스를 더 명확하게 식별하기 위해 네이밍 규칙이 필요합니다 명사를 사용할 것 Restful API는 명사 리소스를 참조해야함 리소스를 세가지 카테고리에 따라 하나의 원형으로 만들어야한다 문서 하나의 파일, 인스턴스, 데이터베이스 레코드 → 문서 리소스를 표시하려면 단수..

이미지 전달과 저장 고민 / 클라우드 아키텍쳐 구조

2023. 8. 5. 11:32 TIL/트러블슈팅

Strapi 설계 정리 컬렉션 → 여러 데이터를 가지는 모델 → 레스토랑[이름, 카테고리], 포스트[제목, 내용] 싱글 → 단일 데이터만 가지는 모델 → 웹 - 웹소개 컴포넌트 → 재사용 가능한 모델 → 포스트, 리뷰, [제목, 내용] 이미지 저장 & 전달 방식 저장될 이미지가 많기 때문에 클라우드 상에서 확장과 데이터 보존을 위해 s3 버킷을 활용한다. 이때 버킷은 비공개 상태로 유지하고자 한다. 이미지 저장 방식 비공개된 버킷에 접근하기 위해서는 권한이 필요하다. 하지만 권한을 클라이언트 측에서 사용하고자하면 악의적인 유저에게 권한과 엑세스키를 다 털릴 수 있기 때문에 함부로 권한을 설정할 수 없다. 보안을 챙기면서 권한을 설정하고자하면 역할이 서버에서 할당되어야 하며 클라이언트 → 서버 → 버킷으로..

CI/CD 구성하면서 발생한 문제들

2023. 8. 1. 14:47 TIL/트러블슈팅

에러 https://github.com/strapi/strapi/issues/13975 계속 빌드-배포 스크립트만 수정했는데 왜 에러가 발생했는지 잘 모르겠다. 캐시를 지우고 다시 빌드하니 또 성공적으로 수행되었는데, 에러로 인한 중단이 발생하지 않은 것을 보아 추가적인 처리가 필요할 것처럼 보인다. 빌드 최적화 빌드시 4분정도 걸린다. action script → 빌드 → 실행 → SSH 연결 → 빌드 → 실행 순으로 이루어진다. 아무래도 컴퓨팅 성능이 좋지않다보니 시간을 많이 잡아먹기때문에 빌드를 한번으로 줄이거나 다른 패키지 캐싱을 통해 조절하는 것도 좋아보인다. 상태 비저장 배포를 간단하게 하기 위해 빌드를 action에서 한번만 수행하고 해당 파일을 전송하는 scp 스크립트를 구성했다. 하지만 ..

Github Action + PM2로 CI/CD 구축하기

2023. 7. 29. 22:39 TIL/개념정리

개요 웹 서비스를 운영하면서 필수적인 배포 전략을 많이 조사해보고 고민해보았습니다. 배포 환경을 실제 구현하기 위한 방법은 많기 때문에, 우선 가장 좋은 배포 전략을 고민해보고자 했고 이를 간단히 정리해보았습니다. 배포전략 롤링 배포 하나씩 새 버전으로 업데이트한다 → 로드밸런서로 트래픽을 제어하거나 새로운 서버를 올려 트래픽을 하나씩 제어한다 여러 오케스트레이션 도구에서 지원하고 신버전 장애 발생시 격리될 수 있다는 점, 신버전이 빠르게 릴리즈될 수 있다는 장점이 있다 하나씩 배포되기 때문에 대규모 배포작업이 일어나게되면 상당히 시간이 오래걸리게 된다. 뿐만 아니라 오류가 격리될 순 있지만 복구하는데 시간이 많이 발생할 수 있다. 블루/그린 서버를 두 그룹으로 나누게 된다 블루/그린. 실제 운영되는 그..

프로젝트에 맞는 클라우드 조사해보기

2023. 7. 25. 10:02 TIL

개요 AWS를 계속해서 사용하다가 프리티어가 만료된 후 새로운 팀 프로젝트를 하게될 일이 생겼습니다. 이후 자료를 조사하면서 다시 AWS를 사용하는 것보단 조금 더 싸고 프로젝트에 적합한 클라우드 서비스가 있는지 알아보았고 정리해보았습니다. 만들고자하는 서비스 만들고자하는 서비스의 특징을 정리해보면 많은 이미지 위주 초기 로딩시 5~60개의 이미지가 필요 업로드시 5~60개의 이미지가 업로드 각 페이지별로 검색되거나 정보가 표시되어야한다 최종적으로 글로벌 서비스가 목표 뿐만 아니라 사용하고자하는 백엔드 언어가 NodeJS라 이미지를 처리하고 저장하는데 불리하고 이미지가 날아갈 수 있기때문에 확장과 보관, 관리가 쉽도록 블록 스토리지보단 객체 스토리지 위주로 찾아보았습니다. 이렇다보니 이미지를 저장하고 정..

AWS SAA-C03 문제풀이

2023. 7. 11. 21:28 TIL/AWS

https://choisdev.notion.site/AWS-SAA-Dump-cf0bc5aea3e14dd7848f108e27bda123?pvs=4 AWS SAA Dump 문제풀이 어떤 서비스가 무슨 역할을 하는지 아는 게 중요 choisdev.notion.site 오답의 오답 https://choisdev.notion.site/SAA-cbcb630fa0c04436b96c8a543de657fa?pvs=4

AWS 백서

2023. 6. 20. 14:36 TIL/AWS

AWS Well-Architected Well-Architected Framework 좋은 애플리케이션을 실행하는 도구이자 프레임워크 아키텍처를 모범사례에 맞게 만들 수 있다 모범 사례의 주요 지침 필요 용량을 추측하지말고 오토 스케일링을 사용 프로덕션 규모에서 시스템을 테스트 자동화를 사용하여 아키텍처 실험을 쉽게 만들어야한다 CloudFormation 템플릿이 있다면 여러 환경에서 쉽게 배포 실험할 수 있다 진화하는 아키텍처를 만들어야한다 아키텍처는 시간에 따라 변경되기 때문임 → 변화하는 요구 사항에 맞춘 설계 데이터로 아키텍처를 구동할 것 데이터는 옮겨다녀야한다 GameDay를 통해 연습하고 발전하자 → 아키텍처와 프로덕션을 하면서 시험하고 개선점을 찾아야한다 아키텍처의 부담을 주는 상황을 시뮬레..

기타 AWS 서비스

2023. 6. 19. 20:59 TIL/AWS

대규모 인프라 배포 및 관리 CloudFormation 리소스에 대해 인프라의 윤곽을 구분짓는 선언적 방법(이렇게 선언하면 만들어진다) 보안그룹이 필요 보안그룹을 사용할 ec2 인스턴스가 2개 필요 s3 버킷 모든 머신에 로드밸런서가 필요 이러한 것들을 자동으로 생성하며 사용자가 정한 순서와 구성 그대로 따른다 CloudFormation의 장점 Infrastructure as code 인프라가 코드라는 점, 수동으로 리소스를 만들 필요가 없다 클라우드의 작동방식을 변경할 때마다 코드 리뷰를 통해 검토한다 Cost 스택내의 각 리소스는 만들어진 다른 리소스들과 비슷하게 태그된다 리소스 비용을 쉽게 예측 가능 절약 전략을 세울 수도 있다 Productivity 그때그때 파괴하고 다시 만들 수 있다 템플릿을 ..

티스토리툴바