본문 바로가기

programming study/JavaScript

 (186)
기초 JS, CS 상식 - 모듈 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1.모듈 시스템 등장 이전 일반적으로 웹 사이트는 여러개의 JavaScript로 이루어져 있음 각각 파일을 별개의 프로그램으로 취급 웹 사이트의 역할이 늘어남에 따라 파일도 크게 증가 스크립트 파일간 통신을 위해 전역 스코프의 변수와 함수를 사용해왔음 즉시 실행 함수를 통해 전역 스코프가 오염되는 것을 막을 수 있었음 but. 스크립트간의 의존도를 파악하기 힘듦 실행순서를 제어해야 했음 2. 모듈 스크립트간 의존도 파악 용히 실행 순서 제어 가능 모듈 vs. 컴포넌트 모듈 : 설계 시점에 의미있는 요소 컴포넌트 : 런타임 시점에 의미있는 요소 JavaScript에서의 모듈 런타임에서 실행 파일..
기초 JS, CS 상식 - 스코프와 클로저 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1. 스코프 유효 범위 변수가 어느 범위까지 참조되는 지를 뜻함 전역 스코프(Global Scope): 어디서든 접근 가능 지역 스코프(Local Scope): 해당 스코프 내에서만 접근 가능 var 예기치 못한 오류가 생길 수 있음 호이스팅되어 변수 선언이 함수 상단으로 올라가 버림 함수 수준의 스코프를 가짐 블록 내부에 새롭게 선언하더라도 블록 외부 변수값도 같이 변하게 됨 변수 선언 시, var 키워드는 지양 2. 클로저 함수가 선언된 스코프를 기억하여 함수가 스코프 밖에서 실행되어도 기억한 스코프에 접근할 수 있게 만드는 문법 닫힘, 폐쇄 외부에서 접근이 불가능한 영역을 클로저를 통해서..
기초 JS, CS 상식 - 이벤트 루프 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1. JavaScript JavaScript는 Sigle Thread 언어 JavaScript Engine의 Call Stack은 하나만 존재 2. Event Loop 비동기적으로 데이터를 불러오고 애니메이션을 실행시킬 수 있는 이유 JavaScript Engine에 포함되어 있지는 않음 브라우저 또는 Node.js에서 자체적으로 관리 Event Loop로 인해 브라우저는 Multi Thread로 동작하게 됨 Web APIs에 의해 생성된 콜백 함수를 태스크 큐에서 빼와 콜스택에 넣는 역할을 함 Web APIs 브라우저에서 제공하는 API DOM API, Timer, AJAX 실행은 브라우저에..
기초 JS, CS 상식 - 흐름 제어 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1. 흐름 제어 Control Flow 흐름을 제어하는 방법 중 하나 조건, 반복을 통해 상태를 제어 if, for 등의 방법 이용 Data Flow 함수형 프로그래밍 방식 Control Flow vs. Data Flow Cotrol FlowData Flow Goto Stateless If / Then / Else Recursion Switch / Case Pipe For / While 2. 조건문 Control Flow에서 사용 조건이 맞을 때만 실행되는 문장(Statements) 문법 Yes or No if 괄호 안 조건식이 참인 경우 실행 else if, else도 같이 사용 가능 Jav..
기초 JS, CS 상식 - 표현식과 연산자 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1. 표현식 Expressions 어떠한 결과 값으로 평가되는 식 숫자, 문자열, 논리값, 변수, 상수 ,함수 호출 등으로 조합 가능 2. 연산자 표현식은 연산자로 조합되어 새로운 표현식이 됨 할당 연산자 오른쪽 표현식을 왼쪽 피연산자 값에 할당하는 연산자 등호(=) 다른 연산자와 같이 사용하여 복합 할당 연산자로 이용 // 복합 할당 연산자 let example = 0; ​ example += 1; // 덧셈 할당 example -= 1; // 뺄셈 할당 example *= 2; // 곱셈 할당 example /= 2; // 나눗셈 할당 example %= 3; // 나머지 할당 exampl..
기초 JS, CS 상식 - 메모리 심화 본 내용은 프로그래머스의 코딩테스트 광탈 방지 A to Z : JavaScript 강의를 토대로 작성하였습니다. 1. JS 변수 선언 과정 변수 고유 식별자 생성 메모리에 주소 할당 생성한 주소에 값을 넣음 2. 특징 선언한 상수나 변수는 메모리 주소를 바라봄 새로운 변수에 기존 변수를 대입하면 값이라면, 기존 변수의 메모리 주소를 참조 기존 변수에 조작(변경)이 일어나면, 새로운 메모리 주소를 할당 받고 그것의 값을 넣게 됨 원시타입은 변경이 불가능하기 때문 원시타입의 값이 변경될 때는 새로운 메모리가 할당 됨 3. 가상 머신 Virtual Machine 자바스크립트 엔진은 가상 머신으로 구성되어 있음 메모리 모델이 구현되어 있음 Heap, Call Stack Heap & Call Stack Heap:..
[프로그래머스] 성격 유형 검사하기 - JavaScript 풀이 본 게시물은 프로그래머스의 연습 문제 풀이입니다. 저작권은 (주) 그랩에게 있습니다 자바스크립트 코드 // 성격 유형별 점수를 기록하는 객체 const scores = { 'R': 0, 'T': 0, 'C': 0, 'F': 0, 'J': 0, 'M': 0, 'A': 0, 'N': 0, }; ​ function solution(survey, choices) { var answer = ''; // 주어진 survey, choices 순회 survey.forEach((sur, idx) => { // 비동의 성격 유형 const first = sur[0]; // 동의 성격 유형 const second = sur[1]; // 선택한 점수 const choice = choices[idx]; if (choice 4)..
Vue.js - 라우터 네비게이션 가드 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 라우터 네비게이션 가드 특정 라우터 진입 전에 로직을 정의 가능 데이터를 먼저 요청, 로딩하도록 할 수 있음 데이터 호출과 관련된 패턴을 구현 가능 특정 라우터 접근을 막을 수 있음 로그인이 필요한 페이지의 접근 막기 글로벌 Before Guards를 위한 세팅 생성될 vueRouter 인스턴스를 특정 식별자에 담기 import Vue from 'vue'; import VueRouter from 'vue-router'; import store from '../store'; ​ Vue.use(VueRouter); ​ const router = new VueRouter({ mode: 'his..

티스토리툴바