TypeScript로 객체지향 프로그래밍하기 class class Player { constructor( private firstName: string, private lastName: string, public nickname: string ) {} } const nico = new Player("nico", "las", "니꼬") 타입스크립트에서 이렇게 constructor의 타입을 선언해주면 자바스크립트에서 this.firstName = firstName; 이 부분을 따로 안 해주어도 된다. 이 부분이 자동적으로 컴파일 되어서 편리하다! 하지만 이렇게 class 내에서 private, public 등의 설정은 타입스크립트 내의 기능이기 때문에 자바스크립트로 컴파일되지 않는다. 추상 클래스(Abstr..
call signatures :함수 위에 마우스를 올렸을 때 보게 되는 것, 함수가 어떻게 호출되는지 알려준다. 인자의 타입과 함수의 반환 타입을 알려주는 것 call signature 선언하기 type Add = (a: number, b:number) => number; //call signature 선언 const add: Add = (a, b) => a+b 이렇게 콜 시그니처를 선언해두고 사용하면 함수를 선언할 때 인자나 리턴 값이 타입을 말해줄 필요가 없다. 오버 로딩(overloading) =function overloading = method overloading :서로 다른 여러 개의 call signatures를 가지고 있을 때 발생 type Add = { (a: number, b:numb..
Typescript로 블록체인 만들기 – 노마드 코더 Nomad Coders Typescript로 블록체인 만들기 – 노마드 코더 Nomad Coders Typescript for Beginners nomadcoders.co 노마더코더의 타입 스크립트 무료 강의와 챌린지를 진행하며 작성하는 글입니다! 타입 스크립트는 왜 존재하는가? :타입 안정성 때문에! 자바스크립트에선 개발자의 코드를 보호하지 않고 개발자의 코드를 최대한 이해하려 했다면! 타입 스크립트에선 최대한 오류를 막기 위해 보호하는 조치가 설정되어 있다. 타입 스크립트로 작성한 코드는 자바스크립트 코드로 컴파일되는데, 자바스크립트 코드로 컴파일되기 전에 코드를 확인한 후 타입 등에 이상이 없으면 그 후에 컴파일된다. 즉, 타입스크립트 코드에 에..
https://myhappyman.tistory.com/13 Javascript - 슬라이드쇼(SlideShow) 만들기 인터넷을 하다보면 여러 광고 사이트 또는 화장품, 쇼핑몰 등에서 흔하게 이미지가 하나하나 넘어가면서 상품이나 기술등을 나열한 모습들을 볼 수 있다. - 좌, 우버튼에 따른 이동 - 하단부 myhappyman.tistory.com 위 블로그 글을 바탕으로 원하는 부분을 변경하였습니다. 슬라이드 쇼를 만들 때 주로 사용하는 방법은 가로로 이어서 원하는 부분을 %로 변경하며 나타나게 하는 방법이다. 하지만! 굳이 이미지를 가로로 잇지 않고 해당하는 부분은 나타나게 하고 아닌 부분은 display를 none으로 해도 가능하지 않을까? 생각했고 그거에 해당하는 방법을 위 블로그에서 찾았다!..
2계층이 하는 역할 :가까이 있는 컴퓨터, 즉 로컬 네트워크에서 어떻게 통신하는가? : 하나의 네트워크 대역 즉, 같은 네트워크 상(LAN 대역)에 존재하는 여러 장비들 중에서 어떤 장비가 어떤 장비에게 보내는 데이터를 전달하는지 -추가적으로 오류제어, 흐름제어 수행 -보내는 데이터가 오류가 있는지 없는지 : 오류제어 -누가 누구에게 데이터를 보내는지 : 흐름제어 2계층의 네트워크 크기 :2계층은 하나의 네트워크 대역 LAN에서만 통신할 때 사용한다. -다른 네트워크 대역과 통신할 때는 항상 3계층이 도와주어야 한다. -3계층의 주소와 3계층의 프로토콜을 이용하여야만 다른 네트워크와 통신이 가능하다. 2계층에서 사용하는 주소 MAC 주소 :LAN에서 통신할 때 사용하는 주소 -다른 말로 물리적인 주소라고..
props와 state의 차이점 props는 read-only이지만 state는 setState를 통해서 수정이 가능하다. 예를 들어, 현재 Content라는 컴포넌트를 사용하는 APP.js 에서는 title이라는 props를 통해 값을 주입할 수 있다. 하지만 Content 내부에서 title 값을 hi로 바꾸려고 하면 에러가 발생하게 된다. 이렇게 컴포넌트 안에서 자신에게 전달된 props 값을 바꾸는 것은 금지되어있다! 컴포넌트 밖에서만 props를 바꾸는 것이 허용되기 때문에 props가 수정할 수 없는 read-only라는 것! props와 이벤트 위에 있는 동그라미는 상위 컴포넌트, 아래 동그라미는 하위 컴포넌트이다. 지금까지 만든 컴포넌트로 따지면 상위 컴포넌트는 App.js, 하위 컴포넌트..
네트워크 모델 TCP/IP 모델 :네트워크에서 데이터 전송 시 컴퓨터 내부에서 하는 일들을 4계층으로 나눈 것. 4계층 응용 3계층 전송 2계층 네트워크 1계층 네트워크 인터페이스 OSI 7계층 :네트워크 통신을 체계적으로 다루는 ISO에서 표준으로 지정한 모델 :데이터를 주고받을 때 데이터 자체의 흐름을 각 구간별로 나눠 놓은 것 :네트워크에서 데이터 전송 시 컴퓨터 내부에서 하는 일들을 7계층으로 나눈 것. ▷OSI 7계층 모델의 계층별 프로토콜 7계층 응용 HTTP, SMTP, IMAP, POP, SNMP, FTP, TELNET, SSH 6계층 표현 SMB, AFP, XDR 5계층 세션 NetBIOS 4계층 전송 TCP, UDP, SPX 3계층 네트워크 IP, ICMP, IGMP, X.25, CLN..
props, state, event 3개가 서로 상호작용하며 애플리케이션의 역동성을 만든다. !목표! WEB을 누르면 welcome 메시지가, 각 목차를 누르면 그에 해당하는 내용이 뜨도록 만들 것이다. 그래서 우리는 각 링크에 이벤트를 만들 것이다. 그 이벤트를 클릭하면 App 컴포넌트의 state가 바뀌고 그 바뀐 state가 Content 컴포넌트에 동적으로 전달되도록 하는 것이 목표! 코드 변경 전 전체 코드↓ 더보기 https://github.com/YJZero/React/tree/main/components state 설정하기 지금 보고 있는 페이지가 welcome 페이지인지 read(읽기) 페이지인지 구분하기 위해 mode를 추가한다. 그리고 mode가 welcome일 때 content 영역..
컴포넌트 만들기 WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이러한 순수 html 코드가 있다. 이 부분들을 컴포넌트를 만들어서 리액트로 구현해보자. WEB world wide web! 먼저 이 헤더 부분을 리액트를 통해 subject라는 이름의 컴포넌트로 바꿀 것이다. =Subject라는 컴포넌트를 만들겠다. 컴포넌트의 이름의 첫글자는 무조건 대문자! 그게 룰임!! 그 다음 render 함수를 만들고 (class 안에서 함수를 만들 땐 function을 안 붙여도 된다.) return(); 을 쓴 후 이 괄호 안에 원하는 내용을 넣는다. 이때! 컴포넌트는 무조건 하나의 최상위 태그만 있어야 한다. ..
샘플 애플리케이션을 수정하는 것으로 시작해보자. 수정하기 위해서 어떤 디렉토리 구조를 가지고 있고 어디를 수정하면 코딩을 할 수 있는지를 알아야 한다. JS 코딩하기 public 파일은 샘플 애플리케이션이 나타나는 index.html이 있는 파일이다. 이 index.html을 살펴보면, 이렇게 id root가 있다. 리액트를 사용하면서 만들어지는 component는 모두 이곳에 넣기로 creat-react-app은 약속되어 있다. 실제로 개발자 도구를 통해 살펴보면 이렇게 root 안에 리액트로 만들어진 태그들이 들어있는 것을 볼 수 있다. 그렇다면 이러한 component들은 어떤 파일에서 만들 수 있는가? 그것은 바로 src 디렉토리 안에 있는 파일을 수정해서 만들 수 있다. 그래서..
