Til
-
React - Virtual DOMReact/기본 2020. 7. 20. 00:25
Virtual DOM이란 무엇인가? 우선 Virtual DOM은 이름 그대로 가상의 DOM을 의미한다. 리액트의 주요 특징 중 하나이며, DOM을 빈번히 업데이트하는 것을 좀 더 효율적인 방법으로 업데이트하기 위해 만들어졌다. 그렇다면 DOM은 무엇인가? DOM은 Document Object Model의 약어이다. 웹 페이지가 화면에 로딩되면 브라우저는 페이지의 문서 객체 모델(DOM)을 만든다. 이 DOM을 더 간단히 설명하자면, 애플리케이션의 UI를 나타내며, HTML 파일의 JavaScript 표현을 말한다. 애플리케이션 UI 상태가 변경 될 때마다 DOM은 트리 형태이기 때문에 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입도 가능하다. 왜 DOM에 바로 접근하는 대신 Virtual D..
-
자바스크립트 - 호이스팅(Hoisting)이란?JavaScript/기본 2020. 7. 19. 16:54
호이스팅(Hoisting)이란? scope(스코프) 안에서의 변수 선언을 최상위에서 선언한 것과 동등하다는 의미를 가진다. 즉, 변수가 선언되기 이전에 변수를 사용하면, 변수가 사용된 블럭 범위의 맨 위로 변수를 끌어올린다는 말이다. var x = '외부 scope'; function fnc() { console.log(x); // undefined var x = '내부 scope'; }; fnc(); 함수 fnc를 실행해보면, 콘솔 창에는 undefined가 출력이 된다. 왜 undefined가 출력이 될까? 그 이유는 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지는데, scope(스코프) 안에서 선언된 변수는 항상 최상위에 선언한 것과 동등한 의미를 가지기 때문에 즉, 호이..
-
[level1] - x만큼 간격이 있는 n개의 숫자도움말programmers/level1 2020. 7. 19. 12:58
코딩테스트 연습 - x만큼 간격이 있는 n개의 숫자 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. �� programmers.co.kr 문제 설명 : 함수 solution은 정수 x와 자연수 n을 입력받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 입력 및 출력 x n return 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4, -8] 접근 방법 : 우선 n개를 지닌 리스트를 만들어야 하기 때문에, 배열..
-
자바스크립트 - scope(스코프)란?JavaScript/기본 2020. 7. 19. 01:17
scope란? 변수에 접근할 수 있는 범위를 의미한다. 이 범위는 변수의 접근성을 관리하는 정책이며, scope에는 global(전역)와 local(지역) 2개의 범위가 존재한다. global(전역) scope const name = "Lim"; // 전역 스코프 function print(){ console.log(name); // Lim } print(); console.log(name); // Lim 먼저 name이라는 변수를 정의하고 print 함수 블록 안과 밖에 console.log(name)을 출력하면 둘 다 같은 값이 나온다. 따라서, 변수 name은 전역 스코프라고 볼 수 있다. 전역 scope로 선언된 변수는 모든 범위에서 사용할 수 있다. local(지역) scope 코드 블록 내부에..
-
[level1] 핸드폰 번호 가리기programmers/level1 2020. 7. 18. 17:46
코딩테스트 연습 - 핸드폰 번호 가리기 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자 programmers.co.kr 문제 설명 : 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 입력 : "01033334444" 출력 : "********4444" 입력 : "027778888" 출력 : "*****8888" 접근 방법 : 일단 출..
-
React - 초기 렌더링과 리렌더링React/기본 2020. 7. 18. 16:31
렌더링이란? 사용자 화면에 View(내용)를 보여 주는 것을 렌더링이라고 한다. 그렇다면 리액트 라이브러리는 뷰(View)를 어떻게 렌더링 하길래 데이터가 변할 때마다 새롭게 리 렌더링 하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까?? 이것의 해답은 바로 초기 렌더링과 리렌더링에 있다. 초기 렌더링 리액트는 맨 처음 어떻게 화면에 보여질 지를 다루는 render() 함수가 존재한다. 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. render() 특징 render() 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 동작하는지에 대한 정보를 지닌 객체를 반환한다. 또, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되..
-
[level1] - 제일 작은 수 제거하기programmers/level1 2020. 7. 14. 19:21
코딩테스트 연습 - 제일 작은 수 제거하기 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1 programmers.co.kr 문제 설명 : 정수를 저장한 배열, arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를 들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 return하고, [10]이면 [-1]을 return합니다. 입력 : [4,3,2,1] 출력 : [4,3,2] 입력 : [10] 출력 : [-1] 접근 방법..
-
자바스크립트 - 동작 원리JavaScript/동작원리 2020. 7. 5. 20:23
자바스크립트는 싱글 스레드 프로그래밍 언어이다. 싱글 스레드 런타임을 가지고 있다는 의미이다. 이것은 결국 한 번에 하나의 싱글 콜 스택(Call Stack)만을 가지고 있다는 말을 뜻한다. 여기서 싱글 스레드란? 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 것을 말한다. 그렇다면 자바스크립트는 어떻게 작동할까? Call Stack 그림을 보면서 이해해보자. Call Stack은 Data Structure(자료 구조)로 작성한 코드가 실행되는 순서를 기억하고 있다. 함수를 실행하려면 Stack(스택)에 해당하는 함수를 집어넣게 되고, 함수에서 리턴이 일어나면, 스택의 가장 위쪽에서 해당 함수를 꺼내게 된다.(LIFO) 이것이 Call Stack이 하는 일의 전부이다. 이 코드를 실행하면 실행..