전체 글
-
[Alogorithm] 프로그래머스 - k번째수 (정렬 - sort)Alogorithm 2020. 5. 17. 20:39
프로그래머스 문제입니다. [문제설명] 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. [제한사항] array의 길이는 ..
-
[Javascript] es6 함수들 도중 break?Front-end/Javascript 2020. 5. 5. 18:03
Javascript와 es6 최근 node.js와 Vuex기반 프로젝트 기능을 개발하고 테스트 하던 중, 생각하지도 못한 버그가 발생하였다. es6의 Array.map, Array.filter, Array.reduce 등의 함수들은 많은 개발자들의 수고를 덜어주고 있다. for loop으로 했어야 할 코드가 훨씬 가독성 있고, 깔끔해지기 때문에 나 또한 선호하는 편이다. 이 함수들이 어떻게 만들어졌는지 보지 않고 쓰다가 결국 삽질을 하게 되었다. 시작된 삽질 다음과 같은 코드를 작성하면 어떤 결과를 보여줄까? const testArray = [{"A": "a"}, {"B": "b"}, {"C": "c"}] //Case1 testArray.map(item => { const key = Object.keys..
-
[Javascript] Eventloop(이벤트루프)Front-end/Javascript 2020. 5. 5. 12:01
대부분 김동우님, thms200님의 글을 통해 이해의 목적으로 작성하였습니다. Javascript와 단일스레드 Javascript는 타 프로그래밍 언어와 다르게 '단일 스레드' 기반이다. 즉, 동시에 하나의 작업만 처리할 수 있다는 의미인데, 사용자들이 보는 웹은 전혀 그래보이지 않는다. Javascript 다른 무언가가 있는걸까? 운영체제(Operating Systems)를 공부해보면 프로세스 스케쥴링(CPU 프로세스를 효과적으로 사용하기 위한 스케쥴링)에서도 이번 포스트의 예와 비슷하게 비유할 수도 있을 것 같다. 프로세스들을 스케쥴링을 통해 아주 잘 처리하면 동시에 처리하는 듯한 느낌이 들기도 한다. 다단계 큐에 기반한 스케쥴링은 우선 순위에 따라서, 처리해야할 태스크(task)들을 큐(Queue)..
-
[WEB] 브라우저는 어떻게 렌더링할까?Front-end/Web 2020. 5. 4. 22:03
웹 어플리케이션을 개발하다보면 DOM(Document Object Model)을 참조하거나 부득이하게 변경할 때가 있다. 이 때문에 "DOM은 정체"와, 퍼포먼스의 이유로 "브라우저는 어떻게 렌더링"의 과정이 궁금해지게 된다. 자주 쓰고 있는 웹이든 Vue.js든 본인이 사용하는 기술의 Lifecycle을 이해하는 것은 중요하다고 생각한다. 브라우저의 구성 요소 그림1처럼 브라우저는 구성되어 있다. 네트워크를 가르쳐주시는 교수님 또는 책에서 종종 쓰는 Top-down 방식으로 보면 우리가 접하는 UI 레이어부터 이 UI의 백엔드까지 내려오게 된다. 이번 포스트에서는 브라우저의 렌더링 과정을 다룰 예정이므로, 구성 요소 중 렌더링 엔진이 주인공이다. 브라우저의 렌더링 엔진은 요청한 컨텐츠를 표시한다. 예를..
-
[Javascript] var, let, const 차이는?Front-end/Javascript 2020. 5. 4. 13:51
var 변수 선언시 사용되는 var는 아래 링크에서 설명하였다. https://daniel-park.tistory.com/5 [Javascript] Hoisting(호이스팅) Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지.. daniel-park.tistory.com 요약하자면, var을 통해 변수를 선언 및 초기화 할 수 있다. function scope에서 조건에 따라 hoisting이 이루어진다. es2015 사용 환경에서는 var 대신 let과 const를 사용한다. (추가) 아래 코드처럼 변수를 ..
-
[Javascript] Hoisting(호이스팅)이란?Front-end/Javascript 2020. 5. 4. 12:16
Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지 않다. eslint가 엄격할 때는 성가실 때가 많지만 경고 또는 에러를 내주는 이유는 바로 hoisting 때문이지 않을까 생각이 된다. Hoisting(호이 스팅)이란, 함수 또는 변수의 선언을 각각의 유효 범위의 최상단에 선언해주는 것을 말한다. - 유효 범위란 함수 블록{}을 말한다. - JS Parser가 유효 범위 내의 코드를 SSG 훑은 후, 이를 기억했다가 실행시킨다. - 함수와 변수의 선언과 초기화를 분리하는 과정이라고 생각할 수 있다. - 메모..
-
[Vue.js] Vue cli2 & CORS 간단한 세팅법Front-end/Vue.js 2020. 5. 3. 17:31
CORS 그리고 Vue.js 이전 포스트에서 이론적으로 CORS를 다루었기 때문에, trouble shooting을 다루어보려고 한다. https://daniel-park.tistory.com/3 CORS(Cross Origin Resource Sharing) CORS(Cross Origin Resource Sharing)가 필요한 경우 Node.js dev 모드로 웹을 api 서버와 달리 개발할 때, 크롬 개발자도구 콘솔에서 에러를 뿜어낼 때가 있다. CORS CORS CORS... 정체가 무엇일까? CORS(Cross.. daniel-park.tistory.com Node.js로 front, back 모두 개발하면, 모든 스택을 커버하기 때문에 세팅이 비교적 쉬울 것이다. 하지만 legacy 서버가 ..
-
[WEB] CORS(Cross Origin Resource Sharing) 개념Front-end/Web 2020. 5. 3. 16:22
CORS(Cross Origin Resource Sharing)가 필요한 경우 Node.js dev 모드로 웹을 api 서버와 달리 개발할 때, 크롬 개발자도구 콘솔에서 에러를 뿜어낼 때가 있다. CORS CORS CORS... 정체가 무엇일까? CORS(Cross Origin Resource Sharing)는 Front, Back 개발자 모두 기본적으로 알아야하는 웹 지식 중 하나이다. Web은 보안상 이슈의 이유로 동일 출처 정책(Same Origin Policy)을 사용해오고 있다. 즉, 클라이언트가 HTTP 요청시, 자신의 출처(도메인, 프로토콜, 포트)가 같아야 함을 의미한다. 하지만, 웹 개발의 복잡성이 더해지면서, SOP를 지켜가며 구현하기란 쉽지 않은 일이다. 수요가 있으면, 공급이 있듯,..