컴퓨터 탐험가 찰리

1. 파일구조 이제 지엽적으로 Vue 문법만 공부하는 것이 아니라, 전체적인 파일구조를 살펴보자. 기본 구조는 아래와 같다. 전체적인 파악 후, header 만들기를 따라하면서 각 컴포넌트들이 어떻게 구성되어지는가를 살펴보자. 이미 실행해봤지만, 초기 파일에서 console창을 열어서(intelliJ, windows이면 [Alt + F12]), 'npm run serve' 명령어를 입력해보자. localhost:8080/에 접속하면 아래와 같은 화면이 나온다. 이 화면은 public 폴더의 index.html을 표현한 것이며, 여기에 components 폴더의 HelloWorld.vue 컴포넌트를 삽입한 것이다. 정확히 어떤 경로를 거쳐서 이 컴포넌트가 화면에 출력된 것인지 알아보자. 2. index.h..

1. 소개 quicksort는 1960년에 찰스 앤서니 리처드 호어라는 사람이 처음 제안했고, 수정과 보완을 거쳐 완성된 알고리즘이라고 한다. 이름 그대로 아직까지도 가장 빠른 알고리즘 중 하나라고 한다. 문제를 잘게 쪼개고, 쪼개진 문제들을 재귀적으로 해결하는 Divide and Conquer 전략을 이용한다. 2가지 풀이법이 있는데, Not in place, in place 방법이 있다. 인자로 받아오는 정렬되지 않은 배열 외에 외부의 배열을 만드는 방법이 not in place, 인자로 받아오는 배열 내부에서 바로 정렬하는 방법이 in place 방법이다. 예상할 수 있듯이 not in place 방법은 추가적인 메모리가 요구되므로 in place 방법이 선호된다. 시간복잡도는 평균적으로는 O(Nl..

풀이 삽입정렬은 카드놀이에서 새로운 카드를 받았을 때, 원래 갖고 있던 정렬된 배열에 새로운 카드를 정렬시켜 넣는 것에 비유할 수 있다. 기존 정렬된 배열의 맨 끝요소와 새로운 요소를 비교하는 방식으로 정렬을 진행한다. 예를 들어 [2, 3, 5, 7]의 배열이 있고, 추가로 [1]을 넣어준다면 7과 1을 비교해서 1이 더 작으므로 7의 index 위치에 1을 삽입하고, 7은 한칸 뒤로 미는 방식이다. 새로 넣어준 1이 정렬된 배열에서 제자리를 찾아갈 때까지 이 과정을 반복한다. 다만, 받아오는 배열은 전체가 정렬되지 않은 배열로 간주하고, 맨 첫번째 요소만 정렬된 것으로 생각하여 순차적으로 정렬과정을 진행한다. 알고리즘 구현 알고리즘 구현은 정렬되지 않은 부분을 외부 루프로, 정렬된 부분을 내부 루프로..

이전글React / 기초1 / React 설치, JSX, component 1. State앞선 글에서 작성한 바와 같이, 클래스 컴포넌트는 상태를 변경할 수 있는 요소를 갖고 있는데, 그것이 바로 state 이다. 클래스 컴포넌트 안에서 state를 정의하고, 이벤트 등에서 활용하게 된다. state는 직접적인 수정이 불가하고 반드시 setState라는 메서드를 이용해서만 변경해야한다. 가장 많이 사용되는 예제인 Counter 만들기를 해보자. 1-1. State 부분만 집중해서 보기다른 부분들은 다음 섹션에서 하나씩 기술할 것이다. 우선은 6번줄을 보면, this.state로 {count : 0} 이라는 객체가 정의되어 있음을 볼 수 있다. 사용자의 명령에 따라 반응할 정보를 객체 형태로 만들어 놓고,..

1. 브라우저 보안의 필요성 브라우저는 클라이언트와 서버 간 통신을 하며 서버의 데이터, 클라이언트의 사용자 정보 등을 전달하고 표현하는 역할을 하기 때문에, 해커들로부터 공격받기 쉽다. 특히, 브라우저가 자바스크립트를 구동하기 때문에 해커가 사용자의 웹페이지를 조작하거나, 사용자의 정보를 빼돌릴 수 있다. 2. 브라우저를 공격하는 대표적인 2가지 방법, XSS, CSRF XSS : Cross Site Scripting 클라이언트가 서버를 신뢰해서 발생하는 문제이다. XSS는 해커가 서버의 데이터에 특정 태그를 서버의 데이터 상에 올려놓고, 다른 사용자가 그 데이터를 서버의 응답으로 받게되면 그 사용자가 받은 데이터에 태그가 있기 때문에 웹페이지에서 DOM을 변경하게 되어 피해를 입게 되는 방식이다. 기..

앞서 비동기 함수를 처리하는 callback, Promise 방식에 대한 글을 작성하였다. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Promise 2개의 글을 완전히 이해해야지만, 아래의 async/await 문법을 이해할 수 있다. 1. Async/await 사용 이유 앞서 살펴본 예시에서는 비동기 함수들의 결과를 사용자가 원하는대로 출력하기 위해서 callback 함수를 중첩 형태로 처리하거나, Promise를 .then, .catch의 형태로 '이어서' 작성해주는 형태였다. Async/await는 사용자가 굳이 함수들을 '이어주는' 형태를 고민하지 않더..

브라우저 d2.naver.com/helloworld/59361 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 다시 말해 서버 컴퓨터 내의 데이터들을 수신하고, 해석해서 사용자가 알아볼 수 있도록 제공 및 관리하는 서비스이다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데, 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 링크에 나오는 것처럼, 브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소로 이루어져있다. 서버-클라이언트-데이터베이스 클라이언트 : 사용자가 쓰는 컴퓨터 또는 프로그램을 의미한다. 어떤 정보를 얻기 위..

1. 비동기 프로그래밍 개요 보통 동기/비동기 방식은 Client-Server간의 요청과 응답 관계를 통해 설명한다. 동기 방식은 클라이언트와 서버가 함께 협력하여 일한다는 것이다. client가 일을 안할 때는 server가 일을 하고, server가 일을 안할때는 client가 일을 하게 된다. 비동기 방식은 client가 요청한 일을 server가 완료하기 전에, client가 다른일들을 처리하는 것이다. 다시 말해 client가 어떤 시간이 걸리는 일을 server에 시켜놓고, server가 그 일을 하는 동안 client는 그 다음 일들에 접근하여 처리하는 방식이다. sever에서 실행이 끝날 때까지 기다리는 방식으로 일을 해서는 웹페이지나 프로그램의 정상적인 작동이 어렵기 때문이다. clien..

MDN에 여러 Object의 method를 검색하다 보면, Syntax 부분에서 아래와 같은 문구들을 볼 수 있다. 여기서 소괄호 (parenthesis) 안의 대괄호 [ ] brackets 들은 어떤 의미를 갖는 걸까? 대괄호는 아래에 표현된 Optional 인자들을 의미한다. 위의 .map method를 활용하여 설명하자면, .map method에 들어가는 callback 함수에, 반드시 currentValue 인수는 입력이 필요하다. 그리고 그 다음 인수를 입력하면, index로 처리되는 것이다. 여기서, index의 대괄호 안에 array 인수의 대괄호가 있는 것을 볼 수 있는데, 이것은 인수들을 차례대로 입력할 때, 반드시 index 인수를 입력하고 나서야 array 인수를 입력할 수 있다는 것..

Inheritance(상속)의 개념에 대해서 살펴본다. 상속은 객체지향 프로그래밍을 위해 중요한 내용이다. 그러나 객체지향 프로그래밍 자체에 대한 이해나, execution context, this에 대한 이해가 없다면 정확한 이해가 어려울 수 있다. 우선 class와 instance 등 객체지향방식 프로그래밍에 대한 개념과 execution context, this에 대한 종합적 이해가 필요하므로, 아래 링크 글들을 정확히 이해해야 한다. - 객체지향 프로그래밍 - Javascript / Execution context, this - Javascript / 함수 / call, apply, bind 1. prototype과 상속의 개념 prototype은 '원형' 이라는 뜻으로, 어떤 함수의 속성 중 하..