본문 바로가기

전체 글102

[React.js] 컴포넌트 저장 기능 구현하기(dom-to-image, FileSaver) 프로젝트를 진행하면서 컴포넌트를 이미지로 저장하는 기능을 추가하고 싶어서 관련 자료를 찾기 시작했다. 처음엔 html2canvas와 jspdf로 기능을 구현하려고 구글링을 하다 dom-to-image, FileSaver 라이브러리를 알게 되었고 이 조합 코드가 좀 더 직관적이고 사용법이 좋은 것 같아서 결정하게 되었다.(그리고 좀 더 기능 구현 목적에 알맞다.) dom-to-image와 FileSaver 설치 npm install dom-to-image npm install file-saver --save 또는 yarn add dom-to-image yarn add file-saver 기능 구현 각 컴포넌트에 다운로드 버튼이 있고 버튼을 클릭하면 해당 컴포넌트를 PNG 이미지로 저장하도록 구현한다. im.. 2021. 7. 7.
[React.js] CRA 개인 프로젝트 Netlify로 배포하기 몇달 전에 CRA로 만든 프로젝트를 Netlify로 배포한 적이 있다. 이번에 또 배포하려고 하는데 금세 까먹었다. 또 다시 문서 찾고..강의 다시 보고..반복 되는 시간을 줄이기 위해 글을 쓰게 되었다. 생각보다 간단하다. 먼저 Netlify 회원가입이 되어 있어야합니다. yarn 기준으로 설명되어 있습니다. 01. yarn build 먼저 내 프로젝트 디렉토리에 yarn build를 수행해서 사용자에게 배포할 수 있는 소스코드로 만들어 준다. (최적화 작업) 02. netlify deploy 그 다음 netlify deploy를 입력하면 이 디렉토리를 기존 사이트에 연결할건지, 새로 만들지 물어본다. 무슨 소리인지 잘 모르겠다. 그냥 새로 만들기로 한다. 그 후 팀 이름을 짓고 사이트 이름을 정해주고.. 2021. 7. 5.
[프로그래머스] 올바른 괄호 | JavaScript 올바른 괄호 문제 설명 괄호가 바르게 짝지어졌다는 것은 '(' 문자로 열렸으면 반드시 짝지어서 ')' 문자로 닫혀야 한다는 뜻입니다. 예를 들어 "()()" 또는 "(())()" 는 올바른 괄호입니다. ")()(" 또는 "(()(" 는 올바르지 않은 괄호입니다. '(' 또는 ')' 로만 이루어진 문자열 s가 주어졌을 때, 문자열 s가 올바른 괄호이면 true를 return 하고, 올바르지 않은 괄호이면 false를 return 하는 solution 함수를 완성해 주세요. 제한사항 문자열 s의 길이 : 100,000 이하의 자연수 문자열 s는 '(' 또는 ')' 로만 이루어져 있습니다. 입출력 예 s answer "()()" true "(())()" true ")()(" false "(()(" false .. 2021. 7. 2.
부스트캠프 웹﹒모바일 6기 1차 불합 후기 주변 많은 사람들이 응원을 해주었는데 결국 합격 소식을 받지 못했다. 이번 1차 테스트 시험은 객관식/주관식 문제 유형으로 나왔는데 100분이란 시간을 제대로 활용하지 못했고 객관식이 아닌 주관식부터 풀었으면 어땠을까하는 아쉬움이 있다..객관식은 부스트캠프 웹﹒모바일 6기 설명회에서 강조했던(?) CS 기본지식에 대한 문제가 대부분이었다. 부스트코스에 CS50 강의를 들은 사람이라면 겹치는게 정말 많았을 것이다.(=충분히 풀 수 있다.) 주관식은 어느 유튜버님이 말씀하셨던 프로그래머스 level2정도 난이도가 맞는 것 같다. 더 많이 풀어볼걸 ㅎㅎㅎ..결국엔 나의 부족한 알고리즘 실력이 탈락 원인이라 생각한다..😭 정말정말 붙고 싶었던 프로그램이었고 열심히 달렸지만 아직은 때가 아닌가보다. 충격이 조금 .. 2021. 6. 30.
[프로그래머스] 땅따먹기 | JavaScript 땅따먹기 문제 설명 땅따먹기 게임을 하려고 합니다. 땅따먹기 게임의 땅(land)은 총 N행 4열로 이루어져 있고, 모든 칸에는 점수가 쓰여 있습니다. 1행부터 땅을 밟으며 한 행씩 내려올 때, 각 행의 4칸 중 한 칸만 밟으면서 내려와야 합니다. 단, 땅따먹기 게임에는 한 행씩 내려올 때, 같은 열을 연속해서 밟을 수 없는 특수 규칙이 있습니다. 예를 들면, | 1 | 2 | 3 | 5 | | 5 | 6 | 7 | 8 | | 4 | 3 | 2 | 1 | 로 땅이 주어졌다면, 1행에서 네번째 칸 (5)를 밟았으면, 2행의 네번째 칸 (8)은 밟을 수 없습니다. 마지막 행까지 모두 내려왔을 때, 얻을 수 있는 점수의 최대값을 return하는 solution 함수를 완성해 주세요. 위 예의 경우, 1행의 네.. 2021. 6. 29.
[프로그래머스] N개의 최소공배수 | JavaScript N개의 최소공배수 문제 설명 두 수의 최소공배수(Least Common Multiple)란 입력된 두 수의 배수 중 공통이 되는 가장 작은 숫자를 의미합니다. 예를 들어 2와 7의 최소공배수는 14가 됩니다. 정의를 확장해서, n개의 수의 최소공배수는 n 개의 수들의 배수 중 공통이 되는 가장 작은 숫자가 됩니다. n개의 숫자를 담은 배열 arr이 입력되었을 때 이 수들의 최소공배수를 반환하는 함수, solution을 완성해 주세요. 제한사항 arr은 길이 1이상, 15이하인 배열입니다. arr의 원소는 100 이하인 자연수입니다. 입출력 예 arr result [2,6,8,14] 168 [1,2,3] 6 코드 function getGcd(a, b) { if (b === 0) return a; retur.. 2021. 6. 27.
[프로그래머스] 피보나치 수 | JavaScript 피보나치 수 문제 설명 피보나치 수는 F(0) = 0, F(1) = 1일 때, 1 이상의 n에 대하여 F(n) = F(n-1) + F(n-2) 가 적용되는 수 입니다. 예를들어 F(2) = F(0) + F(1) = 0 + 1 = 1 F(3) = F(1) + F(2) = 1 + 1 = 2 F(4) = F(2) + F(3) = 1 + 2 = 3 F(5) = F(3) + F(4) = 2 + 3 = 5 와 같이 이어집니다. 2 이상의 n이 입력되었을 때, n번째 피보나치 수를 1234567으로 나눈 나머지를 리턴하는 함수, solution을 완성해 주세요. 제한사항 n은 1이상, 100000이하인 자연수입니다. 입출력 예 n return 3 2 5 5 입출력 예 설명 피보나치수는 0번째부터 0, 1, 1, 2,.. 2021. 6. 27.
[백준] 단계별로 풀어보기 3단계 | Node.js 백준 알고리즘 3단계 for문 01. 구구단 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, }); rl.on('line', (num) => { for (let i = 1; i { process.exit(); }); 02. A+B - 3 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, }); const input = []; rl.on('line', (num) => { input.push(num); if (input.length === Number(inpu.. 2021. 6. 26.
[백준] 단계별로 풀어보기 2단계 | Node.js 백준 알고리즘 2단계 if문 01. 두 수 비교하기 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, }); rl.on('line', (line) => { const input = line.split(' '); const a = Number(input[0]); const b = Number(input[1]); if (a > b) console.log('>'); if (a < b) console.log(' 2021. 6. 26.
반응형