Front-End Dev.
-
[CSS/Lang] LESSFront-End(Web)/HTML, CSS 2021. 8. 12. 02:10
😃 서론 오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다. Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다. 리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다. 또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다. 앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다. 🔵 Less 란? LESS는 CSS에 script의 능력(변수, 함수, 연산, 중첩, 스코프 등) 을 덧붙여 확장한 언어이다. LESS는 C..
-
[CodeKata] 프로그래머스 : 8.8(일), 섬 연결하기Algorithm 2021. 8. 11. 21:50
🥋 Oooth More!! (Level 3) : 순위 🧮 풀이 graph의 최소값들만 솎아내는 방법을 시도했으나, 모든 노드의 연결여부를 확인할 수 없어 모범답안을 참고했다. 🖇 리뷰 function solution(n, costs) { let answer = 0, island = [], bridge = [], total = 0; costs.sort((a, b) => a[2] - b[2]); // 비용이 낮은 거 순으로 정렬 island[costs[0][0]] = true; // cost에 제일 앞에 있는 섬 방문 처리 island[costs[0][1]] = true; // bridge[0] = true; // 건설된 다리 하나 지어졋다고 친다. 다리 번호 == costs 번호 answer += cost..
-
[Vue.js] 재사용 & 컴포지션 - (2) 플러그인 & 필터Front-End(Web)/Vue 2021. 8. 4. 01:12
이전에 정리한 재사용 & 컴포지션 세션의 나머지 부분이다. 딱히 나눈것에 대한 의미는 없다. (분량이 길어진걸 뿐) 💚 Plugin(플러그인) Plugin(플러그인)은 전역 수준의 기능을 Vue에 추가하는 문법이라고 소개하고 있다. 실제로, 우리 회사도 modal을 키는 기능도 mapMutation이 아닌 플러그인으로 구현하며 store 활용을 최소화했다. 이렇듯 일종의 모든 곳에서 활용성이 높은 메서드를 제공하기 위한 문법이며, 플러그인엔 다양한 유형이 있다. 약간의 전역 속성 혹은 메서드 추가 (vue-custom-element, HTML 태그를 커스텀하는 플러그인) 하나 이상의 글로벌 에셋 추가 : 디렉티브 / 필터 / 트랜지션 등 (vue-router, 라우팅 기능) 글로벌 mixin으로 일부 컴..
-
[Vue.js] 재사용 & 컴포지션 - (1) Mixin, Directive, RenderFront-End(Web)/Vue 2021. 7. 20. 21:58
내가 Vue를 사용, 공부하면서 가장 정리하고 싶은 섹션이 시작되었다! 프론트엔드 작업을 하다보면 반복되는 컴포넌트와 기능들이 등장하기 마련이다. 특히, 이런 기능들이 필요할 때마다 매번 컴포넌트에 작성하게 된다면, 이후 수정 등 유지보수가 매우 안 좋을 것이다. 이러한 기능들을 공통화, 전역화하는 다양한 기법들이 Vue에 존재한다고 들었다. (믹스인, 플러그인 등) 이들의 차이점은 무엇인지, 그리고 어떻게 사용하며 어떤 상황에서 특히 적합할지를 공부해보도록 하겠다. 💚 Mixins(믹스인) Mixins는 Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이라고 소개한다. * 믹스인(Mixin) : 다중 상속을 지원하는, 구현된 인터페이스를 의미함 의미 그대로, 컴포넌트에 원하는 기능을 실행하..
-
[CodeKata] 프로그래머스 : 7.19(월), 여행경로 / 베스트앨범Algorithm 2021. 7. 20. 21:56
🥋 Oooth More!! (Level 3) : 여행경로 🧮 풀이 function sortTickets(list) { return list.sort((a,b) => { return a[1] < b[1] ? -1 : 1; }) } function solution(tickets) { let answer; function dfs(acc, res) { if (res.length === 0) { answer = [answer, acc].sort().shift(); return; } const now = acc[acc.length-1]; for (let i in res) { const [d, a] = res[i]; if (d === now) { const copiedRes = [...res]; const [next..
-
[Vue.js] Transition & AnimationFront-End(Web)/Vue 2021. 7. 14. 02:24
근래의 웹 어플리케이션은 유저들의 조작에 따라 다양한 인터렉션 효과를 제공한다. Vue는 여기에 사용되는 transition 효과를 좀 더 용이하게 사용할 수 있도록 이라는 태그 컴포넌트 기능을 제공한다. 이번 포스팅에서는, Vue.js 공식문서의 "트랜지션 & 애니메이션" 내용을 기반으로 태그 컴포넌트를 사용하는 방법에 대해 학습해보겠다. 💚 진입/진출 그리고 리스트 트랜지션 0. 컴포넌트 Vue 프론트화면 개발에는 많은 애니메이션이 적용된다. 이 때, 보편적으로 사용되는 방법이 CSS를 통한 제어일 것이다. (transform 을 통한 변형, class를 동적으로 부여하여 제어한다. 이를, transition 설정을 통해 유하게 구현할 수 있다.) Vue.js 에서는 CSS transition을 더 ..
-
[CodeKata] 프로그래머스 : 7.10(토), 경주로 건설Algorithm 2021. 7. 10. 17:30
🧮 풀이 DFS로 초기 접근했으나, 최단경로를 구해야하므로 BFS로 변환해서 구현해보다가 모범답안 풀이를 하게 되었다. 🖇 리뷰 모든 노드에 이동하는 최소 건설비용을 저장하는 BFS + 다익스트라 알고리즘 을 활용했다. function solution(board) { let answer = 987654321; const dy=[1,0,-1,0]; const dx=[0,1,0,-1]; const len=board.length; const arr=Array.from(Array(board.length),()=>Array(board.length).fill(0)); const queue=[]; const bfs=()=>{ queue.push([0,0,1,0]); queue.push([0,0,0,0]); while..
-
[Next.js] Pre-RenderingFront-End(Web)/React - 프레임워크(React, Next) 2021. 7. 7. 01:45
오늘도 역시, Next.js의 주요기능인 Pre-Rendering에 대해 포스팅하려고 한다. 이전에, Next.js 입문에서 작성한 Pre-Rendering 부분을 좀 더 구체화하며, 관련된 메서드까지 소개하기 위함이다! * 이전 포스팅(Next.js 입문) : https://abangpa1ace.tistory.com/177 [Next.js] Next.js 입문 🤔 Next.js를 시작하며.. 정말 오랜만에 블로그를 쓰는것 같다. 이제 입사 1개월이 되어 task를 맡기도 하고, 구현에 맘이 앞서다 보니 중간중간 찾아본 주요한 정보들을 정리하는 시간을 가지지 못 abangpa1ace.tistory.com React 개발을 하면서, Data Fetch를 위해 componentDidMount() 라이프사이클..