React 설치

패키지 매니저 npm 또는 yarn을 통해 설치

yarn이 더 빨라서 yarn을 통한 설치방법을 알아보자.

yarn 설치

우선 npm이 설치되어 있다는 가정하에 순서를 적어보면,

npm install --global yarn, homebrew가 깔려있다면 brew install yarn을 통해 yarn 설치 ( 자세히는 모르지만 후자로 설치하는것이 이슈가 덜 발생하는것으로 알고잇음 )

yarn 업데이트 방법은 yarn self-update이다.

yarn init

터미널에서 프로젝트 파일로 들어간 뒤 yarn init으로 package.json 파일을 생성한다.

npm과 같이 이 파일은 프로젝트에 관한 정보를 담고있다.

그 다음으로 yarn add react 를 통해 프로젝트에 리액트를 추가할 수 있다.

이 때 yarn.lock 파일은 현재 프로젝트에 설치된 패키지의 일관성을 보장하기 위해 버전과, 종속성을 적어두는 역할을 한다.

패키지를 삭제할 땐 yarn remove (패키지명)

패키지를 업데이트할 땐 yarn upgrade (패키지명)를 사용


react 설치 라는 말이 어색한데 붙일말이 딱히없음.,


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

새로운 블로그에 다시 정리해 놨습니다.
참고하시면 좋을 것 같습니다!

- 배열
https://youtaekjung.github.io/2018/04/30/js/JS-Array-method/

- 문자열
https://youtaekjung.github.io/2018/05/03/js/JS-String-method/


  1. BlogIcon 떱스턴 2018.05.03 18:18 신고

    주소가 바뀌었는지 링크를 클릭해도 접속이 안되네요! 404

새로운 블로그에 다시 정리해 놨습니다.

참고하시면 좋을 것 같습니다!


가장 긴 팰린드롬 ( Level 2, JavaScript )

문제

앞뒤를 뒤집어도 똑같은 문자열을 palindrome이라고 합니다.
longest_palindrom함수는 문자열 s를 매개변수로 입력받습니다.
s의 부분문자열중 가장 긴 palindrom의 길이를 리턴하는 함수를 완성하세요.
예를들어 s가 토마토맛토마토이면 7을 리턴하고 토마토맛있어이면 3을 리턴합니다.

풀이

function longest_palindrom(s){
  let res = 1, j
  for ( let i = 1; i < s.length - 1; i++ ) {
    j = 1;
    while ( i >= j && i+j <= s.length && s[i+j] === s[i-j] ) {
      j++
    }
    if ( j*2 -1 > res ) res = j*2 - 1
  }
  return res
}

문자열에서 앞뒤로 하나하나 비교하면서 최대길이의 팰린드롬을 찾는 방법

안좋은코드지만 별다른 방법이 생각나지 않았음

다른 사람의 풀이

function longest_palindrom(s){
  if (s === s.split("").reverse().join("")) {
    return s.length;
  } else {
    var A = longest_palindrom(s.substring(0, s.length-1));
    var B = longest_palindrom(s.substring(1, s.length));
    return Math.max(A, B);
  }
}

재귀로 풀었는데 개모싯다

  1. 2018.03.16 12:14

    비밀댓글입니다

  2. BlogIcon takeu takeU 2018.03.16 12:50 신고

    ㅋㅋㅋ모래~

    • 쿄쿄 2018.05.05 02:50 신고

      진짜 개머싯네요.

Coin Push 프로젝트

CoinPush 다운로드

스택

코인 API : Cryptowatch

chrome extension

HTML, CSS, JS

사용법

각 값들을 입력 후 등록을 하면 20초마다 한번씩 실시간으로 확인해 순서대로 4초에 한개씩 알림이 울립니다.

따라서 권장 최대 알림은 4개이며, 만약 알림을 끄고싶으면 알림 리스트를 전부 삭제해야 합니다.

추후 알림 반복 시간 설정 업데이트 예정

상한 지정가와, 하한 지정가는 필수로 입력해야 하며 한개의 알림만 원한다면, 각각 원하지 않는 곳에 적절한 값을 넣어주시면 됩니다.

지정가의 퍼센트 설정은 현재 인풋창의 값에서 누적으로 퍼센트 계산이 되니 참고하시기 바랍니다.

로드맵

1.0

  • Push 설정
    — 거래소
    — 코인
    — 지정가 ( max, min )
    — 등록 버튼

  • 알림 설정 리스트
    — 추가, 삭제

  • 지정가 퍼센트 기능

1.1

  • 서버요청 쿨타임 설정 기능
  • 지정가 퍼센트 기능 보완
  • max or min disable

1.2

  • 디자인 개선

1.3

  • 코인 모니터링 시스템

2.0

  • 코인원, 업비트 API 추가

3.0

  • 거래기능 도입
  • 매수, 매도 버튼 추가

후기

이준호(SSsEnzo):

짧은 프로젝트로 유택님과 일을하게 되었는데

처음 만들어 보는 Chrome extension이라 정말 재밌게 했습니다.

다음번에 더 업그레이드 될 수 있게 새로운 프로젝트를 빨리 하고싶어 지네요.

다들 피쓰~

Github
블로그

정유택(takeU):

토이프로젝트로 약 일주일동안 열심히 만들었는데

기초적인 기능은 얼추 완성한 것 같고, 앞으로 이것저것 기능 추가하면서 다듬으면 좋을 듯 하다.

디자이너가 없어서 급하게 했지만, 일단 개발자의 눈에는 나름 이쁘다ㅋㅎ

시간이 될지 모르겠지만, 반응이 괜찮다면 더 빠르게 진행해봐야겠다.

또한 같이 만들고 싶다는 분이 많이 생기면, 오픈소스로 돌릴 생각도 있으니 메세지 주시면 좋을것 같습니다!

끝으로, 부족하지만 한번이라도 이용해주신 모든 분들께 감사드립니다!

Github

'개발 > 기타' 카테고리의 다른 글

Coin Push 프로젝트  (0) 2018.01.29
티스토리 블로그 폰트 바꾸기  (4) 2017.10.14
[git]Git 간편 사용 설명서  (0) 2017.05.27
Git, Github 10분만에 익히기  (0) 2017.04.25
"데일리후보" 단기 프로젝트 완성  (3) 2017.04.17
HTML,CSS용 VIM(8.0)세팅하기  (0) 2017.02.21

Coding 3min: Symmetric Sort ( 6 kyu )

문제

This is the simple version of Shortest Code series. If you need some challenges, please try the challenge version

Task:

Give you a number array(element range:1-99, array length range: 6-40), please do a "Symmetric Sort" with it.

rule: sort the number, the first smallest number at the left side, the second smaller number at the right side, and so on...

Example:

example1:                        example2:

array=[1,2,3,4,5,6,7,8,9]        array=[1,1,2,2,3,3,4,4,5]

after sort, should return:       after sort, should return:

      [1,3,5,7,9,8,6,4,2]              [1,2,3,4,5,4,3,2,1]

See more example at the testcases.

배열을 앞뒤로 한개씩 넣으면서 정렬

풀이

function sc(array){
  let result = [];
  array.sort((a,b) => { return b-a });
  while ( array.length > 0 ) {
    result.unshift(array.shift());
    if ( array.length === 0 ) break;
    result.push(array.shift());
  }
  return result.length % 2 ? result : result.reverse();
}

큰수부터 차례로 언시프트, 푸시하고 배열의 길이가 짝수라면 뒤집어서 리턴

다른 사람의 풀이

function sc(a) {
  a = a.slice().sort((x,y) => x - y);
  var left = a.filter((v,i) => i % 2 == 0);
  var right = a.filter((v,i) => i % 2 == 1).reverse();
  return left.concat(right);
}

개고슈다


Max Collatz Sequence Length ( 5 kyu )

문제

In this kata we will take a look at the length of collatz sequences. And how they evolve. Write a function that take a positive integer n and return the number between 1 and n that has the maximum Collatz sequence length and the maximum length. The output has to take the form of an array [number, maxLength] For exemple the Collatz sequence of 4 is [4,2,1], 3 is [3,10,5,16,8,4,2,1], 2 is [2,1], 1 is [1], so MaxCollatzLength(4) should return [3,8]. If n is not a positive integer, the function have to return [].

n 이하의 숫자중 콜라츠 순서를 적용해 가장 긴 길이를 리턴하는 문제

풀이

function MaxCollatzLength(n) {
  if ( n <= 0 || typeof n !== 'number' ) return [];
  let max = [1,1], temp, count;
  for ( let i = 2; i <= n; i++ ) {
    temp = i;
    count = 0;
    while ( temp > 1 ) {
      if ( temp % 2 === 0 ) temp = temp/2;
      else temp = temp*3 + 1;
      count++;
    }
    if ( count > max[1] ) max = [i, count+1]
  }
  return max;
}

temp에 n으로 시작해서 몇개의 콜라츠 순열이 나오는지 담고 연산 횟수를 count로 해서 최댓값을 리턴하는 방법

다른 사람의 풀이

별로임


Find the unique string ( 5 kyu )

문제

There is an array of strings. All strings contains similar letters except one. Try to find it!

findUniq([ 'Aa', 'aaa', 'aaaaa', 'BbBb', 'Aaaa', 'AaAaAa', 'a' ]) === 'BbBb'
findUniq([ 'abc', 'acb', 'bac', 'foo', 'bca', 'cab', 'cba' ]) === 'foo'

Strings may contain spaces. Spaces is not significant, only non-spaces symbols matters. E.g. string that contains only spaces is like empty string.

It’s guaranteed that array contains more than 3 strings.

배열중 다른 알파벳으로 구성된 단어를 찾는 문제

풀이

function findUniq(arr) {
  let newArr = arr.map(a => { return [...new Set(a.toLowerCase())].sort().join('') });
  for ( let i = 0; i < newArr.length; i++ ) {
    if ( newArr.indexOf(newArr[i]) === newArr.lastIndexOf(newArr[i]) ) return arr[i]
  }
}

Set으로 중복을 제거 후에, indexOf로 유일한 값을 찾아 리턴

다른 사람의 풀이

별로임


Extract the domain name from a URL ( 5 kyu )

문제

Write a function that when given a URL as a string, parses out just the domain name and returns it as a string. For example:

domainName("http://github.com/carbonfive/raygun") == "github" 
domainName("http://www.zombie-bites.com") == "zombie-bites"
domainName("https://www.cnet.com") == "cnet"

도메인의 이름만 뽑아 리턴하는 문제

풀이

function domainName(url){
  let arr = url.split('.');
  if ( arr[0].includes('www') ) return arr[1];
  if ( !arr[0].includes('http') ) return arr[0];
  return arr[0].slice(arr[0].indexOf('//')+2, arr[0].length);
}

.을 기준으로 배열로 잘라 www가 있으면 1번 인덱스 리턴

http가 없으면 0번 인덱스 리턴

나머지는 //를 기준으로 잘라 리턴

다른 사람의 풀이

function domainName(url){
  return url.match(/(?:http(?:s)?:\/\/)?(?:w{3}\.)?([^\.]+)/i)[1];
}

정규식이 있을 것 같았는데 따라는 못하겠다


Throwing Darts ( 6 kyu )

문제

You’ve just recently been hired to calculate scores for a Dart Board game!

Scoring specifications:

0 points - radius above 10
5 points - radius between 5 and 10 inclusive
10 points - radius less than 5
If all radiuses are less than 5, award 100 BONUS POINTS!

Write a function that accepts an array of radiuses (can be integers and/or floats), and returns a total score using the above specification.

An empty array should return 0.

Examples:

scoreThrows( [1, 5, 11] )    =>  15
scoreThrows( [15, 20, 30] )  =>  0
scoreThrows( [1, 2, 3, 4] )  =>  140

다트 점수내기, 4발 던져서 1,2,3,4에 넣으면 100점추가

풀이

function scoreThrows(radiuses){
  let point = [], result = 0;
  for ( let i of radiuses ) {
    if ( i < 5 ) {
      result += 10;
      point.push(i)
    } else if ( i >=5 && i <= 10 ) {
      result += 5;
    }
  }
  if ( [...new Set(point)].length === 4 && radiuses.length === 4 ) result += 100
  return result;
}

케이스를 많이 나눠 생각했는데 테스트케이스가 얼마 없어서 의미가 없어짐

다른 사람의 풀이

function scoreThrows(a){
 var result = a.reduce(function(p,c){
   return p + (c <5 ? 10 : c > 10 ? 0 : 5);
 },0) ;
 return result/a.length===10?result+100:result;
}

간단하게 푼 풀이


+ Recent posts