전체 글
-
Ruby ConfigurationRuby 2024. 3. 15. 10:19
RHEL 9.3 => asdf를 이용하여 설치하면 편함 sudo dnf update -y sudo dnf install -y https://mirror.stream.centos.org/9-stream/CRB/x86_64/os/Packages/libyaml-devel-0.2.5-7.el9.x86_64.rpm asdf plugin add ruby https://github.com/asdf-vm/asdf-ruby.git asdf install ruby 3.3.0 ruby -v Visual Studio Code 설정 (Windows) {workspace}/.rubocop.yml (예시) Layout/SpaceInsideHashLiteralBraces: Enabled: false Style/QuotedSymbol..
-
Docker 시작하기Docker_private 2021. 7. 14. 07:52
@ 업데이트 중... @ 작성일 기준 Docker 버전: 21.07.14 지금껏 공부한 내용들을 노션으로 간단하게 정리해봤다 https://www.notion.so/Docker-d642dfa57c544a3c83e0fad5c38426f7 Docker dockerd --insecure-registry=192.168.99.100:5000 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - add-apt-repository www.notion.so Reference 도서: http://www.yes24.com/Product/Goods/93765519 @@@
-
JavaScript 함수형 프로그래밍 (Functional Programming)JavaScript 2021. 5. 15. 19:21
@ 업데이트 중... @ 대부분의 코드 결과는 codesandbox에서 작성한 코드의 결과를 적습니다. 참고하세요 함수형 프로그래밍(Functional Programming)이란? - 외부에서 관찰 가능한 부수효과가 제거된 불편 프로그램을 작성하기 위해 순수함수를 선언적으로 평가하는 것 함수형 프로그래밍 특징 - 선언적 (명령형이 아니다) - 부수효과가 없다. (순수 함수) - 상태 변이를 최소화한다. - 불변성 - 참조 투명성 부수 효과(side effect)가 발생하는 경우 - 전역범위에서 변수, 속성, 자료구조를 변경 - this 사용 - 사용자 입력을 처리 - 함수의 원래 인수 값을 변경 - 예외를 일으킨 해당 함수가 예외를 붙잡지 않고 그대로 예외를 던짐 - 화면 또는 로그 파일에 출력 - HT..
-
JavaScript 디자인 패턴JavaScript 2021. 5. 12. 22:11
@ 업데이트 중... @ 이 글은 최하단에 위치해있는 References를 참고하여 작성된 글입니다. @ chat: 도서 때문인지는 모르겠지만 정말 배우기 거부감 드는 책이다... 이 글 작성하는 것도 매우 거부감 들고... Note) UML (통합 모델링 언어, Unified Modeling Language): 객체 관련 표준화 기구인 OMG(Object Management Group)가 개발한 컴퓨터 시스템을 기술하는 표준화된 언어이다. UML은 사용자 상호작용 다이어그램, 시퀀스 다이어그램과 상태 머신을 생성할 수 있는 어휘를 포함함 Part 1. GoF에 소개된 패턴 생성 1) 추상 팩토리(Abstrarct Factory) 예를 들어, 어떤 왕국이 있을 때 왕은 나라를 지배하고 있다. 왕의 영향력..
-
RecoilReact 2021. 4. 28. 01:11
Facebook에서 만든 새로운 '상태 관리를 위한 라이브러리'이다. 이미 Redux 팀에서는 Redux-toolkit이라는 것도 만들었지만 redux-toolkit의 존재를 알고 난 상태에서 recoil의 존재를 알았다. 흠... 페이스북에서는 이미 상태 관리 라이브러리를 만들었는데 또? 라는 생각이 들었지만 contextAPI의 단점이 드러나면서 만들지 않았나 라는 의견을 본 적이 있어서 아무래도 context API 때문에 만들지 않았나 싶다. codesandbox에서 적용해본 결과 나름 쓸만했다 redux-toolkit처럼 폴더 구조도 새로운 개념에 맞게 잡는 것이 좋을지... 컴포넌트 위에서 사용하는게 맞을지... 라이브러리를 넘어서 리액트팀에서는 폴더 구조에 대한 지침을 따로 권장하고 있지 않..
-
RxJS 연산자RxJS 2021. 4. 27. 00:05
@ 이 글은 글의 최하단에 위치해있는 References의 도서(RxJS 6 버전)를 기준으로 작성하였습니다. @ Github: (https://github.com/ReactiveX/rxjs 6버전은 6.x 브랜치로 이동하세요) @ RxJS 7이 공식 릴리즈되었습니다. (rxjs.dev/guide/overview/) @ deprecated 되는 연산자도 있으니 참고하세요 (7 버전 변경사항 rxjs-dev.firebaseapp.com/deprecations/breaking-changes) @ 각 연산자마다 타입 정의를 작성하지만, 이 외에도 오버로딩되는 함수들이 여럿있으니 github이나 에디터에서 참고하시길 바랍니다. @ 각 함수의 마블 다이어그램은 공식 문서 또는 다음 링크에서 확인할 수 있습니다. ..
-
RxJS 기본개념 정리RxJS 2021. 4. 26. 11:56
@ 이 문서는 RxJS 6 버전을 기준으로 작성하였습니다. @ 작성 시점에서는 7 버전 (베타)가 있습니다. (마스터 브랜치) https://github.com/ReactiveX/rxjs @ 6 버전은 6.x 브랜치로 이동하세요 @ 7 버전이 공식적으로 배포되기 전에 6 버전에 대해 알아두면 7 버전 학습에 도움이 될 것 같아 학습해봤습니다. 1] RxJS에서 말하는 개념 싱글 멀티플 pull 함수 (Function) 이터레이터 (iterator) push 프로미스 (Promise) 옵저버블 (Observable) 싱글: 하나의 값이나 이벤트를 다루는 것 멀티플: 여러 개의 값이나 이벤트를 다루는 것 pull: 데이터를 받을지 결정하는 것 push: 데이터를 보낼지 결정하는 것 2] 옵저버블의 라이프 사..
-
함수 호출 방법JavaScript 2021. 4. 25. 00:48
자바스크립트에서는 여러 방법으로 함수 호출이 가능합니다. // 이런 함수가 있다고 할 때 const A = (data) => { console.log(data) } // 대부분 이렇게 호출할 겁니다 A(1); // 이 외의 방법도 있으니 알아봅시다. 1] `(백틱)을 사용하는 방법 (Tagged Template Literal) Template Literal은 단순히 문자열에서만 변수를 나타내기 위해 사용하는 것이 아니라 함수에서도 적용이 가능합니다. const C = (value) => { console.log(value) } // C(1) >>> 1 // => C`1` >>> "1" // 완전히 같게 하려면 매개변수를 다르게 해야 합니다. const C = (str, value) => { console..
-
basic typeTypeScript 2021. 4. 23. 10:56
unknown과 any의 차이 unknown은 난 무슨 타입인지 잘 모르니까 타입을 지정해줘! 라고 말합니다 따라서 의무적으로 if문과 같은 것으로 타입을 좁혀서 사용해야 합니다 그렇지 않으면 컴파일에서 에러가 발생하기 때문이에요 반면 any는 나는 어떤 타입이든 상관없으니까 아무거나 들어와! 라고 말합니다 unknown과 달리 타입을 좁혀서 사용하지 않아도 무방합니다 위 2가지 타입은 가급적 사용하지 않는 것이 좋습니다. void와 never의 차이 never는 함수가 종료하지 않습니다. 따라서 반환하지 않기 때문에 주로 에러를 발생시킬 때 사용합니다 void는 반환 값이 없고 함수는 종료합니다
-
Utility TypesTypeScript 2021. 3. 23. 17:57
1. Partial = Type의 모든 속성을 Optional로 변경 2. Required = Type의 모든 속성을 필수로 변경 위 2개의 유틸타입은 서로 상반 관계 : Partial Required 3. Readonly = Type의 모든 속성을 읽기 전용 속성으로 변경 4. Record = 새로운 객체를 생성하는데 그 객체의 속성이 Keys이고 값이 Type인 객체를 생성 5. Pick = Type의 속성들 중에 Keys만 골라서 새로운 타입을 생성 6. Omit = Type의 속성들 중에 Keys를 제외한 새로운 타입을 생성 7. Exclude = 8. Extract = 9. ReturnType = Type 함수의 반환값을 타입으로 하는 새로운 타입을 생성 10. NonNullable = Type..
-
Svelte APISvelte_private 2021. 1. 23. 17:15
@ Reference https://svelte.dev/docs https://heropy.blog/2019/09/29/svelte/ 새로운 프론트엔드 프레임워크라길래 Svelte에 대해 몇 가지 학습을 해보았다. 학습을 많이 한 건 아니지만 게임을 찍먹한다는 느낌으로 배워봤다 Svelte는 기존 React와 사용법의 차이가 있지만 자세히 보니 vue와 매우 닮아있다. 개인적으로 Vue를 자세히는 모르지만 v- 접두사도 있고 computed 같은 속성?들도 있어서 썩 와닿지도 않았고 직관적이지 않았다 그렇게 많이 써본 것은 아니지만 React에 비해 뭔가 많이 아쉽다고 느꼈다. 1. 확장자가 .svelte라는 것인데, VS Code에서 지원하는 확장이 있는진 모르겠지만 아이콘이 일반 Plain Text처..
-
React의 성능을 올려보자!React 2021. 1. 18. 23:16
@ 이 글은 TypeScript (4.2+), React(17.0.1+), styled-components (5.1+) 로 구성된 간단 예제입니다. 리액트의 성능을 올려보는 방법들은 생각보다 꽤나 많았다. 단순히 리액트 DOM의 성능부터 gpu관련까지 있었다. 오늘은 성능 향상하는 방법을 기록해두려 한다. 예제는 막 거창한건 아니고 단순하게 즉석에서 생각해봤다. 0. 사전 지식과 사전 준비 1) 확장 프로그램 설치 먼저 크롬 웹스토어에서 React Deveolper Tools를 설치한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?utm_source=chrome-ntp-ico..
-
React Native 새로운 아키텍처React Native 2021. 1. 18. 22:36
@@@@@ 이미지들은 모두 아래에 참고한 링크에서 따온 것들이다. JavaScript에서의 실행흐름을 알고난 뒤로 문득 React Native에서도 실행흐름이 궁금해져서 자료를 찾고 있었다. 흔히 이런 그림이 있는데, JavaScript 스레드에서는 네이티브에 직접적으로 통신할 수가 없어서 UI를 그려주려면 브릿지를 통해 Shadow Thread라는 곳에 전달을 해준다. Shadow 스레드는 자바스크립트 스레드 -> 브릿지로 전달받은 데이터를 통해 레이아웃을 계산해준다. 메인스레드는 Shaodw 스레드에서 계산된 레이아웃을 기반으로 UI를 그려준다. 네이티브 코드도 여기서 실행한다. 서로 통신하는 과정에서 JSON으로 직렬화해서 데이터를 주고받는다고 하는데, 벌써 2~3번이 일어난 것이다. 다시 자바스크..
-
JavaScript Garbage CollectorJavaScript 2021. 1. 7. 14:00
1] 메모리의 생명주기 메모리의 생명주기는 크게 할당, 사용, 해제로 구분할 수 있다. 1. 변수를 사용하기 위해서 메모리를 할당받는다. 2. 메모리를 사용한다. 3. 변수 등의 사용이 끝나면 메모리를 해제한다. 3번에서 메모리를 하지 않으면 메모리 누수가 일어나 컴퓨터가 메모리가 부족하다며 멈추거나 할 수 있다. 자바스크립트에서는 메모리를 할당받고 사용하는 것까진 있지만 메모리를 해제하는 API는 없다. 그래서 사용되는 것이 Garbage Collector(GC)라는 것이다. 2] Garbage Collector란? Garbage Collector 라는 것은 브라우저(자바스크립트 엔진: 자바스크립트 코드를 실행하는 프로그램 혹은 인터프리터)에서 자동적으로 메모리를 관리하기 위해서 동작되는 것이다. C,..
-
Map, SetJavaScript 2021. 1. 6. 18:27
1] Map Map은 객체와 유사하지만 객체는 key를 문자열로 저장하고 map은 다양한 자료형 그대로 저장한다는 차이점이 있다. 또한 객체와는 다르게 입력 순서가 유지된다. const map = new Map() map.set(true, 1) console.log(map.size) // 1 console.log(map.has(true)) // true console.log(map.has('key')) // false console.log(map.get(true)) // 1 // method(arguments) => return Type map.get(key): key에 해당하는 value map.set(key, value) => key와 value를 추가 map.delete(key) => key에 해당..
-
브라우저 동작 원리와 Progressive Render, Built-in 객체JavaScript 2021. 1. 6. 17:18
1] 브라우저 동작 원리 브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링엔진, JavaScript 엔진, 통신, 웹 저장소 등으로 구분된다. 먼저 클라이언트가 브라우저를 통해 서버에 웹 페이지 접근을 요청하면 서버는 웹 페이지를 응답해준다 이 때 html, css, js 파일을 전송받고 이를 표현하는데, 1) HTML 구문 분석기가 HTML을 분석한다. 분석된 HTML은 DOM Tree를 생성하게 된다. script 태그를 만나는 즉시 구문 분석을 중단하고 자바스크립트 엔진에게 제어 권한을 넘긴다. 2) 자바스크립트 엔진은 script 태그에 정의된 자바스크립트 내용을 분석하고 이를 실행한 뒤에 HTML 구문 분석기에게 다시 제어권한을 넘긴다 3) 스타일 태그나 스타일이 정의된 곳에 CSS 구문 분..
-
1급시민, Lexical Scope, 실행컨텍스트, Closure, this, apply, call, bindJavaScript 2021. 1. 6. 15:25
JavaScript에서 중요한 개념들에 포함되는 1급시민, Lexical Scope, 실행컨텍스트, Closure, this에 대해서 핵심만 간단하게 정리해보려 한다 1] 1급시민 JavaScript에서 1급 시민의 조건은 1. 변수에 담을 수 있으며 2. 반환할 수 있다 3. 인자로 전달할 수 있다. 함수도 변수에 담을 수 있고 반환할 수 있으며 함수 자체를 인자로 전달할 수 있으므로 함수도 1급 시민임과 동시에 1급함수라고 부른다 객체 같은 경우 1급 시민의 조건을 만족함과 동시에 객체이므로 1급 객체라고 부르며 이외에도 모든 자료형은 1급 시민의 조건을 만족한다 // 원시타입 function AnyFunc(a) { console.log(a) return a } const anyFunc = AnyFu..
-
React Native Android APIReact Native 2021. 1. 2. 22:47
@ React Native 0.63 버전을 기준으로 작성되었습니다. @ 최대한 쉽게 이해할 수 있도록 작성하고자 노력했습니다. @ 편의상 세미콜론(;)은 생략합니다. 마침표도 생략될 수 있습니다. React Native에는 어떤 안드로이드 API가 있는지 알아보자 공통적으로 적용되는 API는 다음에 추가해보겠다. @ API가 무엇인지 모르거나 헷갈려하는 사람들을 위해 API는 흔히 Application Programming Interface(응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스) 라고 설명하는데 처음 접하는 사람들은 이게 무슨 말이야? 한다. 나도 처음에 그랬으니까... 바꿔말하면 'RN이 제공하는 기능'이라고 보면 될 것 같..
-
Svelte 소개Svelte_private 2021. 1. 2. 21:31
Svelte는 Rich Harris가 만들었고 공식 문서에서는 상태 관리 라이브러리가 필요없고 가상DOM을 사용하지 않으며 더 적은 코드를 장점으로 내세우고 있다. 가상DOM을 사용하지 않기 때문에 사용하는 메모리도 더 적다고 한다. 현재는 3.31버전이 릴리즈된 상태이다. API문서를 보아하니 bind, slot 등을 보니 Vue.js와 흡사하게 생겼다. 물론 Vue.js를 들어본 적은 있으나 사용해보진 않았다. Vue 프레임워크를 보고서 든 생각은 React를 사용하는 입장에서 뭔가 낯설게 느껴졌고 내 성향과는 맞지 않는다고 판단했는데 v-bind, v-for과 같은 속성들이 혼란스러웠기 때문이다. 다시 Svelte이야기로 돌아와서 Svelte는 확실히 React보다 코드량이 적다. 다만 이 반응성이..
-
JavaScript - 자료구조 (이중연결리스트)JavaScript 2021. 1. 2. 17:48
오늘은 이중 연결 리스트 (Double Linked List)에 대해 알아보겠습니다. 파이썬에 있는 것을 스스로 JavaScript로 옮겼습니다. 연결 리스트란? 기존 C++과 같이 메모리를 관리해줘야 하는 언어에서 배열은 사용할 공간이 늘어날 일을 대비해 미리 공간을 할당했어야 했습니다. 그러한 단점을 극복하고자 연결 리스트라는 자료구조가 탄생합니다. 일반 연결 리스트는 사람이 허리에 끈을 묶고 기차놀이를 하는 것이라 생각하시면 됩니다. 앞 사람이 가는 방향으로만 갈 수 있고 사람이 추가되면 뒤쪽에만 추가되듯이요 A → B 용어) 노드: 데이터 + 주소로 이루어진 데이터 저장 단위 포인터: 주소와 같은 말인데 이 데이터 다음에 어떤 노드가 오는지 가리키는 주소입니다 장점) 미리 공간을 할당하지 않아도 ..
-
JavaScript - 자료구조 (큐, 스택)JavaScript 2021. 1. 2. 17:47
JavaScript에서는 Queue와 Stack은 매우 간단합니다. Queue란? FIFO(First In, First Out)정책을 사용하는 자료구조 → 즉 먼저 들어간 자료가 먼저 나온다는 뜻 예) 놀이기구를 타기 위해 줄을 서는 상황 (먼저 탄 사람이 먼저 놀이기구에서 내리겠죠?) 실제 활용) JavaScript에서 jQuery의 이벤트 처리 방식이 큐와 비슷하다는 것으로 알고 있습니다. Queue에서 데이터를 넣을 때는 enqueue(인큐)라고 말하고 데이터를 빼올 때는 dequeue(디큐)라고 말합니다. Stack이란? LIFO (Last In First Out)정책을 사용하는 자료구조 → 나중에 들어간 자료가 먼저 나온다는 뜻 예) 책을 쌓아놓았다가 맨 아래의 책을 꺼내야하는 상황 (물론 맨 ..
-
JavaScript - Array 메서드 정리JavaScript 2021. 1. 2. 17:46
(계속 추가 중) 자바스크립트에는 무수히 많은 메서드가 있습니다. 그 중에 Array에 대해 알아봅시다. 편의상 세미콜론(;)은 붙이지 않겠습니다. MDN문서 페이지의 좌측에서 모든 메서드를 볼 수 있습니다. deprecated (엄지손가락이 아래로 향하고 있는 모양) = 머지 않아 사라지는 기능이므로 가급적 사용하지 않는 것이 좋습니다. 1) Array.length 배열의 길이를 반환합니다. const a = [1, 2, 3] console.log(a.length) // 3 2) Array.isArray(배열) 배열인지 아닌지를 판별하고 배열이면 True, 배열이 아니면 False를 반환합니다. const a = [1] const b = 1 console.log(Array.isArray(a)) // t..
-
React Native ComponentReact Native 2021. 1. 2. 12:13
@ React Native 0.63 버전을 기반으로 작성했습니다. @ 모바일 플랫폼은 Android만 언급합니다. @ 최대한 쉽게 이해할 수 있도록 작성하려 노력했고 React 코드도 작성했습니다. @ 공식문서와 함께 보면 더 좋습니다. @ 0.63미만의 버전은 이 글과 내용이 다소 다를 수 있으니 참고해주세요. @ 편의상 세미콜론은 생략합니다. @ 오타가 있다면 알려주세요! 리액트 네이티브는 리액트와 비교해서 무엇이 다를까? React React Native 공통점 hook공유, React 기반의 앱, 라이프사이클, Fragment 사용가능 등 차이점 react-dom을 이용하여 dom을 구성 웹에서만 동작하는 HTML 태그 사용 react-native를 이용하여 구조를 만듬 다양한 환경에서 동작해야 ..
-
React HooksReact 2021. 1. 2. 00:11
@ React 17.0.1을 기준으로 작성합니다 React를 처음 공부했을 때에는 뭐가 뭔지 며칠동안 계속 궁금증에 시달렸었는데 이제부터 배우는 사람들은 그렇지 않기를 바라면서 보는 사람이 이해하기 최대한 쉽게 작성해보고자 한다 16.8버전부터 추가된 hook은 정말 편리하게 사용가능하다. 더불어 lifecycle 메서드도 useEffect로 통합되는 등 관리하기 편해졌다. 0) hook의 명명 규칙 hook은 use라는 접두사가 붙으며 camelCase로 이름을 짓는다. 그래서 다른 라이브러리의 hook들은 대부분 use~~~로 시작한다 React에는 어떤 hook이 있는지 알아보자 1) useState 상태를 바꾸는 hook 사용법 import React, { useState } from 'react..
-
새롭게 도입된 ES2021 문법JavaScript 2021. 1. 1. 20:44
새롭게 도입되었다기보다는 현재 Stage 4에 올라간 4가지 문법들을 소개해보고자 한다. 꽤나 흥미로운 문법들이 많다. 기존 문법으로 사용했을 때보다 코드량이 줄어들 수 있게 해준다거나 새로운 기능이 등장했다거나 기존 문법의 불편함을 해소해줄만한 문법들이 등장하였다. 1. String.prototype.replaceAll 기존에 있었던 replace에서 모든 문자열을 바꿔주려면 다음과 같이 적용했어야 했다. 또한 replace는 global flag를 붙여주지 않으면 첫번째로 찾은 녀석만 바꿔주었다. const str = 'abcabcabc' console.log(str.replace(/a/g, '*')) // *bc*bc*bc 그러나 ES2021에 등장한 replaceAll은 정규표현식이 필요없이 자동..
-
React 알아보기React 2021. 1. 1. 18:25
React 공식 홈페이지: ko.reactjs.org/ 쉽게 말해 프론트 엔드 개발에서 JavaScript를 이용하여 화면을 구성할 수 있는 '라이브러리'입니다. 이와 비슷한 프레임워크로는 Vue, Angular등이 있죠 리액트는 Facebook에서 만들었고 2013년에 발표가 되었습니다. 그동안 수많은 버전 업데이트를 통해 벌써 17.0.1버전이 나왔습니다. 리액트로는 크게 3가지 작업이 가능합니다. 1. 작은 단위의 컴포넌트들을 구성하고 재사용한다. 2. 상태에 따라 화면을 변경 3. 모바일 앱 개발 1] 컴포넌트 재사용 홈페이지 화면에도 나와있듯이 리액트는 컴포넌트 기반입니다. 예를 들어 아래와 같은 빨강색 버튼이 있다고 합시다. 버튼 html은 이를 여러 줄로 계속 작성해야(혹은 여러줄 복사 붙여..
-
About MeAbout 2020. 12. 14. 09:01
Updated 2022-07-09 Technical Experience TypeScript, React Work Experience Caramella FrontEnd Developer (2021.04.26 ~ current) 프론트엔드 개발을 하고 있습니다. 사용자에게 더 나은 경험을, 더 좋은 개발 문화를 수용하고 원활한 소통을 위해 노력합니다. Projects Market (2020.12.05 ~ current) (링크를 클릭하시면 깃허브 저장소로 이동합니다. front 브랜치!) 웹, 앱에서 사용 가능한 React Native기반 안드로이드 플랫폼 모의 쇼핑몰 프로젝트입니다. 독학한 React Native를 활용해보고 협업 경험을 해보고자 프로젝트를 시작하게 되었습니다. 이 프로젝트는 실제 협업하면..