프로그래밍 공부하기

1. Lang This paragraph is defined as British English. Ce paragraphe est défini en français. 이 단락은 한국어로 정의됩니다. lang은 모든 HTML 요소에 사용될 수 있는 전역특성(Global Attribute)이다. 위와 같이 HTML요소의 컨텐츠가 어떤 언어로 쓰여졌는지 표시하는 것이다. lang 특성의 값이 빈 문자열이거나 특성자체가 없는 경우 기본값인 '알 수 없음(Unknown)'이 된다. 2. Use lang 태그를 사용해야할까? 한국형 웹 콘텐츠 접근성 지침(관련페이지, 관련문서)에는 웹 서비스는 서비스에서 주로 사용되는 언어를 사용해야한다고 명시되어있다. 이는 소스코드 최상단에 위치하는 html 태그에 lang 속성을..

Union-Find Sturucture이란 서로소 집합(Disjoint Set)을 저장하기 위한 자료구조이다. 서로소 집합이란 그림과 같이 공통원소가 존재하지 않는 두 집합을 의미한다. Union-Find는 두 노드가 서로 같은 그래프에 속하는지 판별하거나 그래프의 사이클(순환 경로)을 판별하기 위해 사용한다. 1. Operation Find: 특정 원소가 속한 부분 집합을 구한다. Union: 2개의 부분 집합을 하나의 부분 집합으로 합친다. Union-Find 구조는 Find와 Union 2가지 연산으로 구성된다. Find는 자료구조 내에서 해당 원소가 속해있는 집합을 찾는 연산이다. Union은 두 개의 집합을 합칠 수 있는 경우 합치는 연산이다. 2. Example 위와 같은 노드와 경로가 있다고..

https://www.youtube.com/watch?v=F_vBAbjj4Pk Web Server vs WAS 1 https://www.youtube.com/watch?v=NyhbNtOq0Bc Web Server vs WAS 2 Web Server와 WAS의 차이가 궁금해져서 위 영상들을 찾아보게 되었다. 미리 정리하자면 Web Server와 WAS는 상황에 따라 변하는 정보를 제공할 수 있는가 라는 관점에서 차이가 있다. 1. Web Server Web: 인터넷을 기반으로한 정보를 공유/검색할 수 있게 하는 서비스 - URL(주소), HTTP(통신규칙), HTML(내용)으로 구성된다. Server: 클라이언트에게 네트워크를 통해 정보/서비스를 제공하는 컴퓨터 시스템 Web Server: 인터넷을 기반으..

eslint --init을 하다가 Could not find a package.json file 이라는 오류와 만났다. 이는 말 그대로 eslint --init을 하기 전에 package.json 파일이 필요하기 때문에 npm init으로 package.json파일을 만들어주면 된다. 아마도 eslint --init을 하면 package.json의 devDependencies 항목 내에 eslint 항목이 생기기 때문에 그런 것 같다.

Observer란 관측자를 뜻한다. 특정 대상을 항상 지켜보고 있는 존재이다. 브라우저에는 Intersection Observer 라는 API가 존재한다. Intersection Observer는 root와 하나 이상의 Element가 교차하는 시점을 관측하고 있다. root는 지정하지 않는다면 뷰포트를 의미한다. 즉, Intersection Observer는 관찰 대상이 뷰포트 내에 들어오는지 비동기적으로 관찰하는 요소로 활용할 수 있다. Intersection Observer는 대표적으로 무한스크롤, 컨텐츠 Lazy Load의 구현에 사용된다. 1. Infinity Scroll 무한 스크롤이란 페이지의 세로 끝에 도달했을 때 새로운 컨텐츠를 불러오는 기능이다. 무한 스크롤을 구현하는 방식 중 하나는 ..

블로깅을 시작하고 100개가 넘는 포스팅을 했지만 JavaScript의 기본인 실행 컨텍스트에 대한 포스팅을 한 적이 없다. 왜냐하면 내 스스로 실행 컨텍스트에 대한 이해가 부족하다고 생각하고 정리하기 어려운 개념이기 때문이다. 하지만 이를 계속 회피할 수는 없기 때문에 내가 생각하는 실행 컨텍스트에 대해 정리해보고자 한다. 이 글의 내용은 특히 필자의 주관적인 의견이 담겨있을 수도 있고, 정확한 정보가 아닐 수도 있다. 혹시 읽는 사람이 있다면 이러한 점을 고려해주었으면 좋겠다,, 1. Context 문맥(Context)이란 말을 코드 이외의 곳에서 들어본 적이 있는가? 나는 학창시절 국어시험에서 본 경험이 있다. 국어 시험에선 지문의 '배' 와 같은 단어에 밑줄을 쳐놓고 '문맥'상 어떤 의미인지 고르..

Candies | HackerRank Help Alice to save money by minimizing the total number of candies. www.hackerrank.com 학생들에게 사탕을 1개 이상씩 나눠줄 때 필요한 사탕의 최소 갯수를 구하는 문제이다. 단, 서로 이웃해있는 두 학생들 중 점수가 높은 아이는 더 많은 사탕을 주어야한다. 또한 점수가 같은 경우 반드시 사탕을 같은 갯수로 줄 필요가 없다. 즉, 학생들의 점수가 [1, 2, 2] 라면, 사탕은 [1, 2, 1] 개를 주어야 사탕의 최소 갯수가 된다. 1. 문제 분석 주어진 예시를 한 번 풀어보자. 단순하게 생각하면 i번째 학생은 i - 1 번째 학생보다 점수가 높으면 i -1 번째 학생보다 +1개를 갖고, 점수가 낮으..

Array Manipulation | HackerRank Perform m operations on an array and print the maximum of the values. www.hackerrank.com a-b 구간에 k를 더해나가면서 가장 큰 k 누적 값을 찾는 문제이다. 예제를 살펴보자. 1. 예제 문제에서는 query라는 이름으로 (a, b, k)의 순서쌍이 여러개 주어진다. 이 쿼리들을 0으로만 구성된 배열에 적용해나가면서 최종 배열의 최대 값을 찾는 문제이다. 단, 인덱스는 1부터 시작한다. 처음에는 모든 값이 0이다. (1, 5, 3) 은 배열의 1번부터 5번까지 3을 더하라는 의미이다. 실행 결과는 step1 이다. (4, 8, 7) 은 배열의 4번부터 8번까지 7을 더하라는 의..

NumberOfDiscIntersections coding task - Learn to Code - Codility Compute the number of intersections in a sequence of discs. app.codility.com index를 중심으로, value를 반지름으로 하는 원을 그렸을 때 교차하는 원들의 쌍의 갯수를 구하는 문제이다. 예를 들어 A = [1, 2]라는 배열이 있다면 첫 번째 원은 0을 중심으로 1을 반지름으로 하는 주황색 원이다. 두 번째 원은 1을 중심으로 2를 반지름으로 하는 붉은색 원이된다. 이 둘은 겹쳐져있으므로 답은 1이 된다. 1. 풀이1 O(N^2) 원이 겹치는 것은 2가지 경우가 있다. 첫 번째는 한 원이 다른 원을 포함하는 경우, 두 번째는..

코딩테스트 연습 - 징검다리 건너기 [2, 4, 5, 3, 2, 1, 4, 2, 5, 1] 3 3 programmers.co.kr 밟을 수 있는 횟수가 정해진 돌들로 이루어진 징검다리를 건널 때 최대 몇 명이 징검다리를 건널 수 있는지를 찾는 문제이다. 이 때 각 징검다리의 돌은 주어진 k 만큼 뛰어 넘을 수도 있다. 1. 문제 분석 문제를 봤을 때 가장 먼저 든 생각은 제한 사항의 숫자들이 상당히 크다는 점이다. stones 배열의 크기는 1~20만 범위이며, stones의 원소 값은 1~2억까지 범위를 갖는다. 따라서 해결 방법이 입출력 예시처럼 한 사람씩 건너지는지 확인하는 것은 O(N*M) 즉, stones.length * stones의 원소 범위 만큼의 시간이 걸리므로 시간초과에 걸릴 것이다. ..