본문 바로가기

728x90

📌 Language37

[TS] Extends와 Implements 차이 (Difference between extends and implements) 안녕하세요 Foma 💻 입니다. 오늘은 TS에서 클래스 옆에 extends와 implements가 순간 헷갈려서 정확히 기억하기 위해 정리하려고 합니다. 바로 시작할게요~ Extends 상속받고자 하는 부모 클래스를 명시하는 것. 즉, extends에 원하는 클래스를 명시하면 해당 클래스의 프로퍼티와 메서드를 따로 구현하지 않아도 인스턴스에서 자유롭게 사용 가능합니다. 쉽게 말해 "부모가 가진 거 너 맘대로 써도 돼~" 라는 것과 같습니다. 아래와 같이 부모 클래스를 만들어 줍니다. class Parent { public lastName: string = "An"; public speakKorean() { console.log("안녕하세요"); } public eatWithChopsticks() { co.. 2022. 4. 2.

[TS] 타입스크립트(TypeScript)란? (feat. 써야하는 이유) 타입스크립트(TypeScript)란? 타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영 체제, 모든 브라우저, 모든 호스트에.. 2022. 3. 8.

[Swift] 고급 연산자(Advanced Operator)란? (feat. 비트연산자) 안녕하세요 Foma 💻 입니다! 오늘은 우연히 알고리즘 문제를 풀다가 '^=' 와 같은 연산자를 발견했는데, 정확히 어떤건지 모르겠더라구요. 찾아보니 해당 연산자는 Swift에서 고급 연산자로 분류해 놓았더라구요. 그래서 오늘은 Swift의 고급 연산자에 대해서 알아보려고 합니다. 바로 시작할게요~! UInt 우선 들어가기 전에 UInt에 대한 이해가 필요해요. 원래 Int는 정수 즉, 음수와 양수를 모두 가질 수 있었죠? UInt는 이 중에서 양수만 가질 수 있습니다. (음수를 넣으면 컴파일 에러 발생) 범위로 보면 Int8 = -128...127 이고, UInt8 = 0...256, Int16 = -322768...322767이고 UInt16 = 0...65535 입니다. 정수형 변수에 비트값 입력하.. 2022. 2. 26.

[CSS] Flex 속성 알아보기 (List of flex properties) 안녕하세요 Foma 💻 입니다. 오늘은 CSS에서 쉽게 레이아웃을 할 수 있는 Flex에 대해 알아보도록 하겠습니다. 바로 시작할게요~ flex-basis 플렉스 안에 있는 요소의 기본 크기를 설정하는 속성 50px 100px 50px 1. px이나 em으로 직접 지정하기 파란색 박스 300px로 늘리기 (여기서 nth-of-type(2)는 flex안에 있는 요소 중 2번째를 의미합니다.) flex-basis: 300px; 하지만 글자의 길이보다 짧게 지정했을 땐 글자 길이 만큼만 조정됩니다. 2. 키워드로 지정하기 키워드로 지정하기 위해서 파란색 박스의 텍스트 길이를 늘리겠습니다. abcdefg hijklmnop qrstuvwxyz 1. fill 텍스트 길이에 딱 맞게 조정됩니다. flex-basis:.. 2022. 2. 22.

[CSS] 컬러에 관한 속성 알아보기 (List of color properties) 안녕하세요 Foma 💻 입니다! 오늘은 CSS 속성 중 컬러에 관련된 속성에 대해서 알아보려고 합니다! 바로 시작할게요~ color text 및 text-decoration 등의 색을 정하는 속성 색깔을 지정하는 방법은 6가지가 있습니다. 1. name 2. hex 3. rgb 4. hsl 5. hwb 6. global 안녕하세요 안녕하세요 안녕하세요 안녕하세요 2022. 2. 22.

[CSS] CSS란? (feat. 구문 작성하는 방법) 안녕하세요 Foma 💻 입니다! 요즘 리액트 네이티브를 공부하고 있는데 CSS에 대한 기억이 가물 가물해서 헷갈리더라구요.. 그래서 CSS에 대해 다시 한번 제대로 정리하고 넘어가려고 합니다. 바로 시작할게요~ CSS란? Cascading Style Sheets의 줄임말이며 직독하면 계단식으로 작성하는 스타일 시트입니다. 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로 HTML과 XML에서 사용할 수 있습니다. HTML이 웹사이트의 몸체를 담당한다면 CSS는 그 몸체를 예쁘게 꾸미는 역할을 담당한다고 할 수 있습니다. 1994년 하콤 비움 리가 처음 제안하여 이후 W3C에서 CSS2,CSS3를 개발해왔습니다. CSS 구문 작성하는 법 원하는 HTML 요소를 선택한 뒤 바꾸고 싶은 속성을 선택하.. 2022. 2. 22.

[JS] 비동기 처리하는 법 알아보기(Callback,Promise,Async & Await) 안녕하세요 Foma💻 입니다. 오늘도 모던 자바스크립트를 통해 배운 Callback 함수와 Promise에 대해서 제가 이해한 방식대로 정리해보도록 하겠습니다. 바로 시작할게요~ Callback Callback 함수는 실행하는 즉시 완료되는 것이 아니라 특정 작업을 실행하고 마친 뒤에 완료된다. 즉, 비동기적으로 처리되는 것을 의미한다. 만약 스크립트를 만드는 작업이 있다면 작업이 정상적으로 처리되거나 중간에서 에러가 발생하는 경우에 작업이 완료된다. 콜백 함수가 완료되는 경우는 정상적으로 처리되었거나, 에러가 발생한 경우 뿐이다. 콜백 함수를 작성하는 방식은 원하는 파라미터 값과 함께 작업을 실행할 함수를 반드시 같이 넣어준다. function loadScript(src,callback) { let s.. 2022. 2. 15.

[JS] Static,Protected,Private에 대해 알아보기 안녕하세요 Foma💻 입니다! 오늘도 모던 자바스크립트에서 배운 Static,Protected,Private 에 대해 제가 이해한 것을 바탕으로 정리해 보려고 합니다! 바로 시작할게요~ Static Static은 정적이라는 의미를 가지고 있어, 변하지 않는다는 뜻이다. 이것을 이용하여 정적 메서드, 프로퍼티를 만들 수 있다. 쉽게 말하면 클래스에서 공통적으로 가지고 있는 부분이나 기능을 미리 정의해 놓는 것이다. Static Property class Person { //모든 사람이 동일하게 가지고 있고 변하지 않는 값 static planet = "지구" } //클래스 자체에서 바로 읽기 가능 console.log(Person.planet) //지구 Static Method class User { co.. 2022. 2. 15.

[JS] 클래스(Class) 기본 문법과 상속 안녕하세요 Foma💻 입니다! 이번 글도 역시 모던 자바스크립트에서 배운 '클래스'를 제가 이해한 방식으로 복습하는 차원에서 정리해보려고 합니다. 바로 시작할게요~ 클래스란? 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. - 위키 백과 - 즉, 클래스는 객체를 만들기 쉽게 미리 틀을 만들어 놓는 것입니다. 클래스 생성하기 앞에 클래스를 붙여준 뒤 constructor(생성자)를 이용해서 초기화 해준다. 메서드나 프로퍼티를 생성하거나 추가하는 법은 일반 객체를 만들 때와 동일하다. class Player { constructor(name) { this.height = 180 this.n.. 2022. 2. 12.

[JS] 프로토타입(Prototype) 다뤄보기 안녕하세요 Foma 💻 입니다. 오늘도 역시 모던 자바스크립트를 통해 배운 프로토타입을 복습하는 차원에서 다시 한번 정리하도록 하겠습니다. 바로 시작할게요~ Prototype이란? 자바스크립트의 모든 객체는 숨김 프로퍼티로 Prototype을 가지고 있다. 이것은 null이거나 다른 객체를 참조할 수 있는데 이것을 통해서 해당 객체의 기능(메서드)을 복사하거나 추가할 수 있다. 이렇게 참조한 다른 객체를 현재 객체의 '프로토타입'이라고 부른다. Prototype 설정하기 1. __proto__ 운동선수를 지칭하는 'player'라는 객체를 생성하고 let player = { firstName:"Young", lastName:"An", get fullName() { return this.firstName .. 2022. 2. 12.

[JS] 프로퍼티 옵션(플래그) 다루기(Property Flag) 안녕하세요 Foma💻 입니다. 오늘은 자바스크립트의 프로퍼티 플래그에 대해서 정리해보려고 합니다. 모던 자바스크립트 사이트에서 공부하는 것을 복습하는 차원에서 제가 이해한 방식으로 적어보겠습니다! 바로 시작할게요~ Property Flag란? 프로퍼티는 값 뿐만 아니라 플래그라 불리는 특별한 속성 3가지를 가진다. 1. writable 해당 프로퍼티를 수정할 수 있게 설정하는 플래그 2. enumrable 해당 프로퍼티를 나열할 수 있게 설정하는 플래그 3. configurable 해당 프로퍼티를 삭제, 플래그 수정이 가능하게 설정하는 플래그 Property Flag 확인하는 방법 Object.getOwnPropertyDescriptor(객체,프로퍼티명)으로 확인하고, 초기엔 모두 true로 설정되어 있.. 2022. 2. 12.

[JS] JSON과 객체 다루기 안녕하세요 Foma 💻 입니다! 오늘은 JavaScript로 JSON과 객체를 다루는 법에 대해서 정리해 보도록 하겠습니다. 바로 시작할게요~ 객체를 JSON으로 바꾸기 JSON.stringify(객체) 구문을 사용하시면 됩니다. let user = { name:"foma", age:27, color:"Black", [Symbol("id")]:123 } let json = JSON.stringify(user) console.log(json) //{"name":"foma","age":27,"color":"Black"} 만약 메서드나 undefined값을 가진 프로퍼티가 있다면 자동으로 무시합니다. user.sayHi = function() { print("sayHi") } user.somthing = un.. 2022. 2. 5.

이전 1 2 3 4 다음

728x90

티스토리툴바