DEV Community: Jinseok

Elastic Beanstalk에서 플랫폼과 버전 동시에 업데이트

Jinseok — Sat, 28 Aug 2021 02:59:43 +0000

엘라스틱 빈즈토크는 이용할 때 아쉬운 점이 있었다. 바로 플랫폼 업데이트나 어플리케이션 버전 업데이트가 동시에 안되는 것이다.

환경 URL 교체라는 기능이 있지만 스테이지^stage버전과 프로덕션^production의 데이터베이스를 다르게 사용하는데, 이 부분을 어떻게 처리해야할지 고민하다 이직하면서 잊혀졌다.

그래서 플랫폼과 앱 버전을 동시에 업데이트 하는 방법을 설명하면
⠀
⠀

1. AWS CLI 설치

⠀
⠀

2. 명령어 입력

aws elasticbeanstalk update-environment --environment-id [환경 식별자] --version-label [버전명] --solution-stack-name [플랫폼]

예를들면 다음과 같다.

$ aws elasticbeanstalk update-environment --environment-id e-abcdefghij --version-label "20210828-2" --solution-stack-name "64bit Amazon Linux 2 v3.3.4 running Ruby 2.7"

⠀
⠀

env.yaml

어떤 플랫폼을 사용할지 지정할 수 있다. 루트에 env.yaml파일을 생성하고 설정할 수 있다.
다음처럼 만들 수 있다.

AWSConfigurationTemplateVersion: 1.1.0.0
SolutionStack: 64bit Amazon Linux 2 v3.4.2 running Ruby 3.0

번외. 애플리케이션 버전 추가하기

https://aws.amazon.com/blogs/devops/creating-deployable-app-archives-for-elastic-beanstalk/

$ git archive --format=zip HEAD > myapp.zip

Elastic Beanstalk에서 hooks를 이용할 때 권한이 없는 문제

Jinseok — Sun, 22 Aug 2021 07:25:40 +0000

엘라스틱 빈즈토크의 운영체제가 아마존 리눅스 2^AL2로 바뀌면서 사용법도 많이 바뀌었다.

내 문제는 레일즈에서 webpacker를 사용하면서 yarn을 설치해야하는데, AL2가 되면서 .ebextension 대신 훅^hooks을 이용함으로써 발생했다.

.platform/hooks/prebuild/yarn.sh: permission denied

⠀
⠀

정말 말그대로 권한에 문제가 있었다. 파일 권한에...
답변 링크
⠀
아래 커맨드로 해결했다.

$ git update-index --chmod=+x .platform/hooks/prebuild/yarn.sh

커밋을 잊어선 안된다.

644에서 755로 권한이 변경된걸 확인할 수 있다.

⠀
⠀

후기

며칠을 검색해도 못찾았는데, 1년 흐른 후 새로운 프로젝트에서 같은 문제를 접했을 땐 검색 몇번으로 해결했다. 살짝 허무했다.

자바스크립트의 다양한 이름들 node.js, ecma, v8

Jinseok — Mon, 16 Aug 2021 15:25:22 +0000

분명 자바스크립트 강의를 듣는데 뭔가 다른 단어가 나오면 혼란스럽다. "아니, 나는 자바스크립트를 배우고 싶다구요!"

더 알고 싶어 자바스크립트를 검색하면 nodejs, ecma2015 같은 단어가 눈에 띈다. 크롬은 v8 엔진이니 뭐시기 하는데, 아니 도대체 이건 뭐란 말인가?

나는 프로그래밍 언어가 만들어지는 공정을 얘기하고자 한다. 왜 브라우저마다 다른 것이지? 왜 자바스크립트를 그렇게 부르지? 이해하게 될 것이다.
⠀
⠀
⠀

자바스크립트

먼저 우리가 이해하기 어려운 점이 있다. 자바스크립트는 웹브라우저에서 사용하는 유일한 언어다. 그래서 브라우저만 생각하고 있는데, 누군가는 컴퓨터의 콘솔 창을 키고 무슨 명령어를 입력하는데 자바스크립트라고 한다. 여기서 내가 알던 자바스크립트가 어색해진다.

우리가 흔히 말하는 자바스크립트는 웹브라우저에서 사용하는 그 언어가 맞다. 클릭했을 때 이벤트 넣고, 스타일 수정하고, 알림 창 띄울 때 '자바스크립트' 코드를 작성한다.
⠀
⠀
⠀

Vanilla JS

자바스크립트를 부르는 다른 말이다. 2019년 즈음되선 볼 수 없는 단어다.

이런 단어를 사용할 정도로 순수한 자바스크립트는 보기 힘들었다. 그전까진 대부분 제이쿼리를 이용했는데, 자바스크립트로 만들어진 라이브러리임에도 불구하고 사람들은 자바스크립트는 모르고 제이쿼리는 알았다. 정말로...

해외도 이러한 현상이 정말 심각했다. ES5 시절에만해도 웹개발에선 디자이너가 중요했지 지금처럼 개발자가 중요하지도 않았고 자바스크립트를 프로그래밍 언어로 보지도 않았다.

그렇게 프로그래밍에 대한 이해도가 낮은 개발자가 주로 사용하다보니 제이쿼리, 앵귤러JS, 리액트같은 라이브러리를 자바스크립트의 일부로 생각하는 경향이 있었고 결국 커뮤니티에선 바닐라JS라는 단어까지 나온 것이다.
⠀
⠀
⠀

V8

구글에서 만든 자바스크립트 엔진이다. 엔진은 우리가 작성한 자바스크립트 코드를 실행하는 역할을 담당한다.

변수를 사용하고, 함수를 만들고, 분기문으로 처리하는 등 코드를 넣으면 엔진은 그 문법에 알맞게 실행한다.

만약 일반 종이에 자바스크립트 소스를 작성하면 어떻게 될까? 아무 일도 일어나지 않는다. 컴퓨터에 자바스크립트 코드를 작성해도 아무 일도 일어나지 않는다. 바로 엔진에 그 소스 코드를 전달했을 때 엔진은 그 코드를 해석하고 컴퓨터에 명령을 내린다.

브라우저에선 자바스크립트 파일을 불러오면 브라우저에 내장된 자바스크립트 엔진이 그 코드를 실행한다. 가장 많이 사용하는 구글의 크롬 브라우저가 바로 이 V8 엔진을 이용해 자바스크립트 소스를 실행한다.

엔진은 보통 C, C++ 언어를 기반으로 제작하고, 마이크로소프트는 차크라(인터넷 익스플로러, 엣지 구버전, 2021년까지 보안패치 진행), 애플의 사파리는 웹킷(JavascriptCore), 파이어폭스는 스파이더몽키라는 엔진을 만들어 사용하고 있다.
⠀
⠀
⠀

ECMAScript

엔진이라는 존재를 인식했다. 그럼 엔진은 그 코드를 어떻게 해석할까? 이를 스펙이라 부르는데, ECMAScript가 바로 스펙이다. 문법을 정하고 그 문법은 어떻게 작동해야 하는지 상세하게 설명한다.

스펙이란 단어는 낯설지 않다. 우리가 물건을 구입해도 볼 수 있다. 내용물이 뭐가 들었고, 높이와 넓이는 어떻게 되는지 그리고 어떤 기준을 충족하는지 등등 이 내용을 근거로 실물을 보지 않고도 우리는 어떤 물건인지, 필요한지 판단할 수 있다.

스펙에 적힌 내용은 이런 것들이 있다. 어떤 개념과 키워드가 있는지, + 연산을 사용하면 어떻게 작동해야 하는지, 배열은 어떤 조건을 충족해야 하는지 등 어떤 걸 구현해야 하는지 문법과 컨셉을 설명하고 있다.

물론 이것은 그냥 문서이고 엔진 개발자가 자기 마음대로 만들 수도 있다. 실제로 스펙 내용이 부족했던 2000년대에는 브라우저마다 코드를 다르게 작성해야 했고, 그냥 정말로 혼돈의 카오스였다.

그래서 개발자들은 인터넷 익스플로러를 기준으로 작업했는데, 당시 점유율이 압도적으로 높아 다른 브라우저를 생각하지 않아도 큰 문제 없었다.

우리가 사용하는 자바스크립트는 ecma라는 단체에서 TC 39라는 팀이 관리하는 스펙을 이용하고 있다.
⠀
⠀
⠀

node.js

프로그래밍 언어는 컴퓨터에서 명령어 입력해가며 실행한다. 그러나 앞서 말했지만 자바스크립트는 웹 브라우저에서 실행할 수 있는 유일한 프로그래밍 언어이기 때문에 오히려 컴퓨터에서 실행한다는 개념이 어색하다.

V8 엔진을 기반으로 만들었고, 컴퓨터의 파일을 관리하거나 HTTP 서버를 운영하는 등의 API를 자바스크립트 문법을 이용해 제공한다.

초기엔 팀이 갈라지고 말이 많았지만, 페이팔, 링크드인, 넷플릭스 같은 거대 IT 기업이 이용하면서 인정을 받게 되었다. 최근엔 웹 프로그래밍 강의로 RoR, Java가 아닌 nodejs가 많이 보인다. 자바스크립트는 쉽게 익힐 수 있는 언어면서 괜찮은 성능을 보여주고 있어서 많은 사랑을 받고 있는 게 아닌가 생각된다.
⠀
⠀
⠀

Deno

nodejs를 만든 Ryan Dahl이 Go 언어로 넘어간 듯하다가 deno를 만들었다. nodejs에서의 아쉬움을 개선했다. 이것도 컴퓨터에서 돌아가는 자바스크립트다.

가장 핫한 rust, typescript 언어를 사용했고, ESM을 사용(nodejs는 아직도 esm의 일부만 지원한다)하는게 가장 도드라지는 특징이다.

초창기인 지금은 지켜볼 뿐이고, 자바스크립트에 익숙하지 않다면 nodejs를 대체하는 존재라는 정도로만 인식하고 있으면 된다.
⠀
⠀
⠀

Typescript

자바스크립트에 타입 기능을 더한 프로그래밍 언어다. 자바스크립트로 변환하는 도구도 제공한다.

2018년?까진 리액트에 적용되있는 페이스북에서 만든 flow를 채택하는 라이브러리를 보곤했는데, 사용하는게 조금 혼란스러웠다.

지금 한창 유행이긴 하지만 제대로 이해하지 않으면 없느니 만도 못하다. 이왕 접한다면 시간 좀 내서 소스코드가 어떻게 변하는지 이해한 후 사용하길 권장한다.
⠀
⠀
⠀

CoffeeScript

파이썬이 굉장히 사랑받던 10년 전쯤, 간결한 문법으로 인기를 모았던 언어다. 타입스크립트와 역할이 똑같다. 지금은 아무도 안 쓴다고 봐도 무방하고, 배울 필요도 없다.

약간 트렌드를 읽을 수 있는게, 2010년 전후로는 문법이 간결한게 인기였고, 2020년 전후로는 타입이 인기다.
⠀
⠀
⠀

jQuery

존 레식^{John Resig} 아재가 제작한 자바스크립트 라이브러리다. 당시 자바스크립트는 혼돈의 카오스였다. 표준이 미약하다보니 브라우저마다 문법이 다른 부분이 많았다. 국내는 IE 독점이지만 해외에선 파이어폭스, 크롬의 비중이 높았다.

서로 다른 브라우저를 같은 문법으로 코딩할 수 있고, 자바스크립트에 비해 사용이 간단하다보니 자바스크립트는 몰라도 제이쿼리는 배우는 상황이 되었다.

당시엔 프론트엔드(퍼블리셔라는 직무도 있긴 했지만 디자이너나 개발자가 떠맡았다)만 전문적으로 하는 인력을 배치하는게 기업 운영 입장에선 쉽지않아 제대로된 개발자도 없었다.

진입장벽이 없다보니 지식이 전혀 없는 사람이 주로 사용했고 사이트 하나에 5개 버전의 제이쿼리가 들어가거나 소스코드가 엉망인 경우가 허다해서 지금은 애물단지로 인식되고있다.

자바스크립트 원시 타입과 객체를 사용할 때 종종 실수하는 것

Jinseok — Sat, 14 Aug 2021 12:17:47 +0000

자바스크립트는 값을 두 가지로 분류한다. 원시 값^{primitive value}과 객체^object가 있다.

함수의 매개변수에서 값을 사용할 때 종종 내가 원하는 값이 나오지 않을 때가 있었는데, 이러한 특성을 몰랐었기 때문이다.

그리고 한창 리액트^react가 유행하던 2017년 즈음엔 상태^state 값으로 객체를 사용할 때 값을 변경해도 업데이트가 되지않는게 한창 이슈였는데 같은 맥락이다.
⠀
⠀
⠀

값을 변경할 수 없는 원시 값

변경할 수 없는걸 흔히 불변^immutable이라 부른다. 원시 값은 이 불변이라는 조건을 가지게 된다.

하지만 다음 소스를 살펴보자

let fruitToBuy = "graph"
fruitToBuy = "apple"
console.log(fruitToBuy) // apple

불변이라 말했지만 fruitToBuy 변수는 graph에서 apple로 변했다.

이는 apple 값을 가진새로운 string 타입의 값을 생성한 후 해당 변수에 할당한 것이다.
⠀
⠀
⠀

원시 값의 데이터 타입

원시 값에는 다음의 데이터 타입이 존재한다.
undefined, null, boolean, string, number, symbol(ECMAScript 2015), BigInt(ECMAScript 2020)

그러나 찝찝한 부분이 있다. 분명 숫자나 문자도 객체처럼 프로퍼티와 메소드를 가진다. 또한 문자열의 경우 배열이 아닌가? 구현이 어떻게 되었든 스펙에서는 원시 값으로 분류하고 있으니 더이상 객체로 생각하지 말자.
⠀
⠀
⠀

그렇다면 객체는 어떻게 변한다는 말일까?

객체 사용은 다음과 같다.

const obj = { jobTitle: "개발자" }
obj.greeting = "안녕"

console.log(obj) // { jobTitle: "개발자", greeting: "안녕"}

흔히 사용하는 방식이다.

문제로 인식하기 시작하는 시점은 비교할 때이다.

obj === { jobTitle: "개발자", greeting: "안녕" } // false

{} === {} // false

직관적으로 내용이 같으니 true가 될 것 같지만 아니다. 뭐라고 표현해야 좋을지 모르겠지만 객체는 (우리는 볼 수 없지만)자신이 가진 고유 식별자(C언어의 주소값 같은)를 비교한다.

다음의 예를 보자.

const objCopied = obj

console.log(obj === obj) // true
console.log(obj === objCopied) // true

두 변수는 이름은 다르지만 같은 객체를 참조하고 있기 때문에 같다.

그래서 둘 중 하나만 변경해도 둘다 바뀌는 모습을 볼 수 있다.

objCopied.greeting = "안녕하세요"

console.log(objCopied) // { jobTitle: "개발자", greeting: "안녕하세요" }
console.log(obj) // { jobTitle: "개발자", greeting: "안녕하세요" }

둘 다 바뀌는게 아니라 같은 객체를 참조한다는 표현이 맞겠다.
⠀
⠀
⠀

함수 매개변수에서 사용하는 값

함수를 사용하면 딱봐도 복잡해진다.

let myVarType = "let"

function myFunction (myVarType) {
  console.log(myVarType) // let
  myVarType = "const"

  return myVarType
}

let result = myFunction(myVarType)
console.log(myVarType) // let
console.log(result) // const

매개변수로 원시 값인 문자열을 전달했는데, 뭐.. 문법을 배웠다면 이렇게 쓰기 시작한다.

문제는 자바스크립트에 슬슬 익숙해져 객체를 활용하기 시작하는데 아래와 같이 매개변수로 객체를 전달할 때 발생한다.

let me = { jobTitle = "개발자" }

function turnOver (me) {
  me.jobTitle = "디자이너"
  return me
}

let result = turnOver(me)
console.log(me) // { jobTitle: "디자이너" }
console.log(result)  // { jobTitle: "디자이너" }
console.log(me === result) // true

직관적으론 아까처럼 달라야 하는데, 같은 객체다. 매개변수의 모양때문에 해깔린다면 다음처럼 바꿀 수 있다.

//function turnOver() {
  let me2 = me
  me2.jobTitle = "디자이너"
//  return me2
//}
// function을 주석처리한건 혹시나 스코프를 설명해야할지도 몰라서...
console.log(me === me2) // true

그럼 이전 챕터에서 다루었던 객체의 예제와 모양이 같아졌다. 매개변수도 결국 일반적인 변수선언과 똑같기 때문에 다르게 생각할 필요 없다.
⠀
★ 누군가는 이 현상을 콜 바이 레퍼런스call by reference 혹은 주소 값을 전달한다고 표현하는데 자바스크립트는 포인터 기능이 없다.
⠀
만약 함수에서 다른 객체를 반환하고 싶다면 새로운 객체를 만들면 된다.

function turnOver(me) {
  const newProfile = { ...me }
  console.log(newProfile) // { jobTitle: "개발자" }
  console.log(newProfile === me) // false
  newProfile.jobTitle = "디자이너"

  console.log(me) // { jobTitle: "개발자" }
  console.log(newProfile) // { jobTitle: "디자이너" }
  return newProfile
}

⠀
⠀
⠀

객체의 프로퍼티에서도 똑같이 적용된다

객체 사용도 익숙해지면 객체 프로퍼티에 객체를 활용한다.

const company = {
  name: "폭스바겐",
  // 자바스크립트에선 배열도 객체이기 때문에 이 예제에선 객체라고 칭하겠다.
  subsidiary: [
    "벤틀리",
    "부가티",
    "아우디"
  ]
}

위와 같은 객체가 있을 때 프로퍼티를 변수에 담아 활용해보았다.

let name = company.name
name = "폭스바겐 그룹"
console.log(name) // 폭스바겐 그룹
console.log(company) // {name: "폭스바겐", subsidiary: ["벤틀리", "부가티", "아우디"]

const subsidiary = company.subsidiary
subsidiary.push('람보르기니')
console.log(subsidiary === company.subsidiary) // true
console.log(company) // {name: "폭스바겐", subsidiary: ["벤틀리", "부가티", "아우디", "람보르기니"]}

company.subsidiary.push("포르쉐");
console.log(subsidiary) // ["벤틀리", "부가티", "아우디", "람보르기니", "포르쉐"]

변수에서 객체의 프로퍼티로 모양이 바뀌었지만 다르게 생각할 필요가 없다.
⠀
⠀
⠀

리액트에서 상태를 객체로 사용할 때

리액트가 등장하면서 UI를 구현하기 얼마나 편해졌는지 모른다. 그러다보니 이런 저런 데이터를 활용하기 시작하는데 객체를 사용할 때 문제가 발생한다.

import React from 'react'

export default function () {
  const [me, setMe] = React.useState({ jobTitle: "개발자" })
  return (
    <button
      onClick={function () {
        me.jobTitle = "디자이너"
        console.log(me) // { jobTitle: "디자이너" }
        setMe(setMe)
      }}
    >
      직종변경하기(현재 {me})
    </button>
  )
}

버튼에는 직종변경하기 (현재 개발자)가 표시되어있는데 클릭하면 직종변경하기 (현재 디자이너)가 될거라 예상하지만 바뀌지 않는다. 분명 객체의 내용은 바뀌었는데 state의 기준에선 이전 값과 현재 값을 비교했을 때 같기 때문이다.

계속 봐왔듯 객체의 프로퍼티를 바꾼다고 다르게 인식하지 않는다. 새로운 객체를 만들어야 다르다고 인식한다.

setMe({ ...me })

사실 이 예제는 적절하진 않다. 다만 redux나 context를 활용할 때 똑같은 원리가 적용되므로 상대적으로 표기하기 간편한 state를 사용했다.
⠀
⠀
⠀

그런데 null은 object라는데요?

값이 없다는 의미로 null을 사용한다. 유효성 검사를 위해 타입을 확인하는데,

console.log(typeof null) // object

타입이 객체로 나온다. 정말 혼란스럽다.

왜 이렇게 된건지는 해당 포스팅을 참조하면 될 것 같다.
⠀
⠀
⠀

계기

주니어 시절 정말 답답했다. 객체가 내 생각대로 반환되지 않았기 때문이다. 지금도 종종 실수가 있긴하다. 함수 서너개만 거치면 어디서 문제가 생겼는지, 어떻게 바꿀까 고민하는데 생각보다 많은 시간이 든다. 그래서 왠만하면 원시 값을 사용하곤한다.

제이쿼리를 이용해 간단한 돔^DOM 조작할 땐 몰라도 문제 없었는데, 앱의 모양에 가까워 질수록 이런 기본이 정말 중요했다.

유명한 리액트 컴포넌트 라이브러리 모음

Jinseok — Sat, 07 Aug 2021 04:02:01 +0000

웹개발자의 큰 고민 중 하나는 UI다. 디자인이 안되거나 쏟을 시간이 없기 때문이다. 그렇다보니 bootstrap 같은 라이브러리가 인기있는게 아닐까?

다행히 큰 기업들이 오픈 소스로 자신의 컴포넌트를 공개해놨고 어느 정도 인지도 있는 라이브러리를 기록했다.

간단한 UI만 구현돼 있는 라이브러리도 있고 드랍다운, 테이블, 모달 등 복잡한 기능을 구현한 라이브러리도 있다. 단순히 UI를 구현하는 용도를 넘어 디자인시스템이나 코드구현 방식을 참고하기도 좋다.
※ react-router-dom을 위한 라이브러리다.
⠀
⠀

Ant Design

ant-design / ant-design

An enterprise-class UI design language and React UI library

Ant Design

An enterprise-class UI design language and React UI library.

English | 中文

✨ Features

🌈 Enterprise-class UI designed for web applications.
📦 A set of high-quality React components out of the box.
🛡 Written in TypeScript with predictable static types.
⚙️ Whole package of design resources and development tools.
🌍 Internationalization support for dozens of languages.
🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

Modern browsers
Server-side Rendering
Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import React from 'react';
import { Button, DatePicker } from 'antd';
const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>

…

View on GitHub

⠀
⠀

Base Web UI / Uber

uber / baseweb

A React Component library implementing the Base design language

Base Web React Components

Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

Usage

On npm, you can find Base Web as baseui.

Add baseui and its peer dependencies to your project:

# using yarn
yarn add baseui styletron-react styletron-engine-monolithic
# using npm
npm install baseui styletron-react styletron-engine-monolithic

import {Client as Styletron} from 'styletron-engine-monolithic';
import {Provider as StyletronProvider} from 'styletron-react';
import {LightTheme, BaseProvider, styled} from 'baseui';
import {StatefulInput} from 'baseui/input';
const engine = new Styletron();

const Centered = styled('div', {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%',
});

export default function Hello () {
  return (
    <StyletronProvider value={engine}>
      <BaseProvider theme

…

View on GitHub

⠀
⠀

Blueprint / Palantir

palantir / blueprint

A React-based UI toolkit for the web

Blueprint

Blueprint is a React-based UI toolkit for the web.

It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers This is not a mobile-first UI toolkit.

Read the introductory blog post ▸

View the full documentation ▸

Try it out on CodeSandbox ▸

Read frequently asked questions (FAQ) on the wiki ▸

Changelog

Blueprint's change log and migration guides for major versions live on the repo's Github wiki.

Packages

This repository contains multiple projects in the packages/ directory that fall into 3 categories:

Libraries

These are the component libraries we publish to NPM.

– Design system color variables.
– Core styles & components.
– Timezone-aware components for interacting with dates and times.
– Components for generating and displaying icons.
– Theme for monaco-editor (⚠️ experimental).
– Components for selecting items from a list.
– Scalable interactive table component.

Applications

These…

View on GitHub

⠀
⠀

Chakra UI

chakra-ui / chakra-ui

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️

Chakra UI is a comprehensive library of accessible, reusable, and composable React components that streamlines the development of modern web applications and websites. The library offers a diverse range of components that can be easily combined to build complex user interfaces while adhering to accessibility best practices.

Documentation

It's the https://chakra-ui.com website for the latest version of Chakra UI. For older versions head over here

v1: https://v1.chakra-ui.com
v0: https://v0.chakra-ui.com

Features

Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props Learn more
Flexible & composable: Chakra UI components are built on top of a React UI…

View on GitHub

⠀
⠀

Carbon / IBM

carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Carbon is an open-source design system built by IBM. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.

Getting started

If you're just getting started, check out @carbon/react.

We also have community-contributed components for the following technologies:

If you're trying to find something specific, here's a full list of packages that we support!

Package name	Description
`@carbon/react`	React components and styles
`@carbon/styles`	Sass styles for components
`@carbon/elements`	IBM Design Language elements like colors, type, iconography, and more
`@carbon/colors`	Work with IBM Design Language colors
`@carbon/grid`	Build layouts using the new 16 column grid system
`@carbon/icons`	Iconography assets. We also offer support in: React, Angular, Vue, and Svelte
`@carbon/pictograms`	Pictogram assets. We also offer support in: React and Svelte
`@carbon/layout`	Layout-based

…

View on GitHub

⠀
⠀

ElasticUI / Elastic

elastic / eui

Elastic UI Framework 🙌

Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.

Check out our full documentation site which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions — for other general questions regarding EUI, check out the Discussions tab.

Frequently Asked Questions

What is the Elastic UI Framework?

The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be used independently on their own.

The primary goal of this library is to provide reusable UI components that can be used throughout…

View on GitHub

⠀
⠀

Evergreen / Segment

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box.
Flexible & composable. Evergreen components are built on top of a React UI Primitive for endless composability.
Enterprise-grade. Evergreen features a UI design language for enterprise-grade web applications.

Documentation & Community

Evergreen v7 Migration guide

Evergreen v7 migration guide

Install and use components

🌲 Evergreen is made up of multiple components and tools which you can import one by one. All you need to do is install the evergreen-ui package:

$ yarn add evergreen-ui
# or
$ npm install --save evergreen-ui

A working version, assuming you are using something like Create React App, might look like this:

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'
ReactDOM.render(<Button>I am using 🌲 Evergreen!</Button>

…

View on GitHub

⠀
⠀

Fluent / Microsoft

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web

Fluent UI React is shipping its v9 final stable release. Visit the Fluent UI React v9 Release page on the wiki to learn more about the upcoming release schedule.

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.

The following table will help you navigate the 3 projects and understand their differences.

React Components (v9)	React (v8)	Web Components
Overview	New, future-proof and forward looking	Mature	Web Component implementation of Fluent UI.
Used By	Microsoft 365	Office	Edge
Read Me	README.md	README.md	README.md
Changelog	CHANGELOG.md	CHANGELOG.md	CHANGELOG.md
Repo	packages/react-components	./packages/react	./packages/web-components
Quick Start	Quick Start	Quick Start	See README.md
Docs	https://react.fluentui.dev/	aka.ms/fluentui-react	aka.ms/fluentui-web-components
NPM	`@fluentui/react-components`	`@fluentui/react`

…

View on GitHub

⠀
⠀

material-ui

mui / material-ui

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

MUI Core

MUI Core contains foundational React UI component libraries for shipping new features faster:

Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.
Joy UI is a library of beautifully designed React UI components built to spark joy.
Base UI is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features.
MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.

Documentation

Material UI

Visit https://mui.com/material-ui/ to view the full documentation.

Older versions

Note: @next only points to pre-releases Use @latest for the latest stable release.

Joy UI

Visit https://mui.com/joy-ui/getting-started/ to view the full documentation.

Note: Joy UI is…

View on GitHub

⠀
⠀

Garden / Zendesk

zendeskgarden / react-components

🌱 garden React components

Garden React Components

🌱 Garden is the design system by Zendesk

Garden React provides consistent styling and behavior for Garden components React components are maintained following a multi-package approach where components are packaged and published individually, but combined under this single repository.

Installation

See the individual package README for the React component you would like to install.

Package	Version	Size
`@zendeskgarden/react-accordions`
`@zendeskgarden/react-avatars`
`@zendeskgarden/react-breadcrumbs`
`@zendeskgarden/react-buttons`
`@zendeskgarden/react-chrome`
`@zendeskgarden/react-colorpickers`
`@zendeskgarden/react-datepickers`
`@zendeskgarden/react-drag-drop`
`@zendeskgarden/react-dropdowns`
`@zendeskgarden/react-dropdowns.next`
`@zendeskgarden/react-forms`
`@zendeskgarden/react-grid`
`@zendeskgarden/react-loaders`
`@zendeskgarden/react-modals`
`@zendeskgarden/react-notifications`
`@zendeskgarden/react-pagination`
`@zendeskgarden/react-tabs`
`@zendeskgarden/react-tables`
`@zendeskgarden/react-tags`
`@zendeskgarden/react-theming`
`@zendeskgarden/react-tooltips`
`@zendeskgarden/react-typography`

Usage

Garden React packages are ready to use in a Create React App environment or together with standard Rollup or webpack build configurations.

Here is a simple example to get you started:

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';
const App = () => (
  /* Include a ThemeProvider wrapper

…

View on GitHub

⠀
⠀

Gestalt / Pinterest

pinterest / gestalt

A set of React UI components that supports Pinterest’s design language

Gestalt ·

Gestalt is Pinterest’s design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.

Visit the official Gestalt Documentation

Installation

The package can be installed via npm:

npm i gestalt --save
npm i gestalt-charts --save
npm i gestalt-datepicker --save

Or via yarn:

yarn add gestalt
yarn add gestalt-charts
yarn add gestalt-datepicker

Usage

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';
import 'gestalt/dist/gestalt-charts.css';
import 'gestalt/dist/gestalt-datepicker.css';

That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.

Development

Gestalt is a multi-project monorepo. The docs and components are all organized as separate packages that share similar tooling.

Install project dependencies and run…

View on GitHub

⠀
⠀

Grommet

grommet / grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience

Documentation

Visit the Grommet website for more information.

Support / Contributing

Before opening an issue or pull request, please read the Contributing guide.

Install

You can install Grommet using either of the methods given below.

For npm users:

  $ npm install grommet styled-components --save

For Yarn users:

  $ yarn add grommet styled-components

There are more detailed instructions in the Grommet Starter app tutorial for new apps. For incorporating Grommet into an existing app, see the Existing App version.

Explore

Storybook examples per component, you can create them locally by running:
```
  $ npm run storybook
```
or
```
  $ yarn storybook
```
Basic code-sandbox playgrounds for each component.
Templates, patterns, and starters: feel free to share with us more pattern ideas on Slack.
End-to-end project examples from our community in the #i-made-this Slack channel.
Read more from the Grommet team on Medium.

Stable

grommet…

View on GitHub

⠀
⠀

Pluralsight

pluralsight / classic-design-system

This library (classic) is officially in maintenance mode only. For the latest library, please see the TVA project (https://pluralsight.github.io/tva/).

Pluralsight Design System

Important ⚠️

This library (classic) is officially in maintenance mode only.

We will only fix bugs and will no longer add new features. For the latest library, please follow the TVA project.

Get involved

Run locally

Install nvm

nvm install
nvm use

yarn config set ignore-engines true

yarn
yarn build
yarn start

Publishing packages

yarn publish:all

View on GitHub

⠀

⠀

Polaris / Shopify

2018년 라이센스의 변경으로 Shopify와 관련된 앱을 만들 때 사용할 수 있다. 사용은 못해도 참고하기 좋다.

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.

Polaris

Build. Contribute. Evolve. Shape the merchant experience for Shopify’s core product, the admin.

Status	Owner	Help
Active	@shopify/polaris	New issue

About this repo

The shopify/polaris repository is an intergalactic monorepo made up of NPM packages, VSCode extensions, and websites.

polaris/
├── documentation               # Documentation for working in the monorepo
├── polaris-for-vscode          # VS Code extension for Polaris
├── polaris-icons               # Icons for Polaris
├── polaris-react               # Components for @shopify/polaris package
├── polaris-tokens              # Design tokens for Polaris
├── polaris.shopify.com         # Documentation website
└── stylelint-polaris           # Rules for custom property usage and mainline coverage

Commands

Install dependencies and build workspaces

yarn && yarn build

Run a command

One workspace

Run commands from a selected workspace using turbo run <command> --filter=<workspace>... flag.

Command	Runs
`yarn turbo run dev --filter=@shopify/polaris`	Open the react component storybook
`yarn turbo run dev --filter=polaris.shopify.com`	Open polaris.shopify.com NextJS site

All workspaces

Run commands across all workspaces. This…

View on GitHub

⠀
⠀

Primer / Github

primer / react

An implementation of GitHub's Primer Design System using React

Primer React

A React implementation of GitHub's Primer Design System

Documentation

Our documentation site lives at primer.style/react. You'll be able to find detailed documentation on getting started, all of the components, our theme, our principles, and more.

Installation

Install @primer/react in your project with your package manager of choice:

npm install @primer/react

yarn add @primer/react

Roadmap

You can track our roadmap progress in the Roadmap Project Board, see more detail in the quarterly planning Discussions, and find a list of all the current epic tracking issues.

Contributing

We love collaborating with folks inside and outside of GitHub and welcome contributions!

👉 See the contributing docs for more info on code style, testing, coverage, and troubleshooting.

New Component Proposals

We welcome and encourage new component proposals from internal GitHub teams! Our best work comes from collaborating directly with the teams using Primer React Components in their projects…

View on GitHub

⠀
⠀

Rainbow

nexxtway / react-rainbow

🌈 React Rainbow Components. Build your web application in a snap.

React Rainbow

React Rainbow is a collection of components that will reliably help you build your application in a snap. Give it a hack and let us know what you think

✨ Features

90+ components built on top of React.
Interactive Examples.
First class testing.
Wdio page objects.
Redux-Form integration.
We designed each component with i18n in mind.
Accessibility is part of our definition of done.
Components with out-of-the-box Typescript typing.

🖥 Environment Support

Firefox	Chrome	Safari
last 2 versions	last 2 versions	last 2 versions

📦 Installation

React Rainbow Components is available as an npm package.

$ yarn add react-rainbow-components

or

$ npm install react-rainbow-components --save

⌨️ Usage

Here is a quick example to get you started. It's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-rainbow-components';
function App() {
    return <Button label

…

View on GitHub

⠀
⠀

React95

react95-io / React95

🌈🕹 Windows 95 style UI component library for React

React95

Components - Demo app - React Native - Slack - PayPal donation 💰

Refreshed Windows95 UI components for your modern React apps.
Built with styled-components 💅

Support

Getting Started

First, install component library and styled-components in your project directory:

# yarn
$ yarn add react95 styled-components
# npm
$ npm install react95 styled-components

Apply style reset, wrap your app with ThemeProvider with theme of your choice... and you are ready to go! 🚀

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { MenuList, MenuListItem, Separator, styleReset } from 'react95';
// pick a theme of your choice
import original from 'react95/dist/themes/original';
// original Windows95 font (optionally)
import ms_sans_serif from 'react95/dist/fonts/ms_sans_serif.woff2';
import ms_sans_serif_bold from 'react95/dist/fonts/ms_sans_serif_bold.woff2';

const GlobalStyles = createGlobalStyle`
  ${styleReset}
  @font-face {
    font-family:

…

View on GitHub

⠀
⠀

Ring UI / Jetbrains

JetBrains / ring-ui

A collection of JetBrains Web UI components

Ring UI — JetBrains Web UI components

This collection of UI components aims to provide all the necessary building blocks for web-based products built inside JetBrains, as well as third-party plugins developed for JetBrains' products.

Try now

Try the codesandbox, based on create-react-app tooling, to see and try the UI components
Check out list of examples for each component

Installation

npm install @jetbrains/ring-ui

Quick start

The easiest way is to import necessary components as ES modules:

// You need to import RingUI styles once
import '@jetbrains/ring-ui/dist/style.css';

import alertService from '@jetbrains/ring-ui/dist/alert-service/alert-service';
import Button from '@jetbrains/ring-ui/dist/button/button';

...

export const Demo = () => {
  return (
    <Button onClick={() => alertService.successMessage('Hello world')}>
      Click me
    </Button>
  );
};

The bundle size will depend on the amount of components you imported.

Building Ring

…

View on GitHub

⠀
⠀

Semantic

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration

Semantic UI React

Installation & Usage

See the Documentation for an introduction, usage information, and examples.

Built With

Amazon Publishing — the full-service publisher of Amazon — APub.com
Netflix's Edge Developer Experience team's numerous internal apps
Netflix's flamescope
Microsoft's Teams prototyping

Example Projects

This is a listing of example projects and guides that will help you integrate Semantic UI React into your new or existing projects.

Show projects

semantic-ui-react-todos

Semantic UI React implementation of react-redux Todo List.

FAQ

Can I use custom Icons? Yes. Just use <Icon className='my-icon' /> instead of <Icon name='my-icon' />. See #931 (comment) for detailed info and examples. How do I setup CSS?

There are several options. Refer to our doc on CSS Usage.

Can I use a custom CSS theme?
Yes. Semantic UI React includes components that render valid Semantic UI HTML, no CSS is included. This allows you to load any…

View on GitHub

2의 보수, 컴퓨터가 음수를 표현하는 방법

Jinseok — Fri, 30 Jul 2021 01:12:38 +0000

우리는 숫자 앞에 - 기호를 표시함으로 쉽게 음수를 표현할 수 있다. 하지만 0과 1뿐인 컴퓨터에선 어떻게 표현할 수 있을까?

음수인지 양수인지 구별하기 위한 부호 비트를 살펴보고 단점을 보완하기 위한 1의 보수와 2의 보수를 살펴봤다.

☀︎ (2)는 2진수를 의미함
⠀
⠀
⠀

부호 비트

sign bit

가장 왼쪽의 비트^MSB를 부호로 사용해 음수를 표현하는 방식이다. 0(2)이면 양수, 1(2)이면 음수임을 뜻한다. 4비트 시스템을 예로 들었을 때 0010(2)은 2이고 1010(2)는 -2이 된다.

숫자를 표현하기 위한 비트가 하나 줄었다는 단점이 있다. C언어에서 unsigned가 붙은 자료형이 붙지 않은 자료형에 비해 월등히 큰 숫자를 사용할 수 있는 게 그 이유다.

그런데 다른 문제가 생겼다. 부호를 사용했을 때 0010(2) + 1010(2)의 결과는 무엇일까? 0이 돼야 한다. 하지만 1100(2)으로 -4라는 결괏값이 나온다.

그럼 0(2)일 땐 더하고 1(2)일 땐 빼면 안 될까? 생각할 수 있다. 그럼 부호 비트가 0(2)일 때와 1(2)일 때 각각 다른 회로를 사용해야 하는데, 단순하게 생각해 보면 덧셈이라는 행위가 2배로 복잡해진다.
⠀
⠀
⠀

1의 보수

one's complement

그런데 누군가 기발한 생각을 했다. 각 비트를 뒤집으면(0(2)은 1(2)이 되고 1(2)은 0(2)이 됨) 단순하게 구현할 수 있는 것이다.

2를 예로 들어보면 0010(2)을 뒤집어 1101(2)로 -2를 표현할 수 있다. 둘을 더하면 1111(2)로 숫자 비트만 뒤집으면 000(2)이 되므로 0이라는 결과를 확인할 수 있다.

0은 0인데 부호 비트가 1이니 -0이라는 의미심장한 숫자가 등장하게 된다. 게다가 덧셈이 이상한 경우도 등장한다. 0010(2)와 1110(2)를 더하면 2 + -1이므로 1이라는 결과가 나와야 하는데 0000(2), 즉 0이라는 결과가 나온다.

이 문제를 해결하기 위해선 MSB에서 올림이 발생했을 때 가장 오른쪽 비트^LSB로 전달해 주는 순환 올림^{end-around carry}이 필요하다.
⠀
⠀
⠀

2의 보수

two's complement

이제 음수 표현의 최최최종 버전인 2의 보수가 등장한다. 1의 보수처럼 뒤집되 +1(2)을 해준다. -2를 표현하고 싶다면 0010(2)을 뒤집어 1101(2)로 만들고, 여기서 1(2)을 더하면 1110(2)이 된다.

계산해보면 -0이라는 숫자가 없어진다. 1의 보수에선 1111(2)은 -0이었지만 2의 보수에선 000(2) + 1(2)과 같은 효과로 001(2), 즉 -1이 된다.

그럼으로 음수 숫자를 하나 더 표현할 수 있다. 4비트를 예로 들면 가장 큰 값은 0111(2)인 7이 되고, 가장 작은 값은 1111(2)로 -8이 된다.

게다가 순환 올림도 필요 없기 때문에 음수를 더했을 때도 문제가 없다(하나하나 직접 계산해보면 그 신기함을 경험할 수 있다).
⠀
⠀
🙌 1, 2의 의미는 무엇일까?

1비트를 예로 들었을 때, 1(2)을 1의 보수 취한다는 것은 1(2) - 1(2)와 같다. 2의 보수를 취한다는 것은 10(2) - 1(2)으로 비트 단위가 달라지는 걸 확인할 수 있다.

여기서 1(2)은 1(10)이고 10(2)은 2(10)인데, 이 모양을 본떠 이름을 지었다고 볼 수 있다.
⠀
⠀

변환

만약 8비트 시스템에서 부호 있는 정수를 나타낸 11111011(2)라는 숫자를 보게 되면 10진수로 어떻게 표현할 수 있을까?

100000000(2) - 11111011(2) = 101(2) 여기서 부호 비트가 1이니 결과는 -5가 된다.

슬라이드 라이브러리 추천 5개 +

Jinseok — Mon, 05 Jul 2021 11:50:27 +0000

캐러셀^carousel인지 슬라이더^slider인지 통일된 이름은 없지만 특히 쇼핑몰의 메인에 꼭 필요한 라이브러리다.

당시 다니던 회사에서 bxSlider를 개조해 별 문제 없이 사용하고 있었지만 제이쿼리^jQuery 의존성이 보기 싫었고 추가 기능이 필요했는데 소스를 어디서부터 건드려야할지 감이 오지 않았다.

그래서 업데이트가 잘되고 가벼운 라이브러리를 찾아나섰고 십 수개의 라이브러리를 찾고 실험해보며 그 중 가장 괜찮았던 슬라이더를 소개한다.

Swiper

업데이트가 가장 활발하고 사용자 층도 두터워 보인다. 애니메이션이나 터치 작동도 자연스럽고 옵션도 다양하다.

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

초기엔 제이쿼리도 지원했지만 지금은 직접 개발한 dom7이라는 제이쿼리같은 라이브러리를 기본으로 사용한다. 차라리 많은 사이트에서 사용중인 제이쿼리로 만들었다면⋯ 하는 아쉬움이 남는다.

Embla Carousel

상대적으로 최근에 생겼으며, 모던 자바스크립트에 소스 구조도 깔끔하다. 5.9kb의 적은 용량에 안정적이며 빠릿하다.

davidjerleke / embla-carousel

www.embla-carousel.com — A lightweight carousel library with fluid motion and great swipe precision.

당시엔 리액트(React)도 지원한 유일한 라이브러리였다. 의존성(dependencies)이 없는 것도 특징이다.

Flicking

네이버에서 만들고 사용중인 라이브러리.

naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

Slick

그냥 유명해서 넣었다. 제이쿼리 시절 유명했던 것 같다.

kenwheeler / slick

the last carousel you'll ever need

유지보수는 이미 2년전부터 종료된 것 같지만 여전히 인기가 많아 놀랍다.

Flickity

정말 심플하다. 상업적인 용도는 라이센스를 구입해야한다.

metafizzy / flickity

🍃 Touch, responsive, flickable carousels

npm 대신 CDN으로 긁어오거나 스태틱하게 제공하는 경우가 더 많을 것 같아 통계가 신뢰있다고 말하긴 어렵지만 이거 밖에 없다.

DEV Community: Jinseok

Elastic Beanstalk에서 플랫폼과 버전 동시에 업데이트

1. AWS CLI 설치

2. 명령어 입력

env.yaml

번외. 애플리케이션 버전 추가하기

Elastic Beanstalk에서 hooks를 이용할 때 권한이 없는 문제

후기

자바스크립트의 다양한 이름들 node.js, ecma, v8

자바스크립트

Vanilla JS

V8

ECMAScript

node.js

Deno

Typescript

CoffeeScript

jQuery

자바스크립트 원시 타입과 객체를 사용할 때 종종 실수하는 것

값을 변경할 수 없는 원시 값

원시 값의 데이터 타입

그렇다면 객체는 어떻게 변한다는 말일까?

함수 매개변수에서 사용하는 값

객체의 프로퍼티에서도 똑같이 적용된다

리액트에서 상태를 객체로 사용할 때

그런데 null은 object라는데요?

계기

유명한 리액트 컴포넌트 라이브러리 모음

Ant Design

ant-design / ant-design

An enterprise-class UI design language and React UI library

Ant Design

✨ Features

🖥 Environment Support

📦 Install

🔨 Usage

Base Web UI / Uber

uber / baseweb

A React Component library implementing the Base design language

Base Web React Components

Usage

Blueprint / Palantir

palantir / blueprint

A React-based UI toolkit for the web

Blueprint

Changelog

Packages

Libraries

Applications

Chakra UI

chakra-ui / chakra-ui

⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️

Table of contents

Documentation

Features

Carbon / IBM

carbon-design-system / carbon

A design system built by IBM

Carbon Design System

Getting started

ElasticUI / Elastic

elastic / eui

Elastic UI Framework 🙌

Elastic UI Framework

Frequently Asked Questions

What is the Elastic UI Framework?

Evergreen / Segment

segmentio / evergreen

🌲 Evergreen React UI Framework by Segment

Documentation & Community

Evergreen v7 Migration guide

Install and use components

Fluent / Microsoft

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web

material-ui

mui / material-ui

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.