Front-End Dev.
-
[CodeKata] 프로그래머스(Lv3) : 하노이의 탑Algorithm 2022. 3. 20. 17:28
🥋 Oooth More!! (Level 3) 🧮 풀이 하노이의 탑 공식을 찾아보니, 아래와 같은 프로세스였다. 이를 재귀함수로 구현하는 것을 못하여 모범답안을 참고하였다. A기둥의 (n-1)번째 원판을 B기둥으로 이동시킨다. A기둥의 n번째 원판을 C기둥으로 이동시킨다. B기둥의 (n-1)번째 원판을 C기둥으로 이동시킨다. 🖇 리뷰 function solution(n) { let answer = []; const hanoi = (n, start, mid, end) => { if (n === 1) answer.push([start,end]) else { hanoi(n-1, start, end, mid) answer.push([start,end]) hanoi(n-1, mid, start, end) } } h..
-
[Vue.js] Vue 3 가 도입되면서 달라진 점Front-End(Web)/Vue 2022. 3. 13. 20:12
🧐 서론 올해인 2022년 1월, Vue3의 안정화 버전(3.2.28)이 정식 릴리즈가 되면서, Vue 프로젝트의 기본 템플릿이 Vue3로 대체될 예정이다. Vue 2에 비해 함수형 프로그래밍화 된 점, 이에 따른 다양한 문법의 변화와 기능의 추가 등이 동반되었다. (Vue devtools 도 Vue3 버전으로 마이그레이션 되었으며, Vue 공식문서 역시 Vue3 개선점들을 기반으로 새로이 단장을 했다.) 지금 회사에서 사용중인 Composition API를 공부하면서 Vue3의 가장 큰 특징이자 코드포맷을 알아볼 수 있었다. 이를 계기로, 정식 릴리즈된 Vue3가 이전의 Vue2에 비해 보여주는 대표적인 차이점들은 어떤 부분들이 있을지 한 번 정리해보고 싶어졌다!! 📗 Vue 3 달라진 점들 1. 성능..
-
[Next.js] next/image - <Image> 컴포넌트Front-End(Web)/React - 프레임워크(React, Next) 2022. 3. 13. 13:22
이번에 토이를 Next.js로 진행하면서, 이미지를 Next.js에서 지원하는 컴포넌트로 적용하는 것을 권장한다는 메세지를 보았다. Next.js v10부터 컴포넌트를 지원했으며, 주요 목적이 바로 이미지 최적화(Optimization) 인 것이다. 컴포넌트를 사용하는 의의와 사용법에 대해 간단하게 공부하면서 정리해보았다! 🤍 컴포넌트는? 는 HTML의 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다. Next.js 공식문서에서 설명하는 컴포넌트 사용의 의의는 아래와 같다. Basic Features: Image Optimization | Next.js Next.js supports built-in image optimization, as well as third par..
-
[Jotai] React 전역 상태 라이브러리Front-End(Web)/React - 라이브러리들 2022. 3. 13. 05:22
이전, 토이를 진행하면서 React의 전역 상태를 사용하기 위해 Recoil 라이브러리를 적용했던 적이 있다. (링크) [Recoil] 전역 상태관리 라이브러리 - Recoil 정복기 🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메 abangpa1ace.tistory.com 이전에 사용했던 Redux에 비하면 매우 심플한 사용법에 컬쳐쇼크를 느끼고, 그렇게 나는 Recoil의 추종자가 되었다. 😏😏 이 Recoil의 철학(Atomic Model)에 영감을 받아 만들어진 React의 상태관리 라이브러리인 'Jotai' 를 소개해보려고 한다. 👻 Jot..
-
[CodeKata] 프로그래머스(Lv3) : 최고의 집합Algorithm 2022. 3. 12. 06:08
🥋 Oooth More!! (Level 3) 🧮 풀이 function solution(n, s) { if (n > s) return [-1] const num = Math.floor(s/n); const count = s % n; return [...new Array(n-count).fill(num), ...new Array(count).fill(num+1)] } s가 n보다 작다면 제일 작은 자연수인 1들의 합으로 s가 나올 수 없다. 이 때는, [-1] 을 반환한다. num은 각 원소의 곱이 최대가 되는 원소값 중 작은값이다. n = 2, s = 9 일 때, [4,5] 에서 4에 해당하는 것이다. count는 최고의 집합에서, num+1 의 개수이다. s를 n으로 나눈 나머지 수만큼 num들에 1을 ..
-
[Vue] Composition APIFront-End(Web)/Vue 2022. 3. 12. 05:44
이번에 새로 맡게 된 프로젝트에서는, Nuxt.js(Vue2)에 Composition API를 적용하는 기술스택으로 개발이 되고있다. Vue3가 정식 릴리스되면서 Vue2와의 큰 차이점중 하나인 Composition API에 대해 학습할 필요성을 느꼈다. 두 버전의 문법이 매우 상이했으며, 그래서 Composition API를 모르면 기존의 data(state), computed, methods, lifecycle 등의 기본적인 프로퍼티들마저도 원만하게 사용할 수 없었다. 본격적으로 개발을 시작하기 전에 Composition API의 차이점과 사용법 등을 공부하고자 하여 이 포스팅을 시작하게 되었다. 📗 Composition API 란? Composition API는 컴포넌트 내에서 사용하는 코드구조를 ..
-
[CodeKata] 프로그래머스(Lv3) : 줄 서는 방법Algorithm 2022. 3. 6. 16:39
🥋 Oooth More!! (Level 3) 🧮 풀이 - 풀이1 : 순열(permutation) 우선 가장 직관적으로, 순열을 통해 줄 설 수 있는 모든 방법을 구한 다음에 k번째를 반환해보았다. 풀이가 틀리진 않았으나, 아마 모든 순열 케이스를 구해야 하기 때문에 n이 커지는 경우(일부 테스트 케이스, 효율성 테스트)에 런타임 에러가 발생한 것 같다. function permutation(arr, selectNum) { let result = []; if (selectNum === 1) return arr.map((v) => [v]); arr.forEach((v, idx, arr) => { const fixer = v; const restArr = arr.filter((_, index) => index..
-
[CodeKata] 프로그래머스(Lv3) : 야근 지수Algorithm 2022. 2. 27. 03:46
🥋 Oooth More!! (Level 3) 🧮 풀이 다양한 반복문이나 이분탐색 등 많은 방법을 고민했지만 분기가 너무 많았고, 모범답안을 보니 생각보다 간단하게 풀 수 있었다. 🖇 리뷰 특정 알고리즘 공식보다는, 오히려 문제 자체를 직관적으로 푼 풀이가 쉽게 정답을 도출하는 문제였다. function solution(n, works) { if(works.reduce((a,b) => a+b) a-b); const len = works.length; while(n) { const max = sorted[len-1]; for(let i = len-1; i >= 0; i--) { if(sorted[i] >= max) { sorted[i]--; n--; } if(!n) break; } } return sorte..