백준 : 11650-javascript

https://www.acmicpc.net/problem/11650 11650번: 좌표 정렬하기 첫째 줄에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개의 줄에는 i번점의 위치 xi와 yi가 주어진다. (-100,000 ≤ xi, yi ≤ 100,000) 좌표는 항상 정수이고, 위치가 같은 두 점은 없다. www.acmicpc.net 문제 2차원 평면 위의 점 N개가 주어진다. 좌표를 x좌표가 증가하는 순으로, x좌표가 같으면 y좌표가 증가하는 순서로 정렬한 다음 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개의 줄에는 i번점의 위치 xi와 yi가 주어진다. (-100,000 ≤ xi, yi ≤ 1..

백준 : 2178-javascript

문제 N×M크기의 배열로 표현되는 미로가 있다. 1 0 1 1 1 1 1 0 1 0 1 0 1 0 1 0 1 1 1 1 1 0 1 1 미로에서 1은 이동할 수 있는 칸을 나타내고, 0은 이동할 수 없는 칸을 나타낸다. 이러한 미로가 주어졌을 때, (1, 1)에서 출발하여 (N, M)의 위치로 이동할 때 지나야 하는 최소의 칸 수를 구하는 프로그램을 작성하시오. 한 칸에서 다른 칸으로 이동할 때, 서로 인접한 칸으로만 이동할 수 있다. 위의 예에서는 15칸을 지나야 (N, M)의 위치로 이동할 수 있다. 칸을 셀 때에는 시작 위치와 도착 위치도 포함한다. 입력 첫째 줄에 두 정수 N, M(2 ≤ N, M ≤ 100)이 주어진다. 다음 N개의 줄에는 M개의 정수로 미로가 주어진다. 각각의 수들은 붙어서 입력..

백준 : 2667-javascript

문제 과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. 는 을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오. 입력 첫 번째 줄에는 지도의 크기 N(정사각형이므로 가로와 세로의 크기는 같으며 5≤N≤25)이 입력되고, 그 다음 N줄에는 각각 N개의 자료(0혹은 1)가 입력된다. 출력 첫 번째 줄에는 총 단지수를 출력하시오. 그리고 각 ..

웹사이트 렌더링은 어떻게 되는가?

웹사이트에 접속하면 HTML, CSS, JS 파일이 전송되고, 그것을 브라우저가 읽어서 우리에게 보기 좋게 만들어 준다. 그렇다면 그 과정을 상세히 알아보자. 1. Object Model 만들기 먼저 브라우저가 HTML과 CSS 파일을 받으면 이를 각각 DOM, CSSOM으로 변환한다. DOM은 이전에 알아본 것처럼 HTML의 요소들을 트리구조로 만든 것이다. CSSOM은 CSS Object Model로 CSS의 DOM이라고 할 수 있다. 이 때 중요한 것은 DOM과 CSSOM은 서로 독립적인 데이터 구조라는 것이다. 2. 렌더링 트리 생성 하지만 완전 별개의 DOM과 CSSOM으로는 홈페이지를 보여줄 수 없다. 따라서 이 별개의 모델을 서로 합쳐줘야 한다. 이때 이둘은 DOM을 기준으로 태그에 맞는 C..

css : 인접 형제 결합자 +

종종 메뉴나 목록을 만들 때, 그 사이 구분선을 넣으면서 어쩔 수 없이 :last-child, :first-child를 쓸 일이 있다. 아래와 같은 예를 보자. 1 2 3 4 5 li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; margin: 0 10px; position: relative; } 만약 위 5개의 li 사이에 구분자 '|' 를 넣고 싶다고 해보자. li { width: 50px; height: 20px; display: inline-block; background-color: cornflowerblue; text-align: center; marg..

백준-1012-javascript

https://www.acmicpc.net/problem/1012 1012번: 유기농 배추 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 www.acmicpc.net 문제 차세대 영농인 한나는 강원도 고랭지에서 유기농 배추를 재배하기로 하였다. 농약을 쓰지 않고 배추를 재배하려면 배추를 해충으로부터 보호하는 것이 중요하기 때문에, 한나는 해충 방지에 효과적인 배추흰지렁이를 구입하기로 결심한다. 이 지렁이는 배추근처에 서식하며 해충을 잡아 먹음으로써 배추를 보호한다. 특히, 어떤 배추에 배추흰지렁이가 한 마리라도 살고 있으면 이 지렁이는 인접한 다른 배추로 이동할 수 있어,..

Javascript-1d or 2d array 간단히 만들기

js에서 for문을 돌리지 않고 배열을 만들고 싶어서 찾아보던 중 간단하고 멋진 스택들을 찾아냈습니다. 1. new Array를 사용하는 경우 const arr1d = new Array(2).fill(0); // [0, 0] const arr2d = new Array(2).fill(null).map(() => new Array(3).fill(0)); // [[0, 0, 0], // [0, 0, 0]] new Array를 이용해 length값을 주어서 배열을 만드는 스택입니다. .fill은 하지 않아도 되지만, fill을 사용하지 않으면 배열의 값이 아무것도 들어있지 않아서 forEach 등의 메서드가 아예 먹히지 않을 수 있습니다. 따라서 null이나 0등의 값으로 초기화 할 것을 추천드립니다. 2. A..

DOM API 란?

DOM은 Document Object Model의 약자이다. 프론트엔드에서 이는 HTML에 있는 요소들을 트리 구조로 다루는 모델을 의미한다. HTML 요소들을 DOM으로 접근하면, javascript를 이용해 동적으로 HTML의 내용, 구조, 스타일을 변형시킬 수 있다. DOM에 접근하는 여러 메소드가 있으나 가장 많이 사용되는 것은 querySelector일 것이다. querySelector는 태그, 클래스, 아이디 모두 사용 가능하며 querySelectorAll을 이용해 여러 요소를 한 번에 불러 오는 기능까지 있기 때문에 아주 유용하다. 아래와 같은 HTML이 있다고 해보자. 1 2 3 4 만약 우리가 1번 째 div를 호출하고 텍스트를 바꾸고 싶다면 아래와 같이 할 수 있다. // 호출 let..