TopCode

📘 타입 별칭 (Type Alias) Interface 랑 비슷해 보입니다. Primitive, Union Type, Tuple, Function 기타 직접 작성해야하는 타입을다른 이름을 지정할 수 있습니다. 만들어지 타입의 refer(별명)로 사용하는 것이지 타입을 만드는 것은 아닙니다. Aliasing Primitive type MyStringType = string; const str = 'world'; let myStr: MyStringType = 'hello'; // 같은 형식이기 때문에 같음 myStr = str; Aliasing Union Type let person: string | number = 0; person = 'Mark'; type St..

📘 타입스크립트 타입시스템에 대한 이해 타입 시스템 컴파일러에게 사용하는 타입을 명시적으로 지정하는 시스템 컴파일러가 자동으로 타입을 추론하는 시스템 타입스크립트의 타입 시스템 타입을 명시적으로 지정할 수 있다. 타입을 명시적으로 지정하지 않으면, 타입 스크립트 컴파일러가 자동으로 타입을 추론 자신의 코드에서 해당 함수를 사용하는 사용자 vs 해당 함수를 구현하는 구현자 타입이란 해당 변수가 할 수 있는 일을 결정합니다. 함수 사용법에 대한 오해를 야기하는 자바스크립트 // JavaScript // (f2 실행의 결과가 NaN 을 의도한 것이 아니라면) // 이 함수의 작성자는 매개변수 a 가 number타입이라는 가정으로 함수를 작성했습니다. function f2(a) { return a * 38; }..

기본 프로젝트 생성 후 아래 타입 실습! // package.json 생성 npm init -y // 개발용으로 TS 설치 npm i typescript -D // 프로젝트 루트경로에 tsconfig.json 파일이 생긴 것. npx tsc --init // tsconfig.json에서 이부분 확인하기. "strict": true, // JS로 컴파일 npx tsc // 파일 실행 noe [파일명] Boolean let isDone: boolean = false; isDone = true; console.log(typeof isDone) // boolean // 아래와 같이 리터럴로 직접 primitive타입을 사용하는 것이 일반적.. let isOk: Boolean = true; // 잘못된 사례 le..

📘 TypeScript와 JavaScript 비교 Static Types(ts) set during development function add(n1: number. n2:number) { return n1 + n2; } const result = add(39, 28); Dynamic Types(js) resolved at runtime function add(n1, n2) { if (typeof n1 !== 'number' || typeof n2 !== 'number') { throw new Error('Incorrect input!'); } return n1 + n2; } const result = add(39, 28); 프로그램이 유용하려면, 가장 간단한 데이터 단위로 작업 할 수 있어야 합니다. ..

📘 VS Code 설치 및 설정 Visual Studio Code TypeScript Compiler VS Code에 컴파일러가 내장되어 있다. 내장된 컴파일러 버전은 VS code가 업데이트 되면서 올라간다. 그래서 컴파일러 버전과 VS code의 버전은 상관관계가 있다. 내장된 컴파일러를 선택할 수 있고, 직접 설치한 컴파일러를 선택할 수 도 있다. npm init -y # 개발용 TS 설치 npm i typescript -D 📘 First Type Annotation TypeScript의 고유기능 Type이라는 요소가 프로그래밍에 들어남 // Type Annotation : 변수의 타입을 지정해줌. let a = 'Mark'; // a는 문자가 최초로 입력되었기 때문에 타입이 문자열로 지정됨. le..

📒 OMDB API란? OMDb API는 영화 정보를 얻기 위한 RESTful 웹 서비스이며 사이트의 모든 콘텐츠와 이미지는 사용자가 제공하고 유지 관리합니다. 📒 사용방법 Usage Send all data requests to : http://www.omdbapi.com/?apikey=[yourkey]& Poster API requests: http://img.omdbapi.com/?apikey=[yourkey]& 📒 Query String Query : 검색 String : 문자 데이터 주소?속성=값&속성=값&속성=값 📒 Axios로 가져오기 Promise based HTTP client for the browser and node.js ⇒ HTTP요청을 처리해주는 JS 패키지 OMDb API - ..

💼 localStorage란? localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. Application ⇒ Storage localStorage : 데이터를 반영구적으로 사용가능 sessionStorage: 페이지를 닫을 때 데이터가 지워짐. Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org localStorage.setItem('myCat', 'Tom'); const cat =..

🧀 JSON이란? JSON (제이슨[1], JavaScript Object Notation)은 속성-값 쌍 ( attribute–value pairs and array data types (or any other serializable value)) 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 속성-값 쌍 브라우저/서버통신 (AJAX) 서버와의 통신에서 데이터를 주고 받는 포맷 JSON의 공식 미디어 타입은 applicaiton/json 이며 JSON의 확장자는 .json https://ko.wikipedia.org/wiki/JSON JSON - 위키백과, 우리 모두의 백과사전 JSON(제이슨[1], JavaScript O..

📒 Lodash 사용법 Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may return a primiti lodash.com _.uniqBy(array) 중복데이터 제거. concat, _.uniqBy, _unionBy import _ from 'lodash' const usersA = [ { u..

🎁 JavaScript의 데이터 연결 Import : 가져오기 Default export : 내보내기1, 이름 지정 필요 X 하나의 파일에서 하나의 데이터만 내보낼 수 있음. Named export : 내보내기2 , 이름 지정 ⇒ import 할때 {} 사용 여러 데이터를 내보낼 수 있음. // main.js import {random, user} from './getRandom' // getRandom.js // getRandom.js // 이름이 필요한 통로 // 여러 데이터를 내보낼 수 있음. export function random() { return Math.floor(Math.random() * 10) } export const user = { name: 'HEROPY', age: 85 } 모..

✏️ 얕은 복사 Shallow Copy const copyUser = Object.assign({}, user) // 복사 : .assign(대상객체, 출처객체) ✏️ 깊은 복사 Deep Copy const copyUser = {...user} // 전개 연산자를 사용하여 복사. 깊은 복사 : lodash 사용 (.cloneDeep) Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained tog..

🍋 JS 불변성 데이터 불변성 (Immutability) 원시형 데이터 : 불변, (String, Number, Boolean, undefined, null) 참조형 데이터 : 가변, (Object, Array, Function) 원시 값 - 용어 사전 | MDN JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입니다. 원시 값에는 7종류, string, number (en-US), bigint (en-US), boolean, undefined, symbol, 그리고 null이 developer.mozilla.org JavaScript에서 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터입..

📒 JS 전개 구문 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다. 전개 구문 | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시 developer.mozilla.org // 전개 연산자 (Spread) const fruits = ['Apple', 'Banana', 'Cherry', 'Orange'] // 배열 데이터 console.log(fruits) // ... : 전개 연산자 : 하나의 ..

📒 JS 구조 분해할당 (Destructuring assignment) 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. 구조 분해 할당 | MDN 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. developer.mozilla.org 📒 비구조화 할당 const user = { name: 'Heropy', age: 85, email: 'thesecon@gmail.com', address: 'USA' } // 객체 데이터는 이름으로 구조분해. // 기본값이 비어있다면 지정해줄 수 있음. address = "Korea" // name이라는 변수를..

📒 JS 객체(Object) prototype이 붙어있지 않은 메소드는 정적 메소드(정적 static) Object.assign(대상객체, 하나 이상의 출처 객체..) : 열거할 수 있는 하나 이상의 출처 객체로부터 대상객체로 속성을 복사할 때 사용합니다. 대상객체를 반환합니다. 두 객체를 병합해서 새로운 객체 반환. 출처객체 내용이 대상객체에 덮어씌워짐. 출처객체 → 대상객체. Object.assign(대상객체, 출처객체) https://developer.mozilla.org/ko/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Object Object | MDN Object 생성자는 객체 래퍼(wrapper)를 생성합니다. developer.mozill..

✏️ JS 배열(Array) - 1 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array Array | MDN JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다. developer.mozilla.org JS의 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 따라서 밀집도가 보장되지 않습니다. 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요. // 배열 // 제로베이스. // 인덱스 : 배열 내 순서 // element(요소), item : 배열 내 요소 const numbers = [1, 2, 3, 4] const..

🍋 JS 숫자 데이터 toFixed() : 괄호 안에 숫자만큼의 소수점 뒷자리까지 문자로 바꿈 parseInt() : 문자열을 정수로 변환 parseFloat() : 문자열을 실수로 변환(소수점 단위 포함) const pi = 3.14159265358979 console.log(pi) const str = pi.toFixed(2) // 소수점 뒷자리까지 문자로 바꿈 console.log(str) console.log(typeof str) // 전역함수 // setTimeout, setInterval, clearTimeout, clearInterval const integer = parseInt(str) // 문자열을 정수로 변환 const float = parseFloat(str) // 문자열을 실수로 ..

🧀 1. 생성자 함수(prototype) Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 프로토타입 체인에서 한 객체의 메소드와 속성들이 다른 객체로 복사되는 것이 아님을 재차 언급합니다. 체인(-)을 타고 올라가며 접근할 뿐입니다. 같은 내용의 메소드가 반복되면 클래스를 활용! const heropy = { firstName: 'Heropy', // 속성 혹은 멤버 lastName: 'Park', getFullName: function () { // 메소드 return `${this.firstName} ${this.lastName}` // this : 현재 객체를 지칭 } } console.log(heropy) console.log(heropy.getFullName(..

🍯 조건문 if, else import random from './getRandom' // 조건문 (If statement) // console.log(random()) const a = random() if (a === 0) { console.log('a is 0') } else if (a === 2) { // if 조건이 false일때 넘어옴. console.log('a is 2') } else if (a === 4) { // 맞으면 나머지 무시. console.log('a is 4') } else { console.log('rest...') } 🍯 조건문 Switch 조건문 (Switch statement) 깔끔해보이지만 수직으로 길어짐. 값이 하나로 딱 떨어질 때 사용하면 효율적. import r..

🍋 ECMA Script 개요 자바스크립트 국제 표준화 기구 2015년도에 6버전이 나오면서 JS의 전성기가 시작됨. 클래스와 모듈같은 복잡한 응용 프로그램을 작성하기 위한 새로운 문법이 추가 프로젝트가 어떤 버전을 적용하는지 확인하기 최신버전에서 구버전에서도 구동될 수 있도록 해주기도 함. 'JAVA' 와는 다른 새로운 문법. 자바와 직접적인 관계가 없음. https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 ECMA스크립트 - 위키백과, 우리 모두의 백과사전 ECMA스크립트(ECMAScript, 또는 ES[1])란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 ..

🌈 HTML, CSS, JS로 만드는 간단한 클론코딩 예제 HTML,CSS에 대한 기초 수업을 들으며 그동안 공부했던 웹기초를 다시 복습했다. 기존에 ssafy 수업에서는 빠르게 넘어간 부분이기도 하고, 웹의 기초인데 공부가 부족했다는 느낌이 들어서 꼼꼼히 다시 복습했다. HTML과 CSS,JS를 연결하고 색상,위치조정등을 Bootstrap이나 Vuetify를 사용하지 않고, 조금 원시적인지만 하나씩 채워나가다 보니 기존에 사용했던 패키지들이 어떻게 작동하고 있었는지 왜 그러한 코드들이 필요했는지에 대한 이해가 되기도 하였다. ☕️ 다양한 반응형 효과들이 들어간 스타벅스 홈페이지 처음 완성된 예시 화면을 보았을 때는 bootstrap의 nav, parallax 등과 같은 컴포넌트들이 생각이 나서 과연 저..