프로젝트 시작 시 Prettier 설정하는 방법에 대해 정리했다.Prettier 설치npm install --save-dev prettier  프로젝트 루트에  .prettierrc / .prettierrc.js 파일 추가 module.exports = { printWidth: 200, tabWidth: 2, bracketSpacing: true, arrowParens: 'always', semi: true, singleQuote: true, trailingComma: 'all', endOfLine: 'auto', singleAttributePerLine: true,};semi: false - 세미콜론을 사용하지 않는다.singleQuote: true - 문자열을 표현할 때 싱글 쿼트를 ..

리렌더링 여부를 편하게 확인 할 수 있는 크롬 확장 프로그램 중 하나인 React Developer Tools 사용법에 대해 정리했다.설치chrome extention에서 react develop tools을 설치한다. React Developer Tools - Chrome 웹 스토어Adds React debugging tools to the Chrome Developer Tools. Created from revision ccb20cb88b on 7/3/2024.chromewebstore.google.com 설정확장 프로그램에서 React Developer Tools 세부 정보에 들어간다,세부 정보에서 사이트 액세스와 파일 URL에 대한 액세스 허용 설정하고, 시크릿 모드에서도 개발테스트를 허용한다면 ..

개인 블로그에 있는 내용 중 project 페이지에서 사용될 이미지는 AWS S3에 저장 후 페이지로 가져오는 방법을 선택해 해당 방법에 대해 정리해보았다.AWS SDK 사용법S3 서비스만 필요함으로 @aws-sdk/client-s3를 설치했다.개별 서비스 클래스를 바로 import 하면 메모리를 절약할 수 있다는 장점이 있다. npm @aws-sdk/client-s3AWS SDK for JavaScript S3 Client for Node.js, Browser and React Native. Latest version: 3.645.0, last published: 5 days ago. Start using @aws-sdk/client-s3 in your project by running `npm i @..

프로젝트 페이지에서 보여주는 썸네일 이미지는 AWS S3에서 가져오고 있다. 해당 방법에 대해 정리하기 전에 S3에 접근하지 위해서는 IAM을 통하여 Key값을 발급 받아야하기 때문에 IAM설정에 대해 먼저 정리 해보았다.IAMIAM(AWS Identity and Access Management)은 AWS에서 제공하는 서비스에 대한 엑세스를 안전하게 제어하는 서비스로 권한을 부여 혹은 제한하여 리소스의 안전성을 높인다.IAM설정엑세스 관리의 사용자에 들어가 사용자를 생성한다.사용자 이름을 작성 후 넘어간다. S3 권한 설정을 위해 직접 정책 연결을 선택 후 S3를 검색하면 나오는 리스트 S3FullAccess를 선택후 다음을 눌러 생성한다. 생성된 사용자를 선택 후 보안 자격 증명 메뉴로 이동하면 하단에..

S3 버킷을 CloudFront와 연동하여 이미지를 제공하고자 했다.CloudFrontAWS의 CDN (Content Delivery Network) 서비스로 Client의 콘텐츠 요청으로 서버에서 받아온 콘텐츠를 캐싱하고 이후 같은 요청이 왔을 때, 그 캐싱해 둔 것을 제공하는 서비스다. 이렇게 함으로써 물리적으로 거리가 먼 곳에도 빠르게 요청을 처리할 수 있고 결과적으로 서버의 부하를 낮출 수 있다.  CDN 관련글 : https://minsun309.tistory.com/entry/CDN%EC%9D%B4%EB%9E%80 CloudFront와 S3를 연동하여 client가 S3 컨텐츠를 직접 접근하지 않을 때의 이점컨텐츠 보안유지컨텐츠 캐싱을 통한 S3 부하 감소Edge Locaion을 통한 응답속도..

개인 블로그의 프로젝트 페이지에서 쓰여질 이미지를 AWS S3(Amazon Simple Storage Service)에 저장해 이미지를 가져오는 방식을 사용하기로 정해 S3의 버킷 만드는 방법에 대해 알아보았다.S3(Simple,Storage, Service) ?AWS(Amazon Web Service)에서 제공하는 인터넷 스토리지 서비스이다.보안성이 뛰어나며 높은 내구도를 자랑하며 정보를 안전하게 저장 할 수 있다.저렴한 비용으로 사용이 가능하다.Bucket이라는 단위로 구분한다. S3 버킷 만들기버킷 만들기 클릭버킷 이름, 리전 선택 객체 소유권, 퍼블릭 설정퍼블릭 상태로 사용할 예정이어서 차단을 해제했다. 그 외에 버킷 버전 관리는 비활성화, 기본 암호화는 변경하지 않고 설정이 되어있는 상태로 버킷..

REST 란 ?“REpresentational State Transfer”의 약자로 자원을 이름(자원의 표현)으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.즉, 자원(resource)의 표현(representation)에 의한 상태 전달을 뜻한다.자원 : 해당 소프트웨어가 관리하는 모든 것 (ex. 문서, 그림, 데이터, 해당 소프트웨어 자체 등)표현 : 그 자원을 표현하기 위한 이름 (ex. DB의 학생 정보가 자원일 때, ‘students’를 자원의 표현으로 정한다.)상태 전달 : 데이터가 요청되는 시점에 자원의 상태를 전달한다. (JSON 혹은 XML을 통해 데이터를 주고 받는 것이 일반적이다.)REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에..

개인 블로그 프로젝트에 사용할 이미지를 가져오는 방식을 AWS S3과 CloudFront를 활용하기로 결정하면서 cdn에 대해 알아보았다.CDN?CDN(Content Delivery Network)은 지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자에 가까운 곳에 두거나 동적 컨텐츠(예: 라이브 비디오 피드)의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게 합니다. CDN 사용 시 장점페이지 로드 시간 단축 : 가까운 CDN 서버를 사용하여 웹 사이트 방문자에게 더 가까운 웹 콘텐츠 배포를 가능하게 함으로써 방문자는 더 빠른 웹 페이지 로딩 시간을 경험할 수 있다.대역폭 비용 절감 : 원본 서버가 요청에 응답할 때마다 대역폭이 소모된다. CDN은 원본 서버가 제공해야 하는..

React의 Flux 패턴에 대해 알아보았다. MVC 패턴MVC는 Model, View, Controller의 약자입니다. Model에 데이터를 저장하고, Controller를 이용하여 Model의 데이터를 관리(CRUD)합니다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여집니다. 사용자가 View를 통해 데이터를 입력하면, Controller가 그 입력을 처리해 Model을 업데이트할 수 있습니다. 이 구조에서는 데이터 흐름이 양방향으로 일어날 수 있습니다.  문제는 애플리케이션의 규모가 커지면 아래와 같이 복잡해집니다.View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View에 데이터를 전달하는 상황이 발생합니다. 규모가 커질..

Ec2 인스턴스로 배포를 진행하면서 npm run start 와 npm start의 차이가 있는지 의문이 생겨 알아보았다.결론은 같은 결과를 내는 명령어로 script가 정의되어 있는 경우 동일하게 작동된다.npm start 를 제외한 모든 script 는 npm run 을 사용해야한다script 실행 명령어 중 start와 test 스크립트의 경우, 자주 사용되기 때문에 npm run에서 run을 생략해도 무방하다. npm run start npm run test // run 생략npm startnpm test script에 정의되어 있지 않는다면? npm start의 경우는 기본적으로 node server.js 를 실행시킨다.node server.js 는 서버를 시작하는데 사용할 수 있다.