sy의 코딩 개발일지

Github Actions를 통한 배포 Flow (클라이언트) GitHub -> GitHub Actions -> Amazon S3 Build: github acitons의 YAML 파일에 적힌 명령어를 토대로 Webpack을 이용해 빌드 Deploy: github acitons의 YAML 파일에 적힌 명령어를 토대로 s3로 빌드 결과를 업로드 Source: Github reference 브랜치에 코드가 커밋 먼저 ,Setting > secret > action 탭을 클릭한후 , AWS_ACCESS_KEY_ID와 AWS_SECRET_ACCESS_KEY를 설정한다. AWS 액세스 키와 비밀 액세스 키를 환경 변수에 직접 저장하는 것은 보안적으로 좋지 않다. 따라서, 가능하다면 AWS Secrets Manag..

개발 프로세스란 소프트웨어 시스템이나 애플리케이션 개발 및 유지보수할 목적으로 수행되는 활동의 절차 개발 프로세스 즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)을 기반 요구분석 및 시스템 명세 작성 설계 구현(프로그래밍 기법 : 구조화 프로그래밍,모듈러 프로그래밍) 테스트 배포 및 유지보수(유지보수 : 수정형 유지보수 , 적응형 유지보수,완전형 유지보수,예방형 유지보수) 전통적인 개발 프로세스 폭포수 개발 방식:한 방향으로만 프로세스가 진행되는 개발 과정 개선을 위해 다양한 테스트 도입(시스템 테스트,알파 테스트,베타 테스트) 모던 개발 프로세스 애자일(Agile) 방식:스프린트(sprint)' 라고 불리는 짧은 주기의 개..

const handleCheckClick = (itemId) => { setCheckedItems((prevState) => ({ ...prevState, [itemId]: !prevState[itemId], })); }; ...prevState는 이전 상태 객체의 모든 속성을 새로운 객체에 복사한다. 그리고 그 뒤에 [itemId]: !prevState[itemId]를 추가하여, 해당 itemId의 속성 값만 새로운 값으로 변경한다. 이전 상태 객체의 모든 속성을 복사하고, 그 중에서도 itemId의 속성 값만 변경하는 이유는, 다른 항목의 체크 여부는 변경되지 않고, 현재 클릭한 항목의 체크 여부만 변경되기 때문이다. 즉, 이전 상태 객체를 복사하여 새로운 상태 객체를 만들어 업데이트하면, 현재 클릭..

백엔드 배포 EC2 인스터스 상에서 서버 실행 인스턴스 연결 - Session Manager 연결 Windows에서 터미널 bash 실행이 안돼서 가상 우분투로 연결을 하였다. 인스턴스 개발환경 nvm 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash 또는 wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash sudo apt update nvm install node sudo apt install npm git을 통해 서버 코드 클론 clone하기전에 SSH등록을 한다. SSH 등록 방법 SSH 키 생성 ssh-key..

const authrUnique = blogs && (blogs.filter((character, idx, arr) => { return arr.findIndex(item => item.author === character.author) === idx })); 이 코드가 어찌나 어렵던지 끝까지 이해할려고 노력했다. 이해한게 아까우니 기록! 이 배열을 filter 메소드를 이용하여 중복된 작성자 이름을 걸러내는 작업을 진행한다. filter 메소드는 배열 내의 모든 요소에 대해 주어진 함수를 실행하고, 함수의 결과값이 true인 요소만을 새로운 배열로 반환한다. 이 때, filter 메소드에 전달되는 함수의 매개변수로는 세 가지가 있다. 첫 번째 매개변수는 배열의 각 요소이며, 두 번째 매개변수는 현재 요..

Cloud Computing & Deployment 배포를 위한 클라우드 서비스 Amazon Web Service(이하 AWS)를 이용해서 웹 애플리케이션을 배포 신속한 인프라 구축 유연한 인프라 관리 예상치 못한 트래픽 폭주 대응 손쉬운 글로벌 서비스 강력한 보안과 장애 없는 서비스 합리적인 요금제 기존 서버의 방식 서버실과 같은 곳에 컴퓨터 배치 => 서버가 요청에 대한 수용 능력 한계 같은 공간에 더 많은 컴퓨터를 추가 혹은 성능을 높임 문제점 첫번째 주기적인 관리 필요 두번째 공간 한계 => 데이터 센터 등작 물리적인 컴퓨터 대여 즉 서버의 자원과 공간, 및 네트워크 환경을 제공(온프레미스)을 빌려 사용하는 클라우드 컴퓨팅이 시작 현대의 클라우드 컴퓨팅(데이터 센터와 비슷한 역활) 가상 컴퓨터를 ..

https://section.cafe.naver.com/ca-fe/ 네이버 카페 section.cafe.naver.com 1 . Reduce unused JavaScript(사용하지 않는 JavaScript 코드를 줄이는 것) 웹 성능 개선을 위해 가장 일반적으로 권장되는 방법 중 하나 Code splitting(코드분할) 웹 애플리케이션의 JavaScript를 분할하여 페이지의 초기 로드 시간을 줄인다. 페이지가 렌더링될 때 필요하지 않은 JavaScript는 불러오지 않기 때문에 불필요한 리소스 사용을 방지할 수 있다. Tree shaking: 트리 쉐이킹은 웹 애플리케이션에서 사용하지 않는 코드를 자동으로 제거한다. 이를 통해 불필요한 코드가 번들되지 않도록 하여, JavaScript 파일의 크기를..

최적화 주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정. 주어진 조건으로 최대 효율을 낼 수 있다. 컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미 웹 개발에서의 최적화는 바로 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것 최적화의 필요성 및 효과 이탈률 감소 로딩이 오래 걸리면 이탈을 하게 된다. 전환율 증가 이탈률 감소 -> 전환율 증가 전환율이란, 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미 수익 증대 이탈률 감소, 전환율 증가 -> 수익 증대 사용자 경험(UX) 향상 페이지 로딩이 빠를수록 UX는 향상 HTML,..