전체 글
-
Javascript - 배열 선언하는 여러가지 방법프로그래밍 언어/Javascript 2021. 1. 16. 15:30
javascript를 사용하다보면 배열을 쓸 일이 정말 많다. 화면을 다루는 언어이기 때문에 리스트, 값들을 담고 있는 경우가 많기 때문인 것 같다. 예를 들면 api로 어떤 리스트를 받아와서 담은 후에 화면에서 처리하거나, 셀렉트 박스에 담을 리스트를 선언하는 등의 경우 들이있다. 그런데 사실 웹을 개발할 때는 초기화를 안하고 api에서 값을 받을 때 결과 값으로 초기화 하는 경우도 있고 단순히 []로 선언하여 사용하는 경우가 있다. 그리하여 나는 사실 자바스크립트의 배열을 선언하는 방법을 제대로 모르고 있었다. 그리하여 오늘 어떻게 선언하는지에 대해 소상히 알아보도록하겠다. 먼저 배열을 선언하는 방법은 여러가지가 있는데, 초기 값을 넣는 방법도 여러가지가 있다. 아래와 같은 방법으로 빈 배열을 선언 ..
-
Javascript - Array를 Queue처럼 사용하기프로그래밍 언어/Javascript 2021. 1. 15. 10:38
이전 시간에는 자바스크립트의 배열을 사용해서 스택처럼 사용하는 방법에 대해 알아봤다. 오늘은 배열을 사용해서 queue처럼 사용하는 방법에 대해 알아보겠다. stack과 queue의 차이는 간명한데, stack은 last in first out이고 queue는 first in first out이다. 즉 큐는 정의로운 사회이고 스택은 고통받는 사회인 것이다. 선착순의 원리가 작용하는 곳이 queue이다. 어떤 경우에 queue와 stack를 사용하는지는 코딩테스트 문제를 해결하다보면 알 수 있는데, 그것은 다른 시간에 다뤄보도록 하고 오늘은 queue를 어떻게 만드는지에 대해 알아보겠다. Splice - dequeue의 기능 queue도 사실상 stack과 거의 같은 방식으로 구현된다. Splice를 사용..
-
Javascript - Array를 스택처럼 사용하기프로그래밍 언어/Javascript 2021. 1. 14. 12:14
Javascript에서는 Java처럼 스택을 따로 지원하지 않는다. 그래서 코딩테스트를 볼 때 javascript를 쓴다면 꽤나 당황할 수 있다. 그러나 다행히도 Array에서 제공하는 기본적인 기능을 사용하면 stack을 만들지 않고도 stack처럼 사용할 수 있다는 사실을 알고 있는가? 오늘은 어떻게 Array를 스택처럼 사용할 수 있는지에 대해 알아보겠다. 그렇게 하기 위해서는 먼저 Array에서 제공하는 몇가지 함수들을 알아야 한다. Splice - Pop의 기능 Splice는 Pop의 기능을 대체해서 사용할 수 있다. Slice와 간혹 헷갈리곤 하는데 Splice는 잘라낸 부분을 return해주는 배열의 기본 함수이다. 예를 들어 [0,1,2,3,4]라는 배열이 있다고 하자. 이 배열의 4번째 ..
-
Web - 브라우저의 작동 원리Web 2021. 1. 10. 18:50
브라우저란? 웹 브라우저는 여느 다른 프로그램과 똑같이 OS 위에서 작동하는 하나의 프로그램이다. 그리고 브라우저 내부에서 javascrip, html, css를 사용하는 것이다. 여러분들이 사용해보시고 지금도 사용하면서 아시겠지만 브라우저의 주된 기능은 사용자가 인터페이스를 클릭하면 그것에 대한 정보를 요청한 후 요청이 돌아왔을 때 그 정보를 다시 화면에 표시해주는 것이다. 화면이 표시되는 방법은 브라우저에서 DOM을 생성하여 각각의 필요한 위치에 표시되게 하고 변경할 수 있게 해준다. 여기서 세세한 차이가 있다면 HTML과 CSS는 랜더링 엔진이 처리한다면, javascript는 자바스크립트 엔진이 처리한다는 점이다. 여기서 랜더링 엔진과 자바스크립트 엔진은 동기적으로 작동하는데, 렌더링 엔진이 ht..
-
Web - Webpack이란 무엇인가?(2)카테고리 없음 2021. 1. 9. 13:56
앞선 포스팅 Web- Webpack이란 무엇인가?(1)에서는 webpack의 개념과 webpack을 왜 사용하는지에 대해서 전반적으로 알아보았다. 앞선 시간에서는 javascrip 파일을 bundler로 만들어주는 기능에 대해서만 알아보았는데 웹 서비스는 사실 html, css, javacsript, 각종 asset(img, font, 등)로 이루어져 있기 때문에 css를 빼먹을 수는 없다. 그래서 오늘은 webpack에서 추가적으로 css까지 bundling 할 수 있게 도와주는 라이브러리인 Loader에 대해서도 알아보자. Loader Loader는 webpack.config.js의 module 구간에 정의를 해줌으로써 사용할 수 있는데, javascript로 css같은 파일들을 import할 수 있..
-
Web - webpack이란 무엇인가?(1)Web 2021. 1. 9. 12:25
Webpack의 등장 webpack이라는 것은 처음부터 존재했던 것은 아닙니다. 웹페이지로 할 수 있는 일들이 점점 많아지면서 javascript 파일, 프론트 프로젝트의 규모가 점점 커지게 되었습니다. 그래서 하나의 프로젝트가 많은 파일을 가지고 동작되면서 브라우저에서는 수 많은 파일을 로딩하는 것 자체가 퍼포먼스에 영향을 주기 시작했습니다. 이것을 해결하기 위해서 webpack이라는 개념이 등장했습니다. Webpack의 목적 webpack의 목적은 결국 브라우저가 어플리케이션을 더 빠르게 동작할 수 있게 도와주는 것인데, Static module bundler라고도 부를 수 있습니다. Bundle은 소프트웨어가 동작하는데 필요한 모든 것을 포함하는 패키지를 지칭하는 말입니다. webpack은 이러한 ..
-
Web - Dom이란 대체 무엇인가?Web 2021. 1. 8. 21:57
자바스크립트를 사용해서 프론트엔드를 개발하다보면 Dom이라는 용어를 자주 접하게 된다. Document Object Model이라는 것은 아는데 봐도봐도 모호한 것 같은 기분이 든다. DOM은 결국 브라우저 내의 모든 객체들을 뜻하게 되는데 그것에 대해 조금 더 자세히 살펴보자 DOM은 BOM에 포함되어 있는 개념이다. BOM은 Browser Object Model의 줄임말이다. 즉 브라우저 내의 모든 객체를 가리키는 용어이다. DOM도 브라우저 내의 객체 중 하나이기 때문에 BOM에 속하는 것이다. DOM은 한국 말로 풀면 문서 객체 모델이라는 뜻이다. 우리가 Html이나 Javascript로 코드를 작성하면 컴퓨터가 어떻게 이해할 수 있을까? DOM은 일종의 컴퓨터가 이해하기 쉽게 우리의 코드를 구조..
-
Java - Iterator가 존재하는 이유프로그래밍 언어/Java 2021. 1. 6. 19:18
Iterator 자바를 프로그래밍할 때 Iterator를 사용해본 적은 아마 없는 것 같다. 왜 사용해야하는지도 잘 모르겠고, 코드가 더 복잡해지는 것 같고 손이 더 많이가서 불편하다는 생각이 든다. 그러나 필시 Iterator는 StringBuilder처럼 존재하는 이유가 있을 것이다. 오늘은 그 이유에 대해서 알아보자. 먼저 Iterator를 사용할 수 있는 것은 Collection을 상속받은 클래스들이다. 예를 들면 List, Set, Map, Queue 등이 있다. 다른 자료구조들에서는 get을 하던지, pop을 하던지해서 내부의 데이터를 읽을 수 있다. 그러나 Set에서는 get이 없어서 iterator를 사용하지 않으면 값을 읽어올 수가 없다. (몰랐음) 그러나 그러면 Set에서만 쓰면 되는 ..