목록프론트엔드 (52)
끄적끄적 메모장
이제 기본 문법에 대해서 알아보자 먼저 간단한 변수 타입지정으로는 let Name: string = 'Lee'; Name = '123'; 위와 같이 이 Name 변수에는 string(문자) type만 들어올 수 있습니다. string 말고도 number, boolean, neull, undefined, bigint, [], {} 등 type으로 들어갈 수 있다. let Name: string[] = {'Lee', 'Kim'}; let Name: { name : string } = {name, 'Kim'}; let Name: { name? : string } = { }; // ?는 name이라는 속성이 들어올 수도 있고 안들어올 수도 있다. (일종의 옵셥) 위 코드의 첫번째 줄은 Name 변수에는 stri..
우선 TypeScript를 하기 위해 기본적으로 세팅해야 할 것들이 있다. 1) node.js 설치 (최신버전) 2) VScode에디터 사용(각자 취향에 맞는 에디터) 3) 터미널창에 npm install -g typescript 입력 4) 코드 입력할 폴더를 만들고 에디터에서 폴더 열기 5) 파일명.ts 파일 생성 후 코드 입력 6-1) tsc --init 터미널에 입력 (추천) 또는 6-2) tsconfig.json 파일을 만든 후 하단 내용 입력 { "compilerOptions" : { "target": "es5", "module": "commonjs", } } 7) 파일명.ts에서 코딩 시작 8) 터미널창에서 tsc -w 입력하여 TypeScript파일은 자동으로 JavaScript파일로 변환하..

타임스크립트는 2012년 마이크로소프트가 자바스크립트 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다. 타임스크립트는 자바스크립트에 타입을 부여한 자바스크립트의 확장된 언어입니다. 타임스크립트와 자바스크립트의 차이 - 자바스크립트는 동적 타입의 인어프리터 언어로 런타임에서 오류를 발견할 수 있지만, 타입스크립트는 정적 타입의 컴파일 언어이며 타임스크립트 커파일러 또는 바벨을 통해 자바스크립트 코드로 변환합니다. - 타입스크립트는 자바스크립트에 비해 코드 작성 단게에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 떄문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습..
JavaScript에서는 여러가지 객체가 있습니다. 그중 먼저 window 객체에 대해서 알아보겠습니다. window 객체는 웹 브라우저의 창(window)을 나타내고 수정하는 객체입니다. window.open("star.html", "popup", "width=400,height=500,top=100,left=200"); 위 코드처럼 실행한다면 star.html의 정보가 넓이 400, 높이 500인 팝업창으로 상단에서 100 좌측에서 200 만큼 띄어진 창이 열려집니다. // 경고창 window.alert("설문을 시작합니다"); // 사용자로부터 데이터 입력받기 var userAge = window.prompt("당신의 나이를 입력하세요", ""); // 확인취소 var okCancle = windo..
문자열을 활용하여 여러가지 예제를 풀어보자 아래와 같이 전화번호의 뒷자리 4자리를 *으로 변경할 수도 있습니다. // 이름 입력받기 var userName = prompt("당신의 이름을 영문자로 입력하세요", ""); // Lee 입력 // 전화번호 입력받기 var userTel = prompt("전화번호를 - 없이 입력하세요", ""); // 01012345678 입력 // 이름을 대문자로 출력하기 document.write(userName.toUpperCase() + " "); // LEE 출력 // 전화번호 var result = userTel.substr(0, userTel.length - 4) + "****"; document.write("당신의 전화번호는 :" + result); // 010..
JavaScript언어에서는 값을 찾거나 위치값을 알아내는 등 여러가자 문자열을 수정하는 방법들이 있습니다. 아래 문자열을 활용한 코드가 있습니다. // 문자열을 저장할 변수 var str = "Ahi~ javascript!"; // var str = new String("Ahi~ javascript!! "); var str2 = "jQuery!!! "; document.write(`원본 : ${str} `); // 문자열의 5번째 문자 찾기 0~ document.write("5번째 문자 :" + str.charAt(5) + " "); // 4번째부터 4글자를 추출 document.write("4번째부터 4글자:" + str.substr(4, 4) + " "); // 4번째부터 7번째까지 추출 docum..

개발을 할때 많은 리스트를 만들어야 할때가 있습니다. 그럴때 배열을 사용하면 편하게 코딩을 할 수 있습니다. 배열(Array)에 대해서 알아보자 자바스크립트에서 배열을 만드는 방법이 2가지가 있습니다. 1) 배열 리터럴 재괄호([ ]) 를 사용하여 만드는 방법 2) Array() 생성자 함수로 배열을 생성하는 방법 아래에는 배열을 활용한 코드가 있습니다. // 과일의 종류를 저장할 배열 var fruit = ["수박","포도","딸기"]; // 야채 종류를 저장할 배열 var Veg = ["토마토","무","파","양파"]; var num = [1,2,3]; // fruit 배열 마지막 데이터 추가하기 fruit.push("배"); console.log(fruit); // fruit 배열의 마지막 데이터..
오버로딩(overloading) 오버로딩이란 하나의 함수가 하나의 기능만을 구현해야 한다는 뜻이다. 하지만 자바에서는 하나의 메소드 이름으로 여러 기능을 구현하기 떄문에 '과적하다' 라는 뜻의 이름이 붙여졌다. 오버로딩에는 조건이 있습니다. 메소드의 이름이 같고, 매개변수의 개수나 타입이 달라져야 합니다. 주의할 점은 ' 리턴 값만' 다른것은 오버로딩을 할 수 없다는 점입니다. class OverloadingTest { public static void main(String[] args) { OverloadingMethods om = new OverloadingMethods(); om.print(); System.out.println(om.print(3)); om.print("Hello!"); Syste..