본문 바로가기

분류 전체보기21

[Javascript] Closure 클로저란? MDN에 따르면, 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합이라고 한다. 이것만 들으면 무슨 말인지 더 모르겠다😅. 이를 쉽게 이해하기 위해선 먼저 변수의 렉시컬 스코핑이 어떻게 이루어지는지 알아야 한다. 렉시컬 스코핑 자바스크립트에서 함수가 호출되면 먼저 필요한 변수를 자신의 렉시컬 환경에서 찾는다. 만약 자신의 내부 렉시컬 환경에 필요한 변수가 없으면, 참조하고 있는 외부 렉시컬 환경으로 검색 범위를 넓히고, 그래도 변수를 찾을 수 없으면 전역 환경까지 계속해서 검색 범위를 넓힌다. 중간에 필요한 변수를 찾았으면, 해당 변수를 사용한다. 이렇게 내부 함수가 외부 환경의 변수를 사용할 때, 외부 함수에서 내부 함수를 반환하면 클로져를 형성하게 된다. 외부 함수가 종료되었지만, 내부 함.. 2022. 4. 14.
[백준] 2447번: 별찍기 - 10 https://www.acmicpc.net/problem/2447 2447번: 별 찍기 - 10 재귀적인 패턴으로 별을 찍어 보자. N이 3의 거듭제곱(3, 9, 27, ...)이라고 할 때, 크기 N의 패턴은 N×N 정사각형 모양이다. 크기 3의 패턴은 가운데에 공백이 있고, 가운데를 제외한 모든 칸에 별이 www.acmicpc.net 풀이 작은 패턴들이 더 큰 패턴을 이루는, 전형적인 재귀 문제이다. N = int(input()) grid = [[' ']*N for _ in range(N)] def recursion(n, x, y): if n == 1: return d = int(n/3) for i in range(3): for j in range(3): if not(i==1 and j==1): re.. 2022. 4. 2.
[백준] 1238번: 파티 https://www.acmicpc.net/problem/1238 1238번: 파티 첫째 줄에 N(1 ≤ N ≤ 1,000), M(1 ≤ M ≤ 10,000), X가 공백으로 구분되어 입력된다. 두 번째 줄부터 M+1번째 줄까지 i번째 도로의 시작점, 끝점, 그리고 이 도로를 지나는데 필요한 소요시간 Ti가 들어 www.acmicpc.net 풀이 출발지와 목적지 사이의 최단 왕복 시간을 구하는 전형적인 최단 경로 문제이다. 다만 한 정점에서만 출발하는 것이 아니라, N개의 정점 각각에서 출발했을 때의 최단 경로를 구하고, 그중에서 최대 값을 뽑아야 한다. 처음엔 문제를 대충 읽고, 단지 모든 정점에서의 최단 경로를 구해야한다는점 만을 고려해 플로이드 워셜 알고리즘으로 접근했다. import sys N, .. 2022. 3. 26.
[Javascript] Tagged Templates (styled-components의 이상한 문법) styled-components의 이상한 문법 styled-components 또는 Emotion을 사용하는 사람들은 다음과 같은 코드가 매우 익숙할 것이다. const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ` 예시 코드에 적혀 있어서, 강의에서 이렇게 하라고 해서 지금껏 사용해오긴 했는데... 이게 대체 무슨 문법일까? styled-components에서만 사용되는 구문이라고 생각할 수 있겠지만, 이건 Tagged Temp.. 2022. 2. 25.
CSS prefers-color-scheme: 사용자 운영체제의 다크모드 탐지하기 요즘 많은 사이트에서 사용자 경험을 높이기 위해 다크모드를 지원한다. 유튜브의 경우 사용자가 일일히 다크모드로 변경할 필요 없이, 기기에 설정된 테마에 따라 자동으로 테마가 설정되는 것을 볼 수 있는데 이건 어떻게 구현하는 걸까? CSS 미디어 쿼리의 prefers-color-scheme 속성을 사용하면 된다. 해당 속성을 사용하면, 사용자 운영체제의 다크모드 설정 여부를 쉽게 알아낼 수 있다. 아래에 MDN의 예시 코드를 가져와 보았다. 사용자의 운영체제가 light 모드인 경우 .themed 클래스의 배경과 폰트 색을 변경한다. @media (prefers-color-scheme: light) { .themed { background: white; color: black; } } 동적인 페이지를 만드.. 2022. 2. 16.
CSS flexbox: flex-item의 크기 조절 flexbox는 레이아웃, 정렬을 위해 가장 많이 사용하는 CSS 속성이다. flexbox의 사용이 너무나 익숙해져서 이젠 모르는 것이 없다고 생각했는데... 뭔가 잘못 사용하고 있었음을 이번에 깨닳았다. 가끔 사용하던 flex-grow 속성의 사용법이 잘못 되었는데, 그동안은 잘못 작성한 코드가 우연히 내 의도와 맞아 떨어져서 알아채지 못했던 것이다. 이번 기회에 다시 공부한 flexbox의 크기 조절 속성을 정리할 겸 공유하고자 한다. flex-basis flex-basis는 아이템의 기본 크기를 결정하는 속성이다. 값으로 auto, content 또는 원하는 수치를 넣을 수 있다. 기본 값은 auto이다. . item { flex-basis: auto; flex-basis: content; /* 원.. 2022. 1. 24.