라쿤의 끄적끄적

JavaScript Deep Dive 02 용어 및 중요사항 정리 타입 변환 타입 변환 : 기존 원시 값을 사용해 다른 타입의 새로운 원시값을 생성하는 것 명시적 타입변환, 암묵적 타입 변환 둘다, 원시값은 변경 불가능한 값(imutable value)이라서 기존 원시값을 직접 변경하는 것은 아님 (부수 효과X, 재할당X) 암묵적 타입 변환(implicit coercion), 타입 강제 변환(type coercion) : 표현식을 평가하는 도중 자바스크립트 엔진에 의해 암묵적으로 변환되는 것 문자열 타입으로 암묵적 변환 문자열 연결 연산자로 (+)가 작용 하는 경우, 문자열 이외의 것들 문자열 타입으로 변환 Type + '' -> 'Type' Symbol 타입의 경우에만 타입..

JavaScript Deep Dive 01 용어 및 중요사항 정리 변수 변수 : 확보한 메모리 공간 자체 or 메모리 공간 식별자 식별자 : 어떤 값을 구별해서 식별할 수 있는 고유한 이름(식별자는 값이 아니라, 메모리 주소를 기억함으로서 메모리 주소에 붙인 이름 역할을 함) 변수선언: 변수를 사용하기 위한 메모리 공간 확보와 변수 이름과 확보된 메모리 공간의 주소 연결 (값 저장 준비, var, let, const) 값 할당 없이 변수선언만 되어도, undefined가 기본으로 할당 되어 초기화 됨 변수 호이스팅 : 변수 선언문이 코드 작성 맨위로 올라 간듯이 동작하는 특징 변수 선언이 런타임 전에 실행되기 때문 (var, let, const, function, function*, class 키워드로 ..

JavaScript06 JavaScript : 표기법 dash-case(kebab-case) 단어와 단어 사이를 대쉬를 사용(띄어쓰기를 대신해서) HTML , CSS에서 많이 사용 snake_case 단어와 단어 사이를 언더바를 사용 HTML, CSS에서 많이 사용 camelCase 첫글자를 소문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기 JS에서 많이 사용 PascalCase 첫글자도 대문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기 JS에서 많이 사용(JS에서도 특수한 경우) Zero-based Numbering 0 기반 번호 매기기 특수한 경우를 제외하고 0부터 숫자를 시작 요일의 경우 0을 일요일로 표시하여 커짐 JavaScript : 주석 ctrl + / // 한 줄 메모 /* ..

JavaScript05 Javascript : Storage key - value 형태의 데이터 저장소 Local Storage : Document 출처의 Storage객체에 접근, 도메인 주소(사이트)에 종속되어 저장 데이터 만료되지 않음, 반영구적 보존 Session Storage : 페이지 세션이 끝날 때(페이지를 닫을 때 사라 짐) localStorage 데이터 활용 setItem(key: string, value: string) 문자 데이터만 받기 때문에 문자데이터가 아닌 경우는 JSON을 통해 stringify를 통해서 문자로 저장하고 활용시에는 parse로 살려서 활용 getItem(key: string) removeItem(key: string) (이렇게 하지 않는 이상 지워지지 않음) c..

JavaScript04 Javascript : 데이터의 불변성, 가변성, 메모리 사용 데이터 불변성 (Immutability) 원시 데이터 (Primitive) : String, Number, Boolean, undefined, null 데이터 불변성 : 메모리에 쓰인 데이터가 변하지 않음, 수정되지 않음 데이터 모양이 다르면 다른 것이다. 새로운 모양의 데이터 일 경우 새로운 메모리를 사용하고 같은 모양의 경우에는 같은 메모리를 사용 (메모리 위치와 데이터 모양의 일치) 원시형 데이터의 메모리 사용 let a = 1; let b = 4; // -------------------- Memory -------------------------- // |1: 1 |2: 4 |3: |4: // ---------..

JavaScript03 Javascript : 데이터 String: "", '', `` Number Boolean: true, false undefined null Array: [] Object: {} String MDN : String String.prototype.method 들은 언제든지 사용 가능함 리터럴 형태에 바로 붙여 사용도 가능, 변수에 담아서도 가능하고 length String 객체가 가지고 있는 property로서 해당 instance의 string index의 개수를 표현 const str01 = "0123"; console.log(str01.length); // 4 console.log("01 23".length); // 5 (공백도 문자임)indexOf indexOf..

JavaScript02 Javascript : 함수 함수 선언 function sum(x, y) { console.log(`process : ${x + y}`); // 함수가 호출되면 항상 실행하는 부분 return x + y; // 함수 호출 결과로 변수에 담을 수 있는 곳 }매개 변수와 인수 인수 : 함수를 사용하면서 사용되어지는 진짜 값 sum(1, 3) -> 1, 3 매개변수 : 들어 오는 인수를 어떻게 사용할지 함수 로직을 표현함에 있어서 인수와 로직을 연결하는 변수 sum(x, y) -> x, y 함수의 사용 변수에 담아서 사용하는 경우 반복되는 값을 연산하는 경우 함수 실행 값을 담아서 사용하는 것이 효율적임 // 함수 호출 : process 실행 & 변수에 return 값 저장 const ..

JavaScript01 Node.js Node.js : Chrome V8 JS엔진으로 빌드된 JS 런타임 런타임 : 프로그래밍 언어가 동작하는 환경 환경종류 : 컴퓨터 or 브라우저 프론트 작업할 때 도와주는 것이 필요한데 이를 NodeJS를 통해서 가능 HTML, CSS, JS -> Browser에서만 동작 프론트 작업할 때 도와줄 수 있는 툴을 컴퓨터 환경에서 즉, NodeJS에서 활용할 수 있음 이를 browser에서 결과를 보여줄려면 HTML, CSS, JS로 변환 작업이 필요하고, 변환작업을 NodeJS(컴퓨터) 에서 가능 Node.js 환경설정 NVM (Node Version Manager) window는 NVM - Windows 설치 유의적 버전 : 3단계의 .을 통해 버전을 나타내는 표기법..

33 Concepts Every JavaScript Developer Should Know (by leonardomso) Github : 33 Concepts Every JavaScript Developer Should Know (by leonardomso) Nomadcoder's lectures 예전에 유튜브 영상을 보다가 나중에 봐야겟다하고 저장해둔 영상을 이제서야 발견해서 공부하고자 한다. Call Stack Call Stack : 자바스크립트가 함수 실행을 핸들하는 방법 중 하나. 책을 쌓는 것 처럼 자바스크립트 함수를 스택위에 올리고 함수를 다 실행하면 제거 함 일반 함수인 경우 함수를 return이 나와야 끝나는 것임 크롬 개발 툴 sources의 call stack을 확인해 보면 anonym..

정규 표현식 드림코딩by엘리 : 정규표현식 강의 드림코딩 엘리의 정규 표현식 강의를 찾아 들었다. 정규 표현식 (Regular Expression) regex 텍스트에서 특정 패턴을 찾을때 요긴 함(ex. 이메일, 전화번호, 등 패턴...) 패턴 유효성 검사 여러가지 언어를 지원하고 있으며, 심지어 여러 에디터에서도 정규표현식을 사용한 검색을 지원하고 있음 / /처럼 슬래쉬(slash)들을 사용하여 정규표현식을 알려주고 안에 찾고자 하는 패턴(pattern)을 넣고 외부에 옵션(flag)을 적어 활용할수 있음 /pattern/flag Pattern 예제 참고 사이트01 예제 참고 사이트02 Groups and ranges | : 또는 (ex. /hi|hello/gm) -> hi, hello () : 그룹..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript basic why js ES Variable let var const를 활용 변수명은 calmel case(소문자로 시작해서 스페이스 필요하면 대문자를 섞어 씀) 변수 작동 과정 : 생성(Create) -> 초기화(Initialize) -> 사용(Use) a = 12인 경우 a는 변수 생성, = 12는 초기화 과정, 사용은 필요할때 a를 호출하여 활용 Comment (// or /* ) Data Type String text use with "" Boolean t..

JavaScript08 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!) 드림코딩by엘리 - JavaScript JavaScript async, await API 동기 vs 비동기 동기 사용시 백엔드에서 가져올때 시간이 걸리고 기다려야해서 다음 코드를 진행 못해 사용자는 버벅거림(중간 로딩)을 볼 수 밖에 없음 비동기를 사용해서 요청만 해놓고 기다리지 않고 다른 코드를 진행시켜 완료후에 요청한 결과를 전달함 // 동기 사용 // raccon 표시까지 10초 function fetchUser() { // do network request in 10 sec... return &#3..

JavaScript08 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!) 드림코딩by엘리 - JavaScript JavaScript Callback 비동기 처리의 시작 콜백 이해하기 동기(sync)와 비동기(async) Synchronous(동기) : 코드 블럭이 쓰여진 순으로 즉시실행하는 것 javaScript는 동기적인데, 호이스팅 이후에 코드블럭을 순서대로 실행한다. (JavaScript is synchronous., Execute the code block in oder after hoisting.) hoisting(호이스팅): var, function declarati..

JavaScript07 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의가 엄청 잘되 있으니 강의를 찾아보자!) 드림코딩by엘리 - JavaScript 드림코딩 Array_quiz (강의 듣고서 확인) 일단, 강의 들으면서 놓친 Array API 위치를 확인함 가독성 좋게 메소드를 연달아 쓸수 있는 법을 확인함(리얼 꿀팁) 'use strict'; // Q1. make a string out of an array console.log(' Q1. make a string out of an array') { const fruits = ['apple', 'banana&#3..

JavaScript06 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript ES Symbol String method (수정 21/02/16 해당 string method는 symbol인 경우의 method였다.오해 하지 말길! string method 는 다음 글에서 다시 알아볼 예정) interface String { /** * Matches a string or an object that supports being matched against, and returns an array * containing the results of tha..

JavaScript05 JavaScript에 대해 공부하기 위해서 유튜브 '드림코딩by엘리' JavaScript 강의를 듣고 글을 쓰고 있다.(강의를 꼭보길 바란다 너무 잘되어 있다.) 드림코딩by엘리 - JavaScript Object (dict in python) one of the JavaScript's data types. a collection of related data and/or functionality Nearly all objects in JavaScript are instances of Object 오브젝트가 없으면 일일이 변수들을 선언해 주어야 하고 코드의 중복이 많아짐 정리가 어려워 찾기가 어려움 (접근하기도 불편해짐) 즉, 자료의 검색, 정렬, 삭제, 추가가..