본문 바로가기

전체 글521

[백준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.
[리디저널 제작기] 4. 더보기 버튼을 자동으로 눌러주는 기능 구현 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 리디 독서노트 페이지의 더보기 버튼 리디 독서노트 페이지를 들어가면 형광펜(밑줄)을 친 글귀들이 보입니다. 근데 글귀의 수가 20개를 넘어가게 되면, 사진의 '20개 더보기'버튼이 생깁니다. 다음 20개의 글귀는 위 버튼을 눌러야만 볼 수 있고, 일일이 다 눌러줘야 모든 글귀를 확인할 수 있는 구조입니다. 크롬 확장프로그램은 탭의 현재 DOM에 올라온 텍스트만 긁어올 수 있기 때문에, '20개 더보기' 버튼을 전부 누른 후에 글귀를 긁어와야만 모든 글귀를 긁어올 수 있습니다. 만약 버튼을 누르지 않으면, 당장 보이는 몇 개의 글귀만 긁어와집니다... 2023. 4. 10.
[리디저널 제작기] 3. 팝업 UI 디자인 만들기 (styled-components) 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. UI 디자인 만들기Figma에서 직접 팝업창의 UI 디자인을 만들었습니다. 다크모드에 어울리는 색상에 심플한 디자인으로 구성했습니다. styled-componets로 스타일링하기React의 스타일링 모듈인 styled-components를 사용했습니다. TypeScript를 사용하기에, @types/styled-componets 모듈도 설치했습니다. 모은 독서노트 개수 : {texts.length}개 독서노트 모으기 클립보드에 복사하기 Made by ParkGiraffe JSX에 기본적인 틀을 만들어줍니다. 이제 styled-components를.. 2023. 4. 9.
[리디저널 제작기] 2. 리디 독서노트를 크롤링하는 기능 구현하기 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 리디 독서노트 페이지의 글귀들을 팝업창에 복붙하기 // background.js chrome.runtime.onMessage.addListener(async function ( request, sender, sendResponse ) { if (request.action === "CHECK") { let [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true, }); chrome.scripting.executeScript({ target: { tabId: activeTa.. 2023. 4. 7.
[리디저널 제작기] 1. React로 크롬 확장프로그램 만들기 위한 기초 설정 안녕하세요. 박기린 입니다. 본 글은 [ 리디북스의 독서노트 글귀를 복사하는 크롬 확장프로그램 : RIDI-Journals ]의 제작 과정을 적어놓은 글입니다. 프로젝트 업무 정리 방식 선정 프로젝트의 모든 업무는 '칸반 보드' 방식을 이용해서 계획 / 정리 / 실행을 하였습니다. 칸반 보드 앱으로 FirstSeed Tasks 앱을 사용했습니다. 칸반 보드의 업무 계획 / 상황표에 맞춰서, 모든 과정을 차례대로 Upnote에 정리했습니다. 그리고 이 Upnote의 기록을 바탕으로 블로그에 개발 과정 글을 적습니다. create-react-app with TypeScript chrome extension은 자바스크립트로 제작되어야 합니다. 그리고 자바스크립트 라이브러리를 사용할 수 있습니다. RIDI-Jo.. 2023. 4. 5.
[원신] 영겁의 드레이크 잡으러 가기 / 닐루 레벨 돌파 재료 안녕하세요. 박기린 입니다. 닐루 레벨업 돌파를 위해서는 [영구동력 코어]라는 재료가 필요합니다. 그리고 이 재료는 '영겁의 드레이크'이라는 무상의 원소 보스를 잡아야 합니다. 지금부터 영겁의 드레이크를 잡으러 가겠습니다. 영겁의 드레이크 찾는 법 영겁의 드레이크는 수메르 지역 데반타카산 동쪽에 위치해 있습니다. 영겁의 드레이크 기준 북서쪽에 위치한 워프를 탑니다. 텔레포트 탑 밑을 내려다보면, 나무 사이로 클로버 인장이 보입니다. 저 클로버 인장을 타러 가줍니다. 이 클로버 인장을 시작으로, 여러 개의 클로버 인장을 계속해서 타줘야 합니다. 뒤에 나오는 사진의 화살표를 보고 따라가주면 됩니다. 위 사진의 위치에서 클로버 인장이 두 개가 보입니다. 절벽 위로 올라가는 클로버 인장을 타면, 더 빠르게 갈 .. 2023. 4. 5.
[백준JS] 11005. 진법 변환 2 안녕하세요. 박기린 입니다. 백준 11005번 진법 변환 2 문제를 풀어봅시다. 문제 링크 https://www.acmicpc.net/problem/11005 문제 해석 10진수 숫자 n을 b진수로 바꾸는 방법은 위의 계산 방식을 사용하면 됩니다. 1. n을 b으로 나눈 후, [몫과 나머지]를 구합니다. 2. 나머지는 오른쪽에 두고, 몫을 계속 n으로 나눕니다. 3. 나눗셈을 반복해서 남은 몫이 n보다 작아지면, 남은 몫과 나머지들을 순서대로 적어줍니다. (몫부터 차례대로 적기 - 가장 맨 처음에 나온 나머지 값이 맨 뒤에 위치해야 합니다.) 10 이상 35 이하의 값의 경우, A부터 Z까지 영어를 이용해서 표기하면 됩니다. 정답 코드 const fs = require("fs"); let [n, b] =.. 2023. 4. 4.
[원신] 무상의 풀 잡기 / 나히다 레벨 돌파 재료 안녕하세요. 박기린 입니다. 나히다 레벨업 돌파를 위해서는 [분쟁을 멈추는 넝쿨]이라는 재료가 필요합니다. 그리고 이 재료는 '무상의 풀'이라는 무상의 원소 보스를 잡아야 합니다. 지금부터 무상의 풀 보스를 잡으러 가겠습니다. 무상의 풀 위치로 가는 법 수메르 지역을 뚫으면 무상의 풀 위치를 확인할 수는 있지만, 지하 동굴에 숨어 있습니다. 우선 무상의 풀 서쪽에 위치한 워프를 탑니다. 워프 탑 뒷편의 절벽을 내려다보면, 클로버 인장이 보이는데, 그 쪽으로 날개를 타고 내려가면, 지하동굴 입구가 보입니다. 지하동굴을 향해 클로버 인장이 쭉 이어져 있습니다. 계속 인장을 타고 내려갑니다. 그러면 숨어 있던 무상의 풀(깍두기)이 보입니다. 파티조합 무상의 깍두기를 잡기 위해서는, 무조건 풀 원소 캐릭터 한 .. 2023. 4. 2.
[백준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.

티스토리툴바