라쿤의 끄적끄적

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 () : 그룹..

지금까지 개발 공부를 해오면서 여러가지 고민들에 봉착하였다. 지금 까지 공부해온 내용들을 되짚어 보면 파이썬 기본 문법부터 시작해서 django 프레임 워크 사용까지 공부했고 더깊게는 아직 들어가지 않은 상태이다. 그리고 최근에는 동적인 웹사이트 구성에 관심이 생겨 javascript, es6에 대해서 공부하고 실질적으로 dom요소를 제어해서 todolist라는 동적인 구성의 웹페이지를 구현해 보기도 하였다. 지금 공부한 것을 보면, 백엔드 지식은 python, django 프론트엔드는 javascript로 조금 알아 보았는데 django에 대해서 더 깊이 공부해서 백엔드 위주로 갈까 아니면 react 등의 프론트 엔드 스텍을 더 배워서 프론트 엔드로 취업 목표를 잡을지 고민된다. 고민 1. python..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 현재 해당 강의는 모두 들어서 프로젝트는 끝냈으나 추가적인 기능 및 CSS를 추가하여 마무리 하였다. CSS 적용하기 기본적으로 dorder-box 단위 처리 * { box-sizing: border-box; } 기본 폰트 si..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 현재 해당 강의는 모두 들어서 프로젝트는 끝냈으나 추가적인 기능 및 CSS를 추가하여 마무리 하였다. 완료한 project와 해당 사이트 비교해 보기 momentum 사이트 (클론하고자한 크롬 앱) 내가 구현한 크롬앱 기존에 완..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. 실시간 날씨 가져오기(weather.js) 현재의 경도 위도를 가져와서 경도위도의 좌표를 통해서 날씨open API를 이용해서 현재 위치의 날씨 정보를 불러와서 나타낼 것이다. 초기화 함수 (init) Coords는 좌표 뜻을 ..

js가 프로젝트에서 어떻게 사용되어지는지 알기 위해서 노마드 코더의 강의를 들었고 단지, 내 수준에서 필요한 것만 회고하듯 정리함 노마드 코더 강의 잘되어 있으니 듣길 바란다. 해당 강의는 무료임 JavaScript with Nomadcoder JavaScript project nomadcoder에서 진행하는 이 강의의 프로젝트는 클론 코딩이다. 클론 대상은 momentum 이라는 Todolist 페이지 이다. 특징은 가운데 시계가 있고, 배경이 변하고, todolist기능, 날씨 정보기능이 있다. JavaScript 파일 셋팅 보통 웹사이트 처럼, html, css, js로 구성된다. 기능들은 js 한파일에 모으지 않고 기능별로 나누어 구성하여 html 연결한다. 기능 : 사용자 이름 입력시 인사(gr..

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..