본문 바로가기
반응형

develop52

[GIT] branch 생성 & 사용하기 깃허브를 사용하면서 계속 반복해서 실수해 정리하는 branch 사용법 branch란? 개발자들이 동일한 소스코드를 추가 작업함에 있어, 동시에 다양한 사람들이 접근해 개발할 수 있도록 하기 위해 만들어진 기능이다. 각자 branch를 만들어 나무가지 처럼 뻗어나가 원하는 방향으로 개발해 나갈 수 있다. branch 확인하는 법 git branch 라는 명령어로 확인이 가능하다. 현재 main branch에 위치해 있다. 자주 사용하는 git status 명령어로도 확인 가능하다. On branch main이라는 답을 통해 main branch위에 있는 것을 확인 할 수 있다. git branch -r 을 통해 원격 저장소의 브랜치를 확인 할 수 있다. git branch -v 을 통해 브랜치의 마지막 커.. 2021. 8. 25.
[REACT] 글씨 타이핑 효과 내기 리액트에서 글씨 타이핑 효과 내기 위에 처럼 타이핑 효과를 Javascript 또는 css 애니메이션을 통해 코드를 작성한다. 구글에 찾아보면 작성하는 방법들이 많이 나온다. JS, CSS는 많이 나오지만 REACT에서 직접 코드로 작성하는 자료는 없어, 작성해 본다. ( 대부분 라이브러리를 사용하여 쉽게 작성하는 것 같다.) 타이핑 될 문자를 txt로 정의해주고, REACT HOOK 중 useState와 useEffect를 사용한다. setInterval과 cleaerInterval을 사용하여 코드를 작성했다. JS에서 작성하는 것과 크게 다르진 않다. useState와 useEffect의 기본적인 형식만 알고있다면 REACT HOOK을 사용하여 보다 편하게 작성할 수 있다는 장점이 있는 것 같다. 2021. 8. 23.
[JS] 프로그래머스 가장 큰수 (LEVEL2) 문제 https://programmers.co.kr/learn/courses/30/lessons/42746 코딩테스트 연습 - 가장 큰 수 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 programmers.co.kr 문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 .. 2021. 8. 19.
[JS] substring() / substr() 비교 substring() / substr()은 문자열을 추출하는 메서드이다. 사용법이 비슷한 대신 두개의 차이가 헷갈려 정리해 보기로 했다. - str.substring(indexStart[, indexEnd]) - str.substr(start[, length]) 시작점은 같지만, 두번째 인자가 substring은 indexEnd / substr은 length로 차이가 있다. substring은 두번째 인자 값을 미포함, substr은 두번째 인자값을 포함한다. 음수만 입력 된 경우 substring은 기존 값 그대로 / substr은 뒤에서 시작하는 것을 확인 할 수 있다. start숫자만 입력 된 경우 두 수는 같은 값을 반환한다. 2021. 8. 17.
[JS] 로또의 최고 순위와 최저 순위 문제 설명 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1 순위당첨 내용 1 6개 번호가 모두 일치 2 5개 번호가 일치 3 4개 번호가 일치 4 3개 번호가 일치 5 2개 번호가 일치 6(낙첨) 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다. 알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다.. 2021. 8. 10.
[ETC] ICON 사이트 ICON을 얻을 수 있는 여러 사이트 중 주로 즐겨쓰는 사이트를 정리할 겸 작성하는 글! 1. ICON FINDER https://www.iconfinder.com 5,825,000+ free and premium vector icons - Iconfinder Iconfinder is the world's largest marketplace for vector and raster icons in SVG and PNG formats. www.iconfinder.com 개인적으로 깔끔한 아이콘을 즐겨쓰는데, 그 중 주로 사용하는 사이트이다. 약 580만개 이상 아이콘이 있다고 하니 웬만한 아이콘들은 찾을 수 있다. 무료 & 유료로 제공하고 있으면 무료의 경우 free라고 기재되어 있으니 참고해서 사용 하면 .. 2021. 8. 8.
[JS] 프로그래머스 실패율 문제 설명 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로 게임 시간을 늘려서 난이도를 조절하기로 했다. 역시 슈퍼 개발자라 대부분의 로직은 쉽게 구현했지만, 실패율을 구하는 부분에서 위기에 빠지고 말았다. 오렐리를 위해 실패율을 구하는 코드를 완성하라. 실패율은 다음과 같이 정의한다. 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가.. 2021. 8. 5.
[JS] 크레인 인형뽑기 게임 크레인 인형뽑기 게임 게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다. "죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다. 게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크기의 정사각 격자이며 위쪽에는 크레인이 있고 오른쪽에는 바구니가 있습니다. (위 그림은 "5 x 5" 크기의 예시입니다). 각 격자 칸에는 다양한 인형이 들어 있으며 인형이 없는 칸은 빈칸입니다. 모든 인형은 "1 x 1" 크기의 격자 한 칸을 차지하며 격자의 가장 아래 칸부터 차곡차곡 쌓여 있습니다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올릴 수 있습니다. 집어 올린 인형은 바구니에 쌓이게.. 2021. 8. 2.
[JS] 프로그래머스 숫자 문자열과 영단어 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. 1478 → "one4seveneight" 234567 → "23four5six7" 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 참고로 각 숫자에 대응되는 영단어는 다음 표와 같습니다. 숫자영단어 0 zero 1 one 2 two 3 three 4 four 5 five 6 six 7 s.. 2021. 7. 28.
[JS] 프로그래머스 k번째 수 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a.. 2021. 7. 26.
[JS] 프로그래머스 폰켓몬 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째(3번), 두 번째(1번) 폰켓몬을 선택 첫 번째(3번), 세 번째(2번) 폰켓몬을 선택 첫 번째(3번), 네.. 2021. 7. 24.
[JS] 프로그래머스 신규아이디 추천 문제 설명 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. "네오"는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입력한 아이.. 2021. 7. 22.
[REACT] fontawesome 간단히 사용하기 fontawesome을 component 단위로 사용 할 수 있지만, html사용하듯이 사용하는 법도 있기에 작성해 본다. 터미널에서 해당 프로젝트 파일로 경로를 열고 yarn add @fortawesome/fontawesome-free 혹은 npm add @fortawesome/fontawesome-free 입력하여 다운받아 준다. 그 후 index.js 에 들어가 위와 같이 import한 후 각 components파일에 들어가 html코드 입력해주면 사용할 수 있다. 2021. 7. 19.
[REACT] Chart legend position 오류 REACT 공부 중 chartjs-2 에서 legend의 position이 적용이 안돼 구글링을 해봤지만 해결법을 찾지 못했다. legend의 postion을 left로 입력했지만 top에 위치해 있다. legend를 plugins으로 감싸주니 이동하는 것을 확인 할 수 있다. 이유는 못 찾았지만 해결법을 찾은 것만으로 우선 감사하게 생각해야겠다. 2021. 7. 16.
[JS] bubbling & capturing bubbling : 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작 capturing : bubbling의 역순으로 생각하면 된다. 문제점 부모, 자식 구조에서 둘다 click 할 때, 이벤트가 발생하도록 되어진 상황. 자식만 클릭하여 실행하고 싶지만 겹쳐있기 때문에 부모 이벤트도 발생. 해결방안 1. stopPropagation 뜻 그대로 전달을 멈춘다. stopImmediatePropagation과 같이 사용하면 막을 수 있지만 자연스러운 흐름을 강제로 종료하기 때문에 가급적 사용하지 않기. 2. event.target과 evnet.currentTa.. 2021. 7. 4.
[JS] filter 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메소드 arr.filter(callback(element[, index[, array]]) [, thisArg]) 매개변수 callback : 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세가지 매개변수를 받을 수 있다. element : 처리할 현재 요소 index(Optional) : 처리할 현재 요소의 인덱스 array(Optional) : filter를 호출한 배열 thisArg(Optional) : callback을 실행할 때 this로 사용하는 값 function isBigEnough(value) { return value >= 10; } var filtered = [.. 2021. 6. 28.
[JS] sort 배열을 정렬할 때 사용하는 내장 함수 sort() arr.sort([compareFunction]) 기존의 배열 데이터를 변경시킨다. 문자정렬은 알파벳 순서대로, 숫자는 ASCII 코드 순서로 정렬하기 때문에 생각한 대로 정렬되지 않는다. 따라서 아래의 코드를 입력해야 한다. 1) 오름차순 numbers.sort(function(a, b) { return a - b; }); numbers.sort((a, b) => a - b); // 오름차순 2) 내림차순 numbers.sort(function(a, b){ return b - a; )}; numbers.sort((a, b) => b - a); // 내림차순 Object 객체를 가진 리스트도 정렬이 가능하다. const participants = [ { .. 2021. 6. 27.
[JS] 프로그래머스 키패드 누르기 문제 설명 스마트폰 전화 키패드의 각 칸에 다음과 같이 숫자들이 적혀 있습니다. 이 전화 키패드에서 왼손과 오른손의 엄지손가락만을 이용해서 숫자만을 입력하려고 합니다. 맨 처음 왼손 엄지손가락은 * 키패드에 오른손 엄지손가락은 # 키패드 위치에서 시작하며, 엄지손가락을 사용하는 규칙은 다음과 같습니다. 엄지손가락은 상하좌우 4가지 방향으로만 이동할 수 있으며 키패드 이동 한 칸은 거리로 1에 해당합니다. 왼쪽 열의 3개의 숫자 1, 4, 7을 입력할 때는 왼손 엄지손가락을 사용합니다. 오른쪽 열의 3개의 숫자 3, 6, 9를 입력할 때는 오른손 엄지손가락을 사용합니다. 가운데 열의 4개의 숫자 2, 5, 8, 0을 입력할 때는 두 엄지손가락의 현재 키패드의 위치에서 더 가까운 엄지손가락을 사용합니다. 4.. 2021. 6. 27.
[JS] for in / for of 그리고 map / reduce 객체를 순환하면서 가져올 때 사용하는 for in과 for of의 차이점이 궁금하여 찾아봤다. for( let item in obj ) / for ( let item of arr ) for in은 객체를 순환 : 객체의 key 값 또는 inde가 필요할 때 for of 는 배열을 순환 : 배열의 값을 가져올 때 for in let obj = { a: 1, b: 2, c: 3 }; for ( let item in obj ) { console.log(item); } // a b c for of let arr = ['a', 'b', 'c']; for ( let item of arr ) { console.log(item); } // a b c 사실 이 외 다른 차이가 있지만, 아직 나의 실력으로는 이해하기가 어.. 2021. 6. 26.
[JS] slice & splic Array.prototype.slice() slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 수정되지 않는다. slice(start, end) start : 추출 시작점 인덱스 undefined인 경우: 0부터 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(-2)를 하면 배열의 마지막 2개의 요소를 추출 배열의 길이와 같거나 큰 수를 지정한 경우: 빈 배열을 반환 end : 추출 종료 기준 인덱스 (end는 제외) 지정하지 않을 경우: 배열의 끝까지 slice 음수를 지정한 경우: 배열의 끝에서부터의 길이를 나타낸다. slice(2, -1)를 하면 세번째부터 끝에서 두번째 요소까지 추출 배열의 길이와 같거나 큰 수를.. 2021. 6. 25.
[JS] 2차열 배열 2차원 배열이란? 배열 안에 또 다른 배열이 존재하는 것. JS는 모든 것이 객체이기 때문에 배열의 각 요소를 다시 배열로 정의해 중첩하는 식으로 배열을 구현한다. Example let test = [['apple', 2], ['banana', 5], ['mango', 3], ['mandarine', 1]]; console.log(test[0][0]); // apple test[0] = ['apple', 2] -> ['apple', 2][0] = 'apple' test.push(['grape', 7]); console.table(test); // test = [['apple', 2], ['banana', 5], ['mango', 3], ['mandarine', 1], ['grape', 7]]; test... 2021. 6. 24.
[JS] D-day 만들기 D-day 만들기 function inIt() { const nowDate = new Date(); const dDay = new Date('2021-09-30 18:00'); const countDown = dDay - nowDate ; // 1000ms(1초) * 60(1분) * 60(1시간) * 24(1일) * 365(1년) const countDownday = Math.floor(countDown/(1000*60*60*24)); const countDownhour = Math.floor((countDown%(1000*60*60*24))/(1000*60*60)); const countDownMins = Math.floor((countDown%(1000*60*60))/(1000*60)); const .. 2021. 6. 9.
반응형