전체 글89

• 

  [JavaScript] html2canvas 로 화면 캡처 후 저장하기 (React) 작성하고 있는 화면을 이미지로 저장하여 관리해야 하는 일이 생겨 구글링을 했는데 html2canvas 라이브러리를 이용하는 경우가 많아 사용해보았습니다. npm 링크 : https://www.npmjs.com/package/html2canvas html2canvas Screenshots with JavaScript. Latest version: 1.4.1, last published: 8 months ago. Start using html2canvas in your project by running `npm i html2canvas`. There are 1679 other projects in the npm registry using html2canvas. www.npmjs.com 먼저 html2canv.. javascript 2022. 9. 21.

• 

  [MYSQL] SET 변수를 생성해서 순번 매기기 집계를 할때 0부터 30까지 집계된 수를 보여줘야하는데, group by문 만을 사용해서는 합계가 0인 것들은 집계가 되지 않았습니다. 이 때 사용한 것은 변수를 만들어 0부터 30까지를 나타낸 다음, group by 를 사용한 테이블을 join을 통해 보는 것이었습니다. 먼저, 사용자 정의 변수를 생성하는 방법에 대해 알아본 후, 이를 통해 위에서 말한 집계를 하는 방법까지 알아보려고 합니다. 1. 사용자 정의 변수 1-1. 사용자 정의 변수 선언 및 초기화 SET @변수이름 = 대입값; 또는 SET @변수이름 := 대입값; SELECT @변수이름 := 대입값; SET 이외의 명령문에서는 = 가 비교연산자로 취급되기 때문에 SELECT로 변수를 선언하고 값을 대입할 떄는 := 를 사용합니다. 1-2. .. database 2022. 9. 8.

• 

  [Javascript] 버블링과 캡처링 버블링(bubbling) 버블링은 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. HTML 삽입 미리보기할 수 없는 소스 가장 안쪽의 p 태그를 클릭하면 순서대로 다음과 같은 일이 벌어집니다. 1. p 태그에 할당된 onclick 핸들러가 동작합니다. 2. 바깥의 div 태그에 할당된 onclick 핸들러가 동작합니다. 3. 그 바깥의 form 태그에 할당된 onclick 핸들러가 동작합니다. 4. documenet 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. 이런 동작 방식 때문에 p태그 요소를 클릭하면 p > d.. javascript 2022. 7. 20.

• 

  [Javascript] Base64 인코드, 디코드 하는 방법- atob(), btoa() ASCII 값 0부터 31까지의 제어 문자처럼 통신에 사용하면 문제가 발생할 수 있는 데이터를 btoa()로 인코딩해 전송하고, 받는 쪽에서 atob()로 디코딩하면 문제 없이 원래 데이터를 가져올 수 있습니다. atob() atob() 함수는 Base64 인코딩된 문자열 데이터를 디코딩합니다. window.atob(encodedData) 매개변수 endocdeData : base64 인코딩 된 데이터를 받은 이진 문자열입니다. 반환 값 encodedData를 디코딩한 ASCII 문자열 btoa() btoa()함수는 이진 문자열로부터 Base64 인코딩 된 ASCII 문자열을 생성해 반환합니다. window.btoa(stringToEncode) 매개변수 stringToEncode : 인코딩 할 이진 문자.. javascript 2022. 7. 16.

• 

  [Javascript] base64로 인코딩 된 문자열을 ArrayBuffer로 디코딩하기(base64 to array buffer) 다음과 같이 backend에서 byte array를 return 해주었는데 frontend에서 다음과 같이 나타났다. import java.nio.file.*; public class TestClass{ public byte[] getByteArray(Path){ byte[] arrByte = Files.readAllBytes(Path); return arrByte; } } base64로 인코딩이 되어서 array의 형태를 찾을 수 없었다. 구글링을 통해 검색한 결과 javascript에서 디코딩하여 blob 타입으로 만들어 확인할 수 있었다. base64ToArrayBuffer = (base64) => { var binary_string = window.atob(base64); var len = bin.. javascript 2022. 7. 15.

• 

  [database] Lock Lock 데이터베이스는 여러 사용자들이 같은 데이터를 동시에 접근하는 상황에서, 데이터의 무결성과 일관성을 지키기 위해 Lock을 사용합니다. Lock 이란 트랜잭션 처리의 순차성을 보장하기 위한 방법입니다. 트랜잭션은 DB의 나누어지지 않은 최소한의 처리 단위입니다. 2022.07.12 - [database] - [database] 트랜잭션(transaction)과 격리성(Isolation) 을 참고하시면 도움이 될 것 입니다. Lock의 설정 범위(Level) 데이터 베이스 데이터베이스 범위의 Lock은 전체 데이터베이스를 기준으로 Lock 하는 것입니다. 즉, 1개의 세션만이 DB의 데이터에 접근이 가능합니다. 해당 기능은 일반적으로 사용하지 않습니다. 사용하는 떄가 있다면 DB의 소프트웨어 버전을.. database 2022. 7. 13.

• 

  [database] 트랜잭션(transaction)과 격리성(Isolation) 트랜잭션(Transaction) 트랜잭션은 데이터베이스의 상태를 변화시키기 위해서 수행하는 작업의 단위를 뜻합니다. 여러개의 테이블에 차례대로 데이터를 insert를 한다고 가정합니다. 테이블이 쪼개져 있으므로 테이블간의 데이터 정합성을 유지하는 것이 중요합니다. A, B에는 insert를 했으나 C에 insert 하기 전 서버가 에러 또는 특정 작업에 의해 정상적으로 처리하지 못하는 상황이 되었다고 한다면, 결과적으로 이 데이터는 믿을 수 없는 데이터가 됩니다. 이를 해결하기 위한 방법으로 DB는 All or Nothing전략을 취합니다. 즉, A,B,C에 정상적으로 insert하거나 아무것도 insert하지 않는 것입니다. DB에서는 이 전략을 위해서 트랜잭션이라는 단위를 사용하빈다. 트랜잭션 단위는.. database 2022. 7. 12.

• [코딩테스트 연습]level 1. 로또의 최고 순위와 최저 순위 https://school.programmers.co.kr/learn/courses/30/lessons/77484 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 먼저 로또에 있는0의 숫자를 zeroCount로 주어 갯수를 파악한 뒤, 맞춘 숫자의 갯수를 파악했다. 전부 맞췄을 경우와 로또의 숫자가 전부 0인 경우에 대해서 예외처리를 해 주고, 나머지인 경우를 계산하여 array에 최고, 최저 순위를 push 해 주었다. function solution(lottos, win_nums) { let matches =0; let zeroCount = 0; lot.. javascript/프로그래머스 2022. 7. 8.

• [코딩테스트 연습]level 1. 체육복 https://programmers.co.kr/learn/courses/30/lessons/42862 코딩테스트 연습 - 체육복 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번 programmers.co.kr function solution(n, lost, reserve) { const students = {}; let answer = 0; for(let i = 1; i students[number] -= 1); reserve.forEach(number => students[number] += 1); for(let i = 1; i = 1){ answer++; } } r.. javascript/프로그래머스 2022. 7. 7.

• [코딩테스트 연습]level 1. 완주하지 못한 선수 - 코드분석 2022.07.04 - [javascript/프로그래머스] - [코딩테스트 연습]level 1. 완주하지 못한 선수 [코딩테스트 연습]level 1. 완주하지 못한 선수 문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 sewonzzang.tistory.com 2022.07.04 - [javascript] - [Javascript] Hash(해시) - 해시 테이블(hash table) 구현하기 [Javascript] Hash(해시) - 해시 테이블(hash table) 구현하기 해시란? 해시 함수(hash function)는 에서 얻어지는 값은 임의의 길이의 데.. javascript/프로그래머스 2022. 7. 6.

• 

  [Javascript] Hash(해시) - 해시 테이블(hash table) 구현하기 해시란? 해시 함수(hash function)는 에서 얻어지는 값은 임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수입니다. 해시 함수에 의해 얻어지는 값을 해시라고 부릅니다. 해시함수의 용도 중 하나는 해시 테이블 자료구조에 사용되며, 매우 빠른 데이터 검색을 위한 컴퓨터 소프트웨어에서 널리 사용됩니다. 해시 함수는 큰 파일에서 중복되는 레코드를 찾을 수 있기 때문에 데이터 검색이나 테이블 검색의 속도를 가속합니다. 해시가 데이터 매우 빠른 데이터 검색을 할 수 있는 이유는 데이터를 검색할 때 사용할 key와 실제 데이터의 값(value)이 한 쌍으로 존재하고, key 값이 배열의 인덱스로 변환되기 때문에 검색과 저장의 평균적인 시간 복잡도가 O(1)에 수렴하게 됩니다. const parso.. javascript 2022. 7. 4.

• [코딩테스트 연습]level 1. 완주하지 못한 선수 문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 원래는 findIndex 후 splice를 사용해서 동작시키려고 하였다. 결과값은 잘 나왔지.. javascript/프로그래머스 2022. 7. 4.