본문 바로가기

전체 글233

콜백 함수 콜백 함수(callback function)란? 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수Higher-Order Function, HOF //고차 함수 function repeat(n, f){ for(var i = 0 ; i 고차 함수는 콜백 함수를 자신의 일 부분으로 합성한다. -> 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한.. 2023. 3. 12.
타입 변환과 단축 평가 타입 변환이란? 명시적 타입 변환(explicit coercion) - 개발자가 의도적으로 값의 타입을 변환하는 것 - 타입 캐스팅(type casting)이라 한다. var x = 10; // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); // string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x): // number 10 암묵적 타입 변환(implicit coercion) - 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. - 타입 강제 변환(type coercion)이라 한다.. 2023. 3. 10.
객체 객체란? 자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체이다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입(object/reference type)은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조data structure이다. 원시 타입의 값 - 변경 불가능한 값(immutable value) 객체 타입의 값 - 변경 가능한 값(mutable value) 객체는 프로퍼티의 집합 객체이 프로퍼티와 메서드 } 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(be.. 2023. 3. 10.
DOM DOM(Document Object Model)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작 할 수 있게끔 연결시켜주는 역할을 담당한다. DOM(문서 객체 모델)은 어떻게 생성되고 어떻게 보여질까? DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM, 혹은 HTML DOM Tree로 부르기도 한다. 트리 자료구조는 노드들의 계층 구조.. 2023. 3. 8.
JSX JSX란? const element = Hello, world!; - 위에 태그 문법은 문자열도, HTML도 아니다. - JSX라 하며 JavaScript를 확장한 문법이다. - JavaScript의 모든 기능이 포함되어 있다. - JSX는 React "엘리먼트(element)"를 생성한다. React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식)과 연결된다는 사실을 받아들입니다. JSX에 표현식 포함하기 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper',.. 2023. 3. 7.
State and LifeCycle(생명주기) element 렌더링을 이용한 째깍거리는 시계 예시 const root = ReactDOM.createRoot(document.getElementById('root')); function tick(){ const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); Clock 컴포넌트를 만들어서 완전히 재사용 하고 캡슐화 하는 방법 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props){ return( Hello, world! It is {prop.. 2023. 3. 7.
컴포넌트(Components) 함수 컴포넌트 - 컴포넌트를 정의하는 가장 간다한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props){ return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트 이다. JavaScript 함수이기 때문에 말 그대로 "함수 컴포넌트"라고 호칭한다. 클래스 컴포넌트(ES6 class 사용) class Welcome extends React.Component{ render() { return Hello, {this.props.name}; } } 컴포넌트 렌더링 function Welcome(props) { .. 2023. 3. 4.
element(엘리먼트) element(엘리먼트) - 엘리먼트는 React 앱의 가장 작은 단위 이다. - 엘리먼트는 화면에 표시할 내용을 기술 한다. const element = Hello, world; - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다. - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링 하기 - HTML 파일 어딘가에 가 있다고 가정 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. - React를 기존 앱에 통합하려는 경우 원하는 만.. 2023. 3. 4.
라우터 라우터란? - 라우터는 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를 지정하며 이 경로를 따라 데이터 패킷을 다음 장치로 전향시키는 장치 이다. 이때 최적의 경로는 일반적으로는 가장 빠르게 통신이 가능한 경로이므로, 이것이 최단 거리 일수도 있지만, 돌아가는 경로라도 고속의 전송로를 통하여 전달이 되는 경로가 될 수 있다. 즉 라우터(Router)는 이름 그대로 네트워크와 네트워크 간의 경로 (Route)를 설정하고 가장 빠른 길로 트래픽을 이끌어주는 네트워크 장비이다. 라우터의 기능 - 네트워크와 네트워크를 연결함 - NAT(Network Address Translation) - 방화벽 - VPN(Virtual Private Network) - QoS(Quality of Service) 2023. 3. 4.
자바스크립트 자바스크립트(JavaScript)란? - 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. - 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부른다. - 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. - 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성 할 수 있고, 실행 할 수있다. 왜 자바스크립트인가? - 처음 자바스크립트가 만들어졌을 대는 'LiveScript'라는 이름으로 불렸다. - 처음 만들어질 당시에 자바의 인기가 아주 높은 상황이었다. - 관련인들이 자바스크립트를 자바의'동생' 격인 언어로 홍보하면 도움이 될 것이라는 사결정을 내리고 이름을 교체했다. - 이름은 자바에서 차용해 왔지만, 자바.. 2023. 3. 2.
문자열 압축 문자열 압축 설명 알파벳 대문자로 이루어진 문자열을 입력받아 같은 문자가 연속으로 반복되는 경우 반복되는 문자 바로 오른쪽에 반복 횟수를 표기하는 방법으로 문자열을 압축하는 프로그램을 작성하시오. 단 반복횟수가 1인 경우 생략합니다. 입력 첫 줄에 문자열이 주어진다. 문자열의 길이는 100을 넘지 않는다. 출력 첫 줄에 압축된 문자열을 출력한다. 예시 입력 1 KKHSSSSSSSE 예시 출력 1 K2HS7E package ez.prac; public class S11 { public String solution(String s){ String answer = ""; s = s + " "; int cnt = 1; for (int i = 0; i < s.length() - 1; ++i) { //문자열의 i번.. 2023. 3. 1.
폴트 톨러런트(Fault tolerant)와 로드 벨런싱(Load balancing) 폴트 톨러런트(Fault tolerant)란? - 네트워크 상에 어떤 문제가 발생할 때를 대비해서 미리 장애 대비를 해놓는 것을 말한다. ex) PC방 구성이 라우터 한대와 스위치 몇 대로 구성되어 있다고 가정 할 때 만약 라우터가 고장 난다면? -> 인터넷 회선이 살아있어도 사용자들은 인터넷을 사용 할 수가 없다. 만약 라우터가 두 대라면? -> 하나의 라우터가 죽었을 때를 대비해서 다른 한 대를 가지고 있으면 고장난 라우터를 대체 할 수 있다. ->이 개념이 폴트 톨러런트(Fault Tolerant) -> 그냥 라우터를 한 대 더 가지고 있다가 고장나면 교체하는 것이 아니라, 라우터 두대로 네트워크를 구성한 후 한대가 죽었을 때 자동으로 다른 라우터의 역할을 수행하는 것이 진정한 의미의 폴트 톨러런트.. 2023. 3. 1.
TCP/IP TCP/IP(Transmission Control Protocol/Internet Protocol - 인터넷을 사용하기 위해 꼭 필요한 프로토콜 IP(Internet Protocol) - 이 세상에서 나만을 위한 유일한 것 - IP 공인 주소를 나눠주고 관리해주는 기관 NIC(Network Information Center) - 2진수 8자리 4묶음, 10진수(0~255) 네 자리 2023. 3. 1.
바인딩(binding) 바인딩(binding)이란? - 컴퓨터 프로그래밍에서 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(bind) 상태가 되는 것 - 프로그램 내에서 변수, 배열, 라벨, 절차 등의 명칭, 즉 식별자(identifier)가 그 대상인 메모리 주소, 데이터형 또는 실제 값으로 배정되는 것 - 원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩을 정적 바인딩(static binding) - 프로그램의 실행되는 과정에서 바인딩 되는 것을 동적 바인딩(dynamic binding) - 프로그래머가 코딩을 해서 컴파일을 하게 되면 프로그래머가 값을 변경할 수 없는 상태가 된는 것 - 메모리에 값을 할당하는 것 또한 바인딩이라고 할 수 있다. => 바인딩 이란 프로그램의 어떤 기본 단위가 가질 수 있는 구성.. 2023. 2. 28.
동기와 비동기 개념과 차이 동기(Synchronous : 동시에 일어나는) - 동기는 말 그대로 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이다. - 바로 요청을 하면 시간이 얼마나 걸리던지 요청한 자리에서 결고가 주어져야 한다. - A노드와 B노드 사이의 작업 처리 단위(Transaction)를 동시에 맞추겠다. 비동기(Asynchronous : 동시에 일어나지 않는) - 비동기는 동시에 일어나지 않는다를 의미한다. 요청과 결과가 동시에 일어나지 않을거라는 약속이다. - 요청한 그 자리에서 결과가 주어지지 않음 - 노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다. 동기와 비동기 각각의 장단점 동기 방식 장단점 - 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 한다.. 2023. 2. 28.

티스토리툴바