Front end

Front end/TypeScript

[ TypeScript ] 타입스크립트의 연산자 활용 타입이란 ?

타입스크립트의 연산자 활용 타입에 대해 알아봅시다~! 유니온(Union) 타입 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입이다. 예를 들어, number | string 은 숫자 또는 문자열 타입을 의미한다. function logText(text: string | number) { // ... } 유니온 타입을 사용해 TypeScript의 이점을 살리면서 코드를 작성해보자. function printValue(value: number|string): void { if (typeof value === "number") { console.log(`The value is a number: ${value}`); } else { console.log(`The value is a s..

Front end/TypeScript

[ TypeScript ] 타입스크립트의 함수란 ?

타입스크립트의 함수에 대해 알아봅시다~! ➿ TypeScript 함수 TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다. 함수 선언 //named function (기명 함수) function add(x: number, y: number):number { return x + y; } //named function (기명 함수) : 추론된 리턴 타입 function add(x: number, y: number) { return x + y; } //arrow function (화살표 함수) let add = (x: number, y: number): number => { return x + y..

Front end/TypeScript

[ TypeScript ] 타입스크립트의 타입이란 ?

타입스크립트의 타입에 대해 알아봅시다~! ➿ TypeScript 타입 1. Boolean(불리언) 타입 let isShow: boolean = true; let isDone: boolean = false; 2. Number(숫자) 타입 let number1: number = 5; let number2: number = 0.7; 3. String(문자열) 타입 let firstName: string = "coding"; let lastName: string = 'kim'; let longString: string = `Kimcoding is a developer. He is 20 years old.` 4. Array(배열) 타입 배열 타입은 기본적으로 하나의 타입만 작성하게 되어 있으며, 타입을 혼용해서 ..

Front end/TypeScript

[ TypeScript ] 타입스크립트는 왜 why 등장한걸까 ?

JavaScript는 모든 브라우저에서 보편적으로 지원되는 유일한 클라이언트 측 언어이다. 그렇기 때문에 JavaScript로 웹 애플리케이션의 상호작용이 증가하면서, 웹 애플리케이션이 필요로 하는 JavaScript 코드의 양이 폭발적으로 늘어나게 되었고 이로 인해 JavaScript의 한계가 부각되기 시작했다. JavaScript는 동적 타입이 결정되어 유연하고, 다양한 라이브러리와 프레임워크를 사용할 수 있는 장점이 있지만, 타입의 명시성이 부족하다는 단점이 있다. 따라서 , TypeScript(타입스크립트)는 JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었다. ex..

Front end/TypeScript

[ TypeScript ] TypeScript 프로젝트 환경 구성하기

타입스크립트를 쓰기 위해 세팅하는 이유 : Node.js는 TypeScript를 이해하지 못하기 때문에 TypeScript를 JavaScript로 컴파일해줘야 함 1. 새로운 프로젝트 초기화 - 터미널 & 비주얼 스튜디오 터미널 npm init -y 2. 타입스크립트 라이브러리 전역 설치 npm install typescript -g 3. tsconfig.json 파일 생성 최상위 위치에서 tsconfig.json 파일 생성 👇🏻 tsconfig.json 파일안에 코드 삽입 여기까지 진행하면 src 폴더 안의 파일에서 타입스크립트 언어로 된 파일을 작성할 수 있다. { "compilerOptions": { "target": "es6", "module": "commonjs", "sourceMap": tru..

Front end/개발 지식

[ 네트워크 ] HTTP / HTTPS 특징

HTTP 특징 클라이언트 서버 구조 무상태 프로토콜, 비연결성 무상태 프로토콜 장점 : 서버 확장성 높음 / 단점 : 클라이언트가 추가 데이터 전송 비 연결성 요청을 주고받을 때만 연결을 유지, 응답을 주고 나면 TCP/IP 연결을 끊음으로써 최소한의 자원으로 서버 유지가 가능 HTTP 메세지 단순함, 확장가능 HTTP Headers의 종류와 특징 표현 헤더 HTTP 메시지 : 헤더 / 바디로 구분이 가능 HTTP 바디 : 데이터 메시지 본문을 통해서 표현 데이터를 전달한다. 페이로드 : 데이터를 실어 나르는 부분 📷 표현 헤더 형식 주요 요청 헤더 From: 유저 에이전트의 이메일 정보 Referer: 이전 웹 페이지 주소 User-Agent: 유저 에이전트 애플리케이션 정보 Host: 요청한 호스트 ..

Front end/개발 지식

[네트워크] 심화 알아보기

인터넷 프로토콜 IP는 출발지와 목적지의 정보를 IP 주소라는 특정한 숫자값으로 표기하고 패킷단위로 데이터를 전송하는 것 패킷교환 방식 패킷이라는 단위로 데이터를 잘게 나누어 전송하는 방식 특정 회선이 전용선으로 할당되지 않기 때문에 빠르고 효율적으로 데이터를 전송할 수 있다. IP/IP Packet IP는 지정한 IP 주소(IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달한다. IP 패킷에서 패킷은 pack과 bucket이 합쳐진 단어이다. / IP 패킷은 이를 데이터 통신에 적용한 것 IP한계 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 클라이언트는 서버의 상태를 파악할 방법이 없기 때문에 패킷을 그대로 전송 비신뢰성 중간에 있는 서버가 데이터를 전달하던 중 장애가..

Front end/개발 지식

[사용자 친화 웹] 웹 표준 & 접근성

웹이란 공간으로 정의가 가능 문서,이미지,영상 등 다양한 정보를 여러사람들과 공유할 수 있는 공간 웹 표준이란, W3C(World Wide Web Consortium)에서 권고하는 ‘웹에서 표준적으로 사용되는 기술이나 규칙’이다. 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹페이지 제작 기법을 담고 있음 HTML, CSS, JavaScript 등의 기술을 다룸 (화면의 구조,표현,동작을 각각 담당) 웹 표준 장점 유지 보수의 용이성 영역이 분리되면서 유지 보수가 용이해졌고, 코드가 경량화되면서 트래픽 비용이 감소하는 효과 웹 호환성 확보 웹 표준을 준수하여 웹 사이트를 제작하면 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 ..