Front-End Dev.
-
[CodeKata] 프로그래머스: 10.17(일), 금과 은 운반하기Algorithm 2021. 10. 17. 20:22
🥋 Oooth More!! (Level 3) 🧮 풀이 정말 자괴감이 들 정도로, Level 3 대부분의 문제들을 풀지 못하고 있다. 좋은 풀이중에, 이분탐색 알고리즘으로 비교적 간단하게 푼 예시를 코드분석하고, 이분탐색에 대해 좀 더 공부해보고자 한다. 🖇 리뷰 function solution(a, b, g, s, w, t) { let answer = 10e5 * 4 * 10e9; let start = 0; let end = 10e5 * 4 * 10e9; while( start = t[i]) move_cnt++; gold += (now_g < move_cnt * now_w) ? now_g : move_cnt * now_w; silver += (now_s < move_cnt * now_w) ? now_s ..
-
[Next.js + TS] 초기세팅 - (2) ESLint, PrettierFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 14. 05:15
지난, CRA 초기세팅 및 Typescript 세팅에 이은 2번째 글이다. 주제는 ESLint, Prettier! 뒤에서도 설명하겠지만, 이 툴들은 기능적인 부분보다는 동기들과의 프로젝트 협업을 위한 세팅에 사용되었다. 이들의 역할을 알아보고, 나도 단순히 적용만 하고 지나쳤던 설정들에 대해 자세히 알아보았다. 📓 ESLint - 개요 ESLint는 Javascript, Typescript 의 코딩 스타일 도구이다. JS코드가 ECMAScript Specification에 부합하는지 검사하는 툴이다. 코딩 스타일 가이드라인을 지정하여, 패턴을 준수하지 않을 경우 사후에 발생할 수 있는 잠재적 문제점을 사전에 방지하기 위해 사용되는 것이다. * 본래, TS는 TSLint 라는 코딩 스타일 도구가 있었으나,..
-
[Next.js + TS] 초기세팅 - (1) CRA, tsconfig.jsonFront-End(Web)/React - 프레임워크(React, Next) 2021. 10. 11. 03:49
😃 서론 지난달 초, Typescript 공부를 위해 OP.GG 사이트 클로닝 프로젝트를 간단하게 진행하였다. (리뉴얼 작업으로 최근까지 holding...) 오랜만에 React, Styled-Components를 쓸 뿐만 아니라, Typescript와 Next.js는 실전에 처음 사용하는 프로젝트였다. 이를 위해, eslint/prettier 부터 위 툴들을 사용하기 위한 프로젝트 초기세팅을 정리해두고, 이를 좀 더 쉽게 구성하고 사용하기 위해 고민했던 다양한 방법들을 포스팅을 통해 남겨보고자 한다! 📘 CRA (Create-React-App) React 프로젝트 초기세팅을 하는 가장 간편한 방법을 CRA(Create-React-App) 이라고 한다. 프로젝트에 필요한 기본적인 모듈들, 그리고 Babe..
-
[CodeKata] 프로그래머스: 10.11(월), 길 찾기 게임Algorithm 2021. 10. 11. 03:06
😅 서론 약 1달이 넘게 블로그 포스팅을 하지 않았음을, 오랜만에 블로그 글을 보고 인지하게 되었다.. ㅎㅎ 주된 핑계는, 회사의 코드 리뉴얼 작업에 많은 신경과 작업을 할애함에 따라, 진행하려던 사이드와 포스팅에 신경을 거의 쓰지 못했다. 리뉴얼 작업이 마무리되는 현시점, 여유를 찾음과 동시에 포스팅을 재개하기 위해 주1 알고리즘 부터 시작해보겠다. 🥋 Oooth More!! (Level 3) 🧮 풀이 역시, 카카오 문제답게 매우 어려웠다. 특히, 이진트리를 구현함에 있어 클래스 문법이 많이 취약함을 느꼈다. 모범답안을 통해 풀이법을 학습할뿐만 아니라, Javascript 클래스를 숙달할 수 있는 미니프로젝트를 찾아보려고 한다. 🖇 리뷰 class Node { constructor(id, x, y) {..
-
[Typescript] Type Alias vs InterfaceFront-End(Web)/Typescript 2021. 8. 25. 20:44
Typescript 프로젝트를 진행하기 앞서, 토이클론을 진행하며 객체 등 타입선언에 Type, Interface 모두를 사용하였다. Type Alias는 "="을 같이 사용하여 선언하고, Interface는 불필요하다는 간단한 Literal 적 차이점부터, Interface는 Class처럼 확장이 가능하고, Type은 다르다는 등 둘의 비슷하면서도 다른점들을 얼핏 보아왔다. 하지만, 분명 Typescript에서 이 둘을 구분한 이유가 있을 것이며, 그렇기에 각각이 쓰이기에 적절한 경우가 있을 것이다. 이를 많은 소스들을 참고하면서 정리해보고자 본 포스팅을 올린다. 💙 개념 - Type Alias(타입 별칭) // string 타입을 사용할 때 const name: string = 'capt'; // 타..
-
[CodeKata] 프로그래머스 : 8.22(일), 기둥과 보 설치Algorithm 2021. 8. 22. 18:04
🥋 Oooth More!! (Level 3) 🧮 풀이 * 실패한 풀이이다. 예제코드는 모두 맞췄으나, 실제 문제는 거의다 실패가 발생하였다. const str = (a) => { return a === 0 ? "p" : "b" }; const cmd = (b) => { return b === 1 ? "add" : "remove" }; function solution(n, build_frame) { let ground = Array.from({ length: n+1 }, () => { return new Array(n+1).fill(0) }); let answer = []; const checkCross = (x,y,dir) => { const dirObj = { n: x-1 >= 0 ? ground[x-..
-
[Javascript/lib.] LodashFront-End(Web)/Javascript 2021. 8. 17. 21:45
🧐 서론 lodash 역시 회사 실무를 접하면서, 처음으로 경험해본 Javascript 라이브러리이다. 사실, Javascript에서 제공하는 왠만한 메서드들을 표방한 것이다보니 필요성이 있을까 싶지만, _cloneDeep() 으로 객체를 깊은 복사하거나, _has() 로 객체의 필드 포함여부를 확인하는 등 다양한 기능을 수행할 수 있다. 현재 실무에서는, 더 다양한 Lodash 메서드들을 사용하고 있기 때문에, 이의 기원과 대표적인 메서드들을 정리해보고자 이 글을 포스팅한다. 📒 Lodash 란? Lodash는 Javascript 유틸리티 라이브러리의 일종이다. 즉, 모듈성, 성능 등을 제공하기 위한 라이브러리인 것이다. * Lodash는, node.js 에서 많이 쓰이는 underscore 라이브러리..
-
[CodeKata] 프로그래머스 : 8.15(일), 광고 삽입Algorithm 2021. 8. 15. 16:45
🥋 Oooth More!! (Level 3) 🧮 풀이 * 실패한 풀이이다. 극소 케이스는 맞았으나, 대부분 실패나 시간초과가 발생했음. function toSec(time) { time = time.split(":"); return Number(time[0] * 3600 + time[1] * 60 + time[2]); } function solution(play_time, adv_time, logs) { function getPlays(start, end, logs) { let play = 0; logSecs.forEach((log) => { if (log[1] end) return; play += (Math.min(log[1], end) - Math.max(log[0..