Minsoftk

SPA를 JavaScript로 구현하는 프로젝트를 진행하면서 url 변경 이벤트를 감지해야 하는 경우가 발생했다. 일반적으로는 pushState로 URL 변경 이후, router path에 해당하는 컴포넌트를 render 해준다. 아래와 같다. const navigate = path => { window.history.pushState({}, null, path); render(element, routes[path]); }; const render = (elem, Component) => { elem.innerHTML = Component; } 그런데 SPA를 구현하면서 우리는 URL 변경에 초점을 두고 개발을 진행하게 됐다. 즉, URL 변경이 일어나면 URL을 파싱 해 router에 해당하는 path..

14503번: 로봇 청소기 로봇 청소기가 주어졌을 때, 청소하는 영역의 개수를 구하는 프로그램을 작성하시오. 로봇 청소기가 있는 장소는 N×M 크기의 직사각형으로 나타낼 수 있으며, 1×1크기의 정사각형 칸으로 나누어 www.acmicpc.net 접근 방법 문제에서 왼쪽 방향으로 회전하는 부분을 현재 청소기의 방향을 기준으로 좌표를 미리 구했다. 아래 코드처럼 0 : 북일 경우에는 왼쪽 방향인 서쪽 방향을 체크해야 한다. 따라서 현재 좌표에서 바라보고 있는 방향을 기준으로 왼쪽의 좌표를 구했다. 0,1,2,3 각각 방향의 왼쪽 좌표를 미리 선언해놨다. 뒤로 한칸을 가야되는 경우도 미리 0,1,2,3 방향에 따라 뒤로 한칸의 좌표를 미리 구해놨다. 만약 청소기가 0:북 방향을 바라볼 때, 왼쪽을 탐색 해야..

1차원 배열 01. 수열 축소 slice : slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다. begin음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출합니다.begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환합니다. begin이 undefined인 경우에는, 0번 인덱스부터 slice 합니다. 0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미합니다. end예를 들어, slice(1,4)는 두번째 요소부터 네번째 요소까지 (1, 2 및 3을 인덱스로 하는 요소) 추출합니다.end가 생략되면 slice()는 배열의 끝까지..

반복해야 한다면 map() , 한 가지 요소를 찾아야 한다면 find() 조건을 만족하는 모든 요소를 찾는다면 filter()를 사용하면 된다. 🤔 map이란? map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. 프로토타입 arr.map(callback(currentValue[ ,index [, array]]) [,thisArg]) callback : 새로운 배열 요소를 생성하는 함수 안에 세 가지 인수를 가진다. - currentValue : 처리할 현재 요소 - index : 처리할 현재 요소의 인덱스 - array : map()을 호출한 배열 thisArg : callback을 실행할 때 this로 사용되는 값 굉장히 어렵게 설명되어있다....

자바스크립트를 시작한 지 얼마 안돼서 일반 프로그래밍 언어에서처럼 '=='를 '==='로 쓰는 줄 알았다. 하지만 이 둘의 차이가 명확히 존재했다. 이를 알게 된 계기는 최근 React 관련 프로젝트를 진행하면서 알게 됐다. 자바스크립트 기본기가 많이 부족하다는 것을 깨달았고, 조만간 React 프로젝트 개발일지를 올리면서 내가 오류를 겪은 코드들을 설명하면서 이 포스트가 링크되지 않을까 싶다. 🚀 차이점 '=='와 '===' 연산자의 주된 차이점은, value와 value를 비교할 때, '=='는 그것을 허용한다. 하지만 '==='는 value뿐만 아니라 두 변수의 data type도 비교한다. 여기서 data type이란 Number(숫자), String(문자열), Boolean(논리형) 등등을 의미..