Month: December 2019

npx create-react-app 에서 A template was not provided. This is likely because you’re using an outdated version of create-react-app. 에러가 날 때

Problem

CRA 공식 문서대로 npx create-react-app my-app 명령어를 입력했는데

A template was not provided. This is likely because you're using an outdated version of create-react-app.

에러가 나면서 빈 react app이 생성되었다.
훗 뭐 예전에 글로벌로 설치했던 cra 때문이겠지 하고 npm uninstall -g create-react-app 돌리고 재실행했는데 여전히 위에 에러가 났다.

npm list -g 로 글로벌 모듈을 봐도 create-react-app이 없는데 무슨 일이지… 했음

Solution

which create-react-app

명령어로 컴에 아직 cra가 남아있는지 찾는다. 나는 /usr/local/bin/create-react-app 에 있더라.

rm -rf /usr/local/bin/create-react-app

위 명령어로 가뿐하게 지워준다.
다시 npx create-react-app my-app 하면 이젠 template 껴져서 제대로 된다 🙂

Conference Site for ‘Data Science is a Team Sport!’

Background


Build a conference landing site with Vue.js.
Made a ‘Electronic display’ section to show sponsor list,
and show session detail information like a sports player with animation.

Results

Show session information like sports player introduction
Main page
Timetable page

Zepl Front End UI/UX Renewal Project

Background

Before, Zepl doesn’t had a designer and there’s no rule for the UI/UX guideline.

I teamed up with one designer and do the UI/UX renewal with building a reusable components and setting up design guidelines.

Participants: Yurim(Front End Engineer), Youngjin(Designer)
Project Period: 2018.06~2019.02
URL: https://www.zepl.com/

Before

Has no consistency on Font hierarchy, margins, the way to show the datasets.

After (Components that I made)

Overall app behavior
Carousel, Dropdown with Skeleton loading indicator
Modal with searchable dropdown components
Filterable/Sortable/Searchable Table with Pin feature
Item box and Overlay with micro interactions
Clickable list and Pagination
Collapsible with Real-time Graphs and Table
Outline sidebar with search feature
Create-able Select box which supports Validation, Copy/Paste from Excel sheet
Code snippets

[일일코딩 #35] String incrementer

Question

스트링에서 넘버만 따다가 +1 하는것. 자릿수 지키기.

https://www.codewars.com/kata/string-incrementer/javascript

Your job is to write a function which increments a string, to create a new string.

If the string already ends with a number, the number should be incremented by 1.
If the string does not end with a number. the number 1 should be appended to the new string.
Examples:

foo -> foo1

foobar23 -> foobar24

foo0042 -> foo0043

foo9 -> foo10

foo099 -> foo100

Attention: If the number has leading zeros the amount of digits should be considered.

My answer

정규식으로 number만 따다가 +1 해주고 원래 자릿수를 구해서 0을 그만큼 채워줬다.
마음에 안 듦.

function incrementString (str) {
    const numRegex = /[0-9]+/.exec(str);
    if (numRegex) {
        const numStr = numRegex.pop();

        const newNum = Number(numStr) + 1;
        const zeroNums = numStr.length - newNum.toString().length;
        const zeroStr = (zeroNums > 0) ? Array(zeroNums).fill("0").join("") : "";

        return str.replace(numStr, `${zeroStr}${newNum}`)
    }
    return `${str}1`;
}

Others' answer

Azuaron, Nakid..

function incrementString (input) {
    // 맨끝이 not a number면 그냥 + "1" 
    if(isNaN(parseInt(input[input.length - 1]))) return input + '1';

    // "001"을 넘겼다면 match는 001, p1은 00, p2는 1
    return input.replace(/(0*)([0-9]+$)/, function(match, p1, p2) {
        var up = parseInt(p2) + 1;

        // +1한 숫자 자릿수가 원본자릿수보다 크다면 0을 하나 뺀만큼 앞에 붙여주고 아니면 원본 0갯수만큼 붙여주기
        return (up.toString().length > p2.length) ? p1.slice(0, -1) + up : p1 + up;
    });
}
  • String.replace 첫번째 인자에 정규식을 넘길수 있고, 두 번째 인자에 함수를 넘길 수 있구나!
  • 정규식에 ()으로 그룹을 지어서 두번째 이후 인자로 받을 수 있구나
  • String.slice(0, -1)은 마지막 한글자를 떼는거구나

산산조각, 정호승

모든 선택지
혹은 선택할 수 없이 당한 일도
의미가 있고 다 옳은 길이지

 

 

 

룸비니에서 사온

흙으로 만든 부처님이

마룻바닥에 떨어져 산산조각이 났다

팔은 팔대로 다리는 다리대로

목은 목대로 발가락은 발가락대로

산산조각이 나

얼른 허리를 굽히고

서랍 속에 넣어두었던

순간접착제를 꺼내 붙였다

그 때 늘 부서지지 않으려고 노력하는

불쌍한 내 머리를

다정히 쓰다듬어 주시면서

부처님이 말씀하셨다

산산조각이 나면

산산조각을 얻을 수 있지

산산조각이 나면

산산조각으로 살아갈 수가 있지