Aredra

Aredra

고민하고 배우고 나누고 성장하는 개발자

Posts by Category

JS

JS - Functional 비동기성1

함수를 합성하다보면 중간에 비동기적이 부분이 있을 수 있다. 이런 비동기 상황을 어떻게 다룰 수 있는지 적어보자. 모나드와 클레이슬리 합성의 경우는 아직 작성자도 제대로 이해 못 했으며, 직접 찾아보고 이해하시길 부탁드린다.

JS - 지연평가 2

JS - 지연평가 와 이어지는 글입니다. 핵심적인 내용보다는 다른 기능을 가진 함수들만 추가되었습니다.

JS - 지연 평가

그간 코딩을 하면서 효율성을 생각할 때 즉시평가에 대해서 고려해본 적이 없다. 모듈을 불러올 때는 lazy-loading 를 그렇게 사용했으면서 지연성에 대해 진지하게 고민해본 적이 없다. 🧨 지연 평가에 관련하여 함수를 작성한 메모.

JS - iterable 친해지기

전개연산자, 제너레이터.. 기존에 알던 개념이지만 이터러블의 관점에서는 생각해본적이 없는거 같아 정리하는 메모.

JS - ECMAScript proposals

StateOfJs Survey 를 하던 도중 생각보다 모르는 기능이 많길래 찾아보다가 오랜만에 TC39 - Finished proposal 를 들어가봤다. 🚀

JS - fetch

10월 말에 다치고 부터 생활패턴이 꼬이더니 순식간에 2달 가량 흐른거 같다. 그냥 게을러졌다.. 🍄 연말이 되니 번뜩 정신이 들더라.. ㅎㅎ; 💦

JS - readyState, defer, async..

작일에 작성된 JS - 문서와 리소스 로딩과 해당 글은 순수하게 모던 JavaScript 튜토리얼 - 문서와 리소스 로딩를 보고 개인적으로 정리한 글로 자세한 내용은 좌측의 링크를 통해서 보시는게 더 좋습니다.

JS - 문서와 리소스 로딩

브라우저에서 문서를 열 때 작업 진행 정도에 따라 발생하는 이벤트가 있고 이를 활용하면 많은 것을 할 수 있다. 간단하게 작성내용이 있는 페이지의 경우 이탈할 때 발생하는 경고창 등이 있겠다. 이와 같은 문서를 로딩할 때 발생하는 이벤트에 대한 메모.

JS - Web Workers

JS 라고 카테고리에 넣기는 하였지만 Web workers 는 JS가 아니라 Web API 이다. 하나의 스레드에서 동작하는 JS에서 복수의 스레드로 비동기로 실행할 수 있는 방법 중 하나이다.

JS - DataView

ArrayBuffer 를 view 하는 다른 방법인 DataView 객체에 대한 메모

JS - TypedArray

저번에 잠깐 ArrayBuffer 에 대해 작성하면서 언급한 TypedArray 오브젝트에 정리글이다. 이 역시 아직 사용해본 적이 없기는 하지만 알게되었으니 메모

JS - event

컴퓨터를 사용하다보면 클릭하고 마우스를 움직이고 다양한 행동을 하게 되고 JS에서는 이러한 행동에 대해 정의하고 발생했을 경우 어떠한 동작을 할지 등록 할 수 있다. 설명이 이상한거 같은데;; 😓 좌우지간 이벤트에 대한 메모.

JS - ArrayBuffer

아직까지 사용해본적은 없지만 간간히 접해봤던 ArrayBuffer 에 대한 간략 메모

JS - DOM

Vue.js 나 React.js 등의 프레임워크을 통해 js 에 접하게 되면 개인적인 생각에 DOM 객체를 사용할 일이 많지 않은 것 같다. 그런 의미에서 DOM(Document Object Model)에 대해 간단하게 정리해보려한다.

JS - module

JS는 처음 만들어질 당시 스크립트의 크기가 크지 않았기 때문에 모듈 관련 문법이 없었다고 한다. 하지만 스크립트들의 크기가 커지기 시작하며 ES6에 표준으로 등록되었고, 이전에 Node.js 에서 주로 사용하던 방법은 CommonJS 이다.

JS - bit 연산자

어떻게 보면 가장 근본적이라고 할 수 있는 비트 연산자에 대해 메모하려한다. 간단하게 데이터의 기본 단위 Byte 는 8bit 가 모여서 이루는 단위이고, 1bit 의 값은 0, 1 이다.

JS - private, protected

자바를 사용해보신 분들이라면 접근제어자(Access Modifier)를 기억하실 것이다. 이런 기능이 자바스크립트에서도 슬슬 도입되려는 것 같다.

JS - Promise

JS는 기본적으로 동기로 실행이 되며 비동기로 실행시키기 위해서 현재는 Promise 가 흔히 사용되고 있다. 이 Promise 에 대한 간략히 메모해보려한다.

JS - 함수형 프로그래밍

함수형 프로그래밍 흔히 듣게되는 기법이다. 관련하여 기초적인 부분을 정리해본다.

JS - Decorator

머지않은 과거에 횡단관심사에 대해 끄적였다. 관련하여 JS에서는 Proxy 객체와, Decorator 등을 사용하여 비슷한 점이 있는 것 같아 메모한다. Decorator만 💦

JS - fucntion

객체에는 프로퍼티가 있다. JS 에서 함수는 객체인데 그럼 프로퍼티는? 이에 대한 간략 메모

JS - 재귀 깊이 제한

모던 JavaScript 튜토리얼 을 보다가 깊이에 대한 제한에 대해 알게 되어 메모

JS - JSON

JSON (JavaScript Object Notation) 은 값이나 객체를 나타내는 포맷으로, RFC 4627 에 정의되어 있다. 데이터 교환을 목적으로 많이 사용되고 있는 포맷이다. 예전에 생각없이 딥카피를 하려고 많이 썼었다.. ㅎㅎ; 알아두면 좋은 메서드들을 가지고 있다.

JS, CSS - CSS 변수 사용

CSS 에서도 변수를 사용 할 때가 많이 있다. 일괄적으로 변경되거나 하면 일일이 다 바꿀 필요를 덜어주고 하는 등의 이점이 있기 때문이다. 그리고 JS 에서도 특정 상황에 이 값을 변동하고 싶을 수 있다. 그럴 때 접근하는 방법이다.

JS - this

JS 를 사용하면서 헷갈리는 부분 중 하나는 단연코 this 일 것 이라고 생각한다. 이에 간단히 메모를 남긴다.

JS - Proxy

JS에서 특정 객체를 Wrapping 하여 기본 기능을 수정할 수 있는 Proxy 객체에 대한 메모

JS - Class 주의사항

JS 의 Class 의 주의사항이라기보다는 뭔가 자주 실수하는 부분에 대한 간략 메모

JS - Set 객체

JS의 객체 중 [값] 형태로 값을 담을 수 있는 Set 객체에 대한 메모

JS - Map 객체

JS의 객체 중 [키, 값] 형태로 값을 담을 수 있는 Map 객체에 대한 메모다.

JS - Generator 간략 정리

일반적인 함수는 값을 하나만 반환한다. 하지만 여러 값을 반환 할 수 있는 함수가 Generator 함수이다.

JS - GC (Garbage Collector)

생각해보면 자바스크립트를 작성하며 무수히 많은 객체, 변수 등을 선언하고 이를 메모리에서 해제하는 작업을 대체로 하지 않았다. 자연스럽게 생각할 수 있지만 이는 JAVA와 마찬가지로 가비지 컬렉터가 열심히 일하고 있는 까닭이다. GC(Garbage Collector)에 대해 간단히...

JS - flat()

JS ES2019부터 사용이 가능한 메소드 중 하나에 대해 적어보려 한다.

js 반복문 빠져나오기

기본적인 문법인 반복문에서 특정 조건일 때 다음 순회로 넘어가거나 순회에서 빠져나와야 되는 경우를 필연적으로 만나게 된다. js에서는 for, while등 다양한 문법을 제공하지만 여기서 빠져나오는 방법 중 레이블을 사용하는 법에 대해 적어보려 한다.

JS template literal

현재 JS에서는 ****이라는 기호를 사용하여 문자열과 표현식을 사용한 문자열을 작성할 수 있다. 이를 Template Literal`이라고 하는데 이를 사용하는 함수 방법에 대해 정리하려 한다.

JS getter, setter

JS의 ES5에서도 getter, setter는 존재하였으나 ES6로 오면서 스펙의 변동이 있었다. 이에 대해 간략히 정리한다.

JS - Unicode

JS에서는 \u0031와 같은 방식으로 유니코드를 사용이 가능하다. 본래 ES5에서는 아래와 같은 범위 밖에 지원하지 않았으나 4자리 이상을 2가지 유니코드 값을 이어 붙여서 지원하는 방식을 제공했고 이를 Surrogate pair라고 한다.

JS - Number Object

JS는 IEEE 754에 정의된 64bit 부동소수점으로 정수와 실수 구분 없이 수를 처리한다. IEEE 부동소수점

JS - 결합성 및 try-catch

JS 평상시 자주 까먹는 관련하여 평상시 자주 놓치는 부분에 대해 정리해보려한다.

JS Iteration

Iteration의 사전적 의미는 반복으로 의미 그대로이나 일반적인 반복문 for, while 등의 반복과는 개념의 차이가 있다.

Arrow Function

Arrow-function도 나온지 오래 됐지만 다시 정리를 해보려 한다.

JS 변수 및 scope

ES6가 되면서 새로운 변수 선언 예약어 let, const가 등장하였디. 사실 나온지 이제 오래됬다고 할 수 있는 예약어들인데 var와 같이 메모하려 한다.

JS scope - try catch

블록 scope 영역 중 try - catch에 관해 적어보고자 함 당연한 결과 일 수 있지만 블럭 {}에 따라서 다른 scope를 지니게 되며 아래와 같은 결과를 나타냄

Back to top ↑

Diary

2022 회고

뜬금없는 회고 💦 ㅎㅎ;; 한동안 정리나 글을 안 쓰다가 갑자기 회고를 쓰자니 좀 그렇지만 한 해 정리는 필요한 것 같아서 키보드를 두드리고 있다. 작년 4월부터 일적으로나 개인적으로 바빠서 잔디나 개인적인 공부를 몇 번 빼먹게 되더니 쭉 안하게 되었다. 뭐 그래도 이번년도부터(음...

Book - Clean Code

급작스레 뭔 책인가 싶기는 하지만 사두고 인테리어용으로 낡아가고 있는 책들이 많아서 하루에 조금씩이라도 읽어보기로 생각했다. 🔥 작심삼일이 될 수도 있지만 일단 시작해보자 😓

2021 회고

벌써 2월이지만 2021 회고 🧠

Diary - react 라이브러리들

Vue, React 의 차이점 중 하나를 꼽으라면 특정 기능을 편리하게 이용하고자 할 때 사용할 수 있는 선택지의 폭도 하나 포함되는거 같다. 😂 React 를 쓰게 될 경우 선택지가 많다. 장점이자 단점이라고 생각한다.

Postgresql - collate

업무 중 정렬이 이상하다는 이슈가 들어왔다. 보아하니 쿼리로 정렬(order by)하여 조회 중이였다. 문제가 없어 보였다.

Diary - 1px 보다 얇은 선

1px 보다 얇은 선을 만들어야되는 일이 있었다. 아무생각 없이 0.7px 을 넣었으나 실패!

Diary - Java encoding issue

Java 어플리케이션에서 이메일을 발송하는 기능이 있었는데 특정 도메인에서 메일 제목이 ?????? 로 나오는 현상을 발견했다!! 😵

Diary - Bitbucket issue

오늘 한동안 수정할 일 없어서 접근을 하지 않고 있던 프로젝트를 수정하게 되었다. 근데 부모듈에 접근하려 하니 갑자기 에러가…!!? (저장소는 Bitbucket 을 쓰고 있다.)

Diary, Vue - 삽질..

error 라고 할만한건 아니지만 그냥 오늘 오타에서 한참 해맨 것과 같은 종류의 삽질이다.

Diary - 삽질 - Redirect

어느새 6월… 출근길이 점점 힘들어지고 있다. 😓 오늘도 어김없이 삽질한 내용을 남긴다.

Diary - 삽질..

임시로 개발하는 서버 환경을 구축하는 데 있어 인증서를 적용할 일이 있었다. 개발서버의 도메인에는 let’s encrypt를 받아 적용하고 있기에 적용하려 하는데 에러가 발생했다.

Web - CORS, SameSite

회사에서 한동안 BE 측면에서만 작업을 하여 FE 개발 환경 셋팅 및 로컬환경에서 운영할 일 없었다. 그러다 이번에 테스트 할 일 있어 직접 FE 쪽 로컬 셋팅 후 구동하니 크롬에서 401 에러가 발생함을 확인하였다.🌀 무슨 문제인가 보니 크롬 SameSite 관련 에러였다. FE...

일상

출근하여 하루 종일 sql만 보고 만진 것 같다. 멍하다…💬 예전에 간단한 JPA를 써봤을 땐 그걸 mybatis로 바꾸면서 별 어려움을 못 느꼈는데 진짜 mybatis를 제대로 쓰고 DB 구조가 어려워지면 현재 내 수준에서는 머리가 터진다….

여긴어디 나는 누구?

출근하고 코드 작업은 1자도 안했는데 나는 오늘 왜 8시 반에 출근을 하여 22시에 퇴근을 하였는가…☠️

VScode md 오버뷰

VScode에서 기본적으로 제공하는 md 오버뷰 기능과 실제 jekyll이 텍스트를 읽어서 표기하는 방식이 다른 것 같다. 어찌보면 당연한 거기는 한데🤔

출근길 난이도 헬

어제 겨울왕국이 되어버린 판교를 보고 출근길이 험난할 거라고 생각은 했지만 역시나… 그나마 지하철 구간이 길어서 다행이였지 버스 같은 차량 구간이 길었으면 영락 없이 지각 할 뻔

폭설 ☃️

야근 하고 나오는데 세상이 달라져 있었다.

Back to top ↑

CSS

JS, CSS - CSS 변수 사용

CSS 에서도 변수를 사용 할 때가 많이 있다. 일괄적으로 변경되거나 하면 일일이 다 바꿀 필요를 덜어주고 하는 등의 이점이 있기 때문이다. 그리고 JS 에서도 특정 상황에 이 값을 변동하고 싶을 수 있다. 그럴 때 접근하는 방법이다.

CSS - BEM

HTML Class 이름을 지을 때 마다 많은 고민을 하는거 같다.

SCSS

본래 @mixin, @include에 대해 적으려 하였는데 SCSS에 대해 간략히 정리해보자 한다.

CSS - 우선순위 계산

CSS를 사용하다 보면 특정요소를 지정하는 속성이 겹칠 수가 있다. 그럴 경우 우선순위를 계산하여 가장 높은 우선순위를 지니는 속성을 적용하게 된다.

CSS - Flex Item

전에 Flex Container에 대해 정리하였으니, Flex Item에 대해 정리해보려 한다. 🤓

CSS - Flex Container

CSS Flex 속성 그 중에서도 Container가 가지는 속성에 대해 간략히 적어보려 한다.

CSS 다단 (Multi Columns)

일반 블록 레이아웃을 확장하여 한 블록에 여러 칼럼으로 텍스트를 넣는 것, 가동성을 확보할 수 있다.

CSS position 속성

CSS에서 요소의 위치를 정할 수 있는 position속성에 대해 알아봅시다.

글꼴 계열 관련 메모

CSS나 font의 글꼴은 계열을 가지고 해당 계열에 대해 자꾸 잊어먹어서 메모하려 한다. 🧐

CSS 암묵적 사용 관련 메모

CSS에서는 본래의 의도와 다르게 표기되는 걸 회피하는 암묵적 방법들이 있다. 앞선 글과 마찬가지로 안 쓰면 까먹으니 메모🤖

magin 중복(collapse)

CSS의 margin 속성은 아래의 상황에서 겹치는 현상이 발생하며 이는 오류가 아니다.

CSS 가상 선택자

가상 선택자로는 가상 클래스 선택자(‘:’), 가상 요소 선택자(‘::’) 가 있음

Back to top ↑

Rust

Rust - chapter 10-2 trait

Rust 공식문서(링크) 와 Rust 비공식 번역 문서 챕터 10-2 trait를 읽고 정리한 글이다.(링크) 원래 공식 문서는 영어인지라 비공식 번역 문서를 위주로 보고 있었는데 이번 번역글에서 없는 내용이 공식 문서에 있는 것을 확인하고 같이 넣었다. 역시 원문 문서를 보는 것...

Rust - chapter 8 quiz

8 챕터 마지막 정리에 퀴즈가 있었다. 쉽겠거니 했는데 나한테는 생각보다 어려웠다. 🥶 풀기는 지난주에 풀었는데 정리차 올려본다. 링크 최하단에서 확인이 가능하다. &, * 로 그리고 소유권 등 평소 사용하지 않는 개념이다 보니 확실히 낯설었다.

Rust - chapter 8-1(컬렉션-벡터)

다른 언어에도 존재하는 컬렉션은 다수의 값을 저장할 수 있는 데이터 구조를 지칭하는 경우가 많다. 러스트에서는 배열과 튜플도 다수의 값을 담을 수 있지만 컬렉션의 경우는 데이터가 힙에 저장이 되며, 이는 컴파일 타임에 결정되지 않고 런타임 중에 변동이 있을 수 있다는 것을 의미한다...

Rust - chapter 7(모듈)

공식 문서 - 번역글의 7번째 챕터 정리 'Hello world!' 같은 간단한 동작은 한 파일로 작성할 수 있지만 코드 규모가 커질 경우 재사용성과 조직화를 위해서 기준대로 코드를 분리하게 되고 러스트는 분리된 코드들을 사용할 수 있는 모듈 시스템을 가지고 있다.

Rust - chapter 3

공식 문서 - 번역글의 3번째 챕터 정리

Rust - chapter 2

공식 문서 - 번역글의 2번째 챕터 정리

Rust - Hello world

러스트를 시작하면서 필요한 사항과 생각 간단 정리

Rust - 시작하기

생각해보니 아직 회고록을 안 썼는데 금년도에 Rust 를 가볍게 어떤 언어인지 경험해보고 싶어서 사내에 스터디를 하자고 하였다가 POC 하게 되었다. ㅎㅎ;; 💦

Back to top ↑

Web

Web - 명세서 모음

사실 막 공부를 한 시점에서는 명세서를 찾아보는 일은 별로 없는 거 같다. 어느정도 시점에서 필요의 의해 찾아보는 일이 발생했던 것 같다.

Webpack - 기초

모던프레임워크(?) Vue, React로 작성된 파일을 바로 브라우저에 줄 때 브라우저는 제대로 인식하지 못하기에(JSX나 ESNext 등..) build를 한 결과물을 브라우저에게 전달하고 이 동작에서 많이 사용되고 있는 번들러가 Webpack 이다.

Web - HTTP 헤더

작업 중 요청에 대한 헤더를 설정할 일이 있었는데, 문득 대소문자 여부에 대한 의문이 들었다. 전에도 한 번 찾아봤던 적이 있었는데 까먹었기에 메모해둔다.

Web - File 다운로드

BE에서 파일의 정보를 주고 FE에서 해당 데이터를 받아 다운로드 할 경우 겪을 수 있는 문제점에 대해 메모한다.

Cookie - SameSite

Chrome 브라우저에서 SameSite 관련하여 Cookie가 차단되어 로컬 개발 환경에서 정상동작 하지 못하는 일이 발생하였다.

캐시 오염과 캐시 충돌

한동안 게을러져서 손에서 책을 놓고 있었다. 다시 펼쳐본 책에서 새로 알게 된 부분을 정리하려 한다.

웹 캐시 정책

캐쉬는 사용자 경험을 향상 시킬 수 있고 트래픽 감소 등 이점이 많지만, 개인 정보나 실시간 갱신되는 정보 같은 경우는 캐쉬를 사용하면 안 된다.

웹 캐시 종류

흔히들 알고 있지만 매 요청마다 같은 자료를 요청할 경우 매번 원본 서버에서 내려받는 건 굉장히 불필요하고 사용자에게 악영향을 주는 요소이며, 이를 피하길 위해서 근처에 사본을 저장하여 요청에 대한 응답을 해주는 서버를 캐쉬서버라고 한다.

Http/2

HTTP/1.1을 사용할 때에는 멀티플렉싱 같은 기술이 지원되지 않았기 때문에 도메인 분할 기법 등의 기술이 필요하였다. 하지만 HTTP/2의 경우는 멀티플렉싱 등의 기술이 사용되며 웹의 최적화를 위해 도메인 분할 기법 등을 사용할 이유가 사라지게 되었다. HTTP/2 사용 시 웹...

브라우저 아키텍처

우리가 웹을 손쉽게 접속하고 사용할 수 있도록 도와주는 브라우저의 아키텍처에 대해 간략히 정리해보려 한다.

점진적 향상 ↔️ 우아햔 성능 저하

웹을 개발하다 보면 사용되는 브라우저 혹은 브라우저의 버젼에 따라 지원되는 HTML, CSS 기능이 다르다는 것이 매우 귀찮게 느껴질 때가 있다. 개발자의 입장에서는 모든 사용자를 지원하고 싶지만 현실적으로 불가능에 가까운 일이라고 생각한다.

Back to top ↑

Error

Errors - React setting

React webpack 설정 중 만났던 에러 정리 작성자의 원인을 정리한 것으로 같은 에러라도 원인은 다를 수 있다.

Errors - 겪은 에러 모음

지난주에 겪었던 에러 모음. 큰 시간을 안 들이고 해결하였던 건들이라 한꺼번에 작성함. ☠️ 작성자가 해결했던 방법으로 모든 경우가 해결된다고 볼 수 없음. macOS 환경에서 겪은 에러들이다.

Postgresql - collate

업무 중 정렬이 이상하다는 이슈가 들어왔다. 보아하니 쿼리로 정렬(order by)하여 조회 중이였다. 문제가 없어 보였다.

Diary - 1px 보다 얇은 선

1px 보다 얇은 선을 만들어야되는 일이 있었다. 아무생각 없이 0.7px 을 넣었으나 실패!

Diary - Java encoding issue

Java 어플리케이션에서 이메일을 발송하는 기능이 있었는데 특정 도메인에서 메일 제목이 ?????? 로 나오는 현상을 발견했다!! 😵

Diary - Bitbucket issue

오늘 한동안 수정할 일 없어서 접근을 하지 않고 있던 프로젝트를 수정하게 되었다. 근데 부모듈에 접근하려 하니 갑자기 에러가…!!? (저장소는 Bitbucket 을 쓰고 있다.)

Diary, Vue - 삽질..

error 라고 할만한건 아니지만 그냥 오늘 오타에서 한참 해맨 것과 같은 종류의 삽질이다.

Diary - 삽질 - Redirect

어느새 6월… 출근길이 점점 힘들어지고 있다. 😓 오늘도 어김없이 삽질한 내용을 남긴다.

Diary - 삽질..

임시로 개발하는 서버 환경을 구축하는 데 있어 인증서를 적용할 일이 있었다. 개발서버의 도메인에는 let’s encrypt를 받아 적용하고 있기에 적용하려 하는데 에러가 발생했다.

Web - CORS, SameSite

회사에서 한동안 BE 측면에서만 작업을 하여 FE 개발 환경 셋팅 및 로컬환경에서 운영할 일 없었다. 그러다 이번에 테스트 할 일 있어 직접 FE 쪽 로컬 셋팅 후 구동하니 크롬에서 401 에러가 발생함을 확인하였다.🌀 무슨 문제인가 보니 크롬 SameSite 관련 에러였다. FE...

Back to top ↑

React

React - createPortal, forwardRef

React의 createPortal, forwardRef API 에 대한 메모 개인적인 메모인지라 자세한 내용은 아래의 공식문서를 보는 것이 이롭다.

React - 추가적 hooks

리액트 공식문서에서 제공하는 기본 hooks 외 추가적인 hooks 에 대한 메모

React - Controlled/Uncontrolled Component

FE 영역에서 빼놓을 수 없는 부분은 상태관리인 것 같다. 그러한 부분에 있어 React 를 학습하던 중 알게된 컴포넌트 개념을 메모한다.

React - CRA

React CRA 내용 메모, Vue-CLI 의 create 와 같이 기본 셋팅을 쉽게 해주는 도구

React - Lifecycle

React 의 LifeCycle 에 대해 알아보자. Vue 와 비슷하게 이미 등록되어 있는 훅을 통해 컴포넌트의 생성과 제거 사이 시점에 원하는 동작을 추가할 수 있다.

React - Get Started

React 시작하기 - 예전부터 React 를 따로 공부해야지 하고 있다가, 잠깐 향만 맡고 말았었다. 이번에는 간단하게라도 Next.js 를 써보는데 까지 목표를 잡고 가보려 한다.

Back to top ↑

js

Back to top ↑

TypeScript

TypeScript utility types

TypeScript는 일반적인 유형변환을 용이하게 하는 기본적인 유틸리티 유형들을 제공하고 있다. 자세한 내용은 타입스크립트 공식 유틸리티 타입 안내 를 참고하면 도움이 될 것 같으며, 기본적인 타입 몇가지를 소개한다.

TypeScript 타입단언, 타입가드

Typescript를 사용하다 보면 타입에 대해서 애매해지는 경우가 발생한다. 이 때 사용 할 수 타입 단언, 타입 가드에 대해 간단히 정리해 보자.

TypeScript type alias - interface

Typescript에서는 타입별칭(Type Alias)와 인터페이스를 통해 각 타입를 지정하여 편리하게 사용할 수 있다.

TypeScript 시작하기

공부해야지.. 하던 TypeScript를 이제 막 시작하였다. 완전 신생아지만 java 같은 느낌이 든다.

Back to top ↑

DB

Postgresql - collate

업무 중 정렬이 이상하다는 이슈가 들어왔다. 보아하니 쿼리로 정렬(order by)하여 조회 중이였다. 문제가 없어 보였다.

Postgresql - explain

업무 중에 특정 페이지 데이터가 안 나온다는 이슈가 들어왔다. 무언인고 확인 해보니 데이터를 가져오는 속도가 7s 걸리는 걸 확인할 수 있었다. 💦

Postgresql - Date, Time

DB 에서 값을 추출하거나 유효한 값을 찾거나 하면 생각보다 시간 관련하여 많이 쓰는 것 같다. 그 중에서 좀 헷갈리는 함수에 대해 적어두려 한다.

DB Postgres json, array 관련 함수

이제껏 간단한 sql만 작성하다보니 배열로 조회하거나 하는 등 일이 없었으나 이번에 필요한 상황이 생겨 서칭을 하다 상당히 많은 함수들에 대해 알게 되었다.

Postgres like 조건

오늘 업무도중 log성 데이터에 대해 조회할 일 있었다. 처음에는 별 생각 없이 like 를 사용하여 조회하였으나 10분이 걸려도 조회가 안되는 것을 볼 수 있었다. 😵

Back to top ↑

Vue

Vue - dynamic component

Vue 를 사용하다보면 종종 컴포넌트를 바꾸고 싶을 때나 바꿔야 될 때가 있다. 근데 이게 router 를 거쳐서 이동되는 그런 사항은 아닌 경우가 있다.

Diary, Vue - 삽질..

error 라고 할만한건 아니지만 그냥 오늘 오타에서 한참 해맨 것과 같은 종류의 삽질이다.

Vue - Lifecycle

Vue 를 나름 자주 사용하는 편인데 글이 없는 것 같아 Lifecycle 관련하여 메모해본다.

Vue 2.6.x & TS - Custom Type

생각해보니 그동안 Vue 에 대해서는 메모한 적은 한 번도 없다. 😓 그래서 쓰는 것 아니지만 막상 메모할려고 보니 생각났다. 좌우지간 Vue 2.6.x 버전에서 TS Custom에 관한 메모이다.

Back to top ↑

Postgresql

Postgresql - collate

업무 중 정렬이 이상하다는 이슈가 들어왔다. 보아하니 쿼리로 정렬(order by)하여 조회 중이였다. 문제가 없어 보였다.

Postgresql - explain

업무 중에 특정 페이지 데이터가 안 나온다는 이슈가 들어왔다. 무언인고 확인 해보니 데이터를 가져오는 속도가 7s 걸리는 걸 확인할 수 있었다. 💦

Postgresql - Date, Time

DB 에서 값을 추출하거나 유효한 값을 찾거나 하면 생각보다 시간 관련하여 많이 쓰는 것 같다. 그 중에서 좀 헷갈리는 함수에 대해 적어두려 한다.

Back to top ↑

Linux

Back to top ↑

IDE

Back to top ↑

TS

Vue 2.6.x & TS - Custom Type

생각해보니 그동안 Vue 에 대해서는 메모한 적은 한 번도 없다. 😓 그래서 쓰는 것 아니지만 막상 메모할려고 보니 생각났다. 좌우지간 Vue 2.6.x 버전에서 TS Custom에 관한 메모이다.

TS - DefinitelyTyped

TS에서 외부 라이브러리를 가져다 쓸 경우 해당 라이브러리에 타입이 정의 되어 있다면 문제가 없겠지만 보통 JS로 짜여진 뒤 관리가 되지 않았다만 타입정의가 안되어 있을 경우가 많다. 이러한 상황을 배경으로 나온 프로젝트가 DefinitelyTyped 이다.

Back to top ↑

SQL

SQL - select for update

조회된 값을 기반으로 업데이트를 할 경우 동시에 조회될 경우 잘못된 동작을 하게 될 수 있다. 이를 막기 위해서 쓸 수 있는 select for update 구문이다.

Back to top ↑

Java

Diary - Java encoding issue

Java 어플리케이션에서 이메일을 발송하는 기능이 있었는데 특정 도메인에서 메일 제목이 ?????? 로 나오는 현상을 발견했다!! 😵

Back to top ↑

Node

Node - husky, lint-staged

CI/CD 를 설정하는 과정에 있어서 저장소 코드를 build 할 때 lint 에서 에러가 발생하는 부분이 있었다. CI/CD 파이프라인이 깨져서 다시 돌릴 경우 시간이 아까워서 husky 와 lint-staged 를 동록하게 되었다.

Node - npm script 속성

npm 을 통해 관리되는 프로젝트들은 package.json파일을 지니게 된다. package.json 파일 내에는 scripts 라는 속성이 있고, 해당 속성에는 아래와 같은 지원하는 속성들이 있다.

Back to top ↑

NODE

Back to top ↑

Nginx

Nginx worker connections 오류

서비스에 간헐적인 500 Error가 발생하는 상황을 보게 되었다. 처음에는 당연히 서버 에러인 줄 알았지만 서버 쪽에는 요청 자체를 받지 않은 상황이였다.

Back to top ↑

Network

nload

리눅스 등의 CLI 환경에서 기본적인 netstat 등과 명령어로 네트워크 상태의 확인 가능하나 실시간으로 확인하기에는 어려운 부분이 있다.

Back to top ↑

HTML

HTML5

HTML5에 대해 간략 정리

Back to top ↑

UI

UI/UX - 대기중⏳

당연한 이야기이지만 한국 사람은 빨리빨리 되는 것을 좋아한다. 세계적으로도 그러한거 같다. 웹의 로딩에서도 마찬가지이다. 반응이 없으면 사용자는 다 나간다. 💀

Back to top ↑

UX

UI/UX - 대기중⏳

당연한 이야기이지만 한국 사람은 빨리빨리 되는 것을 좋아한다. 세계적으로도 그러한거 같다. 웹의 로딩에서도 마찬가지이다. 반응이 없으면 사용자는 다 나간다. 💀

Back to top ↑

Programming

Back to top ↑

Library

Node - husky, lint-staged

CI/CD 를 설정하는 과정에 있어서 저장소 코드를 build 할 때 lint 에서 에러가 발생하는 부분이 있었다. CI/CD 파이프라인이 깨져서 다시 돌릴 경우 시간이 아까워서 husky 와 lint-staged 를 동록하게 되었다.

Back to top ↑

CD

CD - Bitbucket, AWS

Bitbucket, AWS CodeDeploy 를 이용한 CD 간단 정리 향후 버전 변경 등으로 인해 동작 방식이 변경되거나 동작 하지 않을 수 있음!

Back to top ↑

AWS

AWS - CodeDeploy Error

본래 개인적으로 GCP를 사용하고 있었지만(딱히 뭘 한거 아니지만 인스턴스 하나에 만들고 DNS 좀 쓰다가 시간이 다 가버렸다…) 무료 크레딧도 다 떨어진 참에 회사에서도 AWS를 이용중이기에 AWS를 사용해보고자 하였다. Lightsail로 인스턴스를 하나 생성하고 CodeDep...

Back to top ↑

Shell

Vim - 세팅

어제 오늘 서버에서 파일을 열어서 확인할 일이 많았었는데 에디터가 너무 밋밋한거 같아서 간단하게 추가 셋팅했다. Vim 을 주로 사용하시는 분들보면 VSCode 랑 전혀 안 꿀리던데 그 정도까지는 못하겠고 색깔 넣고 인덴트 설정 정도만 하였다. ☠️ 구글링 최상단에 정리가 잘 되어...

Back to top ↑

정보처리기사

Back to top ↑