Front-End Dev.
-
[CodeKata] 프로그래머스 : 7.3(토), 합승 택시 요금Algorithm 2021. 7. 4. 21:48
🥋 Oooth More!! (Level 3) 🧮 풀이 각 경로별로 최단비용을 계산하는 플로이드-와샬 알고리즘을 기반으로 푸는 문제임을 인지했다. 하지만, 구체적인 풀이를 구현하지 못해 모범답안을 분석하였다. 🖇 리뷰 function solution (n, s, a, b, fares) { const board = new Array(n).fill().map(_ => new Array(n).fill(Infinity)); for(let i = 0; i { const [x, y, weight] = pos; board[x-1][y-1] = weight; board[y-1][x-1] = weight; }); for(let k = 0..
-
[Next.js] Dynamic Routes(페이지 이동)Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 21:32
오늘은 next.js의 주요 기능 중 하나라고 할 수 있는, 페이지의 구성과 이동(라우팅)에 대해 포스팅하려고 한다. 사실, React에서도 라우팅에 관한 서드파티를 지원한다.(React-Router-DOM) 이를 통해, 라우터 경로별로 컴포넌트를 그린다. Next도 비슷한 원리로 라우팅을 지원할 것이며, React-Router와는 다른 차이점 혹은 장점이 있기에 사용되는 걸거라 예상된다. 사용법과 그 장점에 대해 한 번 학습해보겠다! 🤍 Pages & Dynamic Routes Next.js 프레임워크의 사용규칙 중 하나는 바로, 페이지 컴포넌트들은 반드시 Pages 디렉토리에 담아야한다는 것이다. 그 이유는, 이 Pages 디렉토리 경로값이 곧 우리가 이동할 페이지 컴포넌트의 경로값이 되기 때문이다!..
-
[Next.js] Next.js 입문Front-End(Web)/React - 프레임워크(React, Next) 2021. 7. 1. 01:48
🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못했다. 회사에서 FE 선임 개발자님, 그리고 기획 및 디자인과 함께 모바일 서비스를 만드는 사이드 프로젝트를 시작하게 되었다. React를 오랜만에 사용하니 떨리기도 하고, 새로운 기술을 적용할 생각에 우려가 앞서기도 한다. 이를 위한 학습 및 포스팅이 될 것 같다. 새로운 기술들 중, 요즘 화두가 되는 SSR을 지원하는 Next.js 프레임워크 적용에 흥미가 생겼으며, 사이드와 병행하여 가능한 학습도 같이해볼 생각이다! 🤍 Next.js 란? Next.js는 2016년 등장한 React 어플리케이션의 S..
-
[CodeKata] 프로그래머스 : 6.19(토), 다단계 칫솔 판매 / 단어 변환Algorithm 2021. 6. 14. 19:18
🥋 Oooth More!! (Level 3) : 다단계 칫솔 판매 문제가 길지만 그림을 보면 이해하기 편하다. 트리 기반 문제로, enroll과 referral 배열끼리 대칭되며 하위-상위 요소의 관계가 성립된다. seller와 amount 배열도 대칭되며, amount는 판매한 수량이므로 map() 을 통해 *100 을 하여 가격으로 만들어주면 좋을 것 같다. 마지막으로, seller의 각 요소들부터 트리를 타고 올라간다. 상위에 10%, 본인은 90%를 분배하는 식으로 최상위 노드까지 올라간다. 이렇게 했을 때, 트리의 모든 노드들(enroll) 개개인의 수입의 총합이 얼마인지를 계산하면 된다. 🧮 풀이 DFS의 방법으로 풀어보았으나, 케이스 10~12번에서 런타임 에러 및 시간초과가 발생하여 개선된..
-
[Vue.js] 컴포넌트 톺아보기Front-End(Web)/Vue 2021. 6. 14. 14:44
Vuex 공부를 마치고, 캡틴판교님의 인프런 강의도 레벨3부터는 실제구현에 집중되다보니, 공식문서 공부를 좀 더 하려고 했다. 그래서, 공식문서 필수요소 바로 다음에 이어지는 "컴포넌트 톺아보기" 섹션에 대해 정리해보려고 한다. 아무래도, React 프로젝트를 진행하면서도 컴포넌트를 어떻게 쪼개고 재활용할지, 심지어 이름을 어떻게 지을지도 고민이 많았다. 이러한 컴포넌트의 선언과 활용에 대한 많은 팁이 담겨있는 해당 섹션을 윤독하면서 중요한 내용을 정리해보려고 한다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 컴포넌트 톺아보기 1. 컴포넌트 등록 먼저 컴포넌트를 명명하는 2가지 방법(kebab-case, CamelCase), 각각의 모듈화된 지역..
-
[Vue.js] Vuex - (3) Store 모듈화Front-End(Web)/Vue 2021. 6. 13. 23:51
이전에 진행한 프로젝트는 Vuex Store에 state, getter, mutations 들이 일괄적으로 들어가는 형태였다. 아무래도 프로젝트의 규모가 커지면, 당연히 Store 자체의 코드량도 많아지고 유지보수도 힘들어질 것이다. 이러한 부분을 ES6 import/export 문법을 통해 좀 더 용이하게 분리하는 모듈화에 대해 간단하게 정리해보았다. (개념보다는 Vuex의 코딩기법의 내용이기에 분량이 많지 않다.) * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Getters, Mutations 분리 공식문서에서는, Vue.js 애플리케이션의 복잡한 컴포넌트들을 관리하는 상태관리 패턴 + 라이브러리로 정의한다. 컴포넌트들에 대한 중앙 집중식 저장소..
-
[Vue.js] Vuex - (2) Helper 함수Front-End(Web)/Vue 2021. 6. 11. 16:48
이번에는 Vuex에서 Store의 상태, getter, 메서드들을 좀 더 용이하게 사용하는 Helper 함수에 대해 알아보겠다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Helper 함수란? Vuex의 내장함수로, Store의 아래 네 가지 속성을 간편하게 코딩하는 방법이다. (Synthetic Sugar에 해당) state => mapState getters => mapGetters mutations => mapMutations actions => mapActions - 사용법 // App.vue import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' export defau..
-
[CodeKata] 프로그래머스 : 6.11(금), 보석 쇼핑 / 이중우선순위큐Algorithm 2021. 6. 10. 14:17
🥋 Oooth More!! (Level 3) : 보석 쇼핑 🧮 풀이 DFS, BFS, 순회 등 다양한 방법으로 풀었지만 정확성 일부오답과, 효율성 시간 초과 등이 있어 좋은 모범답안을 해석했다. 🖇 리뷰 function solution(gems){ var count = new Set(gems).size; // 보석 종류가 몇개인지 var gemMap = new Map() // 보석 종류 => 보석 자리를 저장하기 위한 맵 var gemLength = [] // 보석을 모두 포함하는 구간을 저장할 배열 gems.forEach((gem, i)=> { gemMap.delete(gem) gemMap.set(gem, i) if(gemMap.size === count){ gemLength.push([gemMap.v..