기술 습관/Javascript
-
객체 리터럴enum보다 심플 interface Student { stdId : number; stdName? : string; age?: number; // 선택적 프로퍼티 // gender?: string; // Female Male 두가지밖에 없음. gender? : /*enum*/ 'Male' | 'Female'; course?: string; completed?: boolean; // setName(name: string) : void; 아래와 동일 setName? : (name: string) => void; getName? : () => string; } class MyStudent i..
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-3객체 리터럴enum보다 심플 interface Student { stdId : number; stdName? : string; age?: number; // 선택적 프로퍼티 // gender?: string; // Female Male 두가지밖에 없음. gender? : /*enum*/ 'Male' | 'Female'; course?: string; completed?: boolean; // setName(name: string) : void; 아래와 동일 setName? : (name: string) => void; getName? : () => string; } class MyStudent i..
2024.05.09 -
타입스크립트타입스크립트는 왜 필요한가자바스크립트 코드가 너무 지저분코드의 스케일이 커지면서 코드관리가 되지 않는다.타입스크립트 장점JS 기반보다 버그를 줄일 수 있다유지보수가 쉽다강력한 높은 퀄리티의 코드 생산 가능타입 스크립트란자바스크립트 + 타입 체크타입스크립트 환경에 자바스크립트를 코딩하면 동작// JSfunction plus(a,b) { return a+b;}console.log(plus(3,5));// TSfunction plus(a : number,b : number) { return a+b;}console.log(plus(3,5));데이터 타입을 표기시 좋은 점컴파일 타임시 오류 체크타입 스크립트를 자바스크립트로 컴파일하는 과정 필요환경 설정VSCode 설치 후 타입스크립트 설치T..
[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 11-2타입스크립트타입스크립트는 왜 필요한가자바스크립트 코드가 너무 지저분코드의 스케일이 커지면서 코드관리가 되지 않는다.타입스크립트 장점JS 기반보다 버그를 줄일 수 있다유지보수가 쉽다강력한 높은 퀄리티의 코드 생산 가능타입 스크립트란자바스크립트 + 타입 체크타입스크립트 환경에 자바스크립트를 코딩하면 동작// JSfunction plus(a,b) { return a+b;}console.log(plus(3,5));// TSfunction plus(a : number,b : number) { return a+b;}console.log(plus(3,5));데이터 타입을 표기시 좋은 점컴파일 타임시 오류 체크타입 스크립트를 자바스크립트로 컴파일하는 과정 필요환경 설정VSCode 설치 후 타입스크립트 설치T..
2024.05.08 -
코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. JS 기본 문법 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 간단한 작성 계기 : JS는 구글링+JS문법 인강으로 배운 게 전부라 디버깅이 주먹구구식. 제대로 공부하고 숙지하기 위해 글을 작성. Debugging이란? 스크립트 내 에러를 검출해 제거하는 일련의 과정 Source 패널 Source 패널은 크게 세 개의 영역으로 구성 파일 탐색 영역 - 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 전개 코드 에디터 영역 - 리소스 영역에서 선택한 파일의 소스 코드를 출력. 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공 Console..
[JS 코드 품질 개선] Chrome으로 디버깅하는 법코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. JS 기본 문법 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 간단한 작성 계기 : JS는 구글링+JS문법 인강으로 배운 게 전부라 디버깅이 주먹구구식. 제대로 공부하고 숙지하기 위해 글을 작성. Debugging이란? 스크립트 내 에러를 검출해 제거하는 일련의 과정 Source 패널 Source 패널은 크게 세 개의 영역으로 구성 파일 탐색 영역 - 페이지를 구성하는 데 쓰인 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 전개 코드 에디터 영역 - 리소스 영역에서 선택한 파일의 소스 코드를 출력. 자바스크립트 디버깅 영역 - 디버깅에 관련된 기능을 제공 Console..
2024.04.12 -
코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. JS 기본 문법 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 이번에 코딩테스트하면서 Set에 대한 기본 개념이 부족해 Map으로 풀이하면서 더 쉽게 풀 수 있는 문제를 어렵게 풀이. 반성하는 의미로 Map과 Set에 대한 내용 공부 Map 키가 있는 데이터를 저장한다는 점에서 객체와 유사 다만 맵의 경우 다양한 자료형을 허용 맵은 객체와 다르게 key를 문자형으로 변환하지 않으며 자료형 제약이 없다. = 객체 또한 키가 될 수 있음 // eg let john = { name: "John" }; // 고객의 가게 방문 횟수를 세본다고 가정해 봅시다. let visitsCountMap = new Map(); ..
[JS 자료구조와 자료형] Map / Set코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. JS 기본 문법 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 이번에 코딩테스트하면서 Set에 대한 기본 개념이 부족해 Map으로 풀이하면서 더 쉽게 풀 수 있는 문제를 어렵게 풀이. 반성하는 의미로 Map과 Set에 대한 내용 공부 Map 키가 있는 데이터를 저장한다는 점에서 객체와 유사 다만 맵의 경우 다양한 자료형을 허용 맵은 객체와 다르게 key를 문자형으로 변환하지 않으며 자료형 제약이 없다. = 객체 또한 키가 될 수 있음 // eg let john = { name: "John" }; // 고객의 가게 방문 횟수를 세본다고 가정해 봅시다. let visitsCountMap = new Map(); ..
2024.04.12 -
코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. 자바와 달라서 한 번쯤 짚고 넘어갈 필요가 있거나 내가 몰랐던 JS 기본 문법들을 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 함수 함수는 프로그램을 구성하는 주요 구성요소(building block) 기본값 함수 호출 시 매개변수에 인수를 전달하지 않을 경우 해당 값은 undefined가 된다. 즉 매개변수에 값을 전달하지 않아도 에러 없이 undefined가 할당될 뿐이므로 만약 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않기를 원한다면 함수를 선언할 때 = 를 사용해 기본값을 설정해주면 된다. const showMessage = ( from, text = "No Message"..
[JS 기본 문법] 2.15 함수코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. 자바와 달라서 한 번쯤 짚고 넘어갈 필요가 있거나 내가 몰랐던 JS 기본 문법들을 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 함수 함수는 프로그램을 구성하는 주요 구성요소(building block) 기본값 함수 호출 시 매개변수에 인수를 전달하지 않을 경우 해당 값은 undefined가 된다. 즉 매개변수에 값을 전달하지 않아도 에러 없이 undefined가 할당될 뿐이므로 만약 매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않기를 원한다면 함수를 선언할 때 = 를 사용해 기본값을 설정해주면 된다. const showMessage = ( from, text = "No Message"..
2024.03.27 -
코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. 자바와 달라서 한 번쯤 짚고 넘어갈 필요가 있거나 내가 몰랐던 JS 기본 문법들을 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 형 변환 (Type Conversion) 함수와 연사자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환. 의도적으로 변환(명시적 변환)하고자 하는 경우를 아래에서 서술 // 문자형 변환 let val = 10; val = String(val); // 숫자형 변환 let val = "123"; val = Number(val); // 숫자 이외의 글자가 들어가는 경우 그 결과는 NaN 반환 // null -> 0 / true & false -> 1 & 0 // 숫자가 될 문자열 앞..
[JS 기본 문법] 2.7 형 변환, 2.12 nullish 병합 연산자 '??'코테 준비와 함께 JS기본기를 탄탄히 하고자 작성. 자바와 달라서 한 번쯤 짚고 넘어갈 필요가 있거나 내가 몰랐던 JS 기본 문법들을 정리 본 내용은 모두 https://ko.javascript.info/ 내용을 참조하여 작성 형 변환 (Type Conversion) 함수와 연사자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환. 의도적으로 변환(명시적 변환)하고자 하는 경우를 아래에서 서술 // 문자형 변환 let val = 10; val = String(val); // 숫자형 변환 let val = "123"; val = Number(val); // 숫자 이외의 글자가 들어가는 경우 그 결과는 NaN 반환 // null -> 0 / true & false -> 1 & 0 // 숫자가 될 문자열 앞..
2024.03.27