타입 별칭 ; Primitive, Union Type, Tuple, Function 등 직접 작성해야하는 타입을 다른 이름으로 지정 가능 // primitive타입 별칭 type MyStringType=string; let myStr:MyStringType='hello'; // Union 타입 별칭 type StringOrNumber=string|number; let another:StringOrNumber='Anna'; // Tuple 타입 별칭 type A=[number,number]; let b:A=[1,2]; // Function 타입 별칭 type EatType=(food:string) => void; Interfaces ; 하나의 타입을 만들어내는 방식 - 컴파일 시 사라짐(js파일에는 존재 ..
[목표 설정] 개발을 배우는 목표가 무엇일까? - (재미있게)먹고 살려고 - 게임 개발 하려고 - 사업 하려고 - 미국 가서 살려고(개발은 시간과 공간의 제약 x) - 내 서비스 만들고 싶어서 취직 -> 언어 1개(아무거나(C,JAVA,python,JS)) / 알고리즘 / 자료구조 ; 같은 회사를 가고싶은 사람보다 잘해야함 - 공부순서 ; 자료구조 -> 알고리즘 -> 코딩테스트 기초문제 코딩테스트 - 실제로 사람 앞에서 칠판에 코드를 씀 - 여기에 시간을 최대한 쓸 것 - 포트폴리오, 학점, 학벌 ; 코테에 비해 덜 중요함. 이력서에 합격할 정도까지만 하면 됨 - 언어는 Python 추천(Interviewer가 파이썬 이해할 확률 높음, 문법이 간단하여 시간 단축) - 코테 도서 ; Cracking th..
Bundler ; JS파일 뿐 아니라, 애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어냄 - Parcel ; 구성 없는 단순한 자동 번들링. 소/중형 프로젝트에 적합 - Webpack ; 매우 꼼꼼한 구성. 중/대형 프로젝트에 적합 - Rollup ICO Converter ; ICO 확장자로 변경해줌 - 32pixel로 설정 https://www.icoconverter.com/ ICO Converter Converts images to the ICO format for your websites or applications. www.icoconverter.com parcel-plugin-static-files-copy https://www.npmjs.co..
BootStrap ; 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크 - 하나의 CSS로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동 - 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도움 1. CSS로 적용 - 단 ; 기능에 한정적 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com > Bootstrap > 좌측 상단 Docs 클릭 > 2번에 Include Bootstrap’s CSS and JS의 와 내용 html파일에 복붙 > 좌측 Components내용들 class명 이용하여 자유롭게 이..
CSS Preprocessor ; CSS 전처리기 - CSS의 불편함을 확장 기능으로 상쇄 ex) Sass, Less, Stylus - 전처리기 ; CSS문법과 유사 & 선택자의 중첩이나 조건문,반복문,다양한 단위의 연산 등 표준 CSS보다 훨씬 많은 기능 제공 - 웹에서 직접 동작 x, 웹에서 동작 가능한 표준의 CSS로 컴파일 - Less ; 진입장벽이 비교적 낮지만 기능의 한계 존재 - Stylus ; 덜 유명하며 비교적 늦게 나왔기에 성숙도 떨어짐 - Sass(SCSS) ; 위 두 전처리기의 장점 가짐 SCSS ; Sass 3버전에서 새롭게 등장, Sass의 모든 기능을 지원하는 CSS의 상위집합 SCSS 문법 주석 1. /* 주석 */ ; 컴파일된 CSS에 존재 o 2. // 주석 ; 컴파일된 ..
타입 시스템 - 컴파일러에게 사용하는 타입을 명시적으로 지정 ; TS에 해당 - 컴파일러가 자동으로 타입을 추론 ; JS에 해당 -> 사용법에 대한 오해 야기 => 비추 - TS의 경우 매게변수에도, return값에도 명확하게 type을 명시해줘야함. function f5(a:number):number{ if(a>0){ return a*38; } } function f7(a:{name:string; age:number}):string{ return `이름은 ${a.name}이고, 연령대는${ Math.floor(a.age/10)*10 }대 입니다.`; } console.log(f7({name:'Mark',age:23})); console.log(f7('Mark')); // 오류 발생 Type 호환성 공변..
TypeScript ; 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어 - MS에서 개발, 유지하고 있으며 엄격한 문법 지원 - TS는 JS엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어 - JS로 작성된 프로그램이 TS 프로그램으로도 동작 - 모든 OS, 브라우저, 호스트에서 사용 가능 설치방법 ; $npm i tsc -g // -g ; 컴퓨터 내 모든 프로젝트에 적용 -> tsc라는 명령어로 사용 가능 but -g는 비추. -> npx tsc라는 명령어로 사용해야함 $ npm init -y ; npm 초기 설정 _ package-lock.json 설치 $ npx tsc --init ; TS 초기 설정 _ tsconfig.json설치 --- ts파일 설치 --- $ tsc(TypeS..
JSON (JavaScript Object Notation) ; Javascript의 데이터를 표현하는 하나의 포멧. 속성과 값의 쌍 - 큰 따옴표만 사용 ex) "name" : "guesung" JSON.stringify(A) ; A배열을 문자열화(JSON에서 사용) ex) name:guesung -> "name":"guesung" JSON.parse(A) ; A배열을 객체화(JS에서 사용) ex) "name":"guesung -> name:guesung localStorage ; 데이터가 만료되지 않음 sessionStorage ; 페이지 세션이 끝날 때 즉, 페이지를 닫을 때 데이터가 사라짐 localStorage.setItem('a','b') localStorage.getItem('a') loca..