본문 바로가기

자바스크립트99

[리디저널 제작기] 6. 크롬 웹 스토어에 확장프로그램 출시하기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 크롬 웹 스토어 개발자 등록 크롬 확장프로그램을 공식 웹 스토어에 등록하기 위해선, 먼저 개발자 등록을 해야 합니다. 약관 동의와 함께 5달러를 결제해야만 합니다. 한 번 결제로 등록이 완료되며, 이후 추가 비용을 요구하진 않습니다. 수수료 결제를 위해 카드 등록을 해야 하는데, '국가/지역'에 대한민국이 없습니다. 그래서 '미국'으로 지정하고, 청구지 우편번호를 '12345'로 지정했습니다. 아무렇게나 입력해도 딱히 문제가 발생하지는 않는 것으로 보입니다. (제가 사용하는 카드는 한국에서 발급받은 카카오뱅크 체크카드임에도 문제 없이 등록이 됐습.. 2023. 4. 12.
[리디저널 제작기] 5. 크롬 웹 스토어에 올릴 아이콘 디자인 만들기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 필요한 아이콘의 포맷 Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG. 공식 크롬 확장프로그램 API 문서의 글입니다. PNG 확장자(포맷)의 이미지 파일을 아이콘으로 사용하는 것을 적극 권장한다고 나와있습니다. BMP, GIF, ICO, JPEG도 가능은 하지만, 웬만하.. 2023. 4. 11.
[백준JS] 2903. 중앙 이동 알고리즘 안녕하세요. 박기린 입니다. 백준 2903번 중앙 이동 알고리즘 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/2903 문제 해석 주어진 도형이 정사각형이기 때문에 아래와 같은 식이 성립합니다. 한 줄의 사각형의 갯수 = 2 ** n 한 줄의 꼭짓점의 갯수 = 한 줄의 사각형의 갯수 + 1 = 2 ** n + 1 -------------------------------------------- 총 꼭짓점의 갯수 = 한 줄의 꼭짓점의 갯수 ** 2 = (2 ** n + 1) ** 2 정답 코드 const fs = require("fs"); const input = +fs.readFileSync("/dev/stdin").toString().trim(); const re.. 2023. 4. 10.
[백준JS] 2745. 진법 변환 안녕하세요. 박기린 입니다. 백준 2745번 진법 변환 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/2745 문제 해석 입력으로 들어오는 값은 N과 B입니다. B는 진법을 나타내며, 최대 36진법까지 입력을 받습니다. N은 'B진법에 해당하는 수' 입니다. 특정 진법을 10진법으로 바꾸는 방법은 위의 그림과 같습니다. 1. 숫자를 자릿수별로 나눕니다. 2. '해당 자릿수의 순서 - 1'값을 진법의 제곱수로 곱합니다. ( 36진법의 4번째 자릿수이면 36 ** 3 ) 3. 2단계에서 계산한 값을 해당 자릿수에 곱합니다. ( Z는 10진법 기준으로 35를 의미합니다 => 35 * (36 ** 3) ) 4. 그렇게 모든 자릿수를 계산한 후, 전부 더하면 10진법으로 .. 2023. 4. 1.
[백준JS] 2563. 색종이 안녕하세요. 박기린 입니다. 백준 2563번 색종이 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/2563 문제 해석 1. 100 x 100 사이즈의 도화지가 주어집니다. 2. 색종이가 여러 장이 주어지는데, 모두 10 x 10 사이즈입니다. 3. 색종이가 서로 겹처서 놓아지는 경우가 존재합니다. 그럴 경우 '색종이가 붙은 검은 영역의 넓이'를 구할 때, 겹치는 부분의 넓이도 고려를 해야 합니다. 이 문제는 100 x 100 사이즈의 2차원 배열을 만든 후, 색종이가 놓일 부분의 인덱스를 구해서, 총 인덱스의 개수를 알면 문제가 쉽게 해결이 됩니다. 정답 코드 const fs = require("fs"); const [amount, ...papers] = fs ... 2023. 3. 31.
[React] 12. CSS 모듈 사용하기 안녕하세요. 박기린 입니다. 이번엔 ReactJS의 스타일링 모듈인 CSS에 대해 알아보겠습니다. css 모듈을 사용하는 이유 모든 React 프로젝트에는 css모듈이 내장되어 있습니다. 기존의 css 파일은 컴포넌트 단위가 아니라 전역 단위로 적용이 되는 탓에 문제가 발생하였고, 이를 해결하기 위해 styled-components라는 외부 모듈을 사용한다고 저번에 소개를 해드렸습니다. 외부 모듈을 설치하는 방법 대신에, React에 내장된 css 모듈을 이용해서 컴포넌트 단위로 스타일링을 할 수 있습니다. css 모듈 사용해보기 import React from "react"; import styles from "./Button.module.css"; const Button = props => { ret.. 2023. 3. 28.
[React] 11. styled-components 사용하기 안녕하세요. 박기린 입니다. 이번엔 ReactJS의 스타일링 모듈인 styled-components에 대해 알아보겠습니다. 공식 사이트 : https://styled-components.com/ styled-components가 필요한 이유 React 프로젝트의 컴포넌트들을 css 파일을 이용해서 스타일링하는 경우, 비록 컴포넌트 파일(js/ts)에서 css 파일을 import해서 사용한다고 해도, 그 css 파일의 스타일을 해당 컴포넌트에만 국한되지 않고 전역으로 적용시킵니다. .form-control { margin: 0.5rem 0; } .form-control label { font-weight: bold; display: block; margin-bottom: 0.5rem; } 예를 들어, 위와.. 2023. 3. 27.
[백준JS] 1316. 그룹 단어 체커 안녕하세요. 박기린 입니다. 백준 1316번 그룹 단어 체커 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/1316 문제 해석 '그룹 단어'라는 말이 이 문제의 핵심 단어입니다. 위의 메모를 살펴보면, - a, b, c의 갯수는 상관 없고 (1개만 있어도 상관 없습니다.) - 같은 글자는 뭉쳐 있어야 하며, 만약 하나라도 떨어져 있으면 그룹 단어가 아닙니다. 정답 코드 const fs = require("fs"); const input = fs.readFileSync("/dev/stdin").toString().trim().split("\n"); const [amount, ...strings] = input; let result = 0; const isGroupW.. 2023. 3. 24.
[백준JS] 10812. 바구니 순서 바꾸기 안녕하세요. 박기린 입니다. 백준 10812번 바구니 순서 바꾸기 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/10812 문제 해석 N개의 바구니가 있습니다. 원활한 설명을 위해, N이 7이라고 가정을 합니다. 각 바구니에는 순서에 맞는 숫자가 담겨 있습니다. 입력으로는 [i, j, k]가 들어옵니다. i부터 j까지의 바구니에, k번째 숫자부터 다시 담습니다. i < k < j 인 조건으로 값이 주어집니다. [ i = 2, j = 5, k = 7 ] 이라고 가정을 합니다. 두 번째부터 일곱 번째까지의 바구니에, k 번째 바구니에 들어있던 숫자부터 차례대로 담습니다. j 번째 바구니의 숫자까지 담았다면, i 번째 바구니의 숫자부터 차례대로 담아줍니다. [i, j,.. 2023. 3. 18.

티스토리툴바