본문 바로가기

FrontEnd94

[SW디자인패턴] MVC, MVP, MVVM 비교 소프트웨어의 비지니스 로직과 화면을 분리하여 작업한다면 유지보수와 개발의 효율성을 높힐 수 있다. 1. MVC MVC 패턴은 Model + View + Controller를 합친 용어이다. 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분이다. View : 사용자에게 보여지는 화면(UI) 부분이다. Controller : 사용자의 입력(Action)을 받고 처리하는 부분이다. 동작 MVC 패턴의 동작 순서는 아래와 같다. 1. Controller에서 사용자의 Action들을 받는다. 3. Controller는 Action을 확인하고, Model을 업데이트한다. 4. Controller는 Model을 표시할 View를 선택한다. 5. View는 Model을 이용해 화면을 나타.. 2022. 3. 4.
[Github] Github Actions를 이용한 AWS S3 배포 자동화 AWS에서는 S3와 CloudFront를 사용해서 정적 콘텐츠를 대규모 저장하고, 보호 및 전송함으로써 쉽게 CSR 웹 페이지를 배포(S3) 및 CDN 역할(CloudFront)을 적용할 수 있다. 물론 프로젝트 빌드와 aws cli를 이용한 s3 배포를 수동으로 작업해줄 수 있다. 만약 테스트 완료된 코드를 Github에 업로드 시에 배포가 자동으로 이루어진다면 혹시나 발생할 수 있는 배포 과정의 실수나 번거로움을 줄일 수 있을 것이다. Github Actions으로는 이러한 작업이 가능하다. Github Actions이란? [Github] Github Actions를 이용한 CI/CD CI/CD란? CI란? 지속적인 통합으로, 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공.. 2022. 2. 23.
[Github] Github Actions를 이용한 CI/CD CI/CD란? CI란? 지속적인 통합으로, 어플리케이션의 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어 공유 레포지토리에 통합되는 것을 의미한다. CI가 필요한 환경 다수의 개발자가 형상관리 툴(Git, SVN 등)을 공유하여 사용하는 환경 MSA(Micro Service Archietecture) 환경 CI의 핵심 목표 버그를 신속하게 찾아 해결 소프트웨어 품질 개선 새로운 업데이트의 검증 및 릴리즈 시간을 단축 CD(Continuous Delivery & Continuous Deployment)란? 공유 레포지토리로 자동으로 Release하고(Continuous Delivery), Production 레벨까지 자동으로 deploy하는 것(Continuous Deployment)을 의미한다... 2022. 2. 21.
[React.js] SWR(stale-while-revalidate)에 대하여 SWR이란 무엇인가? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었다. SWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. 왜 사용하는 가? 최상위 레벨 컴포넌트에서 useEffect를 사용해 데이터를 가져오고, props를 이용해 자식 컴포넌트에 전달하는 방법으로 서버의 데이터를 로컬 상태변수로 사용이 가능하다. // 페이지 컴포넌트 function Page() { const [user, setUser] = useState(null) // 데이터 가져오기 useEffect(() => { fetch('/api.. 2022. 2. 16.
GraphQL이란? GraphQL이란? GraphQL은 페이스북에서 만든 쿼리 언어로, 등장한지 얼마되지 않았음에도 불구하고 인기가 매우 가파르게 올라가고 있다. GraphQL(=gql)은 SQL(Structed Query Language)와 같은 쿼리 언어이다. 하지만, gql과 sql의 언어적 구조차이는 매우 크다. sql은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이고, gql은 웹 클라이언트가 서버로부터 데이터를 효율적으로 가져오는 것이 목적이다. 따라서, sql은 주로 백앤드 시스템에서 작성하고 호출하는 반면, gql의 문장은 주로 클라이언트 시스템에서 작성하고 호출한다. sql query SELECT plot_id, species_id, sex, weight, ROUND(weight / .. 2022. 1. 28.
[S3, CloudFront] React Access Denied(403) Error 우선 AWS S3, CloudFront를 이용한 전체적인 배포과정은 아래의 AWS Document 문서는 아래를 참고한다. 원본 액세스 ID(OAI)를 사용하여 Amazon S3 콘텐츠에 대한 액세스 제한 - Amazon CloudFront 예, 버킷 정책을 업데이트합니다.(Yes, update the bucket policy)를 선택하면 CloudFront는 버킷 권한을 업데이트하여 지정된 OAI에 버킷 파일 읽기 권한을 부여합니다. 그러나 CloudFront가 기존 권한을 제거 docs.aws.amazon.com React 프로젝트를 배포하던 중 다음과 같은 에러가 발생했다. [path]:1 Failed to load resource: the server responded with a status o.. 2022. 1. 26.
반응형

티스토리툴바