소소한 개발 블로그

[FrontEnd]프론트엔드 개발에 왜 Node.js를 사용하는가?

프론트엔드 개발을 시작하면 일단 첫 단계가 node.js를 설치하라고 한다. 근데 우리는 Node.js가 뭔지도 모르고 일단 설치를 한다. 그리고 프론트엔드를 개발하면서도 Node.js가 정확히 무엇인지 모르고 개발을 하는 경우가 있다. 나도 생각해보니 Node.js는 백엔드로 사용한다는데 "왜 프론트엔드를 하는데 Node.js를 설치하는 거지?" 라는 의문을 가지고 있었다. 그래서 이번 기회에 그 이유에 대해 공부를 하고 포스팅해보려고 한다. 일단 Node.js가 뭔지 이해하고 가려고 한다. Node.js란? Node 공식 사이트에는 다음과 같이 Node를 설명하고 있다. Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임 입니다. 웹 애플리케이션을 개발할 ..

[Vue.js] 상대경로 별칭(@, ~ 등) 사용해서 절대경로로 변경하기

외부 코드를 import 해서 사용할 때 늘 아래와 같이 상대경로를 통해 찾아와 사용했다. import Header from '../../../Header'; 이렇게 사용하다보니 프로젝트 규모가 커질수록 컴포넌트가 많아질수록 경로가 복잡해지고 코드도 지저분해졌다. 그렇게 늘 상대경로를 사용하다가 아래와 같은 경로를 발견했다. import Header from '@/components/Header'; 처음 봤을 때는 '어? 이 @는 뭐지??? 절대경로인거 같은데 어떻게 설정한거지???' 라는 생각을 했다. Vue/CLI를 사용해서 프로젝트를 만들고 개발을 했었기 때문에 이런 설정들을 바꿔볼 생각을 하지 않았었는데 공부를 하다보니 이러한 초기설정들이 중요하다는 걸 알게 되었다. 아무튼 위와 같이 상대경로를 ..

[Typescript]기초 - 비구조화(구조 분해) 할당

비구조화(구조분해)란? 어떤 시점에 구조화된 데이터에서 일부만 사용해야할 때가 있습니다. jack이라는 구조화된 데이터가 있다고 예를 들었을 때, 어느 시점에서 jack의 name과 age만 사용하려고 합니다. 그럴 때 name, age라는 변수를 선언해서 jack의 name, age를 저장해서 사용하는 것 처럼 구조화된 데이터를 분해하는 것을 비구조화라고 합니다. let name = jack.name, age = jack.age; 비구조화 할당이란? 비구조화 할당 문법을 사용하면 다음과 같이 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언해 줄 수 있습니다. const jack = { name: string, age: number, etc?: any}; const { name, age } =..

[Typesciprt] tsconfig.json 살펴보기

프로젝트에서 typescript를 사용하려면 몇 가지 설정이 필요합니다. 그리고 typescript 프로젝트에서 볼 수 있는 파일 중 하나가 tsconfig.json 파일입니다. typescript는 브라우저에서 사용하려면 javascript로 변환하는 과정을 거쳐야하는데 컴파일 옵션을 정의한 파일이 tsconfig.json 파일입니다. tsconfig.json 파일을 보면 처음보는 설정들이 엄청 들어가 있는데 이 설정들에 대해 간단하게 살펴보고 정리해보려고 합니다. 기본 구성 { "compilerOptions": {}, "include": ["src/**/*"] } 기본 구성은 저렇게 구성되어있습니다. "compilerOptions"는 컴파일 옵션을 나타내고 "include" 는 src 하위 디렉터리에..

git fork부터 pull request까지

git fork부터 pull request까지 이번 포스팅에서는 fork부터 pull request까지 하는 방법에 대해 이야기 해보도록 하겠습니다. 예제는 github을 사용해서 진행하겠습니다. Fork할 프로젝트의 저장소로 들어간 후 화면 우측 상단에 위치한 Fork를 클릭한다. 그러면 다음과 같이 자신의 계정으로 된 저장소에 Fork한 프로젝트가 생성된다. 그리고 Fork로 생성된 저장소에서 Clone or download를 통해 URL을 확인하고 다음 명령어로 해당 저장소를 Clone 한다. $ git clone 다음 명령어로 원본 프로젝트 저장소의 이름을 지정하고 Remote 저장소로 추가한다. $ git remote add -v 옵션으로 설정된 원격 저장소를 확인해보자. $ git remote..

git fork 와 clone

fork vs clone git을 사용해 협업을 한다면 fork, clone이라는 단어를 많이 듣습니다. 저는 지금까지 clone을 사용해서 협업을 해왔는데 입사 후에 회사에서는 fork를 사용해서 형상관리를 하고 있었습니다. 그래서 fork에 대해 정리를 해야했고 clone과 비슷하면서도 다르기에 비교를 하면서 정리를 하려고 합니다. clone 먼저 clone은 원본 레포지토리의 내용을 내 로컬 레포지토리로 완전히 복사합니다. clone한 우너본 레포지토리를 remote 저장소 origin으로 가지고 있습니다. 권한이 없는 경우에는 해당 저장소로 push를 하지 못합니다. 또한 기존의 제일 초기 원본 레포지토리와 연결되지 못합니다. 즉, 저장소의 commit, 등의 로그를 보지 못합니다. fork 원본..

[Vue.js] 사용자 정의 디렉티브

사용자 정의 디렉티브 vue 에서는 v-model이나 v-show와 같은 디렉티브 외에도 사용자 정의 디렉티브를 등록해서 사용할 수 있습니다. 어떤 로직이 중복해서 사용된다면 그 로직에 대해 디렉티브로 정의해서 코드의 중복을 줄일 수 있는 효과가 있습니다. directive 등록 디렉티브를 전역, 로컬 2가지로 등록할 수 있습니다. //전역 main.js Vue.directive('focus', { inserted : function(el){ el.focus() } }) //로컬 directives: { //디렉티브 정의 inserted: function(el){ el.focus(); } } 위와 같이 등록을 한 후에 템플릿에서 아래와 같은 모든 태그에 attribute 추가해서 사용할 수..

[RxJS] Operator - iif()

iif iif는 조건문에 따라 결과값을 실행하는 함수입니다. iif(condtion: () => boolean, trueResult: SubscribablerOrPromise = Empty, falseResult: SubscribableOrPromise = Empty): Observable 예제 // RxJS v6+ import { iif, of, interval } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; const r$ = of('R'); const x$ = of('X'); interval(1000) .pipe(mergeMap(v => iif(() => v % 4 === 0, r$, x..