Front-End Dev.
-
[Craco] Craco 란?Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 18. 03:21
이전에 CRA(Create-React-App)로 React 프로젝트를 생성할 땐 Webpack의 커스텀 필요성을 잘 느끼지 못했다. 하지만, 이번에 Boiler Plate를 제작하면서 추가적으로 설정할 부분들이 생겼다. (절대경로 alias 컴파일, Less Loader) CRA에서는 설정파일이 숨겨져 있고, 이를 추출해서 각 config, babel 등 설정을 적용해야 하는 번거로움이 있기 때문이다. 그렇기에, React에서는 이러한 번거로움과 위험성을 없앨 수 있는 다양한 커스터마이징 패키지들이 존재한다. 오늘은 그 중 하나인 Craco(Create-React-App Configuration Override)에 대해 알아보고, 이후 포스팅에선 실제 적용사례로 이어가겠다. 💙 CRA Webpack 설정..
-
[CodeKata] 프로그래머스: 1.15(토), 스타 수열Algorithm 2022. 1. 15. 20:58
🥋 Oooth More!! (Level 3) 🧮 풀이 이후 나올 모범답안에 비해 민망할 정도로 긴 풀이라, 간단하게 설명하겠다...!! 문제전개에 충실하게, checkStarArr(스타수열 판정), combination(부분수열의 조합) 함수들을 만들고 이에 맞는 부분수열을 찾는 방법이다. const checkStarArr = (a) => { let common = [a[0], a[1]]; for (let i = 0 ; i e === a[i] || e === a[i+1]); if (!common.length) return false; } return tru..
-
[Swift] Swift 문법 - (3) Class(클래스) & Struct(구조체)Front-End(Mobile)/iOS & Swift 2022. 1. 13. 03:32
이번 포스팅은 이전 Swift의 데이터 타입을 통해 알아본 자료형들(컬렉션, 튜플 등)보다 좀 더 복잡한 자료형이다. 바로, Class(클래스)와 Struct(구조체) 이다. 사실 Javascript를 사용하면서 Class(완벽히 일치하지 않음) 문법을 체험해 볼 수 있었다. 하지만, Struct(구조체)라는 개념은 생소하며, 정적언어인 Swift에선 이 둘이 왜 존재하고 어떻게 쓰이는지 이번 포스팅에서 학습해보겠다. 📙 들어가면서.. Struct(구조체)와 Class(클래스)는 프로그래머가 데이터를 용도에 맞게 묶어 사용할 때 용이한 기능이다. 변수(프로퍼티)와 함수(메서드)를 하나의 패키지에 구조화시켜 사용할 수 있으며, 이를 새로운 사용자 정의 타입으로 추상화하는 개념이다. 특히, 클래스는 객체지..
-
[Swift] Swift 문법 - (2) TypesFront-End(Mobile)/iOS & Swift 2022. 1. 11. 02:36
이번 포스팅은 Swift 언어의 다양한 타입 및 자료형들에 대해 알아보려고 한다. Swift는 기본적으로 정적 타입(변수에 타입을 선언) 방식을 채택하기 때문에, 데이터 타입에 대해 짚고 넘어가는 것이 중요하다. 📙 Data Types (데이터 타입) Swift에서도 다른 프로그래밍 언어들과 유사하게 데이터 타입들을 적용하고 있다. 배열과 객체 같은 것들은 문법은 비슷하나, 명칭과 사용하는 방식들이 언어에 따라 조금씩 달라지곤 한다. 아래 Swift 자료형들을 하나씩 확인해보자! Boolean(불리언) Int(정수), UInt(0, 양의 정수) Float, Double(부동소수) Character(문자), String(문자열) Array(배열 혹은 리스트) Dictionary(객체 혹은 사전형) Rang..
-
[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-..
-
[Swift] Swift 문법 - (1) Variables, ConstansFront-End(Mobile)/iOS & Swift 2022. 1. 5. 03:26
Swift 관련된 다양한 좋은 국어 강의들이 존재하였다. (야곰님, 개발하는 정대리님 등등..) 하지만, 깔끔한 커리큘럼과 최신버전(Swift5) 기반의 강의를 찾다 보니 유튜브 iOS Academy의 영문 강의가 최적이라 생각했다. https://www.youtube.com/watch?v=xKf6iNilRYI&list=PL5PR3UyfTWvfacnfUsvNcxIiKIgidNRoW&index=2 해당 강의와 다양한 글들을 기반으로, Swift의 각 문법을 나름대로 정리해서 블로그 포스팅을 진행해보겠다! 📙 변수와 상수 (Variables & Constants) Swift의 첫 문법으로, 프로그래밍 언어의 시작점이라고 할 수 있는 상수와 변수에 대해 알아보겠다. 0. Naming Rules 다른 프로그래밍..
-
[Swift] 나의 3번째 프로그래밍 언어, SwiftFront-End(Mobile)/iOS & Swift 2022. 1. 4. 02:40
🤔 서론 정말 오랜만에 개발 툴이 아닌, 새로운 언어를 공부하게 되었다. (초심으로 돌아간 기분 🤩🤩) 2022년 올해부터 앱 개발을 조금씩 병행하기로 마음을 먹었고, 다양한 선택지를 고민하다가 iOS 네이티브 언어인 Swift를 선택한 것이다. 다른 선택지들을 고민하고 포기했던 이유들은 아래와 같다. React-Native : JS와 React를 다루는 나에게 매력적인 선택지였다. 하지만, Flutter나 Native 언어에 비해 매우 부족한 퍼포먼스와, 크로스 플랫폼 시작에서 Flutter에게 역전되는 트렌드, Facebook의 지원 축소 등이 이유가 되었다. Flutter : 크로스 플랫폼(1개 소스코드로 Android, iOS 2가지 앱을 개발) 시장에서 가장 핫한 언어. Google이 서비스하며..
-
[Recoil] 전역 상태관리 라이브러리 - Recoil 정복기Front-End(Web)/React - 라이브러리들 2021. 12. 30. 01:04
🧐 서론 굉장히 오랜만에 쓰는 서론인 것 같다!! 그만큼 이 글의 길이가 짧진 않을거라는 마음의 준비 차원일지도? 오랜만에 React를 복기하고 Typescript를 숙달할 겸 예전에 면접과제로 받았던 메모장 어플을 다시 만들어보았다. 전역 상태관리 라이브러리 역시 사용하고자 했고, 이전 Redux의 불필요한 구성과 복잡한 원리에 학을 뗀지라.. 페이스북에서 출시한 React 전용 전역 상태관리 라이브러리인 Recoil을 이번 기회에 학습 & 사용해보고자 결심했다! 우선, 두괄식으로 결론을 내리자면, 내가 앞으로 React 프로젝트를 작업한다면 왠만하면 Recoil이다! 그만큼, Redux처럼 다양한 구성(action, reducer 등)을 할 필요가 없으며, 특히 비동기 요청이 매우 심플하다. (Red..