하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#4. 유저 로그인)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 5(Teleport)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Teleport Teleport Vue 컴포넌트 설계는 비지니스 로직 계층과 표현 계층으로 구축할 수 있다. 그러나 때때로 특정한 위치에 html 렌더링을 시켜야 되는 컴포넌트가 있을 수가 있다. 예를 들면, absolute, fixed, z-index를 활용하믄 모달 팝업, 태그앞에 와야 되는 경우 Vue 애플리케이션 페이지에서 작은 부분(또는 widget)에서 실행 될때, Vue app밖에 있는 DOM으로 이동하고 싶은 경우 해결 Teleport 컴포넌트를 사용해보자. Portal이라고 불렸으나 Teleport..

개발일기/Vue.js

Vue.Js 3 Composition API에 대해 알아보자 - 4(Sharing State, Suspense)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Sharing State Suspense Sharing State API 호출 작업을 할때, 로딩 상태, 에러 상태, try/catch구문을 사용한다. Composition API에서 사용하는 법을 살펴보자. 아래는 이전 포스팅에 연장인 예제 코드이다. /src/App.js Search for Loading: {{ loading }} Error: {{ error }} Number of events: {{ results }} Sharing State Composition API 위에 살펴본 API 호출 로직(결과, ..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Modularizing(모듈) Lifecycle Hooks(라이프사이클 훅) Watch Modularizing(모듈) Composition API 사용하는 이유는 기능별로 구분, 코드 재활용이다. 모듈을 통해 구현해보자. 현재 코드는 아래와 같다. ... 컴포지션 함수로 빼기(Extracting into a Composition Function) ... useEventSapce() 함수를 exrpot default {} 외부에 작성하고 분리했다. 그 함수를 setup() 내부에서 사용한다. 이제 컴포지션 함수를 파..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Vue2 한계 Setup & Reactive References Methods Computed Properties The Reactive Syntax Vue2 한계 컴포넌트가 커지면 커질수록 가독성이 떨어짐 예를 들면, 검색어를 입력하고 해당 검색어로 찾은 정렬된 결과를 보여주는 컴포넌트를 살펴보자. // Vue2 export default { data() { return { 검색어 로직(Search) 결과 정렬(Sorting) } }, methods: { 검색어 로직(Search) 결과 정렬(Sorting) } ..

개발일기/Web

CDN(Contents Delivery Network) 개념 살펴보기(웹 최적화)

CDNs(Content delivery networks)에 대해 알아보자 AWS CloudFront를 사용중인데 CDN, 캐쉬 관련해서 대략적인 개념만 알고 있는 상태다. 웹 최적화를 검색하는 도중 CDN관련 내용이 있어 간단하게 정리하겠다. web.dev 여기 포스팅을 참고 했다. 개요 CDN은 분산된 서버 네트워크를 사용해 사용자들에게 리소스를 제공함으로써 사이트 성능을 향상시킨다. CDN은 서버 부하(서버 로드)를 줄이기 때문에, 서버 비용을 절감하고, 트래픽 급증(traffic spkies) 처리에 적합하다. 이 포스팅은 CDN이 작동하는 법, CDN 설정 최적화, 플랫폼을 고르는법과 설정하는 법을 알려준다. CDN은 캐시 된 컨텐츠를 제공하는 걸로 잘 알려져 있지만, 캐쉬 할수 없는 컨텐츠를 제..

개발일기/알고리즘

알고리즘 빅 오 표기법 살펴보기

알고리즘 빅 오 표기법 살펴보기 개요 알고리즘을 문제 은행에서 푼 기억은 있어도 알고리즘에 대해 공부한 적이 없어서 이 참에 공부하면서 정리하기로 마음 먹었습니다. 어려운 내용은 제가 이해를 못하니 간단하게 한번 살펴 보겠습니다. 처음으로 살펴볼 내용은 빅 오 표기법입니다. 빅 오 표기법이란 시간 복잡도(알고리즘의 시간 효율성)를 쉽게 소통할 목적으로 자료 구조와 알고리즘의 효율성을 간결하고 일관된 언어로 설명하기 위해 수학적 개념을 차용했습니다. 이러한 개념을 형식화한 표현을 빅 오 표기법이라고 부릅니다. 지금 설명은 수학적 관점을 최대한 배제하고 있습니다.(아주 쉬운 버전) 빅 오: 단계 수 계산 O(1) "빅 오1", "차수 1"이라고 부르며, 오 1이라고 편히 부르겠습니다. O(1)은 데이터 크기..

개발일기/CSS

input, image 등에서 ::before 를 사용할 수 없는 이유?

input, image 등에서 ::before 를 사용할 수 없는 이유? 개요 CSS 작업하다보면 ::before, ::after 를 이용해서 처리할때가 있다. 하지만, 어떤 태그에서 작동이 안하는 경우가 있습니다. 이걸 한번 알아봅시다. ::before, ::after pseudo-elements(가상 요소)는 텍스트 입력하는 태그들과, 이미지 또는 영상을 보여주는 태그에는 사용할 수가 없다. 그 이유는 repalced elements(대체요소)때문이다, HTML 표준 렌더링 섹션에 특별한 카테고리에 자세한 설명이 있으니 참고하길 바랍니다. ,,,,,,, img,input,embed 는 가상요소가 될수도있고 대체요소가 될 수 있습니다. img 예제 // html // wrong img url // cs..

개발일기/Vue.js

[Vue.js] 토큰 기반 인증(#3. 사용자 등록)

2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 (#7. 자동 로그인) 2020/10/31 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증 catch 사용 (#6. 에러 처리) 2020/10/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#5. 유저 로그아웃) 2020/10/28 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#4. 유저 로그인) 2020/08/30 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#3. 사용자 등록) 2020/07/27 - [개발일기/Vue.js] - [Vue.js] 토큰 기반 인증(#2. 인증을 위한 프로젝트 구조 살피기) 2020/07/24 - [개발일기/Vu..

개발일기/Web

로컬에서 서브 도메인 활용하기(local sub domain)

로컬에서 서브 도메인 활용하기 개요 다국어 작업을 서브 도메인을 이용해야 되는데 로컬에서 테스트 하기가 애매해서 구글링 하다 발견한 내용을 정리했다. 이 포스팅은 엄청 간단하게 내가 이해한 내용을 바탕으로 쓸 예정이다. 아래는 이미지 1개정도 넣어야 될 것 같아 URL 구조 이미지를 추가했으니 참고!! 로컬에서 호스트 설정하기 windows 환경 CMD 커맨드 프롬프트를 관리자 권한으로 열고 아래 명령어를 입력한다. notepad c:\Windows\System32\Drivers\etc\hosts mac/Linxus 환경 mac/linxus 사용자는 sudo 권한으로 아래 명령어를 입력한다. sudo nano /etc/hosts 현재 mac을 사용하고 있으므로 mac 기준으로 설명할 텐데 크게 다른 점은..

개발일기/알고리즘

[알고리즘] 해쉬 위장(프로그래머스)

https://programmers.co.kr/learn/courses/30/lessons/42578 코딩테스트 연습 - 위장 programmers.co.kr 해쉬 위장 문제 - 알고리즘의 부족함을 느껴 짬이 날 때마다 알고리즘 연습을 하기로 마음먹었다. - 우선 한글로 된 프로그래머스를 통해 연습 중이다. 추후 영어 잘하고 실력이 향상되면 영문으로 된 다른 사이트의 문제들도 풀어볼 예정이다. 문제 설명 - 이미지로 대체한다. - 간략히 설명하면 얼굴, 상의, 하의, 겉옷의 경우의 수를 구하는 것이다. 내 풀이 1번째 function solution(clothes) { const initCount = clothes.length; const convertToObjectClothes = clothes.red..