똑같은 삽질은 2번 하지 말자

nodebrew에 관련된 파일들은 일단 모두 지우고 node -v 을 쳤을때 command not found 라는 상태가 나올때까지 만든다 node -v 을 쳤을때 어떤 디렉터리를 가리키고 있으면 그 디렉터리도 지운다.. nodenv 설치 nodenv install "버젼" nodenv global "버젼" 해서 밑의 문구처럼 되면 A-036:~ h-gwak$ node -v bash: node: command not found ? 터미널에서 한줄씩 실행 export NODENV_ROOT="$HOME/.nodenv" export PATH="$NODENV_ROOT/bin:$PATH" if which nodenv > /dev/null; then eval "$(nodenv init -)"; fi 된다! 커맨드에..

Typescript를 적용할 때, Vue의 기본적인 hook들은 Vue와 거의 유사하므로 생략하고 마이그레이션하면서 중간중간 막힌 부분들 또는 미처 몰랐던 부분들을 여기서 써 나가고자 한다. 우선 공식문서 typescript.nuxtjs.org/ Nuxt TypeScript TypeScript Support for Nuxt.js typescript.nuxtjs.org fetch hook ? Nuxtv2.12에서 추가된 fetch 훅은 어떻게 쓰면될까? 일부 훅(fetch 같은)들은 Component.registerHooks을 써서 등록할 필요가 있다고 한다. 소스코드 Component.registerHooks(['fetch', 'fetchOnServer']); @Component export defaul..

컴포넌트의 플러그인화 왜쓰냐? 전역으로 공유하고 싶은 요소가 있을때 Vue.use(MyPlugin) new Vue({ //... options }) 이런식으로 router store등등 이미 많이 써본 친구들인데 내가 직접 플러그인을 생성 작성해야하는 경우에는 어떻게 하면 될까? window의 width(브라우저의 사이즈)가 변할때 width값을 계속 갱신/습득 가능하게 하는 기능을 가진 플러그인을 만든 예제이다. /plugins import Vue from 'vue' Vue.use({ install(Vue) { // 두번째 param으로 option이라는 친구도 제공한다. const $_window = Vue.observable({ width: 0 }) if (process.browser) { cons..

타입추론 타입스크립트가 타입 추론을 해나가는 과정 const num = 10 // 초기화 할때 num이 number로 추론되어진다. 이외 함수의 반환값, 인자의 기본값등을 설정할 때도, 타입추론이 일어난다, 그럼 기본적인거 말고 바로 심화적인 인터페이스와 제네릭을 이용한 복잡한 구조에서의 타입 추론을 한번 봐 보자, 코드레벨에서 확인해보면 DepatureTime의 제네릭 형태에서 따라 Time의 time값의 추론도 이루어진다는 걸 알 수 있다, interface Time { time: T; // 시간값 숫자 혹은 문자 kind: string } interface DepatureTime extends Time { address: string; cost: K // 비용 숫자 혹은 문자 } var ticket..

docs.aws.amazon.com/ko_kr/lambda/latest/dg/welcome.html AWS Lambda란 무엇입니까? - AWS Lambda AWS Lambda란 무엇입니까? AWS Lambda는 서버를 프로비저닝하거나 관리하지 않고도 코드를 실행할 수 있게 해주는 컴퓨팅 서비스입니다. Lambda는 필요 시에만 코드를 실행하며, 하루에 몇 개의 요청에 docs.aws.amazon.com 노드의 Single Thread 제약 때문에 CPU점유율이 큰 작업을 할 때, 그 작업을 처리하는데 시간을 너무 많이 쓰기때문에 작업들이 쌓여져버린다. 그래서 노드를 쓸때는 람다도 따로 둔다고 한다.(람다를 통해 서버리스도 가능? 하다고 한다..) 트리거 설정으로 원할때, 작동시킬 수 있다. 그리고 혹시..

encodeURIComponent URI로 데이터를 전달하기 위해서 문자열을 인코딩해서 보내기 위해(한글이나 일본어나 감싸서 보내는게 좋을듯) (데이터 안에 특수문자 & 이나 ? 들어가는경우에서는 URI에서는 쿼리나 파람으로 인식하는걸 방지하기위해 감싸서 보내준다.) 받는 쪽에서는 decodeURIComponent

웹이 그려지는 과정과 최적화 방법에대해 자세히 나와있음 ui.toast.com/fe-guide/ko_PERFORMANCE 성능 최적화 | TOAST UI :: Make Your Web Delicious! 성능 최적화 애플리케이션 성능 최적화는 앱과 웹에서 모두 중요하다. 최근 웹 애플리케이션은 Ajax 통신, 복잡한 UI 등 많은 기능을 담으면서 크고 무거워졌다. 무거워진 웹은 긴 로딩 시간 함께 ui.toast.com Core Web Vitals 구글에서 Core Web Vitals지표를 보고 검색랭킹에 반영한다는 발표를 2020년에 함 brunch.co.kr/@bamchi/14 Core Web Vitals에 대하여 (SEO) 구글은 검색순위를 정할 때 Core Web Vitals 지표를 중시한다 |..

Prop, Provide, Inject Watch, Emit Vuex

1. || 연산자 // name의 기본값 셋팅 function setName(name) { if (!name) { this.name = "Default Name"; } } name의 setter함수인데 인자가 없을 경우에는 if문을 통해 디폴트네임을 셋팅한다. function setName(name) this.name = name || "Default Name"; 자바스크립트에서는 논리 OR 연산자 ||를 활용해 똑같은 기능을 하는 셋터함수를 이렇게 만들 수 있다. 위 코드 경우 setName("heewon") 호출 시에는 인자에 name이 존재하므로 변수에 할당된다. (없으면 Default Name이 셋팅된다.) 2. if문 조건 (&& 연산자) function isAdult(age) { if (age..

보호되어 있는 글입니다.