Front-End Dev.
-
[CodeKata] 프로그래머스: 11.21(일), 매칭 점수Algorithm 2021. 11. 21. 17:40
🥋 Oooth More!! (Level 3) 🧮 풀이 정규식을 활용한 풀이로 접근했으나, 모두 오답이 나왔다. 아마 컨텐츠나 태그들을 판정하는 방법을 직관적으로 사용해서 에러가 난 것 같다. 모범답안을 연구하며 틀렸을만한 포인트를 짚어봐야겠다. const getContent = (html, tagName) => { const tnl = tagName.length + 2; const start = `` const end = `\n` const spliter = tagName === 'head' ? '\n ' : '\n' return html.slice(html.indexOf(start)+tnl, html.indexOf(end)).split(spliter).slice(1) } const getLinkLis..
-
[Nuxt.js] Nuxt 학습기 - (1) 개념 및 설치Front-End(Web)/Vue 2021. 11. 16. 01:06
🤔 서론 일전 Next.js를 공부하면서도, 그리고 회사의 이전 포털 사이트에 Nuxt.js를 사용하면서 SSR 프레임워크 환경을 어느정도 경험했었다. SSR(Server Side Rendering) 개념 자체가 이슈인 만큼, 학습뿐만이 아닌 다양한 경로(유튜브 등)를 통해 이를 접해왔었다. 회사의 리뉴얼 버전 코드에선 팀장님께서 Vue를 활용한 임의의 SSR 환경을 구성해주셨고, 여기서 역시 Nuxt와 유사한 개발경험을 해볼 수 있었다. (head 프로퍼티, asyncData 등) 이러한 개념들을 근본적으로 Nuxt.js 환경에서 개발해보고, 또 이외의 다양한 기능들을 학습해보고자 오픈API를 활용한 간단한 Nuxt.js 토이 프로젝트를 진행하였다. 이후 포스팅에선 Nuxt.js에서 활용한 주요 기능들..
-
[CodeKata] 프로그래머스: 11.14(일), 외벽 점검Algorithm 2021. 11. 14. 19:17
🥋 Oooth More!! (Level 3) 🧮 풀이 weak 배열을 2바퀴로 돌려서 생각하는 방법까진 접근했으나, 구체적인 풀이를 모범답안을 통해 공부했다. 🖇 리뷰 function solution (n, weak, dist) { const len = weak.length; const linear_weak = new Array(len*2 - 1).fill(0); for(let i = 0; i b-a); for(let i = 1; i e > coverage); if(!line.length) return i; } } } } return -1; } ..
-
[CodeKata] 프로그래머스: 11.6(토), 모두 0으로 만들기Algorithm 2021. 11. 6. 00:57
🥋 Oooth More!! (Level 3) 🧮 풀이 단순하게, 간선이 많이 연결된 노드부터 주변값을 총합하는 방법으로 접근했다. 당연히, 예외상황이 있기 때문에 정답률이 낮게 나왔다. function solution(a, edges) { const sum = a.reduce((a,b) => a+b) if (sum !== 0) return -1; const len = a.length; const besides = new Array(len).fill([]); edges.forEach(([a,b]) => { besides[a] = [...besides[a], b]; besides[b] = [...besides[b], a]; }) let answer = 0; const idxs = Array.from({len..
-
[Next.js + TS] 초기세팅 - (4) Babel 설정Front-End(Web)/React - 프레임워크(React, Next) 2021. 11. 2. 02:39
Next.js + TS 초기세팅에 대한 글을 쓰면서, 마지막으로 Babel 세팅에 대한 내용을 정리하려고 하였으나 이전에 개념만으로도 글이 길어졌다. * [Next.js + TS] 초기세팅 - (3) Babel 개념 : https://abangpa1ace.tistory.com/196 이번 포스팅에서는, Babel을 실제로 세팅하는 방법, 그리고 Next.js 및 TS환경을 좀 더 낫게 사용하기 위해 내가 적용했던 몇 가지 항목들을 설명해보고자 한다. 💛 Babel 과 Typescript 바벨을 설정하기 이전에, Typescript 환경에서 바벨을 쓰는 것의 목적? 의의? 를 이해하기 위한 선행학습이 필요했다. 사실, Typescript tsc(tsconfig.json) 역시 TS를 JS로 컴파일하는데 관..
-
[CodeKata] 프로그래머스: 10.31(일), 징검다리 건너기Algorithm 2021. 10. 31. 19:23
🥋 Oooth More!! (Level 3) 🧮 풀이 위 로직을 그대로 while 반복문으로 구현한 풀이이다. 정확성은 만점이나, 효율성에서 모두 초과가 발생하여 모범답안을 탐구했다! function solution(stones, k) { var answer = 0; while (true) { answer++; stones = stones.map(stone => Math.max(stone-1, 0)); idx = stones.findIndex(s => s === 0); while (idx !== -1) { const jump = stones.slice(idx+1,idx+k); if (jump.length === k-1 && !jump.find(stone => stone !== 0)) { return an..
-
[CodeKata] 프로그래머스: 10.24(일), 아이템 줍기(11주차)Algorithm 2021. 10. 25. 02:27
🥋 Oooth More!! (Level 3) 🧮 풀이 최단경로를 탐색하므로 BFS를 사용해야함은 알았으나, 구체적인 이동방법을 구현하기가 어려워 모범답안을 학습했다. 🖇 리뷰 function solution(rectangle, characterX, characterY, itemX, itemY) { const xmoves = [1, -1, 0, 0]; const ymoves = [0, 0, 1, -1]; // 최대 범위가 50이지만 좌표간의 거리를 생각해 2배 증가시킴 const maxSize = 101; const board = Array.from({ length: maxSize }, () => Array(maxSize).fill(0)); const newRect = rectangle.map((el) =..
-
[Next.js + TS] 초기세팅 - (3) Babel 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 10. 22. 00:33
이번엔 초기세팅 마지막 시리즈가 될 것 같다! 주제는 Babel 이다. 이전, Babel과 Webpack 에 대해 간단히 공부하면서, Babel은 단순히 트랜스파일러의 역할 정도로 알고 있었떤 툴이다. 하지만, 프로젝트에서 절대경로나, SSR 등을 위해서까지 사용해보면서 Babel의 다양한 기능을 정리해보고자 했다! 💛 Babel 이란? 바벨(Babel)은 최신버전(ECMAScript 2015+) 의 JS코드를 상대적으로 구식 브라우저(IE 등) 환경에서 호환되도록 버전을 변환하는데 주로 사용되는 자바스크립트 컴파일러(트랜스파일러)이다. (그렇기에, 입력과 출력 모두 JS) 위가 바벨의 주된 기능이며, 현재는 JSX문법(React), TS같은 정적 타입언어, 코드압축, 제안단계(정식문법X) 문법 등을 사..