실패 모음집

네트워크란? 노드와 링크가 서로 연결되어 있으며 리소스를 공유하는 집합 노드: 서버, 라우터, 스위치 등 네트워크 장치를 의미링크: 유선 또는 무선을 의미처리량과 지연시간좋은 네트워크란 많은 처리량을 처리하며, 지연 시간이 짧고, 장애 빈도가 적으며, 좋은 보안을 갖춘 네트워크처리량(throughput)링크 내에서 성공적으로 전달된 데이터의 양. 얼만큼의 트래픽을 처리했는지.많은 트래픽을 처리 == 많은 처리량을 가진다 단위는 bps(bits per second)처리량은 트래픽, 네트워크 장치 간의 대역폭, 네트워크 중간의 에러, 장치의 하드웨어 스펙에 영향을 받는다.대역폭: 주어진 시간 동안 네트워크 연결을 통해 흐를 수 있는 최대 비트 수트래픽특정 시점에 링크 내에 '흐르는' 데이터의 양ex. 서버에..

항상 HTTPS를 통해 GitHub를 연결하고 사용했었는데, SSH를 이용하는 방법도 알게 되어 소개합니다.GitHub과 같은 원격 저장소에 접근할 때 사용하는 주요 두 가지 방식은 HTTPS와 SSH입니다 HTTPS는 사용자의 GitHub 아이디와 비밀번호를 사용하여 인증하고,SSH는 사용자의 컴퓨터에서 생성된 SSH 키 쌍 (공개 키와 비밀 키)을 사용하여 인증하는 방식입니다이 두 방식은 모두 데이터 전송 시 보안을 제공하지만, 인증 방식과 설정 과정에서 차이가 있습니다HTTPSHTTPS 방식은 Git 저장소에 접근하기 위해 HTTP를 보안(SSL/TLS) 계층으로 감싼 것입니다HTTPS를 사용할 때는 GitHub 계정의 사용자 이름과 비밀번호(또는 토큰)를 사용하여 인증합니다 장점:설치가 간단하고,..

자바스크립트 라이브러리를 종합해서 제공하는 프레임워크는 많은 수의 자바스크립트 파일을 가집니다한 자바스크립트 프레임워크 내에 워낙 다양한 기능을 제공하는 파일들이 많기 때문입니다 여기서 해결해야 하는 문제는,이 많은 모듈들의 순서는 어떻게 처리할 것인가?모듈이 많아질수록 늘어나는 HTTP 요청으로 인한 오버헤드는 어떻게 해결할 것인가?등이 있습니다 유저가 웹 브라우저에서 하나의 웹 페이지를 볼 때 마다  수많은 파일들의 전체를 다 다운 받는다면컴퓨터는 과부하가 오게 되는데, 이럴때 번들러를 사용하면 됩니다  번들러: Bundle - 묶다번들러는 다수의 JS 파일을 하나의 JS 파일로 압축해 줍니다번들러를 사용하면 웹 페이지를 보여줄 때 다수의 JS 라이브러리 파일들을 하나의 JS 파일로 압축해서 보여줄 ..

자바스크립트 런타임 = 자바스크립트 엔진 + API 및 기타 라이브러리/바이너리자바스크립트는 웹 브라우저 뿐만이 아니라 다양한 환경에서 실행 될 수 있는데,이때 코드가 실행되는 환경을 런타임이라고 합니다 자바스크립트 런타임은 자바스크립트 엔진에 API 및 기타 라이브러리를 더한 것입니다자바스크립트로는 웹 브라우저, 웹 서버 둘 다 개발이 가능한데, 각각웹 브라우저(ex. Chrome) = 자바스크립트 엔진(V8) + Web APIs웹 서버(ex. Node.js) = 자바스크립트 엔진(V8) + Node APIs + LIBUV(비동기I/O)로 이루어져 있습니다자바스크립트 엔진의 종류V8(Chrome)SpiderMonkey(Mozilla Firefox)JavascriptCore(Apple Safari)Cha..

웹 개발을 배우는 이유웹 개발은 웹 브라우저와 웹 서버와 관련된 모든 것들을 개발하는 것을 통칭합니다웹은 핸드폰이나 노트북과 같은 머신에 국한되지 않고, 어디에서든지 적용이 가능합니다-> 웹브라우저는 어디든지 설치가 가능한 작은 가상의 머신(VM)이기 때문웹 개발이란?웹 개발이란 웹 페이지에 무엇인가를 보여주는 것입니다 Display things on a web page웹 페이지는 다음의 3가지 요소로 이루어져 있습니다웹 페이지의 구조를 다루는 HTML디자인을 다루는 CSS유저 인터랙션을 다루는 Javascript자바스크립트는 사용자의 입출력 데이터를 처리하고, 화면의 애니메이션을 그리는 등의 동적인 요소를 담당합니다프론트엔드는 이러한 웹 화면을 그리는 Rendering을 다룹니다..

기본자료형 & 참조자료형 기본 자료형 (Primitive Value) 문자열(String) immutable 숫자형(Number) 논리형(Boolean) undefined null BigInt Symbol 참조 자료형 (Referenct Value) 객체 mutable 기본자료형과 참조자료형이 어떻게 복사되는 지 알아봅시다 기본자료형의 복사 기본 자료형(문자열 ,숫자, 불린 값 등)은 변수에 데이터를 할당할 때 데이터 값이 할당이 됩니다 따라서 다른 변수에 이 변수를 할당하면 새 변수에 데이터 값을 복사해서 할당합니다 let flower = 'Rose'; let copy = flower; // 변수 flower의 데이터 "Rose"를 할당 > 이 상태에서 원래 변수의 값을 바꾸면 어떻게 될까요? flow..

객체(Object)란? 자바스크립트에서는 원시 타입을 제외한 나머지 모두가 객체입니다(함수나 배열도 객체입니다) JavaScript 내장 객체: 자바스크립트 엔진이 구동되는 시점에 바로 제공되고 어디에서나 사용이 가능(ex. Date, Number) 브러우저 내장 객체: Javascript가 구동되는 시점에 바로 사용이 가능한 객체(ex. BOM, DOM) 사용자 정의 객체: 사용자가 생성자 함수 또는 객체 리터럴로 생성한 객체 객체는 키(key)와 값(value) 한 쌍으로 구성된 속성(property)의 집합입니다 객체에는 하나 이상의 다양한 값들을 담을 수 있는데 이들 사이에 쉼표(,)로 구분을 해줍니다 Property(프로퍼티) var student = { firstName : "Judy", //..

실행 컨텍스트(Execution Context) 실행 컨텍스트란 코드가 실행 될 때 환경 정보들을 모아둔 객체입니다 실행 컨텍스트는 Last-In-First-Out인 Call Stack에 쌓아 올려지며 실행이 완료되면 빠지게 됩니다 코드의 환경과 순서를 보장합니다 Active Context: 전역 -> A 함수 -> B 함수 -> A 함수 Acitve한 컨텍스트는 콜스택 맨 위의 컨텍스트 입니다 현재 실행 컨텍스트에서 필요한 값을 찾고 없으면 하위 컨텍스트로 이동하며 전역 실행 컨텍스트까지도 찾지 못하면 에러를 발생시킵니다 실행 컨텍스트는 스택에서 제거되도 메모리에서 바로 제거되지 않는데, 추후에 참고해야 할 수도 있기 때문입니다 Garbage Collector가 지켜보다가 더 이상 사용되지 않으면 자동..

앞선 글에서 변수에 대해서 알아보았습니다 이번에는 좀 더 많은 일을 할 수 있게 해주는 함수에 대해 알아보도록 하겠습니다 함수란? 어떤 목적을 위한 일을 수행하는 코드의 집합입니다 함수를 쓰는 이유 코드의 재사용성: 동일한 함수를 여러 곳에서 호출하여 사용할 수 있습니다 모듈화: 프로그램을 더 작은 단위로 나눠서 복잡성을 줄일 수 있습니다 유지보수성: 유지보수를 하기 용이합니다 코드의 가독성: 함수의 이름을 보고 기능을 직관적으로 이해할 수 있습니다 테스트 용이성: 개별 테스트를 하기 용이합니다 함수 작성 방법 함수는 외부에서 변수를 넘겨받아 함수 내부에서 수행되는 연산에 사용할 수 있습니다 이때 넘겨 받는 변수를 매개 변수, 혹은 인자라고 합니다 더하기 함수라면 두개의 숫자를 인자로 넘겨받아 더하기 연..

앞서 여러 프로젝트를 진행한 결과 프론트엔드 웹 개발자로 진로를 정했고, 나에게 없는 기초를 튼튼히 다져야겠다는 생각이 들어 [SK플래닛] 웹 풀스택 개발자 과정 ASAC과 함께 자바스크립트, 리액트, 스프링부트 공부과정을 블로그에 작성하기로 결심했다. 풀스택이지만, 어느 한쪽을 얕게 공부하지 않는 빡센 커리큘럼이라고 한다. 4개월 동안 교육을 듣고 블로그에 작성하는 이 시간들을 통해 유의미한 결과가 도출되기를!!😎 자바스크립트란? 자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어 자바스크립트의 역할은 웹페이지에서 다양한 기능을 구현하는 것입니다 예시로 애니메이션 동작, 팝업 띄우기, 사용자에게 문자 입력을 받기 등이 있습니다 *자바와는 아무런 연관이 없습니다^^ 자바스크립트는 미..