Front-End Dev.
-
[CodeKata] 프로그래머스: 12.28(화), 풍선 터트리기Algorithm 2021. 12. 30. 00:46
🥋 Oooth More!! (Level 3) 🧮 풀이 function solution(a) { let answers = new Set(); function DFS(arr, canLower) { if (arr.length === 1) { answers.add(arr[0]); return; } for (let i = 0 ; i b-a); const newArr = arr.filter(e => e !== max) DFS(newArr, canLower) if (canLower) DFS(arr.filter(e => e !== min), false) } } DFS(a, true) re..
-
[CodeKata] 프로그래머스: 12.19(일), 블록 이동하기Algorithm 2021. 12. 19. 18:18
🥋 Oooth More!! (Level 3) 🧮 풀이 check배열로 방문을 기록하면서 DFS로 풀어보려 했으나, 방법이 모호했으며 무엇보다 회전하는 경우를 고려하기가 힘들었다. 이번에도 눈물을 머금고... 모범답안의 힘을 빌리기로 했다! 🖇 리뷰 최단경로를 탐색하는 문제이므로 BFS를 사용해야 한다. 이 때, 회전까지 고려해야하는 부분이 어려웠는데 모범답안으로 학습해보았다. function solution (board) { const N = board.length; const goal = N + '' + N; const queue = [ [ [1,1], [1,2], 0 ] ]; const visit = new Set(["1112"]); const new_board = new Array(N+2).fill..
-
[React Router/lib.] React Router v6Front-End(Web)/React - 프레임워크(React, Next) 2021. 12. 14. 22:55
오랜만에 React 학습을 진행하는데, React Router가 6버전이 출시되었다고 한다. 기존에 사용하던 문법들이 일부 수정된 것을 감안하여, 이를 한번 훑고자 짧게나마 포스팅을 적는다. 💙 개요 React Router 6버전은, 기존의 5버전에 비해 React 최신문법에 걸맞도록 업데이트 되었다고 공식문서는 소개한다. 특히, React Hooks가 적용되었기에, 이를 사용하려면 React v16.8 이상을 우선 설치해야하며, 5 -> 6버전으로 마이그레이션을 진행하면 된다. React Router 6버전은 번들 사이즈가 5버전에 비해 약 70%가 감소하였으며, 이는 App 빌드시 큰 이점이 될 것이다. 💙 주요 변경사항 1. ➡️ 로 변경 요소들을 포함하는 로 Wrapper 명칭변경 는 compon..
-
[Nuxt.js] Nuxt 학습기 - (4) Store, asyncData & fetchFront-End(Web)/Vue 2021. 11. 30. 02:28
Nuxt 학습기의 4번째 시리즈는 이전에 정리하지 못한 Nuxt.js의 주요기능들이다. Nuxt.js 역시 Vuex Store를 사용할 수 있으며, SSR의 핵심이라 할 수 있는 서버에서의 최초 비동기 요청 메서드인 asyncData, fetch 등을 학습해보고자 한다. 📗 Store (Vuex) Nuxt.js 역시 Vue와 같이 Vuex Store 전역 저장소를 패키지에서 기본적으로 제공한다. 특정 규모 이상의 프로젝트는 보통 전역상태가 필요하며, 세션 정보나 복수의 페이지에서 필요하는 공통 데이터를 저장하는 용도로 사용된다. Vuex는 기본적으로 비활성화 상태이다. 그렇기에, 프로젝트 구조에는 /store 디렉토리가 존재하나 이는 빈 폴더로 존재하고 있다. 여기에 index.js 파일을 생성하면 Vu..
-
[Nuxt.js] Nuxt 학습기 - (3) Views, Routing, Middleware & ValidateFront-End(Web)/Vue 2021. 11. 29. 02:17
Nuxt 학습기의 3번째 시리즈부터는 Nuxt.js 토이 프로젝트를 진행하면서 사용해본 주요기능들을 정리해보려고 한다! 기능들이 전체적으로 유기적으로 연결되어 있어, 관련성보다는 Nuxt.js 가이드에서 소개하는 내용들 기반으로 진행해보려고 한다. 📗 Views Nuxt.js 어플리케이션의 기본적인 Viewing 구조를 먼저 짚고 넘어가보자. 1. Document Nuxt.js 어플리케이션 전체에 해당하는 HTML 도큐먼트이자 파일이다. 2. Layouts 모든 페이지에 공통으로 사용되는 레이아웃, 혹은 사용자 정의 레이아웃을 만들 수 있다. Header 등 공통요소를 반영하는데 용이하다. /layouts/default.vue 파일이 기본적으로 생성되며, 여기에 사용자가 커스텀도 적용할 수 있다. 또한,..
-
[Nuxt.js] Nuxt 학습기 - (2) LifeCycle & 렌더링 모드Front-End(Web)/Vue 2021. 11. 28. 19:54
🤔 서론 앞서 언급한, Nuxt.js의 SSR모드는 Universal SSR 이라고 지칭하며, 이는 고전적인 정적 SSR 방식과는 조금 다르다. 새로운 SSR 모드가 반영되게 된 배경으로는, 아무래도 기존 SSR의 단점인 데이터 통신 비효율성과 클라이언트 퍼포먼스를 개선하기 위해 CSR의 장점을 일부 차용한 것이다. 이러한 Universal 모드를 비롯해서, Nuxt.js 에서 지원하는 3가지 렌더링 모드(SPA, Universal, Static) 에 대해 자세히 알아보겠다! 📗 Nuxt.jsLifecycle 마지막으로, Nuxt.js의 각 사이드(Server, Client 및 라우팅 Navigation 시) Lifecycle을 좀 더 구체적으로 알아보고 포스팅을 마무리하고자 한다. 1. Server ..
-
[CodeKata] 프로그래머스: 11.28(일), 단속 카메라Algorithm 2021. 11. 28. 18:50
🥋 Oooth More!! (Level 3) 🧮 풀이 내 풀이는, check라는 배열을 만들어서 차들이 지나가는 구간에 해당하는 인덱스값들을 1씩 더해준다. (4대가 지나가는 경우, 4가 됨) 이걸 다시 역으로, 가장 많은 차가 지나가는 인덱스를 찾고, 여기에 해당하는 구간들을 다시 check에서 1씩 빼준다. 우선, 우려했던 효율성 테스트에서 실패가 떴을뿐더러, 테스트 케이스 외 실제 정확성 테스트도 다 실패가 떴다. 좀 더 효율적인 비교방법을 모범답안을 통해 학습해보고자 한다. function solution(routes) { var answer = 0; routes = routes.map(([a,b]) => [Math.min(a,b), Math.max(a,b)]) let [min,max] = rou..