메로그

TIL Today I Learned 의 약자로 내가 당일에 공부하게된 내용을 적는 것을 말합니다. 나 같은 경우에는, 공부한 내용을 정리하여 블로그 또는 개인 노트에 정리하는데, 그러다보니 생각보다 불필요한 시간이나, 관리가 소홀해지는 문제가 발생하였습니다. 그래서 이를 해결하기 위해 깃허브에 TIL 레파지토리를 만들어 하루하루 공부한 내용을 올리게 되었습니다. 최근에는 Vue 관련 프로젝트를 하면서 생긴 이슈, 간단한 문법의 경우 블로그에 일일히 정리해서 올리기보다는 한줄노트 형식으로 TIL 에 작성해보고 있습니다. 그러다보니 정리한 내용을 한 번 보면, 생각보다 하루 커밋된 내용이 간단하고 읽기 편해 총 정리된 내용은 블로그에 올리는 형식으로 해볼까~? 하고 둘 다 잘 사용할 수 있는 방법을 생각하고..

npm 의 문제점 npm 을 사용하여 node_modules 를 만들면, 많은 용량과 많은 디렉토리를 만들어 속도와 용량의 문제점을 발생시키며, 사용하고자 하는 의존성을 찾는데 npm 은 상위 node_modules 계속 탐색하여 찾으며, 패키지를 찾지 못할 수록 속도는 현저히 느려집니다. 가끔씩 찾지 못해 에러를 발생하는 것도 볼 수 있을 것 입니다. (지웟다가 다시 깔아보고.. 다시 깔아보고... 근데 느리고...) yarn berry 기존의 yarn 을 이용하여 설치시 npm 을 이용한 node_modules 보다는 가볍고 빠르다지만, node_modules 를 이용하는 것은 변함이 없습니다. 이러한 node_modules 를 해결해주기 위해 나온 것이 yarn berry 입니다. yarn berr..

이슈 템플릿 이슈를 올릴 때, 어떤 문제가 있는지? 어떤 단계가 있는지? 이런 것을 직접 일일히 적는데에는 시간이 소비된다. Gitlab 에 이슈 템플릿을 등록하면 이러한 과정을 간단하게 처리할 수 있다. 시작하기 .gitlab 밑에 이슈 템플릿 폴더와 사용할 md 파일을 생성합니다. (.gitlab/issue_templates/error.md) md 파일은 마크다운 언어로 되어있는 파일로 여기에 필요한 템플릿을 아래와 같이 간단하게 적용해주면 됩니다. # 요약 어떠한 원인으로 발생합니다. ## 어떠한 에러가 발생하는지? ## 어떠한 아웃풋을 원하는지? ### 첨부파일 1. 사진 2. 동영상 3. 파일 /label ~"오류" 이런 식으로 입력해서 이제 깃랩에 올리게 되면 해당 이슈를 생성할 때 템플릿을 ..

Svelte 뭔가.. Svelte 가 뜰 것 같다.. 미리 공부를 좀 해보자.... 다른 프레임워크, 라이브러리와 달리 프론트 엔드 컴파일러입니다. 다른 프레임워크들과 달리 빌드된 시점에 스벨트 코드를 순수 자바스크립트로 변환하여 프레임워크의 문제점인 용량(다른 라이브러리들이 번들에 포함되지 않아 용량이 적음), 속도(예를 들어 첫 로드되는 화면이 다른 SPA 프레임워크보다 빠름)의 문제가 해결되는 장점이 있다. Svelte 를 사용하면 이런게 좋아요. 적은 코드로 작성할 수 있다 (다른 프레임워크들에 비해.) 높은 가독성 (html, css, js) 작은 번들 (라이브러리 빠지고 순수 자바스크립트 용량만 있음.) 낮은 러닝 커브 (다른 React, Vue, Angular 에 비해 쉬움.) 가성돔 사용하..

*ngFor 여러개의 div 를 만들어야 하는데, 일일히 div 를 수작업으로 계속 만드는 것은 리소스가 떨어지는 상황이다. 이러한 경우, *ngFor 을 이용하면 여러개의 요소를 쉽게 만들 수 가 있다. 예제 아래와 같이 mat-select 라는 material 컴포넌트를 하나 만드는데 그 안에 option 값을 그 때 그 때 다르게 넣고 싶은 경우가 있다. interface itemInfo { value: number; valueString: string; } export class ItemComponent { items: itemInfo[] = [ {value: 0, valueString: 'item: 0'}, {value: 1, valueString: 'item: 1'..

Angular-Material 앵귤러에서 가장 많이 사용하는 UI 라이브러리로써, Angular-Material 공식 홈페이지가 있어 쉽고 빠르게 사용할 수 있다. 많은 도큐먼트가 있어, 퍼블리싱을 보다 쉽게 할 수 가 있다. 어느정도 퍼블리싱은 이제 프론트에게는.. 필수적이 된 것이다.. 아래 사이트를 누르면 material 공식 홈페이지로 이동한다. https://material.angular.io/ 사용법 우선 아래의 명령어를 이용하여 설치를 해줍니다. ng add @angular/material 설치가 완료되면, app.module.ts 에 코어와 사용하고자하는 컴포넌트를 등록해줍니다. import { MatNativeDateModule } from '@angular/material/cor..