[Typescript] 좀 더 알아보기(Type Assertion, Index Signature) 1. Type Assertion - 타입스크립트가 추론하지 못하는 타입을 as keyword를 통해 명시해주는 것 - Type casting: 데이터의 타입을 변환 - Type assertion: 데이터의 타입을 명시 Type Assertion의 두 가지 형태 1. As let someValue: unknown = 'this is a string'; let strLength: number = (someValue as string).length; 2. Angle Bracket let someValue: unknown = "this is a string"; let strLength: number = (someValue).length; - JSX에서는 꺾쇠괄호를 통한 Type Assertion은 태그와 혼동되.. 🌕 Front/🎫 Typescript 2022. 3. 24. 14:32
[Typescrip] 타입 가드 (intersection, union, Type Guard) 가드 올려! 타입 가드(Type Guard) 배울 개념 intersection Type union Type Type Guard 1. 문제 발생 interface Animal { eat: () => void; sleep: () => void; } class Dog implements Animal { eat() {} sleep() {} } class Cat implements Animal { eat() {} sleep() {} } Dog클래스에 bark()메서드를 추가하고 싶은데? 그러기 위해선, Animal인터페이스에 bark()를 추가해야하고, Animal인터페이스를 구현하는 Cat클래스도 bark()메서드를 구현해야하는 비효율이 발생한다. 해당 타입을 쓰는 모든 코드에 변경을 가하지 않고, 특정 코드만 자유롭게 타.. 🌕 Front/🎫 Typescript 2022. 3. 22. 15:16
[Typescript] 함수 사용하기 (parameter, optional, rest, overloading) 1. 함수 선언 • 매개변수와 리턴값의 타입을 선언 후 사용하면 된다. function func1(name: string): string { return 'hello ${name}'; } const func2 = function (name: string): string { return 'hello ${name}'; } const func3 = (name: string): string => { return 'hello ${name}'; } const world4 = (name: string): string => 'hello ${name}'; 2. 매개변수 수 일치 • 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다. function buildName(firstName: string.. 🌕 Front/🎫 Typescript 2022. 3. 22. 13:00
[Typescript] 유틸리티 타입 12가지 사용하기 • TypeScript는 공통 타입 변환을 용이하게 하기 위해 유틸리티 타입을 제공한다. • 유틸리티 타입은 전역으로 사용 가능하다. 종류 Partial Readonly Record Pick Omit Exclude Extract NonNullable Parameter ConstructorParameters ReturnType Required 1. Partial interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial) { return { ...todo, ...fieldsToUpdate }; } const todo1 = { title: 'organize desk', .. 🌕 Front/🎫 Typescript 2022. 3. 22. 09:56
[GIT] 팀 프로젝트 merge시 사용했던 명령어 merge 실수 관련 명령어 revert : 현재에 있으면서 과거의 특정 사건(commit)들만 없던 일로 만든다. git revert HEAD -m 1 과거의 커밋내용이 merge할 때 다른 브랜치에 영향을 주어 2번 방법을 사용 reset : 시간을 아예 과거의 특정 사건(commit)으로 되돌린다. git reset HEAD^ : 최신 commit 없애버리기 git push origin origin/OOO-- force: no-ff 옵션 붙여 merge했을 때 push가 안되면 강제로 올리기 merge 실수 관련 명령어 git merge origin/OOO : merge git merge --abort : merge 명령어 취소 git reset --hard HEAD: 병합 후 편집까지 했지만, 취.. 🚛 DevOps/🟥 GIT 2022. 3. 21. 21:35
[GIT] clone부터 해당 체크아웃까지 (branch, checkout) 프로젝트를 시작할 때, 간단하게 코드만 확인하고 싶은 분들을 위해 정리했다. ✅ 프로젝트 클론부터 브랜치 이동까지 1. 프로젝트 클론하기 git clone 2. 해당 디렉토리로 이동 cd 3. 브랜치 이동 git checkout -t [원격 저장소의 branch 이름] # 로컬에 동일한 이름의 branch를 생성하면서 checkout git checkout -b [생성할 branch 이름] [원격 저장소의 branch 이름] # 원격 branch 이름을 바꿔 가져오기 git checkout -b [생성할 branch 이름] # (현재 브랜치를 기준으로) 새로운 브랜치를 만들기 + checkout ✅ 참고사항 Clone한 프로젝트에는 .git 폴더가 이미 생성되어 있어, 아래 명령어는 생략해도 된다. gi.. 🚛 DevOps/🟥 GIT 2022. 3. 15. 20:08
[Node js의 특징] 싱글스레드의 NodeJS가 서버사이드에서 쓰일 수 있는 이유 0. 왜 싱글 스레드야? 스레드는 프로세스 내에서 실행되는 실행 단위를 말한다. 그럼 스레드가 많으면 좋은 게 아닐까? 브라우저도 그렇고, Node도 그렇고, 왜 싱글 스레드를 사용할까? 이유는 바로 쉬.워.서.다. 만약 자바스크립트가 멀티 쓰레드로 실행되는 언어였다면 웹페이지에서 발생하는 동시성 문제에 대해 해결해야 했다. 실제로 멀티 쓰레드로 구현된 서비스에서는 이 동시성 문제에 대해 정말 많은 신경을 쓴다. 하지만 자바스크립트는 단일 쓰레드로 실행되므로 인해 교착 상태와 같은 다중 쓰레드 환경에서 발생할 수 있는 복잡한 시나리오를 신경 쓸 필요가 없으며 비동기 처리를 통해 쉽게 여러 요청을 처리할 수 있다. 실제로 구글의 Chrome 브라우저 마저도 기존 웹 페이지에서 엄청난 동시성 문제를 일으킬 .. 🌚 Back/🧩 Node.js 2022. 2. 21. 15:48
AJAX란 무엇이고, 비동기 통신 API fetch, axios는 어떻게 쓰이는가 AJAX란? JavaScript를 이용한 비동기 통신 클라이언트와 서버간에 XML, JSON 데이터를 주고받는 기술이다. AJAX는 기술 자체를 뜻하기 보단, HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, XMLHttpRequest 오브젝트들이 조합한 기술의 총칭을 일컫는다. XMLHttpRequest 객체를 이용해서, 페이지 새로고침 없이 페이지의 일부만을 위한 데이터를 로드하는 기법이다. AJAX(Asynchronous JavaScript and XML)의 X는 XML을 뜻하지만, JSON이 더 가볍고, 자바스크립트의 오브젝트로 쉽게 변환된다는 점 때문에 XML 보다 많이 사용된다. AJAX를 사용하는 이유 화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페.. 🌕 Front/🌱 Vanilla JS 2022. 2. 12. 20:51
[호이스팅] TDZ, var, const, let, window 바인딩 여부 호이스팅(hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 따라서 var로 선언할 시 초기화 값, undefined가 나오는 것과 다르게, const와 let은 초기화 값이 없기 때문에 오류를 출력한다. Temporal Dead Zone 변수가 현재 스코프 내에서 선언됐지만, 아직 초기화되지 않은 상태를 말한다. let 또는 const 키워드를 사용하여 변수를 선언했을 때 나오는 개념. TDZ는 변수가 선언된 지점부터 초기화되기 전까지, 해당 변수를 사용할 수 없게 한다. TDZ에 빠진 예시.. 🌕 Front/🌱 Vanilla JS 2022. 2. 4. 10:23
스코프: 크롬 디버거로 보기, 블록스코프, 함수스코프, 렉시컬스코프 스코프란, 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정하는 것이다. 식별자에 대한 유효범위라고도 간단히 말한다. 크롬 디버거로 보는 스코프 var globalVariable1 = 1; const globalVariable2 = 2; const outerConst = function () { console.log(); }; var outerVar = function () { console.log(); }; function outerFunc2() { console.log(); } function outerFunc1() { let outerVariable = 999; function innerFunc() { const in.. 🌕 Front/🌱 Vanilla JS 2022. 2. 3. 13:09
원시 데이터 타입과 래퍼 객체: 원시 타입이 메소드를 갖는 이유 123.123.toFixed(2) // 123.12 "hello".charAt(4) // 'o' 래퍼 객체는원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 하여, 원시값에서도 메서드를 호출할 수 있다. 래퍼 객체 변환 과정 1. 원시타입에 해당하는 객체가 생성된다. 2. 이 객체의 메서드가 호출된다. 3. 메서드 처리 후 이 객체는 소멸된다. 4. 원래의 원시타입만 남는다. 래퍼 객체를 사용하는 이유 문자열이나 숫자와 같은 원시값을 다루어야 하는 작업이 많은데, 메서드를 사용하면 작업을 수월하게 할 수 있을 것 같지만, 메서드를 사용하는 객체는 무겁고, 원시값은 가능한 한 빠르고 가벼워야 한다. 그래서 원시 타입을 유지하되, 메서드를 호출할 때만 잠깐 객체를 생성한 후 다시 삭제한다. 🌕 Front/🌱 Vanilla JS 2022. 2. 2. 16:41
[native code]: 넌 누구냐, 코드를 내놓거라! 위와 같은 생성자 함수들의 내부코드를 보고 싶어, 크롬 개발자 모드에서 확인했다. 하지만 native code라고만 나오고 더 이상의 정보를 알 수 없었다. You don't know Js라는 책에서 언급한 내용인지, 구글링 검색을 하면 죄다 책 내용을 요약한 블로그 내용밖에 없었고, 빠르게 밑그림만 확인하고 싶었는데 지엽적인 지식만 나열되어 있어, 다른 소스를 찾았다. 위의 내용을 간단히 정리하자. native code는 Window, Document, Function와 같은 내장객체들은 자바스크립트로 구현되어있지 않고, C와 C++같은 컴파일러 언어로 코딩되어 있기 때문에 안의 코드들을 볼 수 없다. 때문에 binary code를 보여줘봤자, 읽을 수도 없고 사용할 수도 없기때문에 [native co.. 🌕 Front/🌱 Vanilla JS 2022. 1. 30. 18:46
[DOM]: 이벤트 버블링을 이용해 하위 요소 전체 다루기(e.target, e.currentTarget) 옵션들을 forEach로 반복시켜서 이벤트를 주는 방식이 아닌 event.target으로 옵션들의 부모요소 ul을 참조해 이벤트를 위임시키면 반복문을 쓰지않고도 옵션들에 이벤트를 줄 수 있다. 옵션이 많아지면 반복문이 돌아갈때 성능이슈도 있으니 탁월한 방법이다. li 부모 태그인 ul태그에 한 번반 이벤트리스너하면 된다. 부모ul태그에 한번만 등록해놓고 자식 li클릭시(버블링은 기본값) 버블링을 활용하면 하나의 이벤트리스너로 li 요소들 전체를 다룰수있다. 단 모든 이벤트가 버블링이 발생하는건아니다. click은 버블링이 기본으로 발생한다. const billboard = document.querySelector('billboard'); const ul = document.querySelector('ul.. 🌕 Front/🌱 Vanilla JS 2022. 1. 27. 21:37
[DOM] Javascript로 html을 조작해보자 DOM 어렵게 생각하지마 OM은 Object Model, 객체 지향 모델을 뜻한다. 뭔가를 객체로 표현하는 방법을 말한다. 나아가 Documnet가 추가된 "D"OM은 웹 페이지의 내용을 객체로 표현하는 형식을 말한다. Brower가 추가된 "B"OM은 웹 브라우저 자체를 객체로 표현하는 형식을 말한다. 이 둘의 객체들로부터 제공되는 DOM API, BOM API를 통해 JavaScript가 웹 페이지/브라우저를 쉽게 제어 및 조작할 수 있다. DOM HTML문서의 구조와 내용을 객체 타입으로 변환시켜 웹 페이지에 객체지향적 접근을 가능하게 했다. 날 것 그대로의 Document를 Object로 만들면(=DOM), 구조, 내용, 스타일의 요소들을 구조적으로 접근할 수 있게 된다. DOM은 프로그래밍 언어.. 🌕 Front/🌱 Vanilla JS 2022. 1. 17. 15:58
GIT double dash의 의미: git checkout -- filename Git에서 특정 파일의 변경을 취소할 때 아래와 같은 커맨드를 실행한다. $ git checkout -- path/to/file.txt 문법을 외워서 사용하고 있는데, 더블대시가 왜 나오며, 어떤 식으로 변경이 취소되는 걸까? 더블 대시는 배시에서 커맨드 옵션의 끝을 의미한다. 예를 들어, grep 명령으로 옵션 -v 가 아닌 문자열 -v 를 검색하고 싶다면, 아래와 같이 -- 로 옵션이 종료되었음을 명시할 수 있다. $ grep -- -v file 깃 커맨드도 마찬가지로 -- 는 옵션의 끝을 의미한다. $ git checkout -- path/to/file.txt git chekcout 의 usage 를 보면 아래와 같이 돼있다. git checkout [] or git checkout [] [] --.. 🚛 DevOps/🟥 GIT 2022. 1. 15. 17:07
GIT 라이프사이클: git 관리상태 확인: status, log untracked: 새로운 파일 modified : 추적파일 and 수정함 1. staging area 영역 파일 확인: git status $ git status - Staging area의 어떤 파일이 변경되었는지, Staging file들의 상태를 확인할 수 있다. - 새로 만든 파일의 ADD 여부 확인 - 커밋된 파일을 수정하고 있는지의 여부 확인 - untracked, tracked 상태 확인 - 명령어가 동작하지 않을 때 에러 확인 - 내가 작업한 파일 외에 다른 파일이 수정되진 않았는지 확인 2. 코드로 살펴보는 파일 상태 1. article.js, comment.js, user.js 파일을 생성하고 add하지 않은 상황이다. 2. git add 명령어를 통해 article.js 파일을 .. 🚛 DevOps/🟥 GIT 2022. 1. 15. 12:56
프로토타입: 자바스크립트의 핵심 철학 (정리) 자바스크립트는 프로토타입 기반 OOP 언어다. 자바스크립트는 분류 위주 클래스 방식의 언어인 JAVA에서 객체를 바라보는 관점과 완전히 다르다. 특히 문맥(context)을 매우 강조하는 철학적 근거에서 만들어져 렉시컬 스코프에 의한 호이스팅과 실행 문맥에 의한 복잡한 this가 필연적으로 발생할 수밖에 없었다. 비트겐슈타인의 두 가지 이론 1. 의미사용이론: 단어의 의미는 ‘상황과 맥락에 의해서 결정된다'. 단어의 ‘진정한 본래의 의미'란 존재하지 않는다. 2. 가족유사성이론: 프로토타입 언어에서는 정의로 부터 분류하지 않는다. 가장 좋은 보기(prototype, exemplar)로부터 범주화된다. 의미사용이론 어휘적 범위(lexical scope): 의미사용이론에 따르면 단어의 의미는 그 어휘적인, .. 🌕 Front/🌱 Vanilla JS 2022. 1. 11. 23:34
불변값과 가변값을 나누는 기준은 뭘까? 0. 미리보는 결론 불변값과 가변값은 데이터 영역의 메모리를 변경할 수 있는가에 따라 나뉜다. 기본형 데이터 타입의 값을 변경할 때는 데이터 영역의 메모리를 변경하지 않고(불변성) 변수의 값만 재할당하는 반면, 참조형 데이터 타입의 값은 묶음을 가리키는 주솟값을 가지며 이 주소에 있는 값은 데이터 영역에 위치하여 객체 내부 변수들의 주솟값을 참조하고 있기 때문에, 프로퍼티 변경 시 데이터 영역의 메모리를 변경하여 값을 변경하는 것처럼 보인다.(가변성) 1. 변수에 값을 할당하는 과정 - 데이터 영역 메모리의 값을 직접 바꾸지 않는다. - 값을 재할당함으로써 데이터를 변경한다. 1) 바꾸고자 하는 값을 검색한다. 2-1) 값이 존재하면, 그 데이터의 주솟값을 할당한다 2-2) 값이 존재하지 않다면, 새로 .. 🌕 Front/🌱 Vanilla JS 2022. 1. 7. 21:37
모달 컴포넌트 transition 속성 이슈 - Vue 2.X와 Vue3.X 모달에 트랜지션 속성을 넣는 과정에서 Vue 버전차이로 인해 이슈가 발생했다. 1. 을 모달 컴포넌트 안에 선언하고 싶은데? custom header 위의 코드처럼 작성하면 modal의 애니메이션을 담당하는 이 모달 컴포넌트와 분리된다. 가독성이 매우 떨어진다. 2. Vue 2.x 공식문서 예시 hello Vue2.x 공식문서대로 모달안에 트랜지션이 들어간 코드를 설정해도 원하는 결과가 나오지 않았다. 그리고 Vue2.x 에서는 모달 컴포넌트를 쓰는 루트 컴포넌트에서 v-if 속성을 사용하여 트랜지션을 작동시켰다. 하지만 은 자식 요소들에 의해서 작동해야지, 자체가 토글링되면 안된다고 한다. 3. Vue 3.x migration strategy hello 이는 prop을 하위 컴포넌트에 전달하여 트랜지션.. 🌕 Front/🥉 Vue.js 2021. 12. 25. 00:17
Vue.js 환경 구축 시 발생했던 오류(executionpolicy) 1. vue cli 설치 후 vue 명령어 접근 불가능 vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\User\user\AppData\Roaming\npm\vue.ps npm install -g @vue/cli vue create my-project vue-cli를 설치 후 vue를 접근할 수 없었다. 이는 PowerShell에서 악의적인 스크립트를 실행을 방지하기 위한 설정때문이다. PowerShell execution policies는 다음과 같이 분류한다. AllSigned: 모든 스크립트와 구성 파일에 신뢰할 수 있는 발행자의 서명이 존재할 경우 실행 가능하다. Bypass: 경고나 안내 없이 어떤 것도 실행 가능하다. Default: Windows 클라이언트는 Restricted,.. 🌕 Front/🥉 Vue.js 2021. 12. 22. 21:41
