전체 글
-
2022.08.12 Section 4 컴퓨터 공학 기초(2)기타 2022. 8. 12. 04:02
운영체제 운영체제의 목적 및 기능 운영체제의 목적은 처리능력 향상, 사용 가능도 향상, 신뢰도 향상, 반환 시간 단축 등에 있으며 이런 운영체제의 기능은 여러 가지가 있다. 프로세서, 기억장치, 입출력장치, 파일 및 정보 등의 자원을 관리 자원을 효율적으로 관리하기 위해 자원의 스케줄링 기능 제공 사용자와 시스템 간의 편리한 인터페이스를 제공 시스템의 각종 하드웨어와 네트워크를 관리하고 제어 운영 체제의 시스템 자원 관리 운영체제가 없다면 응용 프로그램이 실행될 수 없다. 응용 프로그램은 컴퓨터를 이용해 다양한 작업을 하는 것이 목적이고 운영체제는 응용 프로그램이 하드웨어에게 일을 시킬 수 있도록 도와주는 역할을 한다. 하드웨어를 구성하는 CPU, 자료를 저장하는 RAM, 디스크 등의 시스템 자원을 관리..
-
2022.08.09 Section 4 컴퓨터 공학 기초기타 2022. 8. 9. 04:53
컴퓨터 구조 컴퓨터의 기본 구성요소는 입력장치, 출력장치, 중앙처리장치, 주 기억장치, 보조 기억장치를 가지고 있다. 입력장치 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치이며 입력 장치에는 다양한 물리적인 장치가 존재한다. 기본적으로는 키보드와 마우스 혹은 조이콘 같이 컴퓨터에 연결하여 무언가를 입력할 수 있는 장치를 입력 장치라고 볼 수 있다. 출력장치 출력장치는 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치를 의미하며 가장 대표적인 출력장치는 모니터로 컴퓨터에서 나오는 글자, 그림 등의 결과를 화면에 보여주는 장치이다. 모니터의 해상도는 화면에 나타나는 그림이나 글자의 선명도를 결정하는 요소인데 실제 화면의 해상도는 모니터와 그래픽 카드에 의해 결..
-
2022.08.07 Section 4 useMemo, useCallbackReact 2022. 8. 7. 03:11
useMemo 시작하기에 앞서 컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링 될 때마다 리렌더링을 하는 구조로 이루어져 있는데 너무 잦은 리렌더링은 앱에 좋지 않다는 것을 전에 블로깅한 적이 있다. React Hook은 함수 컴포넌트가 상태를 조작 및 최적화 기능을 사용할 수 있게 만드는 메소드이며 그 중 렌더링 최적화를 위한 Hook도 존재하는데, useMemo와 useCallback이 바로 그 역할을 해주는 Hook이다. useMemo란? useMemo는 특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다. function Calculator({value}){ const result = calculate(value); return {result} ; } 해당 컴포넌트는 p..
-
2022.08.05 Section 4 Virtual Dom, React Diffing AlgorithmReact 2022. 8. 5. 02:26
Virtual Dom 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. 저번에 배웠던 DOM을 Real DOM 이라고 부르는 이유는 Virtual DOM과 구분하기 위해서이다 ! Real DOM (DOM) Virtual DOM이 나오게 된 배경을 보기 전에 DOM의 개념을 다시 정리해 보자면 DOM은 Document Object Model의 약자로 문서 객체 모델을 의미하는데 여기서 문서 객체란 브라우저가 JavaScript와 같은 스크립팅 언어가 , , 와 같은 태그들에 접근하고 조작할 수 있도록 태그들을 트리 구조로 객체화 시킨 것을 의미한다. 한마디로 DOM은 브라우저가 트리 구조로 만든 객체 모델 이렇게 트리 구조로 DOM 객체가 이뤄져 있기에 JS는 쉽게 DOM 객체..
-
2022.08.01 Section 4 번들링과 웹팩React 2022. 8. 2. 03:14
번들링과 웹팩 번들링이란? 사용자에게 전달할 파일을 묶어주는 과정 웹팩이란? 여러개의 파일을 하나의 파일로 합쳐줌 HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구 웹팩의 필요성 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위해서이다. 웹페이지를 구성하는 코드의 양이 많은 것을 “무겁다”라고 표현하는데 이것이 무거울수록 웹 페이지의 로딩 속도와 성능은 저하가 되기에 일반적으로 유저는 하나의 웹사이트에 접근하는 순간부터 3초 이내에 웹페이지가 뜨지 않으면 굉장히 많은 수가 더는 기다리지 않고 이탈을 선택하기 때문이다. 1. entry 코드의 시작점 module.exports = { ... entry: "./src/index.js"..
-
2022.07.25 Section 4 HTML 심화HTML 2022. 7. 26. 23:29
브라우저의 특징 및 웹 동작 원리 브라우저끼리 조금씩 그 특징이 다르지만 공통점이 하나 있다. 바로 "동작 방식"인데 브라우저는 사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식으로 동작한다. 여기서 자원은 주로 HTML 문서이나 가끔 PDF, 멀티미디어 등 다른 형태일 수 있으며 자원의 주소는 URI(Uniform Resource Identifier)로 되어 있다. 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력하면 DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색하고 해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달 ! 이..
-
2022.07.22 Section 3 기술면접 + 회고기타 2022. 7. 22. 03:10
기술면접 💡 ** 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요.** 재귀를 활용하기 좋은 상황은 크게 두 가지가 있습니다. 첫 번째는 주어진 문제를 비슷한 구조의 더 작은 문제로 나눌 수 있는 경우입니다. 예시로는 피보나치 수열의 n번째 수를 구하는 문제가 있습니다. 피보나치 수열의 n번째 수는 n-1번째 수와 n-2번 째 수를 합한 값입니다. 몇 번째 수를 구하든 동일한 구조의 작은 문제로 나눌 수 있는 구조인 것입니다. 이런 상황에서 재귀를 활용하면 간결한 코드로 문제를 해결할 수 있습니다. 두 번째는 중첩된 반복문이 많거나 반복문의 중첩 횟수를 예측하기 어려운 경우입니다. 예시로는 객체를 문자열로 바꾸는 함수가 있습니다. 객체는 배열이나 객체도 담을 수 있으며, 얼마나 중첩되 어 ..
-
2022.07.18 Section 3 - Unit 5 - [사용자 친화 웹] WAI-ARIA기타 2022. 7. 19. 00:16
WAI-ARIA WAI-ARIA의 필요성 앞서 시맨틱 HTML을 학습하면서 HTML 요소에 의미를 부여한 시맨틱 요소를 사용하는 것만으로도 웹 접근성을 향상시킬 수 있었는데 WAI-ARIA는 HTML 요소에 추가적으로 의미를 부여할 수 있게 해주기 때문에 보조적으로 사용하면, 웹 접근성을 향상시킬 수 있다. 다음과 같은 상황에서 WAI-ARIA를 사용하면 웹 접근성을 효과적으로 향상시킬 수 있습니다. 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여해 더 원활하게 페이지를 탐색 할 수 있음 ‘시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황’이라는 것은 시맨틱 요소만으로 충분한 상황에서는 WAI-ARIA를 사용하지 않아야 한다는 의..