목록JS (29)
NOW OR NEVER
Object https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object 어떤 데이터가 들어갈 수 있는지 정의를 하고 선언된 틀인 class를 이용해서 실제로 데이터를 넣어서 만드는 것이 object이다. instance of a class : class를 이용해서 새로운 instance 생성시 object가 됨 created many times : object는 class를 이용해서 굉장히 많이 만들 수 있다. data in : class에 실제로 데이터를 넣으면 object가 되어 메모리에 올라가게 됨 붕어빵 틀인 class에 팥이라는 data를 넣으면 팥붕어빵이 되고, cream data를 넣으면 크림붕어빵이..
객체 지향 언어(Class vs Object) class를 이용해서 상속과 다양성이 일어날 수 있다. 이런 모든 것들이 일어날 수 있는 곳이 객체지향 언어이다. 객체 지향 언어로 프로그래밍을 잘하는 개발자 = 풀어야 하는 문제나 구현해야 되는 기능들을 객체로 잘 정의해서 만들 수 있는 개발자 js에 class나 object가 없다면 정의한 변수들이 여기저기에 둥둥 떠다니면서 규모있는 프로젝트를 만들기 힘들었을 것이다. 실제로 살아가는 세상에는 수많은 물체와 사물들이 존재한다. 프로그래밍을 할 때 또한 사물과 물체들을 class나 object로 정의해서 프로그래밍 하는 것이 조금 더 자연스럽기 때문에 개발자들이 편하고 유연하게 프로그래밍을 할 수 있게 도와준다. 상속 Inheriance class 상속받을..
Functions 함수 function : 프로그램 안에서 각각의 작은 기능들을 수행하는 것, 즉 프로그램을 구성하는 굉장히 기본적인 building block 프로그램 안에서 각각 저마다 기능을 진행하는 함수들 존재, 이런 절차적인 언어같은 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당하고 있어 sub-program이라 불리기도 한다. 또한 함수는 여러번 재사용이 가능하다는 강점이 있다. 대체적으로 function은 한가지의 task나 어떠한 값을 계산하기 위해 쓰여진다. 추가된 class의 경우에도 java 처럼 pure한 oriented가 아니라 prototype을 베이스로한 가짜의 object oriented 이므로 자바스크립트도 procedural language(절차적인 언어)라고 볼 수..
데이터 타입 프로그래밍에서 가장 중요한 것 : 입력, 연산, 출력 사용자에게 콘솔이나 UI에서 입력받은 데이터를 잘 처리하고 연산해서 알맞게 다시 사용자에게 출력해주는 것이 제일 중요, 물론 그데이터를 전송을 이용해서 서버로 보내고 다시 받아오는 것도 중요하다. 연산을 하면서 CPU를 효율적으로 사용할 수 있도록 CPU에 최적화된 연산(logic)을 작성하는 것도 중요하고 메모리를 최소화해서 사용하는 것도 중요하다. variable rw(read / write) : variable은 메모리의 값을 읽고(read) 쓰는(write) 것이 가능하다. 그래서 변경이 가능한 값이다. 변경이 가능한 값(mutable data type) let : js에서 변수 선언할 수 있는 키워드, es6에서 추가되어진 키워드..
async와 defer html에서 javascript 표현시 어떻게 포함하는 것이 효율적인 것인가 사용자가 html 파일 다운로드시 브라우저가 한줄 한줄 분석한다(parising HTML) > 한줄한줄 분석하고 이해한 것을 CSS와 병합해서 DOM 요소로 변환 async : boolean 타입의 속성값으로 선언하는 것만으로도 true로 설정되어 옵션 사용 가능 head 안에 script 태그 html parsing하다가 script 태그 발견시 src안 js파일을 다운받아야하네 하고 이해하게 된다. 그래서 html parsing하는 것을 잠시 멈추고 그 js을 다운받아서 실행한다음에 다시 html parsing을 시작한다. 단점 : 해당 js 파일 용량이 어마어마하게 크고 인터넷도 느리다면 사용자가 그..
console node js에서도 실행 가능하고 web api인 console api에서도 실행 가능 많이 쓰이는 문법이라 거의 web api 뿐만아니라 프레임워크 등에서도 다 실행가능 Devtool console js 작성해서 실행 가능 간단한 js기능 구현 가능 source 디버깅시 유용 작성한 코드 확인 가능 break point 를 걸어서 디버깅할 때도 유용하게 쓰임 network network가 어떻게 발생하는지, 얼마나 많은 사이즈들의 데이터가 오고가는지 검사 가능 performance 분석, memory 분석 등 굉장히 다양한 것들을 볼 수 있다. 'use strict'; js를 strict 모드로 개발하기 위한 것 순수 vanilla js 작성시 js 최상단에 'use strict'; 정의..
Javascript 역사를 통한 개념 정리 역사 1993년 : 컴퓨터가 집집마다 없었던 시절에 생긴 컴퓨터를 모르는 사람도 쓸 수 있는 UI요소가 더해진 Mosaic Web Browser가 시장에 나옴 1994년 Mosaic Web Browser를 만든 개발자 Mac Andreessen이 Netscape을 창립하면서 조금 더 UI요소가 더해진 Netscape Navigator을 시장에 내놓음, 시장에서 80%의 점유율을 자랑하면서 급격히 성장한다, Mac Andreessen은 좀 더 다이나믹한 사이트를 만들기 위한 scripting언어를 추가하고 싶어 했다. scheme을 만든 개발자 Brendan Eich를 데려와 자바의 요소와 scheme을 융합한 언어를 10일만에 새로 만들고자 했다. 프로토타입을 ..
JS 프로처럼 쓰는 팁 tenary-operator 삼항 연산자 조건 ? true일시 return 값 : false일시 return값; 사용하는 경우 조건이 두가지인 경우 불필요한 else if 문 사용 자제 바로 리턴하는 경우 nullish coalescing operator 함수안에서 변수 선언 = 함수 선언시 설정한 인자 값이 호출할 때 있는 경우 return 값 ?? 함수 선언시 설정한 인자 값이 호출할 때 없는 경우 return 값; left Expression ?? right Expression value만 넣을 수 있는 것이 아닌 코드를 넣어 실행한 값을 할당하게 할 수도 있다. ?? 기준으로 왼쪽코드가 null이거나 undefined인 경우에만 ?? 오른쪽에 이어지는 문장이 실행됨(defa..
https://sigcho.tistory.com/20 프론트엔드 독학 스터디 계획 (by. 식초) -기초: HTML, CSS, JavaScript, Git/Github -기본: React(JS기반 프레임워크) -심화: SCSS, BootStrap,TypeScript, Webpack (필요할 때 함께 공부하기, 어쩌면 취업 후 개인공부).. sigcho.tistory.com 프론트엔드 영어로 된 로드맵도 보고 구글로 어떻게 공부해야 하는지 싹 다 찾아 봤는데 이보다 자세한 것은 없었다..! 식초님의 블로그는 주기적으로 정독해야 할 정도로 정보가 아주 많다. 그래서 식초님 로드맵에 따라 공부해보기로 결심 했다. 일단 기초 지식을 다지는 구간만 엑셀로 정리해놨다. 이런 식으로 하하,,, HTML, CSS, J..
Vue.js 작은 화면당 라이브러리 역할부터 큰규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크 특징 컴포넌트 기반 개발 방식 : 화면(웹페이지)을 여러 개의 작은 단위로 쪼개어 개발, 리액트와 같은 방식 MVVM 패턴 : 화면 UI 코드와 백엔드 데이터 처리 코드 분리 리액트와 앵귤러의 장점을 흡수 설치 파일 vue.js devtools 개발자 모드로 할 경우 개발자 도구에서 vue 패널이 보임 vs code 확장 프로그램 : vetur node-v , npm-v 설치 , nvm html body 태그 내에서 - https://kr.vuejs.org/v2/guide/#%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0에서 개발자 모드랑..