Study 200

[JavaScript] Redux 사용법

Redux란? Redux는 JavaScript 상태 관리 라이브러리라 JavaScript든 React든 잘 어울린다. 초기 설정 JavaScript에서 Redux를 사용하려면 따로 설정할 게 없다. React에서 Redux를 사용하려면 index.js에 App.js를 Provider 컴포넌트로 감싸 앱의 다른 컴포넌트에서 store를 사용할 수 있도록 해야한다. import { Provider } from "react-redux"; import store from "./store"; // state가 저장되어 있는 store 파일 위치 ReactDOM.render( , document.getElementById("root") ); 메소드 useSelector() : state 데이터 읽기 useSelec..

[TypeScript] type와 interface의 차이, class

Class 추상(abstract) 클래스 오직 다른 클래스가 상속받을 수 있는 클래스이지만 직접 새로운 인스턴스를 만들 수는 없다. 추상(abstract) 메소드 추상 클래스 내에서는 메소드를 적지 않고 call signature만 작성해야한다. 추상 클래스를 상속받는 클래스들이 반드시 구현(implement)해야하는 메소드이다. 접근 가능한 위치 private : 해당 클래스 내에서만 접근 가능, 자식 클래스에서도 접근 불가 protected : 해당 클래스와 자식 클래스에서 접근 가능 public : 기본값, 모든 클래스에서 접근 가능 상속 방법 : extends abstract class User{ constructor( private firstname : string, private lastnam..

[TypeScript] call signatures, 오버로딩, 다형성, 제네릭

호출 시그니처(Call Signatures) 프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있다. Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정하여 이 함수가 어떻게 호출되는지 설명해주는 부분을 말한다. const add = (a : number, b : number) => a + b; // 위의 코드에서 a와 b의 타입 지정을 하고 싶지 않다면 call signature 타입을 만들어 사용 // call signature 타입 사용 후 type Add = (a : number, b : number) => number; // call signature const add : Add = (a, b) => a +..

[TypeScript] 타입스크립트의 타입 별칭(type alias)

type 특정 값이나 객체의 값에 대한 타입을 지정해줄 수 있다. 특징 Type alias(타입에 대한 별명)를 만들어줄 수 있다. 타입을 특정한 값을 가지도록 제한할 수 있다. 타입 별칭(Type Alias) object의 타입을 명시적으로 정해주는 방법이며 type 키워드를 사용해서 타입에 이름을 설정해서 사용한다. // Alias 사용 전 const player : { name: string, age?: number } = { name: "name" } // Alias 사용 후 type Age = number; type Player = { name: string, age?: Age } const player : Player = { name: "name", } 아래는 함수에서 return 타입을 지정..

[TypeScript] 타입스크립트는 왜 좋은 프로그래밍 언어일까?

Typescript 를 쓰는 이유 Javascript는 개발자가 실수를 피할 수 있도록 만들어져 있지 않다. “[] + true”와 같은 말도 안되는 코드를 작성해도 Javascript에선 실행 가능 함수를 실행할 때 필요한 argument의 개수가 달라도 Javascript에선 실행 가능 객체 안에 존재하지 않는 함수를 호출 가능 ⇒ 코드가 실행되고 나서야 에러 메시지 확인 가능해서 사용자에게 에러 메시지를 보여줄 수 있기 때문에 코드 실행 전에 이런 에러를 잡기 위해 Typescript를 사용한다. 어떻게 Typescript가 에러를 발생시킬까? Typescript는 프로그래밍 언어로서 브라우저는 Typescript가 아닌 Javascript를 이해하기 때문에 Typescript로 작성한 코드가 Ja..

[프론트엔드] 호이스팅(Hoisting) 이란?

호이스팅이란? 호이스팅은 코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아닌 끌어올려진 것 같은 현상을 말한다. 잘 이해가 안된다면 다음의 예제를 보자. console.log(a); // undefined var a = "A"; // var 변수 위와 같은 코드를 호이스팅을 한 코드로 보면 아래와 같다. var a; // 초기화 console.log(a); // 호출 a = "A"; // 선언 변수 호이스팅을 알아보기 전, 변수 생성 단계를 알아보자. 변수 생성 단계 변수는 3단계에 걸쳐 생성된다. 1단계: 선언 단계(Declaration phase) 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. 2단계: 초기화 단계(In..

[네트워크] OSI 7 Layer

OSI 7 계층이란? OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말하며 개방형 시스템 상호 연결 모델의 표준입니다. 실제 인터넷에서 사용되는 TCP/IP 는 OSI 참조 모델을 기반으로 상업적이고 실무적으로 이용될 수 있도록 단순화한 것입니다. 탄생 배경 초기 여러 정보 통신 업체 장비들은 자신의 업체 장비들끼리만 연결이 되어 호환성이 없었습니다. 모든 시스템들의 상호 연결에 있어 문제없도록 표준을 정한 것이 OSI 7계층입니다. 표준(호환성)과 학습도구에 의미로 제작했습니다. OSI 7 계층을 나눈이유는? 계층을 나눈 이유는 통신이 일어나는 과정이 단계별로 파악할 수 있기 때문이다. 흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽고, 7단계 중 특정한 곳에 이상이 생기..

CS/네트워크 2023.12.10

[컴퓨터구조] 컴퓨터 하드웨어 구성

컴퓨터 시스템은 하드웨어와 소프트웨어로 구성된다. 하드웨어: 데이터를 처리하는 물리적인 기계장치 소프트웨어: CPU에게 어떤 작업을 지시하는 명령어로 작성된 프로그램 그리고 운영체제 (OS, Operating System)은 컴퓨터 하드웨어를 관리하는 소프트웨어이다. 컴퓨터 하드웨어는 크게 프로세서, 메모리(기억장치), IO 장치로 구성되고, 이들은 시스템 버스로 연결된다. 하드웨어 실체가 있는(시각적으로 보이면서도 만질 수 있는), 컴퓨터의 모든 물리적인 부품을 통틀어 의미한다. ※ 예를 들어, Windows를 사용하기 위한 노트북 혹은 Android/iOS 사용을 위한 스마트폰, 그 외 모니터, 키보드 마우스 등이 모두 하드웨어 IT 기업은 대고객 서비스를 위한 엔터프라이즈 급의 고성능 하드웨어를 주..

CS/컴퓨터구조 2023.12.08

[컴퓨터구조] 시스템 프로그래밍

시스템 프로그래밍(System Programming)이란? 시스템 프로그램은 컴퓨터 시스템을 동작시키는 또는 활용하는 소프트웨어 개발 프로그램을 말한다. Windows 운영체제 기반의 컴퓨터에게 일을 시키기 위한 프로그램을 구현하는 것으로 하드웨어를 사용할 수 있도록 도와주는 프로그램이다. 예로 Windows, Unix 와 같은 운영체제들이 있다. Windows나 UNIX와 같은 운영체제에서 제공하는 라이브러리(운영체제의 기능을 활용할 수 있는 시스템 함수들의 집합)를 사용하여 프로그램을 개발하는 개발자들도 시스템 프로그래머라고 부를 수 있다. 또한 어셈블리 언어나 C 언어를 이용하여 하드웨어를 직접 컨트롤하는 개발자들도 시스템 프로그래머라고 부른다. 시스템 프로그래밍의 폭 넓은 정의 → 특정 운영체제 ..

CS/컴퓨터구조 2023.12.05

[Network] REST API

REST(Representational State Transfer) REST이란 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미한다. 즉, 자원의 표현(representational)에 의한 상태 전달(State Transfer)을 말한다. 이때 자원이란 해당 소프트웨어가 관리하는 모든 것을 말하며 자원의 표현은 그 자원을 표현하기 위한 이름을 뜻한다. 예로 DB의 학생 정보가 자원일 때, 'students'를 자원의 표현으로 정하는 예가 있다. 상태(정보) 전달이란 데이터가 요청되어지는 시점에 자원의 상태(정보)를 전달하는 것을 말하며 JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다. 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹..

CS/네트워크 2023.12.04