jyoon dev log

Amazon Web Service Cloud Computing 데이터 센터의 유휴 자원을 대여하는 서비스가 등장하여 서버의 자원과 공간, 및 네트워크 환경을 제공을 빌려 사용한다. 클라우드 서비스 장점 1. 필요할 때마다 컴퓨팅 능력을 유연하게 조절할 수 있다. 2. 고정적인 비용이 들어가는 온프레미스와는 달리 사용한 만큼의 요금만 지불하면 된다. 3. 컴퓨터의 스냅샷("이미지"라고 부릅니다) 을 이용해 다른 컴퓨터로 즉시 이주(migration)가 가능하다. 클라우드 서비스 단점 운영 환경 자체가 클라우드 제공자에게 종속되어 버리므로, 클라우드 서비스에 문제가 생기면 내가 배포하고 관리하는 환경에도 영향이 미친다. 클라우드 서비스의 형태 1. SaaS( Software as a Service) 2...

라이트하우스(Lighthouse) 구글에서 개발한 오픈소스로서 사이트를 검사하여 웹 페이지의 성능 측정을 할 수 있는 도구이다. 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공한다. Lighthouse 분석 결과 항목 1. Performance Performance 항목에서는 웹 성능을 측정한다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인함. 2. Accessibility Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인한다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을..

트리쉐이킹(Tree Shaking) 트리쉐이킹(Tree Shaking)은 말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다. 불필요한 코드들을 찾아내어 제거하면 웹 사이트 성능 최적화에 큰 도움이된다. 1. JavaScript 파일의 크기 JavaScript 파일 크기의 증가, 요청 횟수의 증가는 그만큼 파일이 오고 가는 동안 화면 표시가 늦어진다는 것을 뜻하고, 네트워크 속도가 느린 환경에서는 더 큰 병목현상을 유발한다. 따라서 트리쉐이킹을 통해 파일 크기를 가능한 줄이는 것이 최적화에 도움된다. 2. JavaScript 파일의 실행 시간 자바스크립트 파일 실행 과정 다운로드부터 필요한 경우에는 요청을 보내 파일을 다운받아 온 다음 압축을 해제한다. JavaScript ..

HTML, CSS 코드 최적화하기 HTML, CSS 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다. 1. HTML 최적화 방법 (1) DOM 가볍게 만들기 DOM트리가 깊고 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다. 복잡도가 클수록 DOM 트리가 변경되었을 때 개선해야 하는 것도 많아진다. HTML 요소에서 불필요하게 깊이를 증가시키는 요소가 있으면 삭제한다. // 수정 전 1st 2nd 3rd // 수정 후 : 불필요한 div 요소 제거 1st 2nd 3rd (2) 인라인 스타일 사용하지 않기 CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하는데, 인라인 스타일은 리플로우를 계속해서 발생시켜 파일 크기를 증가시킨다. 애초에 인라인 스타일은 웹 표준에 맞지 않으므로 지양해야한다..

최적화(Optimization) 의 개념 최적화는 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것을 의미한다. 컴퓨터 공학에서의 최적화: 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미한다. 웹 개발에서의 최적화: 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것을 의미한다. 최적화의 필요성과 효과 1. 이탈률 감소 최적화가 잘되지 않은 웹 페이지는 화면 로딩에 시간이 걸린다. 화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다. 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로 줄일 수 있다. 2. 전환율 증가 전환율이란, 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, ..

Memory 메모리 분류별 특성 CPU 와 가장 가까이 있는 레지스터 메모리, 캐시 메모리, 주기억 장치, 보조기억 장치는 각각 그 특성에 차이가 있다. 메모리 성능 메모리의 속도는 메모리가 CPU와 데이터를 주고받는 시간을 말한다. 이를 액세스라 부르며 단위는 ns(nano-second) – 10억분의 1초로써 메모리 속도의 기준이 된다. 메모리의 성능은 속도가 빠를 수록 성능이 좋다고 말한다. 리프레시 시간: 메모리는 일정 시간마다 재충전을 해줘야 하는데, 그렇지 않으면 정보는 사라지게 된다. 이 일정기간을 리프레시 시간이라고 합니다. 이는 메모리에서 한번 읽고 나서 다시 읽을 수 있는 사이 시간을 말한다. 메모리 액세스 시간: 메모리 액세스 시간은 데이터를 읽어오라는 명령을 받고 데이터를 읽기 ..

문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 입출력 예 arr1 arr2 return [[1,2],[2,3]] [[3,4],[5,6]] [[4,6],[7,9]] [[1],[2]] [[3],[4]] [[4],[6]] https://school.programmers.co.kr/learn/courses/30/lessons/12950 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기..

컴퓨터의 구조 및 기능 컴퓨터는 입력장치(Input), 출력장치(Output) 내부에는 연산을 하기 위한 중앙처리장치(CPU), 저장을 하기 위한 주 기억장치와 보조 기억장치를 가지고있다. 1. 입력 장치 입력 장치는 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치다. 기본적으로는 키보드와 마우스에서부터, 스캐너와 타블렛, 혹은 조이콘 같이 컴퓨터에 연결하여 무언가를 입력할 수 있는 장치를 입력 장치를 말한다. 2. 출력 장치 출력장치는 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미한다. 가장 대표적인 출력장치는 모니터로, 컴퓨터에서 나오는 글자, 그림 등의 결과를 화면에 보여주는 장치이다. 모니터의 해상도는 화면에 나타나는 그림이나 글자의 선명도를..

React Hooks 1. react.lazy(), suspense 를 사용해서 동적으로 리소스 받아오기 react.lazy()와 suspense 는 같이 사용해야 한다. (앱의 볼륨이 작으면 속도감이 안 올 수 있다, 대형 프로젝트에서는 빠른 속도 체감할 수 있다.) 동적 import를 사용해서 받아오고, 받아온 것들을 suspens 컴포넌트 안에서 실행시킨다. App.js /* react 메소드 사용할 때 import React, { Suspense } from "react" 불러오기*/ import React, { Suspense } from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import useFetc..

Hook이란? Hook은 React 16.8에 새로 추가된 기능. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. Hook은 다르게 말하면 함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드를 의미한다. Hook은 클래스형 컴포넌트에서는 동작하지 않는다. function으로만 React를 사용할 수 있게 해주는 것이다. Hook 사용 규칙 1. 리액트 함수의 최상위에서만 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 예상한 대로 동작하지 않는다. 컴포넌트 안에는 useState나 useEffect 같은 Hook 들이 여러번 사용될 수 있는데 React는 Hook을 호출되는 순서로 저장 해놓는다..