JavaScript
-
[CodeKata] 프로그래머스(Lv3) : 스티커 모으기(2)Algorithm 2022. 2. 5. 18:43
🥋 Oooth More!! (Level 3) 🧮 풀이 먼저, sticker 배열의 홀수 요소들만의 합(oSum), 짝수 요소들만의 합(eSum) 중 최대값을 max에 저장했다. 그리고, 2가지 출발점(s1 = 최대값, s2 = 최대값의 인접값 중 큰 값) 부터 1칸을 건너뛰고 두 번째, 세 번째 중 최대값을 누적하면서 스티커를 뜯은 값과 최대값(max)를 비교해 큰 값을 저장했다. 이처럼 풀이했을 때, 예외 케이스가 발생할 수 있는 방법이었기에 정확성도 50% 미만이고, 반복적인 순회로 효율성을 통과하지 못했다. function solution(sticker) { let oSum = 0, eSum = 0; for (let i in sticker) { if (+i % 2 === 0) { eSum += st..
-
[Craco] Craco로 설정하기 (절대경로, Less)Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 23. 18:45
이전 포스팅에선 Craco가 무엇인지, 그리고 기본적으로 설치하는 방법에 대해 알아보았다. 이번 포스팅은, Craco 익스텐션을 통해 내가 보일러 플레이트에 적용했던 설정들을 기록하는 시간을 갖도록 하겠다. 💙 Craco-alias : 절대경로 설정하기 절대경로는, 모듈들을 참조(import)할 때 경로를 루트(root) 혹은 src로부터 작성하기 위해 설정하곤 한다. 상대경로로 작성된 경로는, 아무래도 가독성도 떨어질뿐더러 파일이 추가되거나 수정될 때 경로추적이 매우 번거롭다는 단점이 있다. tsconfig.json으로 설정하면 경로추적은 가능하나, 컴파일 시 해당경로의 모듈을 찾지 못한다는 에러가 발생한다. 그렇기에, Webpack을 eject해서 경로에 대한 정보를 추가해주어야 하며, 이 번거로움을..
-
[CodeKata] 프로그래머스: 1.10(월), 기지국 설치Algorithm 2022. 1. 10. 03:44
🥋 Oooth More!! (Level 3) 🧮 풀이 function solution(n, stations, w) { let sects = stations.reduce((acc, cur) => [...acc, cur-w-2, cur+w], []) let start_block, end_block = false; const r = 2*w + 1; let answer = 0; if (sects[0] n-1) { sects.pop(); end_block = true; } if (!start_block) sects.unshift(0); if(!end_block) sects.push(n-..
-
[Recoil] 전역 상태관리 라이브러리 - Recoil 정복기Front-End(Web)/React - 라이브러리들 2021. 12. 30. 01:04
🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메모장 어플을 다시 만들어보았다. 전역 상태관리 라이브러리 역시 사용하고자 했고, 이전 Redux의 불필요한 구성과 복잡한 원리에 학을 뗀지라.. 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리인 Recoil을 이번 기회에 학습 & 사용해보고자 결심했다! 우선, 두괄식으로 결론을 내리자면, 내가 앞으로 React 프로젝트를 작업한다면 왠만하면 Recoil이다! 그만큼, Redux처럼 다양한 구성(action, reducer 등)을 할 필요가 없으며, 특히 비동기 요청이 매우 심플하다. (Red..
-
[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 학습기 - (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 학습기 - (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에서 활용한 주요 기능들..
-
[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로 컴파일하는데 관..