Development

2022 디자인 시스템 라이브러리 11개 찍먹 후기

안녕하시렵니까? 서론 회사에서 대시보드를 만들 일이 생겼는데, 최대한 디자인에 노력을 들이지 않고 스타일을 입힐 수 있으면 좋겠다는 요구사항이 있었다. 그래서 유명한 디자인 시스템과 유명한 회사들의 디자인 시스템을 사용해 직접 간단한 대시보드를 꾸며보고, 후기를 적어보았다. React 18을 지원하지 않거나, install 과정부터 험난한 라이브러리들은 공식문서만 읽고 사용해보지 않았다. 스크린샷이 없는 라이브러리는 모두 직접 사용해보지 않은 라이브러리라고 생각하면 된다. 1. Material-UI MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of Re..

REST API 톺아보기

API? 애플리케이션 프로그래밍 인터페이스(Application Programming Interface)는 애플리케이션 소프트웨어를 구축하고 통합하는 정의 및 프로토콜 세트 때때로 정보 제공자와 정보 사용자 간의 계약으로 지칭되기도 하며 소비자에게 필요한 컨텐츠(호출)과 생산자에게 필요한 컨텐츠(응답)을 구성함 리소스 검색 방법 또는 리소스의 출처에 대한 지식 없이도 사용 가능 한마디로 말하자면, 소프트웨어와 소프트웨어 사이에서 정보를 요청하는 지정된 양식대로 요청하고 응답을 줄 수 있는 수단 REST의 정의 자원을 이름(자원의 표현)으로 구분해 해당 자원의 상태(정보)를 주고 받는 모든 것 자원: 해당 소프트웨어가 관리하는 모든 것(문서, 사진 등) 표현: 그 자원을 표현하기 위한 이름(DB 내 학생 ..

[2021 겨울 민트하임 스터디] You don't know JS - Chapter 4: 강제변환(1)

2021.02.07(일) 챕터 4는 양이 많아서 값 변환/명시적 강제변환과 암시적 강제변환/동등성 비교의 3개로 나누어 정리하겠다. 명시적 강제변환과 암시적 강제변환 let a = 7; let b = "오늘은 " + a + "일"; // 암시적 강제변환 let c = String(a); // 명시적 강제변환 명시적 강제변환은 코드에서 의도적으로 타입 변환이 이뤄진다는 사실이 명확하게 드러나는 반면, 암시적 강제변환은 다른 작업으로 인한 부수 효과로 인해 발생하는 타입 변환이다. b의 경우: 암시적 강제변환 암시적 강제변환이 발생한다. 문자열과의 + 연산은 두 문자열을 합치는 문자열 접합을 의미하므로, 문자열 접합의 부수 효과로서 숫자 7을 문자열 "7"로 암시적 강제변환했다. c의 경우: 명시적 강제변환..

[2021 겨울 민트하임 스터디] You don't know JS - Chapter 3: 네이티브

네이티브 자바스크립트의 내장 함수다. 정확히는 특정 환경(브라우저 등의 클라이언트 프로그램, 또는 Node.js 등의 런타임)에 종속되지 않은, ECMAScript 명세의 내장 객체다. 내장 타입 생성자라고 생각하면 될 것 같다. var s = new String("Hello, world!"); typeof s; // "object" -> ? s instanceof String; // true -> ? 엥? 생긴건 생성자와 비슷하지만 결과는 우리의 예상과 다르다. new String("Hello, world!")의 결과는 원시 값 "Hello, world!"를 감찬 객체 래퍼다. typeof 연산자로 이 객체의 타입을 확인해 보면 자신의 감싼 원시 값의 타입이 아닌 Object의 하위 타입에 가깝다. 결..

shouldComponentUpdate()와 React.PureComponent

shouldComponentUpdate()와 React.PureComponent 바뀌어야 하는 부분만 다시 렌더링하도록 해주는 성능 최적화 Lifecycle API다. props 또는 state가 새로운 값으로 갱신되어 렌더링이 발생하기 직전에 호출된다. shouldComponentUpdate에서 false를 반환할 경우 render()와 componentDidUpdate()는 호출되지 않는다. 공식문서 1 - React.Component: https://ko.reactjs.org/docs/react-component.html#shouldcomponentupdate 공식문서 2 - 성능 최적화: https://ko.reactjs.org/docs/optimizing-performance.html 왜 sho..

[2021 겨울 민트하임 스터디] You don't know JS - Chapter 2: 값

Chapter 2: 값 2021.1.24(일) 책: You don't know JS 배열 vs 유사 배열 자바스크립트의 배열 어떤 타입의 값이라도 담을 수 있다. 배열 안에 배열도 넣을 수 있다(다차원 배열). 배열 크기 미리 선언할 필요 없다. 배열 인덱스는 숫자지만, 배열 자체가 하나의 객체이므로 키/프로퍼티 문자열을 추가할 수 있다. 이렇게 추가한 경우 length가 늘어나지 않는다. key가 숫자일 경우 문자열 키가 아닌 숫자 키(인덱스)를 사용한 것과 같은 효과가 일어난다. 뭔소리냐면 var a = []; a["13"] = 42; a.length; // 14 -> ? 배열에 문자열 타입 키/프로퍼티를 두는 것은 피해야 한다. 키를 사용해야 한다면 객체를 대용하고, 배열 원소의 인덱스로는 숫자만 ..

[2021 겨울 민트하임 스터디] You don't know JS - Chapter 1: 타입

Chapter 1: 타입 2021.1.16(토) 책: You don't know JS 자바스크립트에도 타입이 있다 '타입': 자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별할 수 있는, 고유한 내부 특성의 집합 42(number) !== "42"(string) 타입에 따라 사용할 수 있는 함수와 연산, 가공 방법이 다름 자바스크립트의 내장 타입 자바스크립트의 7가지 내장 타입 null undefined boolean number string object symbol(ES6부터 추가됨) object를 제외한 6가지 타입을 원시 타입이라고 한다. 값의 타입은 typeof 연산자를 통해 알 수 있지만, 그 반환값이 항상 7가지 내장 타입 중 하나인 것은 아니다. typeof 반환값에 대한 예외 ..

[2020 여름 효창공원 스터디]DBMS

DBMS 🦋 참고한 문서 [DB 기초]DBMS 개념과 종류 및 장단점 분석 https://coding-factory.tistory.com/78 Chap01 - DBMS & SQL 개요 https://excelsior-cjh.tistory.com/173 DataBase Management System. 줄여서 DBMS. 데이터베이스를 조작하는 별도의 소프트웨어를 가리키며, 응용 프로그램들이 데이터베이스를 공유하며 사용할 수 있는 환경을 제공한다. SQL과 CLI, GUI 등 다양한 인터페이스도 제공한다. DBMS 분류 DBMS는 크게 계층형(Hierachical), 망형(Network), 관계형(Relational) DBMS 등으로 분류된다. 계층형 DBMS 1960년대에 처음으로 나온 DBMS 개념으로,..

[2020 여름 효창공원 스터디]Rendering

Rendering(Templating) 🦋 참고한 문서 HTML 기초 - 3 (렌더링이란?) https://velog.io/@ru_bryunak/%EB%A0%8C%EB%8D%94%EB%A7%81%EC%9D%B4%EB%9E%80 브라우저 렌더링이 이루어지는 과정 https://tuhbm.github.io/2017/08/10/rendering1/ 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361 CSS 애니메이션 성능 개선 방법(reflow 최소화, will-change 사용) https://wit.nts-corp.com/2017/06/05/4571 MDN web docs - will-change https://developer.mozilla.org/ko/do..

[Swift]연산자 메소드 - Operator Method

연산자 오버로딩 - Operator Overloading 이미 존재하는 연산자가 새로운 피연산자를 처리할 수 있도록 확장한다. struct Point { var x = 0.0 var y = 0.0 } let p1 = Point(x: 12, y: 34) let p2 = Point(x: 67, y: 89) p1 == p2 // error : Binary operator '==' cannot be applied to two 'Point' operands == 연산자는 Int, Double, String 등의 다양한 데이터 타입의 동등성을 비교해주는 연산자이다. 하지만 내가 방금 작성한 구조체 Point에 대해서는 == 연산자를 통한 동등성 비교가 가능하지 않다. 따라서 같은 형식의 데이터 간의 연산을 처리하기..